Nuxt.js

지금까지 회사 내부에서 진행한 프로젝트에서는 access token과 refresh token 모두 쿠키로 관리해왔다. Nuxt.js를 기술 스택으로 활용하면서, Nuxt에서 제공하는 useCookie 컴포저블을 사용해 쿠키 값을 관리해왔다. 하지만 이전 JWT 관련 포스팅의 마지막 부분에서 언급했듯이, 나는 보안적인 이유로 access token은 전역 변수로, refresh token은 httpOnly, secure, samesite 옵션이 적용된 쿠키로 저장하는 것이 더 적절하다고 판단했다. 따라서, 기존의 토큰 관리 방식을 개선하기 위해 회사 내부 템플릿 코드를 수정한 경험을 공유하고자 한다. useCookiehttps://nuxt.com/docs/api/composables/use-cookie ..

프론트엔드 개발자라면, 어떻게 웹사이트의 성능을 최적화할 수 있을지 항상 고민할 것이다. 웹사이트의 로딩 시간을 줄이고, 물 흐르듯 자연스러운 사용자 경험을 제공하는 것은 너무 중요한 사항이다. 여러 최적화 방법이 있는데, 그중 단연코 빠질 수 없는 개념은 바로 캐싱(Caching)이다.캐싱의 기본 개념과 중요성캐싱(Caching)은 자주 사용되거나 요청되는 데이터를 임시 저장소에 보관하여, 이후 같은 데이터에 대한 요청이 있을 때 더 빠르게 제공하는 기술이다. 캐싱을 활용하면 데이터 접근 속도를 크게 향상시킬 수 있으며, 서버의 부하를 감소시킬 수 있다.  하지만 이런 장점이 있는 만큼 단위 메모리당 비용이 비싼 편이며, 캐싱 전략을 잘못 구현하면 오히려 성능 저하나 데이터 불일치와 같은 문제를 일으킬..

개요프로젝트 규모가 방대해지고 다양한 데이터를 처리해야 할 때, API 호출 로직을 효율적으로 관리하는 것은 프론트엔드 개발자에게 중요한 역량이다. 잘 조직화되지 않은 API 호출 코드는 복잡성과 반복성을 증가시킬 수 있어, 코드의 가독성과 유지보수성을 저해할 수 있다. 따라서 초기에 API 호출 로직을 잘 설계하고 구성하는 것이 매우 중요하다. Nuxt3에서는 useFetch, useAsyncData, 그리고 $fetch (ofetch 라이브러리)와 같은 composables를 사용하여 API 호출을 보다 체계적으로 구성한다. 이러한 새로운 접근 방식이 처음에는 적응이 필요하여, 초기에는 다소 어려움을 느꼈다. 그러나 이 개념을 잘 숙지하고 적용함으로써 프로젝트의 확장성과 유연성을 크게 향상시킬 수 있..

Nuxt의 Data fetching composable: useFetch, useAsyncData, $fetchNuxt는 브라우저와 서버 환경 모두에서 데이터 패칭을 수행할 수 있는 두 가지 컴포저블(useFetch, useAsyncData)과 내장 라이브러리($fetch)를 제공한다. 이 세 가지 도구의 차이점과 사용 용도를 간단히 요약하면 다음과 같다:$fetch: 사용자 상호작용을 기반으로 네트워크 요청을 보낼 때 유용함useAsyncData: $fetch와 결합하여 더 세밀한 제어를 제공.useFetch: 컴포넌트의 setup fucntion에서 data fetching을 처리하는 가장 간단한 방법useFetch와 useAsyncData는 공통의 옵션과 패턴을 공유하지만, 이 composable들..

요즘 Next.js나 Nuxt.js 같은 서버 사이드 렌더링(SSR)을 제공하는 라이브러리들이 널리 사용되고 있다. 이번 포스팅에서는 렌더링 기법들의 개념들을 설펴보고, Nuxt.js가 지원하는 다양한 렌더링 모드와 이를 어떻게 활용할 수 있는지에 대해 정리해보았다. CSR(Client-Side Rendering) vs SSR(Server-Side Rendering)현대 웹 개발에서 중요한 두 가지 렌더링 방식은 서버 사이드 렌더링(SSR)과 클라이언트 사이드 렌더링(CSR)이다. CSRCSR은 말 그대로 렌더링이 클라이언트 쪽에서 일어나는 것이다. 서버에서 전체 페이지를 한 번 렌더링하여 보여주고 사용자가 요청할 때마다 리소스를 서버에서 제공받아 클라리언트가 해석하고 렌더링하는 방식이다. 초기 렌더싱 ..