본문 바로가기
  • 삽질하는 자의 블로그
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.
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.
13. 배포를 마치고, 되돌아보며 React 를 다루어보고, Next.js 를 바탕으로, 또 어떻게 한 걸음 내딛었다. 자바스크립트와 조금 더 친해지고, React 의 생명주기와, Authentication 에 대해 더 깊이 있게 알 수 있었고 서버사이드 렌더를 사용해보고, 새 API 들도 사용해보는 좋은 시간이었다. 결과적으로는 원하는 대로 기능들을 전부 집어넣기는 했지만, 억지로 끼워넣은 느낌이 강하게 들었다. 컴퓨터가 이해할 수 있는 코드는 어느 바보나 다 짤 수 있다. 좋은 프로그래머는 사람이 이해할 수 있는 코드를 짠다. - 마틴 파울러 강하게 머리를 때린 말이었다. 내가 넣은 코드들은 하나의 로직을 위해, 여러 컴포넌트를 거친 복잡한(당연히 내 딴에는...) 로직을 거친다. 분명 더 깔끔하게 다듬을 수도 있을 것이다. 물론 주.. 2022. 12. 3.
12. Vercel 에 배포하기 배포를 해봅시다! 우선 npm run build 명령어로, 프로덕션용 웹을 만들어, 체크를 한 후 다됐다 ~ 싶으면 배포하면 됩니다. 너무너무너무너무 간단합니다. Vercel 에 GitHub id 로 연동하고, 리포지토리를 연결해서, 배포버튼을 누릅니다. 끝. + Add GitHub Account 를 누른다. (나는 연동할때, 모든 리포지토리를 등록하지 않는 것을 선택해서, 전부 보이지 않음) 원하는 리포지토리를 선택합니다. 세이브합니다. 리포지토리 선택후 배포합니다! 끝 2022. 12. 3.
11. 배포 준비하기 배포를 하기 위해서는 몇가지 단계가 필요하다. 1. 코드 재정리 : console.log 등 과 같이 쓸데 없는 코드를 지우고, 불필요한 코드를 삭제, 정리한다. 2. 메타 데이터의 삽입 : meta data인 title, descrition, viewport 등을 추가해줍니다. Calorie Calculator 3. 환경변수를 추가해줍니다. 직접, next.config.js 를 만져 환경변수를 추가 해 줄 수 있고 https://nextjs.org/docs/api-reference/next.config.js/introduction next.config.js: Introduction | Next.js learn more about the configuration file used by Next.js to.. 2022. 12. 3.
10. 유저별 랜덤 선택기 구현하기 유저별 랜덤 선택기는, 기존의 랜덤 선택기와는 달리, 데이터 페치를 해온 FavoritesArray Data 안에 있는 food id 들을 사용하여, for 과 find 를 이용하여, 다시, 모든 Data가 들어있는 FoodData 형태로 바꾸어, 데이터를 사용하는 코드가 필요했습니다. 또한, 로그인이 반드시 되어있어야 하므로, useEffect 를 사용하여, status 가 바뀔때에, 변환을 하게 만들었습니다. useSession 의 session Data가 필요한데, useSession 의 생명주기로 인하여, useEffect 없이 전역코드에 session 을 사용했다가는, 참조오류가 나오게 됩니다. 1. 음식들 ID 로, DATA 형태의 객체 배열로 변환하기 useEffect(() => { if (.. 2022. 12. 3.
9. 개인 유저 별 찜 기능을 구현해보자 찜 기능은 페이지의 핵심 기능으로, 주변에 있거나, 먹고 싶은 음식들을 찜 해서, 칼로리와, 영양성분을 파악하고, 고민되는 날, 랜덤선택기로 음식 하나를 랜덤으로 선택 할 수 있습니다. 음식 아이디를 동적 페이지로 생성했습니다. 계획 상으로, 음식의 디테일 페이지 내에 찜 기능을 구현하고, 어떤 음식을 보여줄 것인지, 어떤 음식을 찜 할 것인지, 데이터를 보내야 하기 때문에, 동적 페이지를 만들어, 각 유저별로, 음식의 ID 값을 DB 에 저장합니다. 1. 우선 빠른 UX 를 위해, getStaticProps 로 사전 데이터 페칭을 진행하고 데이터를 페이지 내에 가져옵니다. 2. 만약 로그인을 했다면, 로그인 정보에서, Favorites Array 데이터가 있는지 파악합니다. 3. 로그인을 했고, Fav.. 2022. 12. 3.

티스토리툴바