Nuxt3 log4js를 이용해 json log 출력하기(feat. EFK Stack)

들어가며 Nuxt3 는 Node server 가 돌아가며 Server-Side Rendering(이하 SSR) 을 처리하고 있다. 그렇다보니 해당 Node server 에서 로그를 출력해야할 때가 생긴다. Nuxt 에서 예를 들면 페이지 요청시 서버가 요청을 받아 html 파일을 내려줘야하는데 처리도중 에러로 인해 내려주지 못하거나, Server side 에서만 작동하는 특정 모듈의 상태를 확인할때 로그를 출력해야할 때가 있겠다. 가장 간단하게는 console.log 로 출력한 다음, 실행되고 있는 컨테이너의 로그를 확인할 수도 있다. 하지만 현재 진행하고 있는 프로젝트는 k8s 환경에 EFK Stack(Elasticsearch + Fluent bit + Kibana) 을 사용해 각 pod 의 log 를..

• format_list_bulleted front-end/nuxt
• · 2023. 8. 31.
• textsms

Nuxt3 proxy 설정하기(feat. Spring API 서버)

들어가며 Vue3 프로젝트를 할때는 Vite 의 경우 vite.config , Webpack 의 경우 vue.config 파일을 통해 proxy 설정을 할 수 있다. 하지만 현재 2023-08-13 기준 Nuxt3 같은 경우에는 공식문서상 proxy 설정에 대한 설정을 찾아 볼 수 없다. Nuxt3 proxy 에 대해서는 Nuxt issue 에 많은 글들이 달렸는데 하나씩 써보면서 문제점과 결국 어떤것을 써야하는지 알아보자. 준비 Nuxt3 v3.6.5 과 Spring 을 이용해 간단히 만든다. 둘다 기본 포트인 Nuxt 3000번 포트, Spring 8080번 포트를 사용한다. proxyTest.vue refreshFullPath fullPathData : {{ fullPathData }} refres..

• format_list_bulleted front-end/nuxt
• · 2023. 8. 13.
• textsms

Nuxt3 $fetch, useAsyncData, useFetch 의 차이

이 글은 제가 회사에서 Nuxt3 에 대해 발표하기 위해 준비했던 자료를 토대로 정리 한 글입니다. 읽기 전 Universal Rendreing 이 뭔지 알아야 하므로 먼저 이전글을 읽어주세요. Nuxt3 의 Universal Rendering 이란 무엇인가.. 이 글은 제가 회사에서 Nuxt3 에 대해 발표하기 위해 준비했던 자료를 정리 한 글입니다. 때는 2023년 초 추운겨울.. 회사에 새로운 프로젝트가 시작된다는 소식이 들려왔다. 해당 프로젝트의 요구 jongmin4943.tistory.com 들어가며 Nuxt3 의 문서를 보다보면 Data fetching 섹션이 존재한다. 이전 글에서 이야기 했듯 $fetch 를 그냥 사용하게 될 경우 불필요하게 Api 호출을 두번 하는 경우가 생기며 Hydra..

• format_list_bulleted front-end/nuxt
• · 2023. 7. 27.
• textsms

Nuxt3 의 Universal Rendering 이란 무엇인가..

이 글은 제가 회사에서 Nuxt3 에 대해 발표하기 위해 준비했던 자료를 정리 한 글입니다. 때는 2023년 초 추운겨울.. 회사에 새로운 프로젝트가 시작된다는 소식이 들려왔다. 해당 프로젝트의 요구사항 중 하나는 Search Engine Optimization(이하 SEO) 를 적용시키는 것 이었다. 그 동안의 프로젝트는 관리자사이트에 치중되어있었기에 기존 Vue 만으로 충분했지만 이제는 SEO 를 위해 다른것을 시도할 때 였다. 마침 2022년 말 Nuxt3 의 stable 버전이 출시되었다. 우리 회사는 이 나온지 얼마 안된 Nuxt3 를 도입해보기로 결정한다. 나는 docs 를 보며 간단하게 CRUD 를 만들어 본 뒤에 Nuxt3 에서 개발할때 꼭 알아야 할 중요하다고 생각되는 점 몇가지를 회사에..

• format_list_bulleted front-end/nuxt
• · 2023. 7. 6.
• textsms