[TIL] 221222-23

BeanxxΒ·2022λ…„ 12μ›” 23일
1

TIL

λͺ©λ‘ 보기
117/120

πŸ”₯ 였늘 ν•œ 일

  • [ν”„λ‘œκ·Έλž˜λ¨ΈμŠ€] 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 섀정이 μ€‘μš”ν•˜μ§€ μ•ŠμŒ
profile
FE developer

0개의 λŒ“κΈ€