๋ณธ๋ฌธ ๋ฐ”๋กœ๊ฐ€๊ธฐ

Programming/Vue

[vue3] pnpm์œผ๋กœ ํ”„๋กœ์ ํŠธ ์ƒ์„ฑํ•˜๊ธฐ (ft. @tsconfig/node18/tsconfig.json ์˜ค๋ฅ˜)

728x90
๋ฐ˜์‘ํ˜•

pnpm์œผ๋กœ vue ํ”„๋กœ์ ํŠธ ์ƒ์„ฑํ•˜๊ธฐ

vue3 ํ”„๋กœ์ ํŠธ์˜ ํŒจํ‚ค์ง€ ๊ด€๋ฆฌ์ž๋ฅผ pnpm์œผ๋กœ ์„ ํƒํ•˜๊ณ  ํ”„๋กœ์ ํŠธ๋ฅผ ์ƒˆ๋กœ ์ƒ์„ฑํ•ด๋ณธ๋‹ค.

 

๐Ÿ›  ํ”„๋กœ์ ํŠธ ์ƒ์„ฑ

$ pnpm create vue

์œ„์™€ ๊ฐ™์ด ํ”„๋กœ์ ํŠธ ์ƒ์„ฑ ๋ช…๋ น์–ด๋ฅผ ์‚ฌ์šฉํ•œ๋‹ค. pnpm create vue@latest ์™€ ๋™์ผํ•˜๊ฒŒ ์ตœ์‹ ๋ฒ„์ ผ์˜ vue๋ฅผ ์‚ฌ์šฉํ•œ๋‹ค.

๋งŒ์•ฝ, ํŠน์ • ๋ฒ„์ ผ์˜. vue๋ฅผ ์‚ฌ์šฉํ•˜๋ ค๋ฉด "pnpm create vue@์›ํ•˜๋Š”๋ฒ„์ ผ" ์œผ๋กœ ๋ช…๋ น์–ด๋ฅผ ์ˆ˜์ •ํ•ด์ค€๋‹ค.

 

๐Ÿ›  ์˜ต์…˜ ์„ ํƒํ•˜๊ธฐ

โœ” Project name: …
โœ” Add TypeScript? … No / Yes
โœ” Add JSX Support? … No / Yes
โœ” Add Vue Router for Single Page Application development? … No / Yes
โœ” Add Pinia for state management? … No / Yes
โœ” Add Vitest for Unit Testing? … No / Yes
โœ” Add an End-to-End Testing Solution? › No
โœ” Add ESLint for code quality? … No / Yes
โœ” Add Prettier for code formatting? … No / Yes

ํ”„๋กœ์ ํŠธ๋ฅผ ์ƒ์„ฑ ๋ช…๋ น์–ด๋ฅผ ์‚ฌ์šฉํ•˜๋ฉด ์œ„ ์ฒ˜๋Ÿผ ์˜ต์…˜์„ ํ•˜๋‚˜์”ฉ ์„ ํƒํ•˜๊ฒŒ ์งˆ์˜๊ฐ€ ๋‚˜์˜จ๋‹ค.

 

1. ํ”„๋กœ์ ํŠธ ์ด๋ฆ„ -> ๋ณธ์ธ์ด ์›ํ•˜๋Š” ํ”„๋กœ์ ํŠธ ์ด๋ฆ„์„ ์ ๋Š”๋‹ค.

2. ํƒ€์ž…์Šคํฌ๋ฆฝ์Šค ์‚ฌ์šฉ์—ฌ๋ถ€ -> ํƒ€์ž…์Šคํฌ๋ฆฝํŠธ๋Š” ์‚ฌ์šฉํ•œ๋‹ค.

3. JSX ์‚ฌ์šฉ์—ฌ๋ถ€ -> js์— html๋ฅผ ๊ฒฐํ•ฉํ•œ ์ฝ”๋“œ๋ฅผ ์ด์šฉ ๊ฐ€๋Šฅํ•˜๋‚˜ js ๊ณต์‹ ๋ฌธ๋ฒ•์ด ์•„๋‹ˆ๊ธฐ์— ์‚ฌ์šฉํ•˜์ง€ ์•Š๋Š”๋‹ค.

4. ๋ผ์šฐํ„ฐ ์‚ฌ์šฉ ์—ฌ๋ถ€ -> url ๋ณ€๊ฒฝ์˜ ๋ผ์šฐํ„ฐ๋ฅผ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๊ธฐ์— ์ถ”๊ฐ€ํ•œ๋‹ค.

5. ํ”ผ๋‹ˆ์•„ ์‚ฌ์šฉ์—ฌ๋ถ€ -> ์Šคํ† ์–ด์˜ ์œ ์šฉํ•œ ๊ธฐ๋Šฅ์„ ์ œ๊ณตํ•˜๋‹ˆ ์‚ฌ์šฉํ•œ๋‹ค.

