본문 바로가기
  • 삽질하는 자의 블로그
8. 칼로리 계산기를 만들어보자. with DOM 2022.12.12 추가사항 "useReducer", "func.bind()" 를 사용하면 "REAL DOM" 에 "접근할 필요가 없겠구나"를 깨달음 1. [선택된 항목들] useReducer 의 "ADD type"의 함수를 만들어 Array.concat() 새 배열을 만들어 추가되게만든다. (추가된 항목들의 배열) 2. [추가된 항목마다 달린 버튼들] 각 항목들은 Array.map() 을 사용하여 열거될것이다. 열거된 항목들마다, 각각의 버튼이 달릴 것이다. 3. [버튼들 각각의 함수] 각 버튼들은, function.bind() 의 부분적용을 사용하여, 각 id 파라미터를 고정시키고, 그에 맞는 배열의 amount 수정하는 함수를 만든다. [종합] concat 으로 추가된 배열은, 각 항목마다 버튼이 .. 2022. 12. 3.
7. 모든 음식들을, 카테고리 별로, 태그 별로 검색되도록 구현하자 핵심 기능중 하나인 음식 페이지를 꾸며볼 차례입니다. 음식들을 카테고리별 (한식,양식,중식 ... ), 태그별로(매움, 짭짤, 달달 ...) 로 구분지어 볼 수 있어야 했습니다. 주요한 기능이기에, "느린 UX 보다는, 빠른 UX 가 필요했습니다." 로딩은 조금 있을지언정, 좋은 유저경험을 위해 getStaticProps 로 "사전 데이터 페칭을 진행했습니다" 1. AllFoodsPage 에, 사전 데이터 페칭을 해줍니다. 페칭된 데이터들을 음식들이 있는 컴포넌트로, 넘겨줍니다. import FoodCategoryHeader from "../../components/food-components/food-category-header"; import { connectDb, findAllFoods } from.. 2022. 12. 2.
6. 로그인 기능 구현 with Next-Auth 로그인 기능은, 뭐먹지? 페이지에 반드시 필요한 기능이었습니다. 우선, 수많은 음식들 중, 내가 원하는 음식은 고작 수십가지! 회원 별로, 서로 다른 음식들을 "찜" 할 수 있어야 했습니다. Express 를 사용했을 때에는, connect-mongodb-session 패키지를 사용하여, DB 에, 유저의 정보를 저장, 로그인의 기능이 정상적으로 활용 되었을때, 유저들에게 auth 한 session 을 만들어주고, 클라이언트 사이드의 쿠키에 저장을 하여, 쿠키가 만료 될때까지, 자유로운 이동을 하게 하였다. Nextjs 에서는 JWT 를 이용하여, 로그인 한 유저에게, Json Web Token 을 발급한다. 토큰은, "서버에서 생성" 되며, 클라이언트에게 전달되고, 유저는 클라이언트 사이드 브라우저, .. 2022. 12. 2.
0. 내가 React, Nextjs 를 선택한 이유 한달 전, 첫 Express 와 바닐라 자바스크립트로, 쇼핑몰 사이트를 만들어 보았다. 처음 만들어 보는 페이지여서, 모양새는 빠졌지만, 그래도, 나름 괜찮다고 생각은 했다. 그런데 가장 큰 문제는 UX(유저 경험) 였다. 그때보다야 실력이 늘어난 지금, 충분히 더 나은 UI 를 꾸밀 수 있지만, UX 는 어떻게 하지 못했다. EXPRESS 의 한계 때문이었다. 속도는 상대적이다. NODEJS 역시, 충분히 괜찮은 구동환경이지만, SPA 를 활용한 라이브러리와는 속도 비교자체가 되지 않았다. 그래서 SPA 를 구현할 라이브러리를 선택하게 되었고, 가장 사용자가 많아, 커뮤니티가 활성화 되어있는, REACT 를 선택하였다. 나는 독학으로 공부중이다. 무엇보다 중요한 것이 "올바른 정보의 습득" 이다. VU.. 2022. 12. 2.
5. DB 연결 with. MongoDB Atlas 그리고 API 회원가입 및 로그인 페이지를 만들었으니, DB 에 연결해주어야 합니다! 저는 MongoDB를 사용합니다. MonoDB 에 연결하려면, 패키지를 설치해야합니다. https://www.npmjs.com/package/mongodb mongodb The official MongoDB driver for Node.js. Latest version: 4.12.1, last published: 9 days ago. Start using mongodb in your project by running `npm i mongodb`. There are 11303 other projects in the npm registry using mongodb. www.npmjs.com 요로코롬 해줍니다. API 에 직접 하면, 코드.. 2022. 12. 2.
4. 로그인, 회원가입 페이지 생성 로그인 페이지에는, 간단한 Form 만 작성합니다. 필요한 것은, Email, Password, 정도만 필요하기 때문에 간단하게 만들어줍니다. 후에, useState나, useRef 로 값들을 상태에 넣어, fetch 를 통해, 자체 API 에 요청하여. DB 안에 넣을 것입니다. 로컬 파일 내에, USERINFO 를 저장하면, 해킹의 위험이 있습니다. import styles from "./login-form.module.css"; import Link from "next/link"; import { useRef, useState } from "react"; function LoginForm() { const emailRef = useRef(); const passwordRef = useRef(); c.. 2022. 12. 2.
3. Layout 구성하기 웹페이지에는, 기본적으로 Layout 즉, Footer와, Header 가, 필요하지유! Layout 컴포넌트를, 만들어서, "전체 애플리케이션의 바깥쪽에, 붙여줄겁니다" import "../styles/globals.css"; import Layout from "../components/ui/layout/layout"; function MyApp({ Component, pageProps: { session, ...pageProps } }) { return ( ); } export default MyApp; 이런식으로 말이지요! 그렇게하면, Layout 를 "전역" 에서 사용 가능할 겁니다. Layout 은 모든곳에 필요하니까요! 폴더를 만들어줍니다. 그리고 그곳에 레이아.. 2022. 12. 2.
2. 메인 페이지 만들기 메인페이지는 한 눈에 보기 쉽고, 딱! 커다랗게! 만들어서, 원하는 기능을 모두 담았으면 좋겠다고 생각했습니다. 그래서, 평소에 예쁘다고 생각했던, 뱅글뱅글 돌아가는 Cube 형태의 슬라이더를 사용해보았습니다. Swiper : https://swiperjs.com/react#usage Swiper React Components Swiper is the most modern free mobile touch slider with hardware accelerated transitions and amazing native behavior. swiperjs.com 정말 따라쓰기 편하게, 설명이 너무 잘 되어있어서 최고! 추천추천! import { Swiper, SwiperSlide } from "swiper/r.. 2022. 12. 2.
1. project 를 해석해 봅시다. 사용언어 Next.js, React, CSS3 사용 API Swiper, Next-auth 목적 매일 무얼 먹을지 고민하는 시간이 아까워서, 만들어 본 어플리케이션 주요기능 전체 음식 보기 음식 칼로리와, 영양성분 확인 음식 랜덤선택기 로그인 기능 자 시작합니다! 별거는 없어요. 열심히는 해봤어요 2022. 12. 2.

티스토리툴바