본문 바로가기

전체 글

(92)
[Vue.js] npx란? npx란?npx는 Node.js 패키지 관리자(NPM)에서 제공하는 실행 도구입니다. 주로 npm으로 설치된 패키지나 로컬에 설치되지 않은 패키지를 쉽게 실행하기 위해 사용됩니다. 주요 기능과 특징글로벌 설치 없이 패키지 실행로컬에 설치하지 않은 패키지라도 npx를 사용하면 일회성으로 해당 패키지를 실행할 수 있습니다.예를 들어, create-react-app을 설치하지 않고 React 프로젝트를 생성할 때:npx create-react-app my-app  이 명령은 create-react-app을 설치하지 않고도 바로 실행할 수 있습니다.로컬 설치된 명령어 실행프로젝트에 로컬로 설치된 Node.js 패키지를 실행할 수 있습니다. 보통 로컬에 설치된 패키지를 실행하려면 전체 경로를 지정해야 하지만, n..
[Vue.js] Nuxt3 프로젝트에서 Node 또는 PM2로 실행하기 Nuxt 애플리케이션은 Node.js 서버에 배포하거나, 정적 호스팅을 위해 미리 렌더링하거나, 서버리스 또는 엣지(CDN) 환경에 배포할 수 있습니다. Nuxt 빌드nuxt 빌드를 실행했을 때, 생성되는 결과물이 노드 서버를 실행하는 entry point(진입점)가 됩니다.npm run build Node로 실행이렇게 하면 기본적으로 포트 3000에서 listen하는 Nuxt 서버가 실행됩니다.node .output/server/index.mjs  PM2로 실행하기ecosystem.config.cjs 파일 작성하기module.exports = { apps: [ { name: 'NuxtAppName', port: '3000', exec_mode: 'cluster', ..
[Vue.js] Nuxt3 렌더링 모드(Rendering Modes) 렌더링 모드(Rendering Modes) Nuxt는 다양한 렌더링 모드를 지원합니다. 기본적으로는 범용 렌더링을 사용하여 사용자 경험, 성능 및 검색 엔진 최적화를 개선하지만, 클라이언트 사이드 렌더링도 지원하며, 하이브리드 렌더링과 CDN 엣지 서버에서 애플리케이션을 렌더링하는 옵션도 제공합니다. 브라우저와 서버는 모두 Vue.js 컴포넌트를 HTML 요소로 변환할 수 있습니다. 렌더링 모드는 한 줄의 설정으로 변경할 수 있습니다. 브라우저와 서버 모두 JavaScript 코드를 해석하여 Vue.js 컴포넌트를 HTML 요소로 변환할 수 있습니다. 이 과정을 렌더링이라고 합니다. Nuxt는 유니버설 렌더링과 클라이언트 사이드 렌더링을 모두 지원하며, 두 가지 방식은 각각 장단점이 있습니다.Nuxt는 ..
[Vue.js] Cannot start nuxt: Cannot find module 'pinia/dist/pinia.mjs' 오류 해결하기 Nuxt3에서 Pinia를 사용하기 위해 Nuxt 가이드 문서에 따라 @pinia/nuxt 모듈을 설치하고 예제 코드를 추가하였더니 아래와 같은 오류가 발생하였다. ERROR Cannot start nuxt: Cannot find module 'pinia/dist/pinia.mjs' 해결 방법npm install pinia  추가로 pinia 설치하다가 오류가 나는 경우가 있다.npm error code ERESOLVEnpm error ERESOLVE could not resolve 이 경우 아래 코드를 package.json 파일에 추가해준다.{ ... "overrides": { "vue": "latest" }, ...}  Referencehttps://nuxt.com/modules/p..
[Vue.js] Nuxt3 nuxti18n Invalid linked format error 해결하기 nuxti18n을 적용하면서 기존에 vue-i18n에서 사용하던 국제화 텍스트들을 그대로 가져왔더니 아래와 같은 오류가 발생하였다. 오류 내용[오후 7:20:48] ERROR [unplugin-vue-i18n] Invalid linked format (error code: 10) in /Users/user/Documents/workspace/vue3/i18n/en-US.json target message: abcd1234@naver.com target message path: email 1 | abcd1234@naver.com  오류 원인이유는 vue-i18n의 v9 버전 부터 @가 vue-i18n에서 사용하는 특수문자 중 하나가 되었고, nuxti18n은 vue-i18n v9 버전을 포함..