본문 바로가기
  • 삽질하는 자의 블로그
7. 기본 UI 만들기(7) - [ 버튼 누르면, 양옆으로 하이라이트가 부드럽게 움직이는 셀렉터, 만들기] 컴포넌트 const FoodsList = () => { const [selected, setSelected] = useState("탄수화물"); const [foodsData, setFoodsData] = useState([ { id: 1, ... price: 1000, }, { id: 2, ... } ]); let selected_style = styles.selected_hydro; // 초기 하이라이트 백그라운드 조건 let text_highlight_hydro = ""; // 초기 텍스트 조건 let text_highlight_protein = ""; // 초기 텍스트 조건 let text_highlight_fat = ""; // 초기 텍스트 조건 if (selected === "탄수화물") { .. 2022. 12. 30.
6. 기본 UI 만들기(6) - [ Redux-toolkit, Typescript, CSS ] ,자동으로 정렬되는 Food Card 만들기 1. FoodCard 작성 import styles from "./food-previewcard.module.css"; const FoodPreview: React.FC = (props) => { const { id, img, category, title, majorNutri, nutri, price } = props;// 받아올 값들 return ( // 이미지 {category}// 카테고리 {title}// 타이틀 {majorNutri} +// 메이저뉴트리 {nutri} {price}원// 가격 ); }; export default FoodPreview; 2. ListData 넘기기 ( 추후 데이터베이스 이용하여 가져올 것) < components / 4.find-foods / 1.Foods-Lis.. 2022. 12. 30.
5. 기본 UI 만들기(5) - [ 버튼 누르면 바운스 하는 글자, 칼로리 계산기 로직 아웃소싱 , Animate.css 를 module.css 와 같이 사용하기] 1. 버튼을 눌러, 제출하면, 계산이 완료되고, 튀어오르는 숫자 애니메이션 만들기 ** Animate.css 를 module.css 와 같이 사용하기 import { FormEvent, useEffect, useRef, useState } from "react"; const EstimateBMR = () => { const [buttonStyle, setButtonStyle] = useState( `${styles.answer_section_totalCal} animate__animated animate__bounce` // 1. 시작은 바운스 );// Animate.css , module.css 의 결합 useEffect(() => { setButtonStyle( `${styles.answer_sect.. 2022. 12. 29.
11. type? interface? 무엇을 써야 할까? 타입을 지정하기 위해서는, type 과 interface 를 사용한다. interface PersonInterface { name: string age: number } const person1: Person = { name: 'ms', age: 29, } type PersonType = { name: string age: number } const person2: PersonType = { name: 'js', age: 30, } 각각의 사용 이유에 대해 알아보도록 하자 1. 사용하는 데이터의 형태 interface PersonInterface { // 척봐도 객체만 사용가능하게 생겼다. name: string age: number } type PersonType = {// 여러가지 타입에 전부 사용 .. 2022. 12. 29.
1. dispatch 가 작동하지 않는다면, 혹시 State 를 reducer 함수에 직접 썼는지 확인한다. 리덕스의 reducer 함수 안에서, State 에 바로 접근 하는 것은 불가능하다. const ChoosPartsSlice = createSlice({ name: "choose-part", initialState, reducers: { ChestDescription(state) { state = {...initialState} // state 에 바로접근하면 Porxy 가 나올 뿐이다. }, BackDescription(state) { state = {...initialState} // state 에 바로접근하면 Porxy 가 나올 뿐이다. }, }, }); export const ChooseActions = ChoosPartsSlice.actions; export default ChoosPartsSl.. 2022. 12. 28.
4. 기본 UI 만들기(4) - [ Redux-toolkit ] 버튼을 누르면, 해당 컴포넌트가 렌더되는 페이지 만들기 프로세스 및 워크플로우 [일단 파츠(부위)별 컴포넌트를 전부 만든다.] "HowToWorkOut Page" 는 "Choose Part 컴포넌트" , "Descripion 컴포넌트" 로 구성 "Choose Part 컴포넌트" 는 기본적으로 "디폴트 Description" 이 같이 렌더 "Choose Part 컴포넌트" 에서 "해당 부위의 버튼을 누르면" " 해당 부위의 Description"이 "렌더된다." [리덕스]를 이용하여, 리덕스를 이용하여, State 를 만들어서, "Choose Part 컴포넌트"에서, 버튼을 누르면, "HowToWorkOut Page" 에서, 받아, 다른 것을 렌더하는 형식으로 하자 [ Descripion 이 바뀔때는, React-Transition-Group 을 사용하여] 마.. 2022. 12. 28.
3. 기본 UI 만들기(3) - [ react-animation-on-scroll ] 스크롤 애니메이션 - 스크롤하면 보이는 애니메이션 만들기 스크롤하다, 보이면 애니메이션이 나오는 페이지를 만들어보자 기가막힌 패키지이다. React-animation-on-scroll https://github.com/MetinArslanturk/react-animation-on-scroll GitHub - MetinArslanturk/react-animation-on-scroll: A react library to animate elements on scroll. It has integration with anima A react library to animate elements on scroll. It has integration with animate.css. Supports typescript and server side rendering - GitHu.. 2022. 12. 28.
2. 기본 UI 만들기(2) - 부드럽게 움직이는 Transition, with [React-Transition-Group] .entering { opacity: 0; } .entered { animation: popup 400ms ease-out; } .exiting { animation: unpopup 400ms ease-out; } .exited { opacity: 0; } @keyframes popup { 0% { opacity: 0; } 100% { opacity: 1; } } @keyframes unpopup { 0% { opacity: 1; } 100% { opacity: 0; } } 2022. 12. 28.
1. 기본 UI 만들기(1) - 이미지를 클릭하면, 글이 나오는 카드 만들기 프로세스 1. 블록 안에, 글들을 전부 적는다. 2. 블록에 백그라운드 이미지를 넣는다. 3. 버튼을 누르면 클래스 이름이 변경되고, 백그라운드 이미지를 없앤다. 코드 const [imgOn, setImgOn] = useState(true); const Component = ()=> { ... const changeStyle = () => { setImgOn((prev) => !prev); }; let msStyle; if (imgOn) { msStyle = styles.imgOn; } else { msStyle = styles.imgOff; } return ( ... 안에 담길 글들 ... .imgOn { width: 10rem; height: 10rem; backgrou.. 2022. 12. 28.
10. Redux-toolkit 과 함께 Typescript 사용하기 (2) 실전, useRef 를 이용해 받은 값, Redux Store 에 넣기 1. Todo-Slice 만들기 import { createSlice, PayloadAction } from "@reduxjs/toolkit"; export type TodoType = { todos: { todoTitle: string; todoText: string }[]; // 타입 aliases }; const initialState: TodoType = { todos: [{ todoTitle: "첫번째할일", todoText: "일어나기" }], // 초기값 설정 }; const TodoSlice = createSlice({ name: "todos", initialState, reducers: { addTodo( state, action: PayloadAction // PayloadAction .. 2022. 12. 27.
9. Redux-toolkit 과 함께 Typescript 사용하기 (1)기본 사용 최고의 레퍼런스 https://bluelight.co/blog/redux-toolkit-with-typescript#Getting-Started-with-the-Redux-Toolkit Redux Toolkit with Typescript: How to Get Started Learn how to use Redux with Typescript to set up production-level state management for web applications. bluelight.co 1. 슬라이스 만들기 1. "initialState" 의 "타입"을 정해야한다. 2. "PayloadAction" 을 통해, "action 으로 받은 payload 의 타입을 정해야 한다". < 코드 "store/ms-Slic.. 2022. 12. 27.
8. 코드의 타입을 모르겠다고? 걱정하지 말자! 마우스를 올려봐! 1. useState 를 사용하고 싶은데 타입을 모르겠다? 마우스를 올리면 친절하게 설명해준다. 2022. 12. 26.

티스토리툴바