TIL 230405

in kr •  2 years ago 

TODAY I LEARN

image.png

요즘 한동안 UI에서 멀어진 관계로 나름 최신의 nextjs 를 공부해보고자 해서 책을 E-BOOK 으로 구매하였다.


기존에는 뭐 html feat jquery / express + pug / springboot + jsp 형태로 왠만한 UI 를 개발 한듯 싶다 ;;
(아제 스멜 ... 우....)

그래서 찾아본것이 nextjs !! LET's START


CH1. Next.js 알아보기

  • nextjs 는 메타 엔지니어 조던 발케가 만듬
  • 특징 - SSR / ISR / TS ... 지원
  • 리엑트를 경험했다면 비슷함. ( 난 아니므로 ... )

시작하기

npx create-next-app@latest

우선 책에서는 ts 가 아닌 js 로 되어있어서 js 를 선택 쩝...

image.png

폴더 구조

필수 폴더는 pages, public

image.png

실행

npm run dev

image.png

image.png

CH2. 렌더링 전략

하루 1장 보려 했지만 ... 내용이 넘 짧은거 같아 2장도 ;;

  • SSR : server side rendering - 서버기반 랜더링, SEO에 좋음, 코드를 넣어주는 하이드레이션도 가능 ( SPA느낌 ?! )
  • CSR : client side rendering - 쉬운 페이지전환, 지연로딩, 서버부하 감소, 동적 컴포넌트 로딩 등
  • SSG : static site generation - 정적 사이트 생성 - 쉬운확장(html), 뛰어난 성능
  • ISR - incresemental static regeneration - 증분 정적 생성 - 일정 시간 이후 재 요청시 정적 사이트 생성

헛 이것도 코드는 설렁 설렁 넘어가고 내용만 대충 보니 끝났네요 벌써 ;; 그래서 3장까지 가즈아

CH3. Next.js 기초와 내장 컴포넌트

3.1 라우팅 시스템

파일 시스템 기반의 페이지와 라우팅

pages 폴더 아래 demo 라는 폴더를 만들고 index.js 파일을 아래와 같이 만들면 ...

image.png

image.png

image.png

image.png

image.png

페이지 경로 매개변수 사용

src/pages/posts/[content].js

image.png

image.png

컴포넌트에서 경로 매개변수 사용하기

image.png

image.png

...

여기서부터는 코드도 많고 글도 많아서 생략 !


맺음말

나름 빠르게 훅 읽어 보려고 한다. 최소 하루에 1 CH 이상 읽어 2주 안에 끝내 보려 한다.
오늘은 3장까지 읽고 실습도 해봤으니 캬 ~

Authors get paid when people like you upvote their post.
If you enjoyed what you read here, create your account today and start earning FREE STEEM!
Sort Order:  

Upvoted! Thank you for supporting witness @jswit.

image.png