NextJS Intro
1.NextJS 시작 #0 | 개요
$ npx create-next-app@latest노마드코더 NextJS 시작하기
2.NextJS 시작 #1 | Library vs Framework
Library (React.js - CRA)개발자로써 우리가 사용하는 것라이브러리는 사용하고 싶을 때 사용할 수 있다.개발자가 왕, 마음대로 할 수 있다.폴더명 등 앱을 만드는 데 자유도가 있다.라우팅도 개발자한테 달렸다.원하는 데로 무엇이든 할 수 있다.Framewo
3.NextJS 시작 #2 | Pages
/pages 폴더 안의 파일을 url-path 에 적용 시키려면 해당 파일에 export default 하는 컴포넌트가 있으면 된다.컴포넌트의 이름은 중요하지 않다.파일 이름이 url-path 의 값이 된다.오류 발생시 자세한 에러로그 웹 페이지에서 보여줌 (npm r
4.NextJS 시작 #3 | Static Pre Rendering
앱에 있는 페이지들이 미리 렌더링 된다. (SSR)정적으로 생성됌CRA : CSRCNA : HTML 만 SSR 한다. (Static Pre Rendering)React.js 를 프론트엔드 안에서 실행하는 것HTML 을 Pre Rendering 한다.React.js 가
5.NextJS 시작 #4 | Routing
Create Nav Component
6.NextJS 시작 #5 | CSS Module
태그에 그냥 스타일을 주는 것CSS module 사용등등컴포넌트파일이름.module.css 파일 생성해당 컴포넌트파일에 import styles from "./NavBar.module.css"; 와 같이 import컴포넌트의 요소에 <nav className={s
7.NextJS 시작 #6 | Styles JSX
애플리케이션에 styles 를 추가하는 다른 방법Next.js 고유의 방법<style> 태그를 열어 줍니다.attribute 로 jsx 를 작성합니다.내용으로 {} 을 열고 백틱안에 css 를 작성합니다.클래스네임을 랜덤번호로 지정해줘서 컴포넌트 파일들간 클래스네
8.NextJS 시작 #7 | Custom App (Global Style)
Global Style 을 위해 알아야한 매우 중요한 Next.js 컨셉 App Component App Page
9.NextJS 시작 #8 | 개발 패턴 (Layout, Seo)
대중적으로 사용하는 패턴/components 에 Layout.js 파일을 생성한다Layout 컴포넌트에 { children } 을 매개변수로 지정한다.Layout 컴포넌트의 코드 예시는 아래와 같다\_app.js 에서 Layout 컴포넌트를 아래와 같이 사용한다.너무
10.NextJS 시작 #9 | Fetching Data
/public 폴더에 public 파일들을 넣으면 된다.원하는 컴포넌트, 페이지에서 <img src="/vercel.svg"> 와 같이 작성하면 끝이다... 등 경로를 따라 파일을 탐색할 필요가 없다.fetch 하려면 API key 가 필요하다.따라서 API k
11.NextJS 시작 #10 | Redirects and Rewrites
API key 를 숨기는 이유 유료 결제한 API key 일 수 있음 API 사용 횟수가 제한되는 경우가 있음 API key 를 누군가 남용할 수도 있음 Redirects & Rewrites 에 마스크 씌우는 것과 같습니다. Redirects Redirects 정의
12.NextJS 시작 #11 | 페이지에 SSR 방식만 적용하는 방법
NextJS 에서는 페이지가 오직 SSR 만 할 수 있도록 설정할 수 있다 라던지 서버에서 일어나는 data 관련 작업을 모두 수행한 후에, 즉 API 관련 동작이 모두 완료 되었을때 페이지를 렌더링하는 방식을 사용할 수 있습니다. get server side pro
13.NextJS 시작 #12 | 동적 라우팅 (Dynamic Routes)
react-router-dom 라이브러리를 사용하여 /movies/:id 와 같은 형태로 작성합니다.:id : 변수라고 인식합니다.폴더와 파일만 사용하여 path parmas 를 지정합니다./movies/all url 에 해당하는 페이지를 만들고 싶으면 아래와 같이 합
14.NextJS 시작 #13 | Router Hook
Router Hook 이전 글에서 형태로 훅을 사용해 보았습니다. hook 의 전달인자로 문자열이 아닌 객체를 넘겨줄 수 있습니다. 와 를 나눠주기 위해 코드 예시 동작 예시 (url) 브라우저의 URL 을 마스킹할 수 있습니다.
15.NextJS 시작 #13 | 뭐든 캐치해내는 URL
Catch All URL URL 의 URL 루트 엔드포인트부터 마지막 엔드포인트까지 모든 URL 엔드포인트를 Catch 할 수 있는 URL 입니다. 가끔 필요할 때가 있습니다. URL 을 "/Spider-Man:+No+Way+Home/634639" 와 같은 형태로
16.NextJS 시작#14 | 404 페이지 커스텀 + 배포 마무리
404 페이지 커스텀 정의 404 상태의 에러가 발생하면 커스텀된 페이지를 유저에게 보여줄 수 있습니다. 방법 폴더에 파일을 만들어주고 작성하면 됩니다. Vercel 배포 Vercel 을 사용한 이유 이번에 NextJS 를 처음 사용해보면서 Gihub Pages 로