Windows에서 Nuxt.js 시작

이 가이드는 Windows에 Nuxt.js 웹 프레임워크를 설치하고 시작 및 실행할 수 있도록 도와줍니다.

Nuxt.js는 Vue.js, Node.js, Webpack 및 Babel.js를 기준으로 서버 렌더링 JavaScript 앱을 만들기 위한 프레임워크입니다. 이 파일은 Next.js를 토대로 생성되었습니다. 기본적으로 Vue에 대해 반복적으로 사용되는 프로젝트입니다. Next.js와 마찬가지로 모범 사례를 고려해서 생성되었으며, 별다른 구성 없이 간단하고 일관된 방식으로 "유니버설" 웹앱을 만들 수 있습니다. 이러한 "유니버설" 서버 렌더링 웹앱을 "동일 구조"라고도 합니다. 즉, 코드가 클라이언트와 서버 간에 공유됩니다.

Vue에 대한 자세한 내용은 Vue 개요 페이지를 참조하세요.

전제 조건

이 가이드에서는 다음을 포함하여 Node.js 개발 환경을 설치하는 단계를 이미 완료했다고 가정합니다.

• Linux 배포(예: Ubuntu)를 포함한 WSL(Linux용 Windows 하위 시스템)을 설치하고 WSL 2 모드에서 실행되고 있는지 확인합니다. PowerShell을 열고 wsl -l -v를 입력하여 확인할 수 있습니다.
• WSL 2에 Node.js 설치: 여기에는 버전 관리자, 패키지 관리자, Visual Studio Code 및 원격 개발 확장 프로그램이 포함됩니다.

Linux 서버 또는 Docker 컨테이너를 실행할 때 더욱 우수한 성능 속도, 시스템 호출 호환성 및 패러디를 위해 NodeJS 앱을 사용하는 경우 Linux용 Windows 하위 시스템을 사용하는 것이 좋습니다.

Important

WSL에 Linux 배포를 설치하면 파일을 저장할 수 있는 디렉터리가 생성됩니다(\\wsl\Ubuntu-20.04)(Ubuntu-20.04를 사용 중인 Linux 배포로 대체). Windows 파일 탐색기에서 이 디렉터리를 열려면 WSL 명령줄을 열고 cd ~를 사용하여 홈 디렉터리를 선택한 후 explorer.exe . 명령을 입력합니다. 이때 탑재된 C 드라이브(/mnt/c/Users/yourname$)에 NodeJS를 설치하거나 작업할 파일을 저장하지 않도록 주의하세요. 그렇지 않으면 설치 및 빌드 시간이 상당히 늘어납니다.

Nuxt.js 설치

Nuxt.js를 설치하려면 설치하려는 통합 서버 측 프레임워크, UI 프레임워크, 테스트 프레임워크, 모드, 모듈 및 linter에 대한 일련의 질문에 답해야 합니다.

1. WSL 명령줄(Ubuntu)을 엽니다.

2. 새 프로젝트 폴더를 만들고(mkdir NuxtProjects) 해당 디렉터리를 입력합니다(cd NuxtProjects).

3. Nuxt.js를 설치하고 다음과 같이 프로젝트를 만듭니다('my-nuxt-app'을 원하는 앱 이름으로 바꿈). npm create nuxt-app my-nuxt-app

