[Next + React Query로 SNS 서비스 만들기] 섹션 1 정리

Next + React Query로 SNS 서비스 만들기 강의를 듣고 정리한 내용입니다.  

이 글은 섹션 1의 정리내용입니다. 

 

Next 프로젝트 생성

npx create-next-app@latest

 

• 프로젝트 이름
• 타입스크립트 사용여부
• ESLint 사용여부
• Tailwind css 사용여부
• src 디렉토리 사용여부
• app router 사용여부
• import alias 커스터마이징 사용여부 (@를 ~,! 다른 문자로 변경할거냐 여부)

Public 폴더는 next 서버에서 누구나 접근할수있게 해준다.
사이트에 필요한 이미지들 넣으면 된다 (누구나 접근할 수 있는 이미지)

/app 폴더에는 라우터와 관련된 파일이 들어간다.
라우터 관련없는 파일이 들어갈 수 있으니 src/app 이렇게 패스를 가져가는게 좋다. (예를들어 /components, /models ...)

next.config.js - next에 대한 설정

 

브라우저 주소 app 폴더에 반영하기

layout.tsx 

페이지를 이동하는데도 변경되지 않는 부분은 layout이다.
next13버전에서 도입되었다.

app/layout.tsx - 최상위 레이아웃

layout 파일 children props에 page.tsx가 들어가는것이다.

 

패스별 레이아웃을 따로 만들고 싶다면

패스폴더에서 layout.tsx를 만들어준다.

Root Layout -> 패스별 Layout -> 패스 page.tsx 계층 구조가 된다.

 

다이나믹 라우트

프로필 페이지와 같이 동적으로 사용자이름, 게시글 id 들어가는 라우트를 구현할때 사용

slug 라고 한다.

[username]/status/[id]

not-found.tsx

404 페이지, 최상위패스에서 만들어준다.

 

라우트 그룹

레이아웃이 다른 페이지가 있는경우 (로그인 전, 후)

디렉토리에서 소괄호를 이용해 주소창에 관여하지 않지만 라우트 그룹을 만들어줄수있다.

(beforeLogin)
(afterLogin)

라우트 그룹의 layout을 만들수있다.

(beforeLogin)/layout.tsx

 

Root Layout -> 라우트 그룹 Layout -> 패스별 Layout -> 패스 page.tsx 계층 구조가 된다.

 

export, import default 규칙
export default를 하면 import 할 때 영향이 없다.
컴포넌트 이름을 무엇을 사용하든 관계없다. 

 

 

template.tsx, Link, Image, redirect

template.tsx

라우트가 변경될 때 layout은 리렌더링이 안되고 page만 리렌더링 된다.
페이지 이동할때마다 layout도 리렌더링을 하고싶으면 template.tsx를 사용하면 된다.

페이지이동할때마다 기록을 해야하는경우, 구글 애널리틱스를 사용할때 template를 사용하면 좋다.

 

Link 사용

Next 에서는 a태그대신에 Link를 사용한다.
a를 사용하면 페이지가 새로고침하면서 넘어간다.

 

서버컴포넌트에서 Redirect 지원

페이지 path들어왔을때 redirect 할 수 있다.
redirect는 next/navigation에서 제공한다.

Next13버전에는 쉽게 redirect 할 수있도록 추가가 되었다.
렌더링 프로세스 전에 리디렉션하려면 next.config.js또는 Middleware 를 사용해야한다.

클라이언트 컴포넌트에서 리렌더링하려면 useRouter 사용하면된다.

Next Image
Next Image를 사용하면 Next서버에서 이미지 최적화를 해준다. 

 

css module를 선택한 이유

tailwind - 호불호, 가독성이 안좋다

styled-component or emotion - emotion은 13이랑 잘 안돌아가고, styled-component는 서버컴포넌트에서 ssr에 이슈가 있다.

sass 

css module - 간단하게

vanila extract - window에서 문제가 있다.

css module를 사용하면 다른 모듈 클래스와 겹치지 않게 해준다.

Global.css 공통 css

특정 컴포넌트에서 사용하는 css - module.css

 

100dvh, 100dvw

모바일에 주소창이 있다없다 하는데 그걸 다 커버해주는 스타일

 

패러렐 라우트

패러렐 라우트는 두 페이지를 동시에 보여주는것 이다.

조건은 같은 폴더에있어야하고 공통 폴더의 layout.tsx에서 modal props를 가져와야한다.

@modal 폴더를 만들고 

 

클라이언트 컴포넌트로 전환하기

상단에 'use client'를 선언하지 않으면 디폴드 서버컴포넌트이다. 

서버컴포넌트는 서버에서 돈다. async를 붙여서 비동기로 컴포넌트를 만들수도 있다.

 

서버컴포넌트에서는 useEffect, useState를 못쓴다. 요런경우는 클라이언트 컴포넌트로 변경해주면 된다.

클라이언트 컴포넌트로 변경하려면 파일 상단에 'use client'로 써주면 된다

 

클라이언트 컴포넌트는 서버컴포넌트를 import 할수없다. import하면 서버컴포넌트가 클라이언트 컴포넌트로 바뀐다.

서버컴포넌트는 클라이언트 컴포넌트를 import 할수있다.

 

default.tsx

Modal 폴더에 default.tsx가 필요하다

default.tsx - 패러렐라우트에 대한 기본값

모달이 필요없는 페이지라고 modal폴더에서 해당 path를 안만들면 modal을 못찾아서 404가 뜬다.

그래서 그런 필요없는 페이지에서 사용하려고 default.tsx를 사용한다.

인터셉팅 라우트

주소가 다르지만 같이 뜰수있게 해주는것

폴더구조에 (..) (.) 을 사용할수있다.

(..) - 1상위폴더

(.) - 현재폴더

 

인터셉팅 라우트가 i/flow 폴더를 보여주는게 아니라 (.)/flow 폴더를 가로채서 표시하는것

클라이언트에서 라우팅할때만 인터셉트 라우팅이 적용된다. (서버 redirect 로는 못한다)

redirect 대신 useRouter에 router.replace를 사용한다.

 

링크를 통해 이동할때만 인터셉트 라우트가 작동한다.

주소쳐서 접근, 새로고침했을 때 - 인터셉트 라우트 작동안함

링크를 통해 접근 - 인터셉트 라우트 작동

 

_Private folder

app 폴더에 _components 처럼 private 폴더를 만들 수있다.

주소에 반영되지 않는다.

주소에 반영되지 않는 폴더 3가지

• 그룹폴더 (레이아웃)
• @ 패럴렐라우트 (2페이지를 볻여주는 기능)
• _private 폴더 (폴더 정리용 )

참고 
Nextjs installation - https://nextjs.org/docs/getting-started/installation

API, 엔드포인트 - https://blog.naver.com/ghdalswl77/222401162545

Project Structure - https://nextjs.org/docs/getting-started/project-structure

Routing - https://nextjs.org/docs/app/building-your-application/routing