반응형 VueJS/NuxtJS11 [NuxtJS] The client-side rendered virtual DOM tree is not matching server-rendered content. NuxtJS 렌더링 오류 NuxtJS 개발 환경에서 작업을 하다가 렌더링 오류가 발생하였다. 어찌 보면 해당 오류는 아주 흔하게 볼 수 있는 오류가 아닐까 생각된다. 에러 내용을 자세히 살펴보자. The client-side rendered virtual DOM tree is not matching server-rendered content. This is likely caused by incorrect HTML markup, for example nesting block-level elements inside , or missing . Bailing hydration and performing full client-side render. 오류 내용은 매우 심플하다 "클라이언트 사이드에서 렌더링 된 가상.. 2023. 6. 5. [NuxtJS] 미들웨어(middleware) 사용하기 미들웨어(Middleware) NuxtJS의 라이프 사이클을 보면 nuxtServerInit 다음에 Route Middleware라는 녀석이 있다. 여기서 미들웨어면 미들웨어지 왜 "라우트 미들웨어"라는 명칭을 사용하냐면 NuxtJS에서는 서버 미들웨어와 라우트 미들웨어 두 종류가 존재하기 때문에 미들웨어라는 명칭보다는 라우트 미들웨어라는 명칭을 사용하는 듯 하다. (하지만 일반적으로 NuxtJS에서 미들웨어라 하면 라우트 미들웨어를 지칭하기 때문에 그냥 미들웨어로 지칭하도록 하겠다.) NuxtJS에서 미들웨어는 크게 익명 미들웨어(Anonymous Middleware)와 네임드 미들웨어(Named Middleware)로 나뉜다. 익명 미들웨어(Anonymous Middleware) 익명 미들웨어는 특정.. 2023. 2. 14. [NuxtJS] 개발/운영 분기(NODE_ENV) (ft. cross_env) NODE_ENV 보통 노드 환경에서 개발을 하게 되면 개발(development)과 운영/배포(production)로 분기를 env값을 이용해 구성한다. 많은 블로그와 코드들을 보면서 봤을 텐데 보통 아래와 같이 선언해두고 사용한다. { "name": "test", "version": "1.0.0", "private": true, "scripts": { "dev": "NODE_ENV=development nuxt", "build": "nuxt build", "start": "NODE_ENV=production nuxt start", "generate": "nuxt generate" }, "dependencies": { "core-js": "^3.25.3", "nuxt": "^2.15.8", "vue": .. 2023. 1. 18. [NuxtJS] NuxtJS에서 .env 환경변수 사용하기 어떤 환경으로 프로젝트를 한다 해도 대부분의 프로젝트에서 .env 환경변수 파일을 사용할 것이라고 생각된다. 사실 나 역시 알고만 있었지 실제로는 처음 써보기 때문에 그냥 .env파일만 선언해서 사용하면 되는 줄 알았는데, NuxtJS는 좀 다른 환경이랑은 다르게 사용해야 하는 듯싶어 이렇게 기록해 둔다. NuxtJS에서 .env 사용하기 당연히 구글링을 해봤다면 내가 작성한 글 말고도 다른 글을 보고 해결을 했을 수 있다. 하지만 대부분의 NuxtJS 관련 글을 보고 있자니 dotenv 플러그인을 설치하는 것부터 시작하더라. 여기서 첫 번째 의문이 들었다. NuxtJS에서 dotenv플러그인을 사용해야만 .env를 사용할 수 있다면 이미 내장되어 있지 않을까? 라는 합리적 추론을 바탕으로 패키지를 뒤져.. 2023. 1. 17. [NuxtJS] nuxtServerInit이란? nuxtServerInit NuxtJS의 라이프 사이클을 보면 최상단에 존재하는 nuxtServerInit이라는 녀석에 대해 의문을 가져본 적이 있을 것이다. nuxtServerInit은 단어 그대로 서버 측에서 실행되는 녀석인데, 특이하게도 NuxtJS의 universal 모드에서만 사용할 수 있는 action 함수이다. actions: { nuxtServerInit ({ commit }, { req }) { if (req.session.user) { commit('user', req.session.user) } } } 위 예제처럼 nuxtServerInit은 서버 사이드 렌더링 시점에 실행되기 때문에 미리 데이터를 설정해 놓고나 서버에서만 접근할 수 있는 데이터를 다룰 때 유용하다. 그리고 또 특이한.. 2023. 1. 17. [NuxtJS] asyncData와 fetch 비교 및 사용법 asyncData VS fetch NuxtJS를 사용하게 되면 자주 보게 되는 혹은 꼭 알고 있어야 하는 개념 중에 하나가 asyncData와 fetch가 아닐까 싶다. asyncData와 fetch의 경우에는 VueJS에서는 제공하지 않았던 것이기 때문에 Vue를 쓰다가 Nuxt를 사용하게 된다면 알고 가야 할 개념이다. 물론 그 뿐만아니라 vue랑은 lifecycle이 좀 달라졌기 때문에 전반적으로 새롭게 알아야 하는 개념들이 많아졌다. 라이프 사이클을 머릿속에 넣어두고 asyncData와 fetch에 대해 알아보자. asyncData 라이프 사이클을 보면 알겠지만 asyncData의 경우에는 서버사이드에서 실행되는 녀석이다. asyncData의 경우 아래와 같은 특징을 가진다. 서버사이드에서 실행된.. 2023. 1. 16. [NuxtJS] 빌드/운영 배포 시 console.log 제거하기 NuxtJS 빌드 시 console 제거하기 개발을 하다 보면 console.log를 쓰면서 확인을 해야 하는 경우가 많은데, 배포를 하면서 미처 지우지 못한 console.log의 잔해들이 남을 수 있다. 그럴 때 사용할 수 있는 두 가지 방법에 대해 기록해 둔다. 아 물론 이 방법들이 NuxtJS뿐만 아니라 다른 곳에서도 사용이 가능할 것으로 보이니 알아두면 좋을 것 같다. 1.babel-plugin-transform-remove-console babel의 플러그인을 사용하여 console을 지우는 방법이 존재한다. npm install --save-dev babel-plugin-transform-remove-console yarn add --dev babel-plugin-transform-remov.. 2023. 1. 14. [NuxtJS] Nuxt.js 시작하기 (ft. nuxt2/nuxt bridge/nuxt3) Nuxt 시작하기 이번 게시글에서는 Nuxt를 시작해 볼 것인데, nuxt2/ nuxt bridge/ nuxt3 프로젝트를 각각 생성해보고 실행해 볼까 한다. 당연히 공식문서 기반으로 따라 해볼까 한다. Nuxt2 Nuxt2는 create-nuxt-app을 사용하여 간편하게 프로젝트를 생성할 수 있다. yarn/npx/npm에 따라 명령어가 조금씩 달라지기는 한다. yarn create nuxt-app npx create-nuxt-app npm init nuxt-app 해당 명령어를 입력해보면 하나하나 생각보다 많은 설정을 선택해야 한다. 그래도 크게 어려운 거는 없으니 본인 환경에 맞게 설정해주면 된다. 만약 처음부터 완벽하게 할 거야!라고 생각한다면 하나하나 설명해주는 친절한 블로그가 있길래 링크를 .. 2022. 12. 20. [NuxtJS] error:0308010C:digital envelope routines::unsupported Nuxt 2 실행 실패 npm init nuxt-app을 통해 프로젝트를 생성하고 npm run dev를 하는 순가 에러가 발생하였다. 할 때마다 에러가 발생하니 항상 새로운 기분이다. Nuxt2를 빌드할 때 나와 똑같이 에러가 발생하는 경우를 깃허브 이슈에서 발견할 수 있었다. https://github.com/nuxt/nuxt.js/issues/10779 Nuxt2 build fail on node18 Error: error:0308010C:digital envelope routines::unsupported · Issue #10779 · nuxt/nuxt.js Versions nuxt: 2.15.8 node: 18.12.0 Reproduction when 2022/10/25 nodejs relase.. 2022. 12. 20. 이전 1 2 다음 반응형
