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

티스토리툴바