ํ‹ฐ์Šคํ† ๋ฆฌ

EveryDay, EveryPyeon
๊ฒ€์ƒ‰ํ•˜๊ธฐ

๋ธ”๋กœ๊ทธ ํ™ˆ

EveryDay, EveryPyeon

everybodypyeon.tistory.com/m

์ธ์ƒ์— ์žˆ์–ด '์„ฑ๊ณต'์€ ์ ˆ๋Œ€ ํฌ๊ธฐํ•˜์ง€ ์•Š๋Š” ๊ฒƒ.

๊ตฌ๋…์ž
3
๋ฐฉ๋ช…๋ก ๋ฐฉ๋ฌธํ•˜๊ธฐ
๊ณต์ง€ 'ํ•œ๋‹ค'ํ–ˆ๊ณ  '๋œ๋‹ค'ํ–ˆ์ง€ ๋ชจ๋‘๋ณด๊ธฐ

์ฃผ์š” ๊ธ€ ๋ชฉ๋ก

  • [NEXT.js] 5. Link ์ปดํฌ๋„ŒํŠธ ์‚ฌ์šฉ ์ด์Šˆ ( new- link ) 1. ์ •์˜ & ํŠน์„ฑ   2. Nextjs 13 ๋ฒ„์ „ ์—…๋ฐ์ดํŠธ ํ›„ ์‚ฌ์šฉ๋ฒ•์ƒ์„ธ  1. ์ •์˜ & ํŠน์„ฑ๊ธฐ์กด์˜ ํƒœ๊ทธ๋Š” ํ•˜์œ„์— ํƒœ๊ทธ๋ฅผ ํฌํ•จํ•ด์„œ ์ž‘์„ฑํ•ด์•ผ ํ–ˆ์Šต๋‹ˆ๋‹ค.๊ทธ๋Ÿฌ๋‚˜, Nextjs 13 ๋ฒ„์ „์œผ๋กœ์˜ ์—…๋ฐ์ดํŠธ ์ดํ›„ ํƒœ๊ทธ๋ฅผ ์‚ฌ์šฉํ•˜์ง€ ์•Š์•„๋„ ๋˜๋Š” ๊ฒƒ์œผ๋กœ ๋ณ€๊ฒฝ ๋์Šต๋‹ˆ๋‹ค. next/link : ํƒœ๊ทธ ์—†์ด ์‚ฌ์šฉ ๊ฐ€๋Šฅ # ๊ธฐ์กด๋ฐฉ์‹ Home # --------------------------# ๋ณ€ํ™”๋œ ๋ฐฉ์‹ Home.    2. Nextjs 13 ๋ฒ„์ „ ์—…๋ฐ์ดํŠธ ํ›„ ์‚ฌ์šฉ๋ฒ• npx @next/codemod new-link . - codemod ๋ฅผ ์‹คํ–‰ํ•ด new-link๋ฅผ ์„ค์น˜ํ•˜๊ณ , ์—…๋ฐ์ดํŠธ ๋œ. ๋ฒ„์ „์˜ nextjs13 Link ํƒœ๊ทธ๋ฅผ ์‚ฌ์šฉํ•˜๊ฒŒ ๋œ๋‹ค. next/link ๊ณต๊ฐ์ˆ˜ 1 ๋Œ“๊ธ€์ˆ˜ 0 2024. 6. 19.
  • [NEXT.js 14] 5. Layout(feat. { children }: { children: ReactNode }) props Layout  1. ์ •์˜ & ํŠน์„ฑ   2. ์ฝ”๋“œ ์˜ˆ์‹œ   3. ๊ด€๋ จ ์—๋Ÿฌ์ƒ์„ธ  1. ์ •์˜ & ํŠน์„ฑNext.js ์—๋Š” Layout ์ปดํฌ๋„ŒํŠธ๊ฐ€ ์กด์žฌํ•˜๊ณ  ์ด๋Š” ์—ฌ๋Ÿฌ ๊ฒฝ๋กœ๊ฐ„์— ๊ณต์œ ๋˜๋Š” UI์ž…๋‹ˆ๋‹ค. Layout ์ปดํฌ๋„ŒํŠธ๋Š”- ํŒŒ์ผ์—์„œ React ๊ตฌ์„ฑ์š”์†Œ๋ฅผ ๋‚ด๋ณด๋‚ด๋„๋ก ์ •์˜ํ•  ์ˆ˜ ์žˆ๊ณ ,- ๋ Œ๋”๋ง ์ค‘์— ํ•˜์œ„์— ๋ ˆ์ด์•„์›ƒ(page UI)๊ฐ€ ์กด์žฌํ•  ๊ฒฝ์šฐ, ํ•˜์œ„ ์š”์†Œ๋ฅผ ๋ฐ›์•„์˜ค๊ธฐ ์œ„ํ•œ children props๋ฅผ ์ž‘์„ฑํ•ด์•ผ ํ•ฉ๋‹ˆ๋‹ค.  ใ„ด ์ด๋ฅผ ํ•˜๊ธฐ ์œ„ํ•ด์„œ๋Š”, { children }: { children: ReactNode } ๊ตฌ๋ฌธ์„ ์‚ฌ์šฉํ•ด์„œ ์ด๋ค„์งˆ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. { children }: { children: ReactNode } ์ด ๊ตฌ๋ฌธ์€ TypeScript์˜ ๊ฐ์ฒด ๊ตฌ์กฐ ๋ถ„ํ•ด์™€ ํƒ€์ž… ์ •์˜๋ฅผ ๊ฒฐํ•ฉํ•œ ๊ฒƒ์ž…๋‹ˆ๋‹ค.(๋”ฐ๋ผ์„œ, ๊ฐ์ฒด์˜ ํŠน์ • .. ๊ณต๊ฐ์ˆ˜ 1 ๋Œ“๊ธ€์ˆ˜ 1 2024. 6. 18.
  • [NEXT.js 14] 4. Font ๋ฐ”๊พธ๊ธฐ NEXT.js ์—์„œ๋Š” 'next/font/google'์™€ ๊ฐ™์ด google font ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋ฅผ ๋‚ด์žฅํ•˜๊ณ  ์žˆ์–ด ์ ‘๊ทผ์„ฑ์ด ์ข‹์Šต๋‹ˆ๋‹ค.๋ฟ๋งŒ ์•„๋‹ˆ๋ผ 'next/font'๋Š” ๋ชจ๋“  ๊ธ€๊ผด ํŒŒ์ผ์— ์ž๋™์ ์œผ๋กœ ์ž์ฒด ํ˜ธ์ŠคํŒ…์ด ๋‚ด์žฅ๋ผ ์žˆ๊ณ ,์ด๋ฅผ ์ ์šฉํ•˜๊ณ ์„œ ๋ ˆ์ด์•„์›ƒ(๋ทฐ)์˜ ์‰ฌํ”„ํŠธ(๊นœ๋นก์ž„, ๊ธ€๊ผด์˜ ์ˆœ๊ฐ„์  ๋ณ€ํ™” ๋“ฑ) ์—†์ด ํฐํŠธ๋ฅผ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. Font ๋ฐ”๊พธ๊ธฐ   1. import {...} from 'next/font/google';    2. layout.tsx ๋˜๋Š” Font.ts ์ปดํฌ๋„ŒํŠธ์— ์‚ฌ์šฉํ•  Font ์ž‘์„ฑ   3. tailwind.config.ts ์ž‘์„ฑ    4. tailwind css ํ‘œ๊ธฐ๋กœ ์‚ฌ์šฉํ•˜๊ธฐ์ƒ์„ธ  1. import {...} from 'next/font/google'; # app/font.tsimpor.. ๊ณต๊ฐ์ˆ˜ 1 ๋Œ“๊ธ€์ˆ˜ 0 2024. 6. 17.
  • [NEXT.js 14] 3. CSS ์‚ฌ์šฉ 2๊ฐ€์ง€ ๋ฐฉ๋ฒ• (css module ์ƒ์ƒ / global.css : tailwind css) CSS ์‚ฌ์šฉ ๋ฐฉ๋ฒ•   1. ์ฒซ๋ฒˆ์งธ ๋ฐฉ๋ฒ• : css module ์‚ฌ์šฉ   2. ๋‘๋ฒˆ์งธ ๋ฐฉ๋ฒ• : global.css ์‚ฌ์šฉ   3. ํŒŒ์ผ์˜ ์œ„์น˜   4. suspense & streamed Response๋ฅผ ์ด์šฉํ•œ ์„ธ๋ถ„ํ™” ๋กœ๋”ฉ์ƒํƒœ ๊ด€๋ฆฌ์ƒ์„ธ  1. ์ฒซ๋ฒˆ์งธ ๋ฐฉ๋ฒ• : css module ์‚ฌ์šฉ: ์ผ๋ฐ˜์ ์ธ ํ‘œ์ค€ css ์ด์ง€๋งŒ, css ํŒŒ์ผ์— ํŠน์ •ํ•œ ์ด๋ฆ„์„ ์ง€์ •ํ•จ์œผ๋กœ ํŠน์ • ์ปดํฌ๋„ŒํŠธ๋กœ ์Šค์ฝ”ํ•‘.=> module.css๋ฅผ import ํ•˜๋ฉด ๊ทธ ํŒŒ์ผ๋“ค๋กœ๋ถ€ํ„ฐ ๊ฐ์ฒด๋ฅผ ๋ถˆ๋Ÿฌ์˜ฌ ์ˆ˜ ์žˆ๋‹ค import classes from './main-header.module.css';main-header.js (์ปดํฌ๋„ŒํŠธ)์— ์ ์šฉํ•  css ํŒŒ์ผ์„ ๊ฒฝ๋กœ depth๊ฐ€ ๋™์ผํ•  ์ˆ˜ ์žˆ๊ฒŒ ์ƒ์„ฑํ•ด์ฃผ๊ณ , import ํ•ด์ค€๋‹ค. 'classes' ๋ผ๊ณ  ๋ช…๋ช…ํ•œ ๊ฐ์ฒด๋ฅผ.. ๊ณต๊ฐ์ˆ˜ 1 ๋Œ“๊ธ€์ˆ˜ 0 2024. 6. 14.
  • [NEXT.js 14] 2. loading.js & Suspense & streamed Response (์„ธ๋ถ„ํ™” ๋กœ๋”ฉ์ƒํƒœ ๊ด€๋ฆฌ) loding.js (์ง€์—ฐ)   1. ์ •์˜   2. ์ฐธ๊ณ ์˜ˆ์‹œ   3. ํŒŒ์ผ์˜ ์œ„์น˜   4. suspense & streamed Response๋ฅผ ์ด์šฉํ•œ ์„ธ๋ถ„ํ™” ๋กœ๋”ฉ์ƒํƒœ ๊ด€๋ฆฌ์ƒ์„ธ  1. ์ •์˜: loading.js ํŒŒ์ผ์€  Suspense ๊ธฐ๋ฐ˜์˜ ์ฆ‰๊ฐ์ ์ธ ๋กœ๋”ฉ ์ƒํƒœ๋ฅผ ์ƒ์„ฑํ•  ์ˆ˜ ์žˆ์Œ.- ๊ธฐ๋ณธ์ ์œผ๋กœ Server side ์ด์ง€๋งŒ 'use client'; ๋ฅผ ์ฃผ๋ฉฐ client side ๋กœ ์‚ฌ์šฉ๋  ์ˆ˜ ์žˆ๋‹ค. => Data๋ฅผ ํ˜ธ์ถœํ•˜๋Š” ํŽ˜์ด์ง€์—์„œ ํŽ˜์ด์ง€์˜ ์ƒˆ๋กœ๊ณ ์นจ์„ ํ•  ๋•Œ ์ง€์—ฐ(loading.js)์‹œ๊ฐ„์„ ๋‘๊ฒŒ ๋˜๋ฉด, ํŽ˜์ด์ง€๊ฐ€ ๊นœ๋นก์ด๋ฉฐ ๋‚˜ํƒ€๋‚˜๊ฒŒ ๋œ๋‹ค.=> ๊ทธ๋Ÿฌ๋‚˜, ์„œ๋กœ ๋‹ค๋ฅธ ํŽ˜์ด์ง€๊ฐ„์˜ ์ด๋™์—์„œ๋Š” ๊นœ๋นก์ž„์—†์ด ํŽ˜์ด์ง€๊ฐ„ ์ „ํ™˜์ด ์ด๋ค„์ง„๋‹ค.>> โ˜… ๊ทธ ์ด์œ ๋Š”, NEXT๋Š” ์•„์ฃผ ๊ฐ•๋ ฅํ•œ ์บ์‹ฑ์„ ํ•˜๋Š”๋ฐ, ํŽ˜์ด์ง€์— ์ฒซ ์ ‘์† ๋•Œ์— ํ™”๋ฉด๊ตฌ์„ฑ.. ๊ณต๊ฐ์ˆ˜ 1 ๋Œ“๊ธ€์ˆ˜ 0 2024. 6. 14.
  • [NEXT.js 14] 1. Image ํƒœ๊ทธ ๊ด€๋ จ <Image> ํƒœ๊ทธ   1. ์ •์˜   2. ์ฐธ๊ณ ์˜ˆ์‹œ   3. ์†์„ฑ๊ฐ’ (lazy & srcset ..)   4. priority ์„ค์ • (๋ช…์‹œ์ )์ƒ์„ธ  1. ์ •์˜: ๋Š” ์ตœ์ ํ™”๋œ ๋ฐฉ๋ฒ•์œผ๋กœ ์ด๋ฏธ์ง€๋ฅผ ์ถœ๋ ฅํ•˜๊ฒŒ ๋„์™€์คŒ: ํŽ˜์ด์ง€์—์„œ ์‹ค์ œ๋กœ ๋ณด์ด๋Š” ๊ฒฝ์šฐ์—๋งŒ ์ด๋ฏธ์ง€๊ฐ€ ํ‘œ์‹œ๋˜๋„๋ก ์ด๋ฏธ์ง€๋ฅผ ์ง€์—ฐ ๋กœ๋”ฉํ•˜์—ฌ ๊ตฌํ˜„ํ•ด์คŒ (์ถ”๊ฐ€์ ์ธ ๊ตฌ์„ฑ์„ค์ • ์—†์ด๋„!): ์ด๋ฏธ์ง€๋ฅผ ์„ค์ •ํ•˜๋Š” ํ”„๋กœ์„ธ์Šค ๋“ฑ์„ ๋‹จ์ˆœํ™”์‹œํ‚ด  2. ์ฐธ๊ณ ์˜ˆ์‹œ => ํƒœ๊ทธ์—์„œ์˜ {logoImg.src} ์†์„ฑ๊ฐ’์ด ์•„๋‹Œ ์ „์ฒด ๊ฐ์ฒด logoImg๋ฅผ ์‚ฌ์šฉ=> nextJS์— ์˜ํ•ด ์ƒ์„ฑ๋œ ๊ฐ์ฒด๋Š” ์œ ์šฉํ•œ ์ •๋ณด๋ฅผ ํฌํ•จํ•˜๊ฒŒ ๋˜์–ด ์ตœ์ ํ™”๋œ ๋ฐฉ๋ฒ•์œผ๋กœ image ์ปดํฌ๋„ŒํŠธ๋ฅผ ๋„์šธ ์ˆ˜ ์žˆ๋„๋ก ํ•จ (= import logoImg ~~ ๊ฐ์ฒด๊ฐ€ ์ž๋™์œผ๋กœ ์ด๋ฏธ์ง€ ์‚ฌ์ด์ฆˆ๋ฅผ ๊ฐ์ง€ํ•ด์ฃผ๋Š”๋ฐ, ๊ฐ€์žฅ ๊ฐ„๋‹จํ•œ ํ˜•์‹์œผ๋กœ๋„ ์ด๋ฅผ ๊ตฌํ˜„ํ•˜๊ธฐ์— ์ถฉ.. ๊ณต๊ฐ์ˆ˜ 2 ๋Œ“๊ธ€์ˆ˜ 0 2024. 6. 11.
  • [Next.js 13] ์ปดํฌ๋„ŒํŠธ ์ƒ์„ฑ ํ›„, page์—์„œ ์ปดํฌ๋„ŒํŠธ์— <HTML> ํƒœ๊ทธ, ์†์„ฑ๊ฐ’ ์‚ฌ์šฉ๋ฒ• ์ ‘๊ทผ (์š”์•ฝ) ํ˜„์žฌ ๊ฐœ๋ฐœ์ค‘์ธ ํ”„๋กœ์ ํŠธ์—์„œ Next.js 13๋ฒ„์ „๊ณผ TypeScript ๋ฅผ ๊ธฐ์ˆ ์Šคํƒ์œผ๋กœ ๊ฐ–๊ณ , ๊ตฌ์„ฑ์š”์†Œ๋งˆ๋‹ค ์ตœ๋Œ€ํ•œ ์ž˜๊ฒŒ ์ปดํฌ๋„ŒํŠธํ™”๋ฅผ ๋ชฉํ‘œ๋กœ ํ•˜๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค. (1) ์ปดํฌ๋„ŒํŠธ(components)๋ฅผ ๋นผ์ฃผ๊ณ , ์‹ค์ œ ํ™”๋ฉด์„ ๋ณด์—ฌ์ฃผ๋Š” (2) page.tsx ํŒŒ์ผ์—์„œ (1) ์ปดํฌ๋„ŒํŠธ๋ฅผ ์‚ฌ์šฉํ•˜๋ฉด์„œ๋„ (3) ํ•ด๋‹น ์ปดํฌ๋„ŒํŠธ ๋‚ด์— ํƒœ๊ทธ๋‚˜ ์†์„ฑ๊ฐ’์„ ์ฃผ๋Š” ๋ฐฉ๋ฒ•์„ ํ•™์Šตํ•ด๋ณด๊ฒ ์Šต๋‹ˆ๋‹ค. 1. (์ƒํ™ฉ) ์ปดํฌ๋„ŒํŠธํ™” & page.tsx ์ƒ์„ฑ (1.1). ์ปดํฌ๋„ŒํŠธํ™” + ์ปดํฌ๋„ŒํŠธ ์‚ฌ์šฉ์„ ์œ„ํ•œ ๋“ฑ๋ก (1.2). Page.tsx ์ƒ์„ฑ + ์ปดํฌ๋„ŒํŠธ ๊ฐ€์ ธ์˜ค๊ธฐ 2. ์ปดํฌ๋„ŒํŠธ์— ์†์„ฑ ๊ฐ’ ์ „๋‹ฌํ•˜๊ธฐ (2.1). ์ปดํฌ๋„ŒํŠธ ํŒŒ์ผ ์ค€๋น„ํ•˜๊ธฐ (interface, props) (2.2). page.tsx( ์ปดํฌ๋„ŒํŠธ๋ฅผ ์‚ฌ์šฉํ• ) ํŒŒ์ผ ์ค€๋น„ํ•˜๊ธฐ 3. ์ปดํฌ.. ๊ณต๊ฐ์ˆ˜ 1 ๋Œ“๊ธ€์ˆ˜ 0 2023. 9. 27.
  • [Next.js 13] tailwind css Plugin ์ž‘์„ฑ & ์ ์šฉ ์ ‘๊ทผ (์š”์•ฝ) ํ˜„์žฌ ๊ฐœ๋ฐœ์ค‘์ธ ํ”„๋กœ์ ํŠธ์—์„œ Next.js 13๋ฒ„์ „๊ณผ TypeScript ๋ฅผ ๊ธฐ์ˆ ์Šคํƒ์œผ๋กœ ๊ฐ–๊ณ , ์ด์— ๋”๋ถˆ์–ด Tailwind CSS๋ฅผ ์‚ฌ์šฉํ•˜๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค. ํ•„์š”ํ•œ ์ปดํฌ๋„ŒํŠธ๋ฅผ Tailwind CSS์—์„œ ๊ฐ€์ ธ๋‹ค๊ฐ€ ์‚ฌ์šฉํ•˜๋ ค๋Š” ์ฐฐ๋‚˜, ํ”„๋กœ์ ํŠธ ๋‚ด๋ถ€ tailwind.config.ts ํŒŒ์ผ์— Plugin ๋ถ€๋ถ„์„ ์ถ”๊ฐ€ํ•˜๋ž€ ์•ˆ๋‚ด๋ฅผ ๋”ฐ๋ผ๊ฐ€๋ด…๋‹ˆ๋‹ค. 1. (์ƒํ™ฉ) Tailwind css ์ปดํฌ๋„ŒํŠธ ์‚ฌ์šฉ ํ•„์š” (1.1) ์ปดํฌ๋„ŒํŠธ ์ฝ”๋“œ ๋‚ด๋ถ€ 2. Tailwind CSS Plugin ์ถ”๊ฐ€ & ์„ค์น˜ (2.1). npm install @ํ”Œ๋Ÿฌ๊ทธ์ธ๋ช… (2.2). tailwind.config.ts ํŒŒ์ผ์— ํ”Œ๋Ÿฌ๊ทธ์ธ ์ถ”๊ฐ€ ๋ฐฉ๋ฒ• 1. (์ƒํ™ฉ) Tailwind css ์ปดํฌ๋„ŒํŠธ ์‚ฌ์šฉ ํ•„์š” (1.1) ์ปดํฌ๋„ŒํŠธ ์ฝ”๋“œ ๋‚ด๋ถ€ /* This ex.. ๊ณต๊ฐ์ˆ˜ 1 ๋Œ“๊ธ€์ˆ˜ 0 2023. 9. 27.
  • [Nextjs] ์ดˆ๊ธฐ ์„ค์น˜ & ์„ธํŒ… (Installation) ์ ‘๊ทผ (์š”์•ฝ) 1. Automatic Installation_NextJS app ๋งŒ๋“ค๊ธฐ (1.1) create-next-app ๋ช…๋ น์–ด ์‚ฌ์šฉ 2. Manual Installation_ํ•„์ˆ˜ ํŒจํ‚ค์ง€ ์„ค์น˜ (2.1). npm install (next@latest / react@latest / react-dom@latest) (2.2). package.json ํŒŒ์ผ ์—ด๊ณ  scripts ์ถ”๊ฐ€ํ•˜๊ธฐ (2.3). scripts ์ƒ์„ธ๋‚ด์šฉ ์ •๋ฆฌ 3. ํ”„๋กœ์ ํŠธ ๋‚ด, app ํด๋” ์ƒ์„ฑํ•˜๊ธฐ (3.1). app/layout.tsx ๋‚ด์— ์ฝ”๋“œ ์ถ”๊ฐ€ (3.2). app/page.tsx ๋‚ด์— ์ฝ”๋“œ ์ถ”๊ฐ€ 4. (optional) ํ”„๋กœ์ ํŠธ ๋‚ด, public ํด๋” ์ƒ์„ฑํ•˜๊ธฐ (4.1). app/layout.tsx ๋‚ด์— ์ฝ”๋“œ ์ถ”๊ฐ€ (4.2). .. ๊ณต๊ฐ์ˆ˜ 3 ๋Œ“๊ธ€์ˆ˜ 0 2023. 6. 1.
  • [NextJS] EsLint Delete `โ` eslint (prettier/prettier) ์—๋Ÿฌ ํ•ด๊ฒฐํ•˜๊ธฐ ํ•„์š”์„ฑ Next JS, Nest JS๋ฅผ ๋‹ค๋ฃจ๊ธฐ ์œ„ํ•ด ๊ฐœ๋ฐœ๋‹จ๊ณ„ ์ดˆ๊ธฐ, EsLint๋ฅผ ์„ค์ •ํ•ด์คฌ์Šต๋‹ˆ๋‹ค.(์„ค์ •๋ฐฉ๋ฒ•์€ ๊ธ€ ํ•˜๋‹จ ๋งํฌ ์ฒจ๋ถ€) ํ˜‘์—…์‹œ, ์ฝ”๋“œ์˜ ํ†ต์ผ์„ฑ๊ณผ ์œ ์ง€๋ณด์ˆ˜ ๋“ฑ์˜ ๋ฌธ์ œ๋ฅผ ์œ„ํ•ด EsLint๋ฅผ ์„ค์ •ํ•œ ๊ฒƒ์— ๊ทธ์น˜์ง€ ์•Š๊ณ  ๋ฐœ์ƒํ•œ ์—๋Ÿฌ์— ๋Œ€ํ•ด์„œ ํ•ด๊ฒฐํ•ด๋ณด๋Š” ์‹œ๊ฐ„์„ ๊ฐ–๊ณ ์ž ํ•ฉ๋‹ˆ๋‹ค. Delete `โ` eslint (prettier/prettier) ์—๋Ÿฌ์— ๋Œ€ํ•ด ์‚ดํŽด๋ณด๊ฒ ์Šต๋‹ˆ๋‹ค. ์ ‘๊ทผ 1. ๋ฐœ์ƒํ•œ ์—๋Ÿฌ ๋ชจ์Šต 2. ์—๋Ÿฌ ํ•ด๊ฒฐ๋ฐฉ์•ˆ ์ œ์‹œ ๋ฐฉ๋ฒ• 1. ๋ฐœ์ƒํ•œ ์—๋Ÿฌ ๋ชจ์Šต ์ฝ”๋”ฉ์„ ํ•˜๋˜ ์ค‘, ๊ฐ ์ฝ”๋“œ๋ผ์ธ ๋์— ๋นจ๊ฐ„๋ฐ‘์ค„์ด ๋ฐœ์ƒํ•˜๋ฉด์„œ (๊ตฌ๋™์€ ๋˜์ง€๋งŒ) ๊ต‰์žฅํžˆ ๋ˆˆ์— ๊ฑฐ์Šฌ๋ฆฌ๋Š” ์ƒํ™ฉ์— ๋…ธ์ถœ๋์Šต๋‹ˆ๋‹ค. Delete `โ` eslint (prettier/prettier) ์ •ํ™•ํ•œ ์—๋Ÿฌ๋ช…์นญ์€ ์œ„์™€ ๊ฐ™์ด ์‹๋ณ„์ด ๋์Šต๋‹ˆ๋‹ค. 2. ์—๋Ÿฌ ํ•ด๊ฒฐ๋ฐฉ์•ˆ ์ œ์‹œ.. ๊ณต๊ฐ์ˆ˜ 5 ๋Œ“๊ธ€์ˆ˜ 0 2023. 3. 9.
  • [NextJS] EsLint ์„ค์ •ํ•˜๊ธฐ ํ•„์š”์„ฑ ํ”„๋กœ์ ํŠธ์— ํ•จ๊ป˜ํ•˜๋Š” ํŒ€์›๋“ค์€ ์ €๋งˆ๋‹ค์˜ ์ฝ”๋”ฉ์Šคํƒ€์ผ์„ ๊ฐ–๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค. ๋•Œ๋ฌธ์— ๊ฐ๊ฐ์˜ ์Šคํƒ€์ผ์„ ์šฉ์ธํ•œ ์ฑ„, ํ˜‘์—…์„ ํ•˜๊ฒŒ ๋˜๋ฉด ํ›—๋‚  ์ฝ”๋“œ๋ฅผ ๋ณ‘ํ•ฉํ•˜๋Š” ๊ณผ์ •์—์„œ ์ˆ˜๋งŽ์€ ๊ณจ์นซ๊ฑฐ๋ฆฌ๋ฅผ ์•ˆ์„ ์ˆ˜๊ฐ€ ์žˆ๊ฒ ์Šต๋‹ˆ๋‹ค. ๋ฌธ๋ฒ• ์—๋Ÿฌ๋ฅผ ์ฐพ์•„ ํ‘œ์‹œํ•ด์ค„ ๋ฟ ์•„๋‹ˆ๋ผ, ํ”„๋กœ์ ํŠธ๋ฅผ ๊ฐœ๋ณ„์ ์œผ๋กœ ๊ฐœ๋ฐœํ•  ๋•Œ์—๋Š” ๋†“์น  ์ˆ˜ ์žˆ์—ˆ๋˜, ์ฝ”๋”ฉ์Šคํƒ€์ผ์˜ ํ†ต์ผ-์ ๊ฒ€์„ ํ•ด์ฃผ๋Š” ESLint๋ฅผ ์†Œ๊ฐœํ•˜๊ณ , ์„ค์ •ํ•˜๋Š” ๋ฐฉ๋ฒ•์„ ์•Œ์•„๋ณด๊ฒ ์Šต๋‹ˆ๋‹ค. ์ ‘๊ทผ 1. ESLint๋ž€? 2. ํ”„๋กœ์ ํŠธ ์ƒ์„ฑ 3. ESLint ์„ค์น˜ 4. ESLint ์„ค์ • ๋ฐฉ๋ฒ• 1. "ESLint" ๋ž€? "ESLint"๋Š” JavaScript ์ฝ”๋“œ์—์„œ ๋ฐœ์ƒ๋œ ๋ฌธ์ œ(์—๋Ÿฌ) ํŒจํ„ด์„ ์‹๋ณ„ํ•˜๊ธฐ ์œ„ํ•œ ์ •์  ์ฝ”๋“œ ๋ถ„์„ ๋„๊ตฌ์ž…๋‹ˆ๋‹ค. - ESLint๋ฅผ ์„ค์ •ํ•ด ์ ์šฉํ•˜๋Š” ๊ฒƒ๋งŒ์œผ๋กœ๋„ ๋‹ค์ˆ˜์˜ ์†๊ธธ์„ ๊ฑฐ์นœ ํ”„๋กœ์ ํŠธ๊ฐ€ ๋งˆ์น˜ 1๋ช…์ด ๊ฐœ.. ๊ณต๊ฐ์ˆ˜ 2 ๋Œ“๊ธ€์ˆ˜ 0 2023. 2. 28.
    ๋ฌธ์˜์•ˆ๋‚ด
    • ํ‹ฐ์Šคํ† ๋ฆฌ
    • ๋กœ๊ทธ์ธ
    • ๊ณ ๊ฐ์„ผํ„ฐ

    ํ‹ฐ์Šคํ† ๋ฆฌ๋Š” ์นด์นด์˜ค์—์„œ ์‚ฌ๋ž‘์„ ๋‹ด์•„ ๋งŒ๋“ญ๋‹ˆ๋‹ค.

    ยฉ Kakao Corp.