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

자바스크립트 API 호출 성능 개선기

문제 나는 현재 회사에서 주로 사내 그룹웨어 개발일을 해왔었다. 해당 그룹웨어의 Front-End(이하 FE) 는 Vue3 로 구성되어있으며, 내가 입사할때 쯤 어느정도 뼈대가 만들어져있고 이제 막 기능들이 추가되고 있는 작은 프로그램이었다. 초기에는 프로젝트의 크기가 작아서 초기페이지 로딩속도에 문제가 없었다. 하지만 프로젝트에 초기 구상에 없던 기능이 계속해서 추가되며 크기가 커졌고 그에 따라 첫 페이지 진입시 실행되는 로직과 API 호출이 많아졌다. 개선된 현재는 Home으로 처음 접근시 소켓 연결 호출을 제외하면 거의 15개가량의 통신이 일어난다. 개선 하기전의 상태를 글로 설명하자면 (스크린샷으로 찍어놨어야하는데 깜빡했다..) 개선 되기 전에는 초기 페이지 접근시 필요한 대부분의 API 호출들이..

• format_list_bulleted front-end/javascript
• · 2023. 7. 17.
• 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

왜 Vue 보다 React 를 더 많이 쓰는가..에 대한 고찰

내가 현재 2023.07.04 에 다니는 회사의 주요 Front-End(이하 FE) 기술은 Vue3 프레임워크이다. 회사에 들어오기전 공부했던 FE 기술은 React 이다. 둘 다 써본 사람으로서 개인적인 의견으로 비교하자면 Vue 를 좀 더 낫다고 생각한다. 가장 큰 이유는 두가지이다. Vue 가 React 보다 배우기 쉽다 Vue 가 SFC 를 지원하기 시작한 이후 좀 더 깔끔하게 코드를 작성할 수 있다. 한때 나는 React 와 Vue 중 어떤게 더 나은가에 대해 해외 개발자들은 어떻게 생각하나 궁금해서 찾아본적이 있다. 일단 성능 관련된 얘기는 검색해보면 전문적으로 비교한 이런 블로그 글 들을 많이 찾아볼 수 있다. 성능은 Vue 의 승리. 하지만 개발자들은 Vue 보단 React 를 더 많이 사..

• format_list_bulleted front-end/vue
• · 2023. 7. 4.
• textsms