[FEPL05 / TIL] Day 06 - Next.js 기초

ㅇㅎ

 

✏️ 오늘 배운 것

Next.js

• 프레임워크와 라이브러리의 차이
• app 디렉토리와 public 디렉토리
• HTML ➡️ Next.js
• layout.tsx
  • 전역 레이아웃
  • 지역 레이아웃
• 웹 표준 준수하기

CSS

• Next.js 프로젝트에서의 css 파일의 위치
• module.css
• 고립화, 지역화

 

🙂‍↕️ 이미 알고 있던 것

Next.js를 왜 쓰지?

Next.js의 공식 문서 페이지에 들어가보면 대문짝만하게 써있는 문구가 있다.

 

The React Framework for the Web

 

React는 웹 개발에만 사용되지 않고, 모바일 애플리케이션 등에도 사용이 가능한 Js 라이브러리이다.

Next.js는 웹 애플리케이션에 특화된 React의 프레임워크로, CSR이라 불리하던 SEO를 SSR을 통해 해결하고, 손쉽게 개발 및 배포할 수 있도록 그 틀을 제공하는 풀스택 프레임워크이다.

요즘은 Next.js가 아니어도 React를 활용할 수 있는 웹 프레임워크는 종종 있지만 디렉토리 기반의 페이지 라우팅이나 에러 페이지 핸들링 등이 너무 손쉬워서 사용하게 되는 것 같다.

캐싱 등 다른 특화된 장점도 분명히 있다만, 오늘 강의에서는 다루지 않으셨으므로 간단하게 정리해본다.

 

Next.js에서 전역 레이아웃과 지역 레이아웃 적용하기.

source: Next.js 공식 문서

 

Next.js는 404 not found, loading 등 특수한 이벤트 상황에 렌더링할 페이지를 작성하기 위해 특정 키워드를 제공한다. 그 중에서 특히 layout.tsx는 페이지의 레이아웃에 관련되어 있는데, 이 레이아웃은 전역 레이아웃 (이후 '루트 레이아웃')과 지역 레이아웃이 중첩해나가는 방식으로 구현된다. 그리고 layout.tsx는 한 번 렌더링 된 후 다시 렌더링되지 않는다.

먼저, 루트 레이아웃은 App Router 기준으로 /app 하위에 위치한다. 이 레이아웃은 /app 하위에 위치하는 모든 페이지에 공통적으로 적용되는 레이아웃이다. 만약, 모든 페이지에서 같은 header와 footer를 사용한다면 이곳에 정의할 수 있다. 하지만 어느 페이지에서는 header와 footer를 적용하지 않는다면? 이럴 때에는 해당 지역별로 레이아웃을 설정해야 한다.

앞서 말했듯 지역 레이아웃은 루트 레이아웃에 중첩되는 특징을 가진다. 루트 레이아웃에서 header와 footer를 설정해두었다면 다른 지역에서 사용되는 레이아웃에서도 루트 레이아웃의 header와 footer가 함께 렌더링 된다. 따라서 루트 레이아웃은 최소한의 것들만 남겨두고, 지역별로 레이아웃을 설정하는 것이 좋다.

 

 

진행중인 프로젝트 '롤페'의 디렉토리 구조 (리팩토링 중이라 굉장히 더러움 🤮) 를 살펴보면 레이아웃 별로 구분되어 있는 디렉토리 구조를 확인할 수 있다. (/backheaderRoute - 뒤로가기 헤더만 있는 페이지 /headerAndFooter - 헤더와 푸터가 있는 페이지...

명명에 통일성이 없네... 그저... 더럽다!!

)

 

디렉토리 이름이 ()로 감싸져 있는 것 또한 확인할 수 있는데, 레이아웃 별로 페이지를 구별했을 경우 ()로 디렉토리 이름을 감싸면 해당 이름은 URL로 사용되지 않는다. 즉 /logoHeaderRoute/rollpe가 아니라 /rollpe로 사용될 수 있는 것이다.

🍯 꿀팁
이 외에도 _를 붙이는 것으로 App Router의 라우팅에서 제외할 수 있다. 나는 각 페이지별 컴포넌트 디렉토리 앞에 _를 붙여 \_components로 명명하여 라우팅에서 제외하는 방식을 사용하고 있다. 애시당초 page.tsx가 없어 라우팅이 되진 않는다만, 그냥 개발 상의 편의다.

 

/app 디렉토리와 /public 디렉토리의 역할

 

/app 디렉토리

• 하위 디렉토리명을 주소로 하는 동적 문서 제공하는 디렉토리

/public 디렉토리

• 이미지 파일, 아이콘 등 정적 문서를 제공하는 디렉토리

 

💡 새로 알게된 것

CSS 파일의 역할에 따른 Next.js 프로젝트 내에서의 위치

지금까지 Next.js를 사용한 개발에서는 styled-components를 주력으로 사용해왔고, 가끔 tailwind를 사용해왔다. 그래서 사실 css 파일 위치를 어디다 둬야겠다! 하는 체계적인 고민은 하지 않았는데, 강사님이 알려주셔서 앞으로는 이를 적극 채택해보려 한다.

 

/app 하위에 놓을 경우

처음 실행될 때 번들링되어 클라이언트로 전송되기 때문에 사용자의 시점에서 CSS가 적용되는 속도가 빠름

 

/public 하위에 놓을 경우

클라이언트가 해당 페이지의 css가 필요하여 요청할 때 전송되므로 사용자의 시점에서 CSS가 적용되는 속도가 느림

 

이를 잘 참고하여 public에 놓을 css와 app에 놓을 css를 잘 구분하는 것이 필요하겠다.

 

그리고 이어서 '고립화' 혹은 '지역화'에 대한 이야기를 해주셨다.

 

Next.js에서 전역 스타일링 용도로 사용되는 /app 하위의 global.css의 경우 layout.tsx에 import 되어 사용하는 것이 일반적이라는 생각이 든다. 그리고 이 global.css에 작성된 스타일은 고립화 (혹은 지역화) 되지 않은 스타일이다. 이 global.css가 import 되어 있는 layout을 부모로 갖는 모든 페이지의 전체 영역에 적용되는 스타일이기 때문이다.

 

하지만 페이지별로 작성되어 페이지와 가까운 디렉토리에 포함된 page.module.css를 styles 라는 이름으로 import 했다고 한다면, 이는 고립화 (내지는 지역화) 되어있다고 볼 수 있다. 이 스타일은 그 module css를 import한 컴포넌트에 한정되는 스타일이기 때문이다.

 

🤔 아직 모르는 것

오늘은~ 궁금한게 없어요~

 

💭 느낀 점

 

오늘 하루는 할 줄 알고 줄곧 해왔던 것들이라 그렇게 막 '재밌다!', '새롭다!' 하며 강의를 듣질 못해서 시간이 잘 가는 기분은 아니었다.

그래도 같은 팀의 팀원들과 이야기를 나누고, 팀원들의 의문에 서로 묻고 답하며 내가 아는 것을 팀원들과 나누는 것이 즐거운 시간이었다.