4. 이제 Nuxt.js 설치 관리자가 다음 질문을 표시합니다.

   • 프로젝트 이름: my-nuxtjs-app
   • 프로젝트 설명: 내 Nuxt.js 앱에 대한 설명입니다.
   • 작성자 이름: 내 GitHub 별칭을 사용합니다.
   • Yarn 또는 Npm 패키지 관리자를 선택합니다. 예를 들어 NPM을 사용합니다.
   • UI 프레임워크(없음, Ant Design Vue, 부트스트랩 Vue 등)를 선택합니다. 이 예제에서는 Vuetify를 선택하지만, Vue Community는 이러한 UI 프레임워크에 대한 요약 비교를 만들어 프로젝트에 가장 적합한 기능을 선택하는 데 도움을 줍니다.
   • 사용자 지정 서버 프레임워크(없음, AdonisJs, Express, Fastify 등)를 선택합니다. 이 예제에서는 없음을 선택하지만, Dev.to 사이트에서 2019-2020 서버 프레임워크 비교를 찾을 수 있습니다.
   • Nuxt.js 모듈(스페이스바를 사용하여 모듈을 선택하거나 원하지 않는 경우 입력): Axios(HTTP 요청 간소화) 또는 PWA 지원(서비스 작업자, manifest.js 파일 등 추가)을 선택합니다. 이 예제를 위한 모듈은 추가하지 않도록 하겠습니다.
   • linting 도구(ESLint, Prettier, Lint 스테이징 파일)를 선택합니다. ESLint(코드를 분석하고 잠재적 오류를 경고하는 도구)를 선택합니다.
   • 테스트 프레임워크(없음, Jest, AVA)를 선택합니다. 이 빠른 시작에서는 테스트를 진행하지 않을 것이므로 없음을 선택합니다.
   • 렌더링 모드(유니버설(SSR) 또는 SPA(단일 페이지 앱))를 선택합니다. 이 예제에서는 유니버설(SSR)을 선택하겠지만, Nuxt.js 문서에 몇 가지 차이점이 나와 있습니다. 즉, SSR의 경우 앱의 서버 렌더링을 위해 Node.js 서버를 실행해야 하며, SPA는 정적 호스팅에 사용됩니다.
   • 개발 도구 jsconfig.json을 선택합니다(Intellisense 코드 완성을 위해 VS Code에서 권장됨).

5. 프로젝트를 만든 후에는 cd my-nuxtjs-app을 입력하여 Nuxt.js 프로젝트 디렉터리로 이동하고 code .를 입력하여 VS Code WSL-Remote 환경에서 프로젝트를 엽니다.

   

6. Nuxt.js가 설치되면 다음 세 가지 명령을 알고 있어야 합니다.

   • npm run dev: 핫 다시 로드, 파일 감시 및 작업 재실행을 통해 개발 인스턴스 실행
   • npm run build: 프로젝트 컴파일
   • npm start: 프로덕션 모드에서 앱 시작

   VS Code에서 통합된 WSL 터미널을 엽니다(보기 > 터미널). 터미널 경로가 프로젝트 디렉터리(~/NuxtProjects/my-nuxt-app$)를 가리키는지 확인합니다. 그런 후 npm run dev를 사용하여 새 Nuxt.js 앱의 개발 인스턴스를 실행해 봅니다.

7. 로컬 개발 서버가 시작됩니다(클라이언트 및 서버 컴파일에 대한 몇 가지 유용한 진행률 표시줄 표시). 프로젝트가 성공적으로 작성되면 터미널에 컴파일 소요 시간과 함께 "컴파일 성공"이 표시됩니다. 웹 브라우저에서 http://localhost:3000을 가리켜 새 Nuxt.js app 앱을 엽니다.

   

8. VS Code 편집기에서 pages/index.vue 파일을 엽니다. <v-card-title class="headline">Welcome to the Vuetify + Nuxt.js template</v-card-title> 페이지 제목을 찾아 <v-card-title class="headline">This is my new Nuxt.js app!</v-card-title>으로 변경합니다. 웹 브라우저가 여전히 localhost: 3000에서 열려 있는 상태에서 변경 내용을 저장하고 핫 다시 로드 기능이 변경 내용을 자동으로 컴파일하고 브라우저에서 업데이트합니다.

9. Nuxt.js에서 오류를 처리하는 방법을 살펴보겠습니다. 제목 코드가 <v-card-title class="headline">This is my new Nuxt.js app!과 같이 표시되도록 </v-card-title> 닫는 태그를 제거합니다. 이 변경 내용을 저장하면 브라우저 및 터미널에 <v-card-title>에 대한 닫는 태그가 없다는 것을 알려주는 컴파일 오류와 코드의 오류 위치를 나타내는 줄 번호가 표시됩니다. </v-card-title> 닫는 태그를 바꾸고 저장한 후 페이지를 다시 로드합니다.

F5 키를 선택하거나 메뉴 모음에서 보기 > 디버그(Ctrl+Shift+D) 및 보기 > 디버그 콘솔(Ctrl+Shift+Y)로 이동하여 Nuxt.js 앱에서 VS Code의 디버거를 사용할 수 있습니다. 디버그 창에서 기어 아이콘을 선택하면 디버깅 설정 정보를 저장하기 위한 시작 구성(launch.json) 파일이 생성됩니다. 자세히 알아보려면 VS Code 디버깅을 참조하세요.

Nuxt.js에 대한 자세한 내용은 Nuxt.js 가이드를 참조하세요.