6. vitest ์‚ฌ์šฉ์—ฌ๋ถ€ -> ๊ฐœ์ธ ํ”„๋กœ์ ํŠธ๋ผ์„œ ํ…Œ์ŠคํŠธ๊ฐ€ ์ˆ˜์›”ํ•˜์—ฌ ์‚ฌ์šฉํ•˜์ง€ ์•Š๋Š”๋‹ค.

7. end-to-end test -> ๋งˆ์ฐฌ๊ฐ€์ง€๋กœ ์‚ฌ์šฉํ•˜์ง€ ์•Š๋Š”๋‹ค.

8. ESLint -> ๋ฌธ๋ฒ• ์ฒดํฌ๋ฅผ ๋„์™€์ฃผ๋Š” ๊ธฐ๋Šฅ์ธ๋ฐ ํŽธ๋ฆฌํ•˜๋‹ˆ ์‚ฌ์šฉํ•œ๋‹ค.

9. Prettier -> ์ž‘์„ฑํ•˜ ์ฝ”๋“œ๋ฅผ ์˜ˆ์˜๊ฒŒ ์ •๋ฆฌํ•ด์ฃผ๋Š” ํ”Œ๋Ÿฌ๊ทธ์ธ์œผ๋กœ ํŽธํ•˜๋‹ˆ ์‚ฌ์šฉํ•œ๋‹ค.

์ถ”๊ฐ€ํ•œ ํ”Œ๋Ÿฌ๊ทธ์ธ

์œ„ ํ”Œ๋Ÿฌ๊ทธ์ธ๋“ค์€ ํ•„์š”์‹œ ๋‹ค์‹œ ์ถ”๊ฐ€ํ•  ์ˆ˜ ์žˆ์œผ๋‹ˆ ๋‹น์žฅ ๋ฌด์—‡์ธ์ง€ ๋ชจ๋ฅด๊ฒ ์œผ๋ฉด ๋‹ค No๋ฅผ ์„ ํƒํ•ด๋„ ๋ฌด๋ฐฉํ•˜๋‹ค.

ํ”„๋กœ์ ํŠธ ์ƒ์„ฑ ์™„๋ฃŒ

์œ„ ์ฒ˜๋Ÿผ ํ”„๋กœ์ ํŠธ๊ฐ€ ์ƒ์„ฑ์ด ์™„๋ฃŒ๋ฉ๋‹ˆ๋‹ค.

์„ ํƒํ•œ ์˜ต์…˜ ๊ตฌ์„ฑ์— ๋”ฐ๋ผ์„œ ๋ชจ์–‘์ด ์กฐ๊ธˆ์€ ๋‹ค๋ฅผ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

 

ํ”„๋กœ์ ํŠธ ์ƒ์„ฑ ํ›„ json ํŒŒ์ผ์— ๋นจ๊ฐ„์ƒ‰ ์ค„์ด ์ƒ๊ธฐ๊ณ  ์˜ค๋ฅ˜๊ฐ€ ๋ฐœ์ƒํ•˜๋Š” ๊ฒฝ์šฐ๊ฐ€ ์žˆ๋Š”๋ฐ ์ด ๊ฒฝ์šฐ์—๋Š” ์‚ฌ์šฉํ•˜๊ณ  ์žˆ๋Š” IDE๋ฅผ ๊ป๋‹ค ์ผœ์ฃผ์‹œ๋ฉด ๋ฉ๋‹ˆ๋‹ค.

์ƒ์„ฑ๋œ ํŒŒ์ผ์˜ ์„ค์ •์„ IDE ์ž˜ ์ธ์‹ํ•˜์ง€ ๋ชปํ•˜๋Š” ๊ฒฝ์šฐ๊ฐ€ ์ข…์ข… ์žˆ์Šต๋‹ˆ๋‹ค.

์ €์˜ ๊ฒฝ์šฐ๋„ "tsconfig.node.json" ํŒŒ์ผ์—์„œ "extends": "@tsconfig/node18/tsconfig.json" ๋ฅผ ์ฐพ์„ ์ˆ˜ ์—†๋‹ค๋Š” ์˜ค๋ฅ˜๊ฐ€ ๋‚˜์™”๋Š”๋ฐ IDE๋กœ ์‚ฌ์šฉํ•˜๋Š” VScode ๋ฅผ ์žฌ๋ถ€ํŒ…ํ•ด์ฃผ๋‹ˆ ๋ฐ”๋กœ ํ•ด๊ฒฐ๋˜์—ˆ์Šต๋‹ˆ๋‹ค.

728x90
๋ฐ˜์‘ํ˜•