전체 글

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

JWT는 Json Web Token의 약자이다. 현재 가장 널리 사용되고 있는 표준 인증 방식 중 하나이다. 그동안 "JWT! JWT!" 하며 많이 사용해 왔지만, 정작 JWT가 왜 등장했는지, 기존 인증 방식의 어떤 문제점을 보완하기 위해 나왔는지, 그리고 JWT의 장단점은 무엇인지 정확히 알지 못한 채 사용해 왔던 내 자신을 돌아보며, 이번 기회에 확실히 정리해봤다.  왜 JWT를 사용하게 되었을까?JWT를 제대로 이해하기 위해서는, 기존의 인증 체계가 어떻게 운영되었는지 살펴보는 것이 중요하다. 과거에는 주로 Cookie와 Session을 기반으로 한 인증 방식을 사용했다. 이 방식들은 몇 가지 장점을 가지고 있었지만, 동시에 여러 가지 문제점과 한계를 지니고 있었다. 이러한 문제점을 해결하고, 보..

객체 지향 프로그래밍의 기본 개념은 작은 독립적인 단위의 객체를 만들어 조립하는 것이다. 이 개념이 정립되고 다듬어지면서, 프로그래밍의 세계에서 큰 빛을 발하게 되었다. 하지만, 단순히 클래스와 객체를 많이 사용한다고 해서 좋은 코드가 만들어지는 것은 아니다. 좋은 객체 지향 설계를 위해서는 객체들 간의 관계를 신중하게 설정하고, 초기 설계 단계에서 많은 노력을 기울여야 한다. 객체 지향 프로그래밍은 그 자체로 복잡함이 따르지만, 이러한 복잡함을 관리하기 위한 여러 원칙과 방법이 발전해왔다. 그 중에서도 프로그래밍 세계에서 널리 통용되는 SOILD 원칙에 대해 정리해보았다.SOLID 원칙이란?SOLID는 좋은 설계를 위한 다섯 가지 원칙으로, 이를 지키면 견고한 소프트웨어를 만들 수 있다. 또한, 코드의..

프론트엔드 개발자라면, 어떻게 웹사이트의 성능을 최적화할 수 있을지 항상 고민할 것이다. 웹사이트의 로딩 시간을 줄이고, 물 흐르듯 자연스러운 사용자 경험을 제공하는 것은 너무 중요한 사항이다. 여러 최적화 방법이 있는데, 그중 단연코 빠질 수 없는 개념은 바로 캐싱(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은 말 그대로 렌더링이 클라이언트 쪽에서 일어나는 것이다. 서버에서 전체 페이지를 한 번 렌더링하여 보여주고 사용자가 요청할 때마다 리소스를 서버에서 제공받아 클라리언트가 해석하고 렌더링하는 방식이다. 초기 렌더싱 ..

최근에 기업 홈페이지를 구축하는 프로젝트를 진행했었다. 해당 프로젝트에서 나는 CRM과 더불어 Editor.js를 활용한 블로그 관련 기능을 주로 개발했다.프로젝트 1차 완성 기간이 끝나고 유지보수 기간으로 들어가게 됐는데, 앞으로 나올 유지보수 주요 사항들이 내가 작업했던 기능들의 고도화와 더불어 프론트단의 일부 수정으로 예정되었다. 따라서 유지보수 업무를 내가 도맡아 진행하게 되었다.1차 프로젝트 기간과 다르게, 유지보수 업무를 진행함에 있어 CI/CD와 더불어 Test Bed 환경을 구축하여 유지보수 프로세스를 강화하기로 결정했다. 우선 기존에 프로젝트를 진행했던 방식을 살펴보면, 아래와 같은 프로세스로 배포를 진행했다. front / back 레포가 존재하는 상태. 변경 사항을 master 브랜치..