요즘 Nuxt.js에 푹 빠져있음. 너무 재밌음.
(사실 이전부터 빠져있었는데 플젝땜에 할시간이 없었음ㅋㅋㅋ)
Nuxt는 라우팅이 자동이라 Vue보다도 손이 덜 간다는 엄청난 강점이 있음
킹갓넉스트
(1) Node.js 설치
Node.js — 어디서든 JavaScript를 실행하세요
Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine.
nodejs.org
여기 들어가서 Node.js 다운받고 설치 ㄱ
설치할땐 엄한거 건드리지 말고 무조건 기본 순정상태로 Next 연타가 근본임
(2) Yarn 설치
터미널에 다음을 입력한다.
npm install -g yarn
npm써도 되긴하는데 난 yarn이 더 익숙함
npm과 yarn 둘 다 Node.js의 패키지 매니저로, 프로젝트의 의존성(라이브러리) 설치 및 관리를 도와주는 일종의 도구라고 생각하면 되는데, 고민된다면 둘의 차이점을 비교해 보겠음
| 비교 항목 | npm | yarn |
| 출시 시기 | 2010년 (Node.js와 함께) | 2016년 (Facebook 주도 개발) |
| 속도 | 예전엔 느렸지만 v7+부터 많이 개선됨 | 캐싱, 병렬처리로 빠름 |
| Lock 파일 | package-lock.json 사용 | yarn.lock 사용 |
| 워크스페이스 | v7부터 지원 | 일찍부터 지원(Monorepo에 강점) |
| 보안 점검 | npm audit 으로 취약점 점검 가능 | yarn audit 가능 (npm 기반) |
| 명령어 직관성 | 익숙한 명령어 (install, update, ...) | 약간 다름 (add, remove, ...) |
| 의존성 설치 안정성 | 버전에 따라선 종속성 충돌 가능성 있음 | lockfile 기반으로 더 일관된 설치 가능 |
| 사용자층 | Node.js 공식 툴이므로 기본 사용자 많음 | Front-end 중심 개발자에게 인기 |
📌 주요 장단점 요약
✅ Yarn의 장점
- yarn install 속도가 빠르고 캐시 활용이 효율적
- 병렬 설치로 성능 우수
- yarn.lock 파일이 명확하게 관리됨
- 명령어가 간결: yarn add, yarn remove, yarn upgrade
❌ Yarn의 단점
- 일부 레거시 프로젝트에서 npm만 공식 지원하는 경우 있음
- 초기 설치 시 npm보다 익숙하지 않을 수 있음
✅ npm의 장점
- Node.js 설치 시 기본 포함되어 별도 설치 필요 없음
- 커뮤니티 규모가 크고 문서도 많음
- v7 이후로는 yarn과의 성능 격차가 많이 줄었음
❌ npm의 단점
- 예전 버전에서는 느리고 의존성 충돌 이슈가 자주 발생
- npm install 시 결과가 환경마다 달라질 수 있음 (최근 개선됨)
💡 실무에서의 선택 팁
- 개인 프로젝트: yarn 추천 (빠르고 명령어 직관적)
- 회사나 팀 협업: 팀에서 통일된 선택 필요 (혼용 금지)
- Monorepo 사용: yarn (특히 Yarn Workspaces) 추천
- 기존 프로젝트가 npm 기반: 그대로 npm 유지하는 것이 무난
암튼 이런 차이로, 난 yarn을 자주 씀.
참고로 설치 후 버전 확인은, 터미널에 다음을 입력하면 됨.
yarn -v
설치됐는지 확인할 겸 꼭 설치 후에 버전확인 한번씩 해 주자.
(3) Nuxt 프로젝트 생성
yarn create nuxt-app prj-test
마찬가지로 터미널에 입력하면 되고,
뒤의 prj-test 는 생성할 프로젝트 이름임. 예를들어 C:\study 폴더 안에서 이 명령을 실행했다면,
이렇게, C:\study 안에 prj-test라는 폴더 하나 생겨있을것임.
앞으로 님은 플젝 구동을 이 폴더에서 무조건 한다고 생각하면 됨.
참고로 이런게 뜬다면 당황하지 말고
아래에 yarn (current) 라고 초록색 선택돼있는 상태에서 그냥 엔터 치면 알아서 진행됨.
이게 왜 뜨냐면, 프로젝트 초기 세팅 시에 어떤 패키지매니저를 사용해서 의존성을 설치할지를 물어보는건데
개발자마다 사용하는 툴이 다 다르기 때문에, Nuxt가 자동으로 선택해주기 보다는, 명확한 선택을 유도하려고
일부러 편의를 위해 한번씩 이렇게 물어보는것 같다. 크게 대단히 의미있는 질문은 아니라고 보면 됨.
깃 레포지토리 쓸거냐고도 물을수도 있는데, 쓸거면 y를, 안쓸거면 n을 입력하면 됨.
난 그냥 블로그 포스팅용으로 하고있는거라 n 선택했음.
(4) Nuxt 프로젝트 실행
C:\study 경로로 예를 들자면,
프로젝트 생성했다고 자동으로 경로가 바뀌는건 아니니까
cd prj-test
yarn dev
꼭 터미널에서 cd를 사용해서 플젝 폴더인 prj-test폴더로 경로를 잡아주고
yarn dev (혹은 yarn run dev) 로 실행해주면 됨.
(5) 실행 확인
저기 보면 http://localhost:3000/ 이라고 있음
(참고로, 프로젝트 생성 후 터미널에 뭘 입력하려고 하는데 입력란이 안보인다면, 터미널 영역 한번 클릭하고 ctrl+c 누르거나, vscode 상단에서 새 터미널 켜던가 하셈)
크롬 브라우저 하나 띄워서 http://localhost:3000/ 입력 ㄱㄱ
이 페이지 보이면 님도 이제 개발 시작할수있음ㅋㅋ