JavaScript (40) 썸네일형 리스트형 [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 버전을 포함.. [Vue.js] Cannot find module 'vue-framework'. Did you mean to set the 'moduleResolution' option to 'node', or to add aliases to the 'paths' option? Vetur(2792) 오류 해결하기 Vue3 + Nuxt3 기반의 프로젝트를 신규 구축하다가 외부 라이브러리를 추가하려고 하였더니 아래와 같은 오류가 발생하였다. 문제 코드 오류 내용Cannot find module 'vue-framework'. Did you mean to set the 'moduleResolution' option to 'node', or to add aliases to the 'paths' option? Vetur(2792) 해결 방법tsconfig.json 파일에 아래 코드를 추가한다.{ ... "compilerOptions": { "moduleResolution": "node" }} [Vue.js] Nuxt3에서 Less 전역으로 적용하기 / 변수 전역으로 사용하기 Nuxt3 프로젝트를 신규로 구축하면서 색상 등을 정의해 놓은 공통 Less 파일을 전역으로 설정하고 싶었다.Nuxt 공식 문서와 구글 검색을 통해 적용하다 보니 적용이 되었다!이제 각 SFC 스타일 마다 import를 하지 않아도 Less 공통 변수를 불러서 사용이 가능해졌다.export default defineNuxtConfig({ ... vite: { css: { preprocessorOptions: { less: { additionalData: '@import "~/assets/less/common.less";', }, }, }, },}); Referencehttps://nuxt.com/docs/getting-start.. [Vue.js] Nuxt3에서 외부 라이브러리 적용하기 Nuxt3 기반의 프로젝트를 신규 구축하면서 사내에서 직접 개발한 라이브러리 적용이 필요했다.기존의 Vue 프로젝트에서는 app.use()를 사용하였었는데, Nuxt3에서 어떻게 적용해야할까 찾아보았다. 적용 방법nuxtApp.vueApp.use()를 사용하면 된다. Referencehttps://nuxt.com/docs/api/composables/use-nuxt-app#vueapp [SonarQube][Security Hotspot] Make sure bypassing Vue built-in sanitization is safe here. 어떤게 위험한가요?Vue.js 프레임워크는 innerHtml 대신 innerText와 같은 기본 API 브라우저를 사용하여 HTML 콘텐츠를 자동으로 이스케이프 처리하여 XSS 취약점을 방지합니다.HTML을 렌더링하기 위해 innerHtml 및 유사한 API를 명시적으로 사용하는 것은 여전히 가능합니다. 실수로 악성 HTML 데이터를 렌더링하면 애플리케이션에 XSS 취약점이 발생하고 민감한 정보에 액세스/수정하거나 다른 사용자를 사칭하는 등 광범위한 심각한 공격이 가능해집니다. 위험 평가민감한 코드 예Vue.js 템플릿을 사용할 때 v-html 지시문을 사용하면 검사 없이 HTML 렌더링이 가능합니다: 렌더링 기능을 사용할 때 innerHTML 속성을 사용하면 정리 없이 HTML 렌더링이 가능합니다.. 이전 1 2 3 4 5 다음