[TIL] 221222-23

🔥 오늘 한 일

• [프로그래머스] Lv.2 가장 큰 수(정렬), 소수 찾기(완전 탐색) 2문제 완료
• [Udemy - Next.js] Section1, 3 (페이지 & 파일 기반 라우팅) 학습
• 기술 면접 질문 & 답변
  • useLayoutEffect에 대해서 설명해주세요.
  • 라이브러리와 프레임워크의 차이점은 무엇인가요?
  • 프로토타입에 대해 설명해주세요.
  • REST API에 대해 설명해주세요.
  • Context API에 대해 설명해주세요.

🚨 Error Handling

💡 Parsing error : Cannot find module 'next/babel'

next.config.js 파일에서 오류가 나서 아래와 같이 eslintrc - extends에 'next/babel' 설정을 해주니까 오류 해결!

🔗 Parsing error : Cannot find module 'next/babel'

// .eslintrc.json
{
  "extends": ["next/babel", "next/core-web-vitals"]
}

🧚 새롭게 알게 된 내용

💫 Next.js

React의 풀스택 프레임워크

• Server-side rendering
• 초기 렌더링 때 미리 렌더링된 페이지를 갖게 됨
• 거냥 React 앱에는 없는 내장 페이지 사전 렌더링 기능이 핵심 기능!

✋ React: 사용자 인터페이스 구축을 위한 JavaScript 라이브러리
✋ 프레임워크 & 라이브러리 차이점: 프레임워크 규모가 더 크다 (더 많은 기능을 가지고 있음)

• Next 프로젝트의 public 폴더 내에는 index.html 파일이 존재하지 않는다.
  • 🤷‍♀️ why? NextJS에는 내장된 사전 렌더링이 포함되어 있기 때문
  • 요청이 서버로 도달할 때 SPA의 단일 페이지가 동적으로 사전 렌더링이 되어 콘텐츠를 포함한 초기 페이지를 반환함

# Next.js 플젝 생성
npx create-next-app
Ok to proceed? (y) y
✔ What is your project named? 
✔ Would you like to use TypeScript with this project? No / Yes
✔ Would you like to use ESLint with this project? No / Yes

# server 실행
npm run dev

/pages
L index.js -> /
L about.js -> /about

L /products
	L index.js -> /products
	L [id].js  -> /products/1

[id].js: 동적 경로를 추가하는 표기법

파일 이름을 경로로 지정하는데 index.js는 예외!
index.js는 현재 속한 폴더를 위한 라우트 경로로 가정하게 될 특별한 파일

• index.js: 항상 지정된 폴더의 루트 페이지
• useRouter Hook: 경로 세그먼트에 입력한 구체적인 값에 접근 가능

• Next.js: 파일 기반 라우팅
  • 추가로 작성해야 할 boilerplate code(변화없이 여러 군데에서 반복되는 코드) ❌
  • 컴포넌트를 생성하고 저장하는데 있어서 훨씬 더 직관적인 시스템
  • file + folder 구조 ⇒ 라우트에 영향을 미침
  • 페이지 이동시 <Link/> 컴포넌트 사용
• React + react-router: 코드 기반 라우팅
  • 추가적인 boilerplate code 필요 ⭕️ (<Route/>, …)
  • 굉장히 직관적임
  • file + folder 설정이 중요하지 않음