개요
새로운 프레임워크 혹은 라이브러리를 배울 때마다 느낀 것이지만..
익숙하지 않은 정보들은 머릿속을 어지럽게 만드는 것 같다.
그럼에도 불구하고 그동안 HTML, CSS, Javascript, React를 공부하면서 깨달은 사실이 있다.
말 그대로 익숙하지 않아서 그런 것이다.
좋든 싫든 같이 붙어서 살다보면 익숙해지기 마련이다.
내가 과연 이걸로 프로그램을 만들 수 있을까..?라는 생각이 처음에 들지만,
막상 부딪히면서 앞으로 나아가다보면 그걸로 프로그램을 잘 만들고 있다.
Javascript에 이제 익숙해졌는데 React를 배우게 됐을 때도 지금과 비슷한 생각이 들었던 것 같다.
지금은 React에 익숙해졌는데.. Next.js로 인해 머릿속이 어지럽다.
근데 뭐 어떡하겠는가? 프론트엔드 개발자가 되려면 이런 고난도 넘길 줄 알아야 된다.
오늘은 서론이 좀 길었다.
왜냐하면... Next.js 때문에 머리가 아프다는 사실을 털어놓고 싶었기 때문이다.
그래도 우연히 발견한 Next.js 강의 덕분에 큰 흐름을 잡을 수 있게 됐다.
조금이라도 이 글이 도움이 되길 바라며 본론으로 넘어가겠다.
Next.js는 무엇일까?
React의 기능을 기반으로 한 풀스택 웹 애플리케이션 프레임워크 (by 공식 문서)
위에 적어 놓은 문장을 한 단어씩 이해해보자.
1️⃣ React의 기능을 기반으로 = Next.js에서는 React에서 제공하는 기능을 사용할 수 있다.
2️⃣ 풀스택 = Next.js에서는 프론트엔드(React)와 백엔드(Expressjs와 비슷한 형식)를 모두 구현할 수 있다.
3️⃣ 웹 애플리케이션 = Next.js는 웹 에플리케이션을 만들 수 있는 도구이다.
4️⃣ 프레임워크 = Next.js는 개발자들이 개발에 집중하기 위해 필요한 기능을 모두 제공한다.
Next.js의 매력은 무엇일까?
Next.js는 SSR(Server Side Randering)을 지원한다.
SSR에 대해 설명하기 전에 React의 CSR(Client Side Rendering)을 먼저 설명하겠다.
React는 Javascript를 기반으로 하고 있기 때문에, 브라우저에서 Javascript를 다운로드를 한 후에 Javascript가 실행되어야 UI가 보여진다. 초기 로딩 시간이 길어질 수 있다는 문제가 있다. 또한, Javascript를 실행할 수 없는 환경에서는 SEO에 불리하다는 점을 가지고 있다.
눈치가 빠른 사람들은 알아챘을 지도 모른다.
SSR은 CSR의 이런 단점들을 보완하지 않겠는가?
SSR은 CSR과 다르게 서버에서 Javascript가 실행된다. 서버는 브라우저에게 완성된 HTML 파일을 보낸다.
또한, HTML 파일을 보내기 때문에 Javascript가 실행되지 않는 환경에서도 잘 동작한다. 즉, SEO에 유리하다!
더불어 초기 로딩 시간이 짧다는 장점을 가지고 있다.
서버 컴포넌트와 클라이언트 컴포넌트는 무엇일까?
Next.js는 기본적으로 서버 컴포넌트를 제공한다.
컴포넌트에서 `use clent`를 사용하지 않으면, 기본적으로 그 컴포넌트는 서버 컴포넌트이다.
Next.js를 배우면서 서버 컴포넌트와 클라이언트 컴포넌트로 구분된다는 사실을 처음 알게 됐다.
도대체 서버 컴포넌트와 클라이언트 컴포넌트는 무엇일까?
아주 간단하게 말하면 다음과 같다.
📍 서버 컴포넌트
웹 애플리케이션에서 정보를 표현하는데 사용자와 상호작용하지 않는 컴포넌트
예를 들어, 사용자에게 상품 목록에 대한 데이터를 보여주고만 있다면 그것은 서버 컴포넌트에 해당한다.
📍 클라이언트 컴포넌트
웹 애플리케이션에서 사용자와 상호작용하는 컴포넌트
예를 들어, 사용자가 장바구니에 추가해둔 상품을 삭제하거나 상품 개수를 수정할 때 사용하는 버튼은 클라이언트 컴포넌트에 해당한다.
간단하게 이해하면, 사용자와 직접적으로 상호작용하지 않는 컴포넌트를 서버 컴포넌트, 사용자와 상호작용하는 컴포넌트를 클라이언트 컴포넌트라고 한다.
서버 컴포넌트와 클라이언트 컴포넌트의 명확한 차이를 알고 싶다면, Next.js 공식 문서를 확인하길 바란다.
Next.js 초기 생성된 폴더 및 파일에 대한 설명
Next.js 프로젝트를 생성했을 때 React와 다르게 생겨서 조금 낮설 것이다.
하지만 이 친구들도 계속해서 생성하고 사용하다보면 무엇인지 점차 알게 된다.
프로젝트를 생성할 때 Typescript와 Tailwind를 yes한다는 점을 알아두길 바란다. (선택적인 부분이다)
중요한 친구들을 우선적으로 설명해보겠다.
📁 app 폴더
Next.js는 App Router 방식을 채택하고 있다
app 폴더 안에 경로명으로 폴더를 만들고 그 안에 page.tsx 파일을 만들면, 하나의 경로가 생성된다.
app 폴더는 src 폴더 안에 있는데, src 폴더는 root라고 생각하면 된다.
다음과 같이 app 폴더 안에 about 폴더를 생성했다. 그리고 그 안에 page.tsx 파일을 생성했다.
그러면 우리는 /about을 통해 About 페이지로 이동할 수 있게 된 것이다!
그래도 잘 이해가 안된다면, React-Router-Dom을 떠올리면 된다.
about 폴더 : `path="/about"`
page.tsx 파일: `element={<About />}`
🗃️ app > pages.tsx
해당 프로젝트의 메인 페이지이다.
React의 main.tsx라고 생각하면 된다.
🗃️ app > layout.tsx
모든 페이지에서 공통적으로 적용되는 레이아웃을 설정하는 파일이다.
🗃️ app > globals.css
CSS를 전역으로 적용할 수 있는 파일이다.
📁 app > about
about 폴더는 path 중의 하나가 된다. 즉, 하나의 segment가 되는 것이다.
검색창에 `http://도메인/about`의 형식으로 입력하면 해당 페이지로 이동하게 된다.
만약, `http://도메인/about/a/b/c`의 형식으로 url을 만들고 싶다면,
about 폴더 안에 a 폴더를, a 폴더 안에 b 폴더를, b 폴더 안에 c 폴더를 만들어 주면 된다.
먄약, 동적 라우팅을 하고 싶다면 어떻게 해야될까?
about 폴더 안에 [id] 폴더를 생성해주면 된다. 그리고 [id] 폴더 안에 page.tsx 파일을 생성해준다.
page.tsx에서 인자로 `params`를 받아서 사용할 수 있다.
기본 동작
위에서 보여준 예시처럼 about 폴더를 만들고 그 안에 page.tsx 파일을 생성했다고 하자.
만약 about 폴더 안에 layout.tsx가 있다면, page.tsx에서 반환하는 값과 결합해서 UI에 출력된다.
근데 지금 우리는 폴더 안에 layout.tsx를 만들지 않았다.
이럴 때에는 상위 폴더로 이동하여, layout.tsx가 있는지 확인한다.
초기에 생성되어있는 layout.tsx 파일이 존재하기 때문에, page.tsx에서 반환된 값은 children으로 들어가 UI에 출력된다.
[참고자료]
https://youtu.be/9KOaR6QMb9A?si=MyBcdwo_67N4jADM
https://nextjs.org/docs/app/building-your-application/rendering
https://nextjs.org/docs/app/building-your-application/rendering/composition-patterns
'Front-end > Next.js' 카테고리의 다른 글
| [Next.js] Next.js에서 Router Handler를 사용하는 이유는 무엇일까? (0) | 2025.03.14 |
|---|