현재 맡은 프로젝트들이 모두 Nuxt2를 사용하고 있다. Nuxt3는 글 작성일 기준, RC 버전으로 출시되어 있는데 언젠가는 마이그레이션이 필요할 것 같아서 공식 문서를 보고 틈틈이 공부해보려고 한다. Prerequisites Node.js (버전 14.16이거나 16.11이상으로!) VS Code Volar Extension (VS Code에서 Vue Language Features (Volar), TypeScript Vue Plugin (Volar) 설치) 프로젝트 생성 터미널에서 아래의 명령어로 프로젝트를 생성한다. (Nuxt2 프로젝트를 생성할 때보다 훨씬 빠르고 간단하더라구요) npx nuxi init [앱 이름 ex.nuxt-app] Nuxt2와 다르게 pages나 middleware등의 디..
env란 환경변수처럼 key value 형태의 변수라고 할 수 있고, Node.js기반에서 사용할 수 있다고 한다 변수를 사용함으로써 조금 더 보안성이 있는 코드 작성이 가능하다고 한다 NODE_ENV NODE_ENV를 배포 모드와 개발 모드 두 가지로 나누어 사용할 수 있다 production 파일 캐싱, 에러 메시지 감추기 등 배포에 적합환 환경 설정 development 파일 캐싱 방지, 디버깅을 위한 상세한 에러 메시지 보이기 등 개발에 도움을 줄 수 있는 환경으로 설정 nuxt.config.js에서 사용하는 방법 export default { env: { baseUrl: process.env.NODE_ENV === 'production' ? 'https://app.co.kr' : 'http://..
프로젝트 생성 터미널에서 다음의 명령어를 입력한다. yarn create nuxt-app 아래와 같이 설정했는데 기본 설정 되어 있는 것으로 모두 선택했다. 프로젝트 실행 프로젝트를 열고 아래의 명령어로 실행하면 된다. yarn dev localhost:3000으로 접속하면 아래의 화면이 뜨고 프로젝트가 잘 생성된 것을 확인할 수 있다.
Nuxt는 디렉토리와 파일명 생성 구조에 따라 라우팅이 자동으로 되는 편리함이 있어서 간단한 프로젝트에는 따로 Express로 미들웨어를 구성할 필요가 없을 것 같다. 하지만 라우팅시, html, js 이전에 어떤 작업이 필요하다면 (Spring의 Controller와 같은? 이 비유가 맞는지 아직 확실하진 않지만) 아무튼 그 작업이 필요해서 Express를 사용하게 되었다. Nuxt에도 created, mounted등의 함수로 간편하게 구현할 수 있지만 html이 필요하지 않은 상황에 디렉토리와 파일을 생성하는 것보다 Express를 이용하면 더 깔끔할 것이라 생각이 들었다. ++ 추가로 Express를 먼저 공부한 후 Nuxt에 Express를 적용해 보았다. https://mean-ji.tistor..
