혼자 적어보는 노트

상세 페이지를 course/[id].tsx로 해놓고 실제로 있는 페이지인 경우 (id로 서버 요청 후 값이 있다면) 페이지를 보여주고, 없는 페이지인 경우 메인으로 redirect처리를 하려고 했다. 그런데 useEffect로 router.query.id 받아서 확인해보니 undefined가 뜬다?? 기본적으로 router.query.id가 채워져서 나올 줄 알았는데 useEffect에서 확인해보니 query값이 없다가 이후에 string | string[] 으로 채워진다. useEffct로 id 확인하기 const courseId = router.query.id useEffect(() => { if (typeof courseId === 'string') { //처음엔 undefined이기 때문에 str..

next.js layout 구현 react에서 페이지마다 다른 layout을 구현해야 했을 때 각각 페이지마다 pageContainer를 넣고 props를 통해 header에 나타나는 요소들을을 제어했었다. Next에서도 그렇게 작업을 해야 하나 했었는데 알아본 결과 조금은 다른 방식으로 Layout을 제어할 수 있었다. Next/Layouts 공식문서에 활용 예시가 굉장히 상세하게 설명되어있다! _app.tsx import Layout from '~/components/common/Layout'; export type NextPageWithLayout = NextPage & { getLayout?: (page: ReactElement) => ReactNode }; type AppPropsWidthLay..

next/image Next.js 공식문서 : next/image Next.js에서는 이미지최적화를 위해 Image 컴포넌트를 제공한다. 장점? - Loader를 사용하여 url을 커스터마이징 할 수 있다. - 자동으로 Lazy Loading을 제공해준다. - 이미지 캐싱도 자동으로 해준다. - 지정된 곳에서만 이미지를 받아오게 할 수 있다. 필수 Props로는 src를 작성해야 하고 layout이 fill이거나 정적으로 import 해오는 이미지를 제외하고는 width, height값을 필수적으로 작성해주어야 한다. import NextImage from 'next/image'; import TestImage from 'public/assets/search-img.png'; // 사용 가능 이 외의 옵..

React Router에서의 Link랑 비슷할 줄 알았는데 작동이 잘 안되어서 다시 자세히 알아보며 알게된 점을 정리하기로 했다. Link 태그 안에 텍스트를 넣으면 태그가 자동 생성된다. Place 의 자식으로 a태그를 사용하면 a태그는 하나만 나타난다. Place 의 자식으로 styled a태그를 사용할 땐 passHref 속성을 넣어주어야 한다. Place 안넣으면 링크이동은 되지만 위와 같이 href 속성이 없다. 💡 href 속성이 없다면? 1. 사용자 경험에 좋지 않다. href가 없는 a 태그는 anchor text의 역할을 하지 않기 때문에 이동(라우팅)은 되지만, 새 창(탭)에서 열리지 않는다 2. SEO에 좋지 않다 검색엔진은 a태그의 href속성을 읽어서 페이지의 콘텐츠를 인덱싱한다...

로그인을 하게 될 경우 세션에 유저 정보를 추가하고 세션 id를 브라우저 쿠키에 저장하고 서버에 요청을 할 때마다 쿠키정보를 함께 전송함으로써 서버에서 어떤 유저가 요청을 보내는지 파악할 수 있다고 이론 적인 부분만 알고있었다. 하지만 직접 구현을 하려고 하니 생각보다 복잡한 인증 절차가 있다고 한다. (social 로그인시) passport를 사용하여 간단하게 로그인을 구현해보고 머릿속에 개념에 대해 간단하게나마 저장을 해보려 한다. 📄 준비된 것 - 회원가입 기능 구현 완료. (DB에 User의 데이터가 있는 상태) - 프론트에서 로그인 버튼 클릭 시 {email, password} 데이터 전달하는 코드 작성 - Node Express를 이용한 서버 세팅 - Sequalize를 사용하여 모델 세팅 -..

Node.js를 사용할 때 변경된 사항이 있을 경우 서버를 종료하고 다시 실행해주어야 하는 불편함이 있다. 디렉토리에 파일이 수정될 경우 그 것을 감지하고 자동으로 재실행을 해주는 nodemon을 사용해보자. https://www.npmjs.com/package/nodemon npm i -D nodemon dev모드에서만 사용할 것이기 때문에 -D 키워드를 사용한다. 글로벌로 설치했을 경우 nodemon [실행하려는 파일명]이라는 키워드로 실행이 되지만 -D 키워드로 설치하면 해당 키워드가 작동이 안되기때문에 npx nodemon [실행하려는 파일명] 위의 키워드를 사용하거나 //package.json "scripts": { "start": "nodemon app.js" }, package.json파일에..

route들을 만들다보면 app.js파일에 너무 많은 route들이 생기게 되는데 use()를 통해 url이 겹치는 라우터들 다른 폴더로 분리할 수 있다. 일단 예시로 간단하게 작성해보았다. [app.js] const express = require("express"); const app = express(); const port = 8080; app.post("/video", (req, res) => { res.send("home"); }); app.post("/video/name", (req, res) => { res.send("Name"); }); app.post("/video/popular", (req, res) => { res.send("Popular"); }); app.listen(port, ..

이전에 express를 사용해 본 적 있었는데 그 때는 클론코딩을 하느라 제대로 머리 속에 들어오지 않은 것 같아서😓 이번에 서버에 api를 만들면서 다시 정리하며 익혀보기로 했다 👊👊 express express는 node에서 제공하는 http 모듈과 connect 컴포넌트를 기반으로 하는 웹 프레임워크이다. 즉 Node.js를 사용하여 서버를 쉽게 구성할 수 있게 만들어주는 장치이다. packge.json 생성하기 npm init 폴더 안에 위 명령어로 package.json 파일을 생성한다. express 설치 npm i express express route 코드 작성 폴더 안에 app.js폴더를 생성하고 코드를 작성한다. const express = require('express')'; // e..