안녕하세요
3차 프로젝트에 들어가서 요즘 조금 바쁜,,,,나날들입니다.
저희 3차 프로젝트로 next.js와 scss를 사용하기로 하였습니다.
제가 프로젝트로 next.js를 도입하면서 배웠던 몇 가지 내용을 정리해보려합니다!
0. Next.js 왜 탄생하게 되었는가?
2013년 React가 페이스북의 손을 타서 세상에 나오게 되었습니다.
당시 React는 정말 센세이션했고, 지금 10년 이상 React는 여전히 프론트엔드의 강자라고 불리죠.
다들 잘 아시겠지만, 단방향 데이터 흐름과 Virtual DOM이 큰 특징입니다.
그리고, next.js를 공부하기 전까지는 잘 와닿지 않았는데 'Client Side Rendering'을 합니다.
Client Side Rendering
일반적으로 SPA에서는 CSR(Client Side Rendering)을 하고 MPA에서는 SSR(Server Side Rendering)을 합니다.
SPA에서는 정적인 리소스를 한꺼번에 다운로드하고, 클라이언트의
동적인 새로운 요청이 왔을 때 그 부분만 변환하여 필요한 컴포넌트만 갱신하는 방식이기 때문에
CSR을 합니다!!
Server Side Rendering
MPA의 구조에서 Server Side 측에서 렌더링을 해두는 방식입니다.
CSR은 유저가 웹페이지를 방문하면 빈 HTML 뼈대를 보내고, 동적으로 DOM 요소를 그제서야 만들기 시작하기 때문에
초기 로딩 속도가 느린 대신에, 구동만 하면 그 다음부터는 빠르다는장점이 있습니다.
하지만 SSR은 빈 HTML이 아니라 이미 꽉 차있는, 그러니까 CSS까지 다 담긴 알찬 HTML을 미리 구동해두기 때문에
SEO에 유리합니다. 이는 곧 마케팅이죠 ㅎ
[참고한 블로그↓ ]
https://dev-ellachoi.tistory.com/28
CSR만 하다보니 SEO를 하기가 너무 힘들어져서, SSR을 구동하기로 합니다.
저에겐 좀 신박한 개념이었어요, 뭔가 유저가 초기 로딩만 기다리면 웹 페이지 이용이 수월하니
당연히 CSR 시대가 왔구나 싶었는데, SEO 때문에 서버 측에서 Hydration을 하는 것이
필요한 니즈가 생기게 된 것이죠.
1. app router
제가 Next.js를 배우면서 제일 신기하고, 편했던 기능은 단연 app router가 아닐까 싶습니다.
옛날 옛적에 찍은 유투브를 보면서 pages router와 헷갈려서 시간을 좀 날려먹었는데,
pages router에서 Next.js 13버전으로 승급하며 app router로 갈아치기 되었습니다.
next.js를 create app하게 되면, app이라는 폴더가 생성이됩니다.
저희 프로젝트 팀의 app 폴더 내 구조인데요, 보시면 app 폴더 내에 profile 폴더 내에 page.tsx 가 있습니다.
(맞습니다! TypeScript를 겁없게도 사용 하고 있죠 ㅋ)
이 때 파일 구조에 따라 router 명이 달라집니다.
무슨 말이냐면, app/ profile/ myShop/ page.tsx의 구조를 갖춘다면,
localhost:3000/profile/myShop에 page.tsx가 뜨게 된다는말입니다.
어떤 똑똑한 사람이 이런 개념을 만들었을 까요?!?!?!? 진짜,,,,너무 대단한 것같습니다.....
사용하는 입장에서,,,,너무 깔끔하고 좋아요
page.tsx를 만들면 정상 작동 되었을 때 그 page라는 이름을 가진 파일을 뱉어내고,
error.tsx를 만들면 에러가 났을 때 error 페이지를 뱉어내고
loading.tsx를 만들면 로딩 중일 때 loading 페이지를 뱉어냅니다.
이 라우터의 개념이 있는 app폴더는 가급적 깔끔하게 router의 역할로 두는 편이 낫다고 생각해서
저희는 오로지 페이지를 불러오는 개념으로 router 본연의 색깔을 해치지 않도록 노력하고 있습니다.
2. 기본 RSC
Next.js에서는 기본적으로 RSC( React Server Component)를 기본 컴포넌트 렌더링 방식으로 채택하고 있습니다.
RSC는 JS의 번들 크기를 줄일 수 있고,
Server 측이니까 데이터베이스와 가까운 곳에서 조회하기 때문에 빠르다는 장점이 있습니다.
그러나 특정 컴포넌트가 useState나, useEffect처럼 유저와 소통하는 CSR를 사용하려면'use client'를 컴포넌트 파일 상단에 선언해주면 됩니다.
그래서 사실, CSR을 사용할 때에는 DOM에서 제일 리프에 있는 컴포넌트들을 CSR하는 것이 이상적이라고 합니다.
3. Link 컴포넌트 사용 / 4. 데이터 페칭 / 5. 메타 데이터
이 부분은 2부에서 다루도록 하겠습니다!!
'개발 공부한 것들 > SeSSAC 웹 풀스텍 과정 회고록' 카테고리의 다른 글
| [코딩온] 웹 풀스택 영등포 5기 과정_next.js(2) (0) | 2024.01.01 |
|---|---|
| [코딩온] 웹 풀스택 영등포 5기 과정_프로젝트 회고록 (0) | 2023.12.31 |
| [SeSSAC] 웹 풀스택 영등포 5기 과정_SpringBoot_dto,vo,axios, API (2) | 2023.12.07 |
| [SeSSAC] 웹 풀스택 영등포 5기 과정_Java(Class) (2) | 2023.11.25 |
| [SeSSAC] 웹 풀스택 영등포 5기 과정_socket (1) | 2023.11.17 |