멋사 부트캠프 프론트엔드 플러스 5기 - Next.js (6일차)

 

Next.js를 써야하는 이유

리액트는 라이브러리 형태이며 순수 프론트엔드만 가능하지만

Next는 리액트 기반으로 이루어진 프레임 워크이며 풀스택 작업이 가능하다.

 

★ 새 프로젝트 생성 방법

• 공식 홈페이지 및 링크 참고할 것

https://nextjs.org/

Next.js by Vercel - The React Framework

https://ysh0129.tistory.com/73

Next.js와 프로젝트 생성

 

 

 

★ Next.js 폴더구조

• 코드를 메인에 해당하는 app 디렉터리
• 코드를 정적으로 보여주는 public 디렉터리
• 페이지 폴더
  • 폴더 명은 곧 url를 의미한다. but page.tsx가 없으면 url에 해당하지 않는다.
• 컴포넌트 폴더
  • 바깥에 두는 방법 : 컴포넌트를 한 곳에 모아둠, 다른 앱에서도 적용 시키기 용이함
  • 페이지 안에 두는 방법 : 컴포넌트를 해당 페이지에 적용 되어있다는 것을 알기 쉬움
  • 적용방법 : 컴포넌트를 layout.tsx에 삽입
• 페이지 명은 소문자 컴포넌트 명은 파스칼로 명시할 것

 

★ Next.js에서 css적용

• 컴포넌트 폴더 안에 컴포넌트명.module.css로 설정 후 코드 삽입
• 해당 컴포넌트에 들어가서 경로를 불러오기
  • import "./header.css"; <= 기존에 불러오는 방법
   

1. styles 객체에서 필요한 스타일을 꺼내 쓰는 방식

2. 구조 분해 할당으로 스타일을 변수로 꺼내쓰기

• style.css = 기본적으로 모든 파일이 공통적으로 받는 스타일시트
• module.css = 특정 파일에만 적용 시키는 스타일시트

★ 레이아웃 중첩 : 페이지마다 다르게 디자인 해야 하는 경우에 활용

layout.tsx가 2개인 상황 : 부모(app) 레이아웃의 {children} 안에 자식 레이아웃이나 페이지가 들어가는 구조 이미지에는 부모는 RootLLayout에 자식은 admin에 있는 해당하고 admin이 부모면 안에 있는 layout에서 {children}은 사용자가 요청한 페이지

 

 

 

회고 : Next.js를 한번 개인적으로 사용한 적은 있었으나, 무작정 내 것으로 만드는 것보다

수업을 들으면서 과정을 이해하니 프레임워크에 대해 더 쉽게 이해할 수 있었다.

그리고 레이아웃 중첩은 어렵게 느껴지나 익숙해지면 많이 사용하게 될거같다.