분류 전체보기

올해 두 번의 프로젝트를 통해 Editor.js 라이브러리를 활용한 에디터 제작을 경험했습니다. Editor.js는 공식 문서에 API와 관련 자료가 잘 정리되어 있고, 다양한 플러그인을 제공해 필요한 기능을 확장하며 개발하기에 매우 유용한 라이브러리입니다. 에디터를 개발해야 하는 상황이라면 Editor.js 라이브러리를 정말 추천합니다‼️ 하지만, 아직 상용화 사례가 많지 않아 참고할 수 있는 개발 사례가 부족하다는 점 아쉬운 부분이었습니다. 특히, 특정 기능을 구현하려고 할 때 Editor.js의 어떤 API를 활용해야 하는지 명확히 이해하기 어려운 경우가 많았습니다. 예를 들어, 에디터에서 블록 데이터를 커스터마이징 하거나 플러그인을 직접 개발해야 할 때, 문서를 읽는 것만으로는 실제 구현 방법을 ..

Transition?Transition의 사전적 정의는 “전이, 이행, 변천, 과도기”입니다. 웹 개발 관점에서 Transition은 한 상태에서 다른 상태로 변화하는 과정을 의미합니다. 이 과정은 단순히 화면 전환뿐만 아니라 모든 UI 상태 변화에 적용될 수 있습니다. 예를 들어, 버튼이 눌렸을 때 색상이 변화하거나, 요소가 점차적으로 나타나고 사라지는 등 다양한 액션에서 Transition은 더욱 자연스럽고 안정적인 사용자 경험을 제공합니다. 개발자가 이 변화의 흐름을 효과적으로 제어하려면 초기 및 종료 상태에 대한 정의가 필요합니다. 이를 통해 각 상태 전환을 세밀하게 조작할 수 있으며, 결과적으로 부드럽고 직관적인 UI 전환 효과를 구현할 수 있습니다. 아래는 인프런 사이트의 카드 디자인을 참조하..

프로젝트가 커지고 다양한 데이터를 처리해야 할 때, API 호출 로직을 효율적으로 관리하는 것은 프론트엔드 개발자에게 필수적인 역량입니다. 구조화되지 않은 API 호출 코드는 복잡성과 중복을 증가시켜 코드의 가독성과 유지보수성을 떨어뜨릴 수 있습니다. 따라서 초기 단계에서 API 호출 로직을 체계적으로 설계하고 구성하는 것이 매우 중요합니다. Nuxt3는 useFetch, useAsyncData, $fetch와 같은 다양한 도구를 제공하여 API 호출을 보다 효율적으로 관리할 수 있도록 돕습니다. 그러나 기존에 fetch나 axios를 사용해왔다면, 이러한 새로운 데이터 패칭 방식이 다소 생소하게 느껴질 수 있습니다. 하지만 이 개념을 잘 이해하고 프로젝트에 적용하면, 코드의 확장성과 유연성을 크게 높일..

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

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

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

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

최근 게시글에서 Nuxt3에서의 데이터 호출 방식인 $fetch, useAsyncData, useFetch에 대해 알아보았습니다.https://cychann.tistory.com/entry/Data-fetching-in-Nuxt3-fetch-useFetch-useAsyncData Data fetching in Nuxt3: Nuxt3 개발자가 알아야 할 데이터 페칭 방법($fetch, useAsyncData, useFetch)Nuxt 3에서는 클라이언트와 서버 환경 모두에서 데이터를 가져오는 다양한 방식($fetch, useFetch, useAsyncData)을 제공합니다. 그런데 왜 같은 목적을 위한 것처럼 보이는 이 세 가지 도구가 필요할까cychann.tistory.com 이 개념들을 공부하다 보면 ..