nextjs (11) 썸네일형 리스트형 08. REST API - Movies Service (2) 01. 설치 NestJs는 node.js 위에서 움직이는 프레임워크이고 node.js에 백엔드를 구성할 수 있도록 해준다.NestJS는 100% Typescript에 기반하고 있다. 1. Node.js 설치 Node.js — 어디서든 JavaScript를 실행하세요Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine.nodejs.org 2. Git 설치 Git - DownloadsDownloads macOS Windows Linux/Unix Older releases are available and the Git source repository is on GitHub. Latest source Release 2.49.0 Release N.. 18. Deployment(배포) 1. Vercel 계정 생성 Vercel: Build and deploy the best web experiences with the Frontend Cloud – VercelVercel's Frontend Cloud gives developers the frameworks, workflows, and infrastructure to build a faster, more personalized web.vercel.com 2. CSS Modules 추가Next Js는 CSS 적용할때 어떠한 Configuration(구성)을 하지 않고 CSS파일을 import만 하면 된다.모든 페이지들은 layout 파일이 근간이기 때문에 모두 같은 CSS 파일을 공유한다. styles > global.csshtm.. 15. Data Fetching(데이터 가져오기) - 병렬 요청(Parell Request) 병렬요청(Parell Request)이란?두개 이상의 비동기 작업을 동시에 실행하여 전체 실행 시간을 단축하는 방식이다.이는 비동기 처리의 효율성을 높이기 위한 대표적인 최적화 기법이다. 병렬 요청 vs 순차 요청항목순차 요청병렬 요청실행 방식첫 번째 요청이 끝나야 다음 시작여러 요청을 동시에 시작코드 예시await A(); await B();await Promise.all([A(), B()]);전체 소요 시간A + B 시간A와 B 중 더 오래 걸리는 시간만큼만 소요성능느림빠름 13. Data Fetching(데이터 가져오기) - Server Side(서버 측면) 어떤 일이 발생하기를 기다리려고 await를 사용할 때 async를 무조건 사용해야 한다!!!부모 함수에 무조건 async가 있어야 한다!!! about-us 경로를 갔다가 home으로 돌아오면로딩 없이 데이터를 가져오게 되는데 그 이유는 Next JS는 프레임워크이며 fetch된 url를 자동으로 캐싱 시켜주기 때문이다. 검사로 들어가서 Network 탭을 열고 새로고침 해도 movies에 대한 API를 사용하고 있지 않다는걸 확인할 수 있다.movies에 대한 API를 가져오는건 백엔드이다.서버 재시작 후 movies에 대한 API를 가져올때 빠르게 느껴지는 이유는단지 server component에서 Next JS가 fetch한 것을 기억하기 때문이다. 11. 다이나믹 루트 루트("/") 경로일 때 영화 목록이 표시되고 영화를 클릭하면 해당 영화 상세화면으로 넘어가게 하고 한다고 했을때app > movies > [id] 순으로 폴더를 생성하게 되면 next.js를 통해 http://localhost:3000/movies 경로 뒤에 property 값이 들어가게 된다. 09. 레이아웃 1. Layout 사용 배경Next.js는 application을 빌드할 때 재사용하는 요소들이 있기 때문이다.예를들어, 페이지에 있는 네비게이션 바는 두 페이지에서 같이 사용하고 있다.페이지마다 navigation.tsx 불러와도 되지만 100개가 넘는 페이지를 가지고 있다면모든 component에 똑같이 코드를 입력해줘야 할까?또 여기서 사이드바 또는 footer까지도 넣고 싶다면 어떻게 해야 할까?이럴때 필요한 것이 레이아웃이다. 2. Layout 이해next.js는 layout component로 먼저 가서 export된 디폴트 컴포넌트를 랜더링한다.그게 실제로 Next.js가 랜더링하는 것이다.그 다음 nextJS는 URL를 확인한다.children은 nextJS의 규칙이 아니라.. 05. 경로를 찾을 수 없습니다 다른 url 내부의 없는 주소로 이동해도 no-found.tsx 파일을 보여줄 것이다. navigation 파일에서 경로명을 알려주는 hook을 사용한다.NextJS에는 개발자에게 url에 관한 정보를 알려주는 hook들이 있으며 router까지 접근할 수 있게 해준다.지금 사용할 hook은 usePathname이라는 hook인데 path name이란 user가 현재 머물고 있는 url이다.사용자가 "/"에 있는지, "/about-us"에 있는지 등을 알려준다. 이전 1 2 다음
