Mission
- Next.js가 무엇인지
- SSR, CSR이 무엇인지
- Next.js 설치 ( 14버전 ) - 내 버전이 뭔지 정확히 파악하고 검색
- 포트폴리오 웹사이트 디자인 진행
- 기본 정보 ( 이름, 학력, 이메일 ~~~ )
- 챗봇이 있을 자리(별개의 페이지, 어떤 버튼을 클릭 모달 .. )
- 구글에 개발자 포트폴리오 검색해서 참고
- (선택사항) CSS 프레임워크 - Tailwind(추천), bootstrap 이용
배경지식
서버 사이드와 클라이언트 사이드
웹 페이지로 서로 커뮤니케이션 하고 있다. 클라이언트를 웹 브라우저, 서버를 웹 페이지 제공하는 빅테크 컴퓨터라고 생각하면 용어를 이해하는 데 쉽다.
서버 사이드는 서버 측에서 처리하는 것을 말한다. 클라이언트에게 요청을 받아 처리하고 처리결과를 브라우저에 응답한다. 서버 사이드에서 처리하면 데이터 위조의 가능성을 비교적 줄일 수 있고 클라이언트 컴퓨터의 처리 부담이 줄어든다. 반면 서버 처리 부담이 커져 서버 비용이 늘어난다.
클라이언트 사이드는 파일을 받아 HTML로 만들어 웹 브라우저에 해석해서 표시한다. 클라이언트 사이드 처리를 하면 서버비용이 줄고 클라이언트 컴퓨터의 처리부담이 높아진다. 데이터 위조에 취약하고 보안에 민감한 데이터의 경우 대비해 암호화할 필요가 없으므로 암호화 소요가 줄어든다.
SSR과 CSR
-
렌더링
서버에서 받아온 웹 사이트의 소스코드를 읽어 렌더링 엔진이 화면을 그려내는 과정 -
SSR (Server side Rendering)
서버쪽에서 랜더링을 해서 화면을 보여주는 방식을 말한다. 서버로부터 완전하게 만들어진 HTML 파일을 받아와 화면을 그리기 때문에 첫화면 로딩 속도가 빠르다. 요청이 들어올 때마다 서버에서 새로운 화면을 만들어서 제공한다. -
CSR (Client side Rendering)
클라이언트, 즉 웹 브라우저가 렌더링을 해서 화면을 보여주는 방식이다. 브라우저가 HTML 파싱부터 JS파일 다운까지 시행한다. -
차이점
1) 기존에는 웹페이지가 Static site 방식을 사용했다. 특정 버튼을 눌렀을 때, 아예 전체 웹 페이지를 새로 요청하여 깜빡거리는 사용자 경험을 만들었다.2) 이를 해결하기 위해 CSR 방식이 나왔다. 브라우저가 서버에서 필요한 데이터를 한번에 받아오고 웹페이지를 그리고, 새로운 요청이 들어왔을 때 실시간으로 렌더링할 수 있어 좋은 사용자 경험을 가질 수 있게 되었다. 이는 CPU 성능 향상과 JS 표준화(리액트, 뷰, 앵귤러 등 프레임워크의 발전)의 환경에서 본격적으로 시작되었다.
3) 하지만 웹 페이지 첫 로딩시간이 느리다는 단점이 있었다. 또한 SEO(검색 엔진 최적화)에 불리했다. 웹페이지 최적화는 웹 크롤러가 HTML 파일을 수집할 수 있어야 했는데 CSR방식은 JS기반이라 크롤링이 불가했고 이는 사이트의 상위 노출에 불리하게 작용하였다.
(현재는 구글이나 네이버가 업데이트 해 문제 없다고 한다.)4) CSR의 단점을 보완하기 위해 SSR 방식이 떠올랐다. 첫 웹 랜더링이 빠르지만, static site와 같이 깜빡거리는 사용자 경험이 문제였다.
-
정리
SSR은 서버에서 먼저 처리하기 때문에 초기 랜더링이 빠르다. CSR은 브라우저에서 페이지를 렌더링 하기에 필요한 데이터만 전달받아 페이지의 부분만 갱신할 수 있다. 두 방식의 장단점이 있는데, 장점만을 골라서 구현하기 위해 next.js가 나왔다.
실습
next.js
SSR으로 동작하는 리액트 프레임워크이다. Code splitting 이라는 기술을 통해 초기 로드시 필요한 최소한의 코드만 다운로드하여 실행하여
주요 폴더 구성
-
app 폴더 - layout과 page 파일이 있음
-
components 폴더 - shadcn ui 폴더와 Footer, Header, Hero 파일 등 다양한 컴포넌트가 있음
-
public 폴더 - svg, png와 같은 사진, 벡터 파일 등이 있음
실습 순서
-
shadcn 다운
shadcn/ui는 Radix UI 및 Tailwind CSS를 사용하여 구축된 재사용 가능한 컴포넌트 -
homepage, header, footer 컴포넌트 만들기
컴포넌트를 만들고 layout.js 에 컴포넌트를 사용하여 태그를 작성한다. -
themeprovider, themetoggler 를 이용해서 다크모드, 라이트 모드 만들기
-
useState, useEffect를 사용해서 우측 바 이동 애니메이션 만들기
-
전체적인 틀
모든 컴포넌트는 components 폴더 안에 생성하고 export한다. 그럼 필요한 파일에서 Import 해서 컴포넌트를 사용할 수 있다.
Layout.js 파일에는 레이아웃으로, 항상 사용되는 태그들을 작성해 둔다. -
header 만들기
a. 기본 Nav와 모바일 Nav 만들기
b. 로고 넣기 - image와 svg 활용
c. next Link를 이용해서 라우팅하기
d. 화면이 내려가도 header는 고정시키는 법 -
Homepage 만들기
느낀점
react 기초에 대한 강의를 들었지만 Next.js 14로 넘어오면서 약간 구조가 달라 실습에 문제가 있었다. 컴포넌트를 사용한다는 것은 동일했다. 또한 라우팅하는 법을 파악할 수 있었다.
이번 실습을 하면서 내것으로 만들 수 있는 것은 채택하면서 다음에는 NEXT.JS로 내 이력서 챗봇 홈페이지를 만들어 보겠다.
https://www.youtube.com/watch?v=Rew98iFupBM&t=2656s
https://www.youtube.com/watch?v=YuqB8D6eCKE
