반응형 VueJS57 [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. [VueJS] Vue에서 페이지 새로고침 하기 Vue에서 페이지 새로고침하기 VueJS를 사용했다면 SPA(Single Page Appclication) 방식으로 개발을 진행했다고도 할 수 있는데, 이럴 경우에는 일반적으로 location.href/reload 같은 방식의 새로고침은 권장하지 않는다. 이전에 작성했던 글 중에 라우터 관련한 글이 있었는데 그 방법을 활용할 것이다. https://mine-it-record.tistory.com/661 [VueJS] 라우터(Vue Router) push/replace/go - 프로그래밍 방식 페이지 전환 사용하기 Programmatic Navigation 프로그래밍 방식 내비게이션은 를 사용하여 선언적 내비게이션을 사용하기보다는 라우터의 인스턴스 메서드를 사용하여 프로그래밍으로 동일한 기능을 수행할 수 .. 2023. 3. 7. [NuxtJS] 미들웨어(middleware) 사용하기 미들웨어(Middleware) NuxtJS의 라이프 사이클을 보면 nuxtServerInit 다음에 Route Middleware라는 녀석이 있다. 여기서 미들웨어면 미들웨어지 왜 "라우트 미들웨어"라는 명칭을 사용하냐면 NuxtJS에서는 서버 미들웨어와 라우트 미들웨어 두 종류가 존재하기 때문에 미들웨어라는 명칭보다는 라우트 미들웨어라는 명칭을 사용하는 듯 하다. (하지만 일반적으로 NuxtJS에서 미들웨어라 하면 라우트 미들웨어를 지칭하기 때문에 그냥 미들웨어로 지칭하도록 하겠다.) NuxtJS에서 미들웨어는 크게 익명 미들웨어(Anonymous Middleware)와 네임드 미들웨어(Named Middleware)로 나뉜다. 익명 미들웨어(Anonymous Middleware) 익명 미들웨어는 특정.. 2023. 2. 14. [VueJS] Deep Selectors 사용하여 자식 컴포넌트의 스타일 정의하기 자식 컴포넌트 스타일 정의하기 VueJS 기반의 프로젝트를 진행하게 되면 스타일 캡슐화를 사용하여 각 컴포넌트별로 어떤거를 사용해도 상관은 없지만 첫 번째 방식의 경우 Sass 같은 전처리기에서 인식이 안된다 한다. 그럼에도 ::v-deep 방식을 많은 사람들이 추천하는 모양이다. 하지만 ::v-deep 역시 Vue 3에서는 사용방법이 바뀌었으니 Vue버전을 변경한다면 주의해야 한다. Vue3 버전에서는 v-deep을 다음과 같이 사용하라고 github 문서에 나와있다. ::v-deep(.bar) {} 스택오버플로우를 살펴보면 vue 2.7 이상에서는 위와 같은 방식을 사용해야 한다고 한다. 그리고 공식문서를 살펴보니까 아래와 같은 방식으로도 사용한다. :deep(.bar) {} 실제로 Vue 3 환경에.. 2023. 1. 30. [VueJS] 믹스인(Mixins) 사용하기 Mixins VueJS를 사용하게 되고 규모가 점차 커진다면 한 번쯤은 접해볼 수밖에 없는 믹스인(Mixins)에 대해 알아보자. 믹스인(Mixins)은 여러 컴포넌트 간에 공통으로 사용하고 있는 로직, 기능들을 재사용하기 위해 사용하는 방법이다. 하지만 Composition API의 등장으로 믹스인을 굳이 사용할 필요가 없어졌다. 그래서 이 글은 Vue3 버전을 사용하지 않으며, Composition API를 사용하지 않고 Composition API를 사용함에도 믹스인을 혼합해서 사용하는 경우에만 보면 도움이 될 것이다. 아 물론 Vue3의 안정화가 이미 이루어 졌지만 아직은 우리나라에서 Vue3가 많이 사용되지는 않는 듯 하니 알아두면 좋다. 사용 방법은 매우 간단하다 Vue의 속성중에 mixins.. 2023. 1. 29. [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. 이전 1 2 3 4 ··· 7 다음 반응형
