본문 바로가기
  • 삽질하는 자의 블로그
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.
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.

티스토리툴바