[next.js 제로초] 섹션 1. 기획자와 디자이너 기획서를 던져주었다

제로초님 강의 정리
https://www.inflearn.com/course/next-react-query-sns

Next 프로젝트 시작하기

• x (twitter) 클론코딩 - 홈, 탐색하기, 쪽지, 프로필
• url을 그대로 가져가기
• 새로고침 시 다르게 동작하는 것 확인
• 반응형

설치

npx create-next-app@latest

설치옵션

✔ Would you like to use TypeScript? … No / Yes
✔ Would you like to use ESLint? … No / Yes
✔ Would you like to use Tailwind CSS? … No / Yes
✔ Would you like to use `src/` directory? … No / Yes
✔ Would you like to use App Router? (recommended) … No / Yes
✔ Would you like to customize the default import alias (@/*)? … No / Yes

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

• 페이지를 넘나들어도 안 바뀌는 부분은 layout 설정

• layout 설정시 로그인/로그아웃 시 다른 것 확인

• [username] 식으로 다이나믹 라우팅

• 다이나믹 라우팅은 같은 경로 다른 폴더들 다음에 작동함.

• not-found.tsx : 다른 파일들에 해당안될때

• 계층구조 : 루트 Layout -> 계층 Layout -> 계층 Page

라우트 그룹

• (afterLogin) : 소괄호로 작성(실제 주소엔 반영안되나 그룹 생성 가능)
• export default function 이 jsx나 tsx 파일별로 항상 있어야함.
• 함수명은 상관없음

template.tsx, Link, Image, redirect

• 페이지 이동시 리렌더링이 필요하면 template, 리렌더링이 안되게 하고 싶으면 layout
• a 태그로 이동하면 페이지가 새로고침됨. 새로고침 없이 이동시 Link 사용
• import 이미지명 from ‘이미지패쓰’ 로 이미지 불러다 쓸 수 있음
• Image 태그 쓸 것
• return 대신 redirect로 다른 주소로 이동 가능 (서버에서 동작함)

css module을 선택한 이유

• tailwind -> 호불호 심하고 가독성이 안 좋음
• Styled Component -> 서버 컴포넌트 SSR에서 문제 있음
• Vanilla extract -> 윈도우 개발환경에서 문제 있음
• css module -> 같은 폴더에 css파일 넣고 간단하게 사용가능
  -> 전역 적용은 .module을 파일명에 안 붙이기
  -> 특정 페이지 적용은 page.module.css 로 적용하면 해당 페이지에만 적용가능
• scss -> 갠적으로 선호

패러렐 라우트

• 같은 폴더에서 동작

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

• useState등 훅은 클라이언트 컴포넌트에서만 가능
• “use client”; 로 선언해서 클라이언트 컴포넌트로 지정해주기
• 기본은 서버 컴포넌트

default.tsx

• 패러렐 라우트가 필요없을때의 기본값
• null을 반환하여 빈페이지 노출

인터셉팅 라우트

• (.)나 (…)로 경로의 page.tsx를 대체
• 브라우저를 통해 처음 들어오거나 새로고침 시에는 원래 경로가 실행됨
• Link를 통해 접근 했을때 가로채기가 실행됨

private folder(_폴더)

• 공통되는 애들을 _component로 빼기
• 원칙적으로는 서버 컴포넌트만 클라이언트 컴포넌트를 임포트할 수 있다.

주소창에 노출되지 않는 폴더

• () 그룹 폴더는 레이아웃
• @ 페러럴 라우트 (한 화면에 두개의 page를 동시에 보여주는 용도)
• _ 프라이빗 폴더 -> 폴더 정리용

로그인 모달에서 발생하는 문제 해결(router.replace)

• redirect 는 서버 컴포넌트에서 동작함
• 클라이언트에서 링크를 통해서 리다이렉트해야지만 인터셉팅이 제대로 동작
• next/navigation의 useRouter() 사용
• push는 뒤로가기했을때 router.push한 페이지로 이동 / replace는 그 이전 페이지로 이동
  -> location.replace랑 같다 생각하면 될듯
• login 페이지를 거쳐가기때문에 login/page.tsx에 배경 깔아줘야함.

모달을 여러개 넣고 싶을때

• @modal2, @modal3 등 페러렐 라우트를 늘려주고 layout.tsx에 반영할 것

추가. SCSS 적용

1. sass 설치

npm i -D sass
npm i -D typescript-plugin-css-modules

2. css 확장자 scss로 변경

3. next.config.js 파일수정

/** @type {import('next').NextConfig} */

const path = require('path'); // 1. path 선언

const nextConfig = {
	reactStrictMode: true,
	sassOptions: {
		includePaths: [path.join(__dirname, 'styles')], // 2. sassOptions 옵션 추가
	},
};

module.exports = nextConfig

4. _variables.scss, _mixins.scss_ 파일추가

• src/styles 경로에 두 파일 추가

5. next.config.js 수정

/** @type {import('next').NextConfig} */

const path = require('path'); // 1. path 선언

const nextConfig = {
	reactStrictMode: true,
	sassOptions: {
		includePaths: [path.join(__dirname, 'styles')], // 2. sassOptions 옵션 추가
		prependData: `@import "@/styles/_variables.scss"; @import "@/styles/_mixins.scss";`, // prependData 옵션 추가
	},
};

module.exports = nextConfig

6. tsconfig.json 설정 추가

  "compilerOptions": {
    "plugins": [{ "name": "typescript-plugin-css-modules" }]
  }