본문 바로가기

분류 전체보기

구독-발행(Pub-Sub) 패턴을 중심으로 본 Zustand의 동작방식 안녕하세요, 프론트엔드 개발자 코디(Kody)입니다.이번 글에서는 Pub-Sub 패턴을 중심으로 Zustand가 상태를 관리하는 방식을 분석하고, 이를 활용하여 효율적인 상태 관리 방법을 정리해보려 합니다. 1. 구독-발행(Pub-Sub) 패턴이란?상태 관리 라이브러리를 사용하다 보면, 특정 값이 변경될 때 해당 값을 사용하는 여러 컴포넌트가 자동으로 업데이트되는 경우가 많습니다. 그런데, 이런 자동 업데이트는 어떻게 이루어지는 걸까요? 이러한 동작 방식의 핵심 개념 중 하나가 바로 구독-발행(Pub-Sub, Publish-Subscribe) 패턴입니다. Pub-Sub 패턴의 개념Pub-Sub(Publish-Subscribe) 패턴은 이벤트 기반 아키텍처에서 자주 사용되는 설계 패턴입니다. • Publi.. 더보기
플럭스 패턴(Flux Pattern)을 중심으로 본 Zustand의 동작방식 안녕하세요, 프론트엔드 개발자 코디(Kody)입니다. 한때, React에서 상태 관리를 고민할 때 가장 먼저 떠오르는 라이브러리는 Redux 였습니다.하지만 Redux는 보일러플레이트 코드가 많고, 설정이 복잡하며, 상태 변경 로직을 유지하는 데 부담이 큰 단점이 있죠.그래서 최근에는 Zustand 같은 가벼운 상태 관리 라이브러리가 각광받고 있습니다. Zustand는 Flux 패턴을 기반으로 동작하며, Redux보다 가볍고 직관적인 API를 제공하는 것이 특징인데요.이번 글에서는 Zustand의 동작 방식을 Flux 패턴을 중심으로 한번 살펴보려합니다. 1. Flux 패턴이란?Flux는 Facebook이 제안한 단방향 데이터 흐름(Unidirectional Data Flow)을 따르는 상태 관리 패턴입.. 더보기
Next.js 정리 - React와 Next.js, 서버컴포넌트와 클라컴포넌트, CSR과 SSR 안녕하세요, 프론트엔드 개발자 코디(Kody)입니다. 최근 저는 사내 관리자 페이지를 마이그레이션하면서, 기존에 Next.js 12로 운영되던 프로젝트를 React.js 기반으로 다시 구축하는 작업을 진행했던 일이 있습니다. 관련하여 최근에 Next.js 관련 여러 질문들을 받으며, 답변하는 과정에서 다시 한 번 Next.js에 대해 스스로 정리해볼 기회를 가졌는데요.“왜 Next.js가 아니라 React로 다시 구축했나요?”, “서버 컴포넌트와 클라이언트 컴포넌트는 어떻게 다르고, 언제 사용해야 하나요?” 같은 질문들에 답변하는 과정에서 스스로도 다시 개념을 정리하고, 각각의 렌더링 방식이 어떻게 작동하는지 다시금 되새겨보게 되었습니다.  매일같이 쓰던 프레임워크였지만 막상 정제된 말로 이야기하려고하니.. 더보기
광고 배너 데이터가 뒤섞였다? 실수에서 배운 테스트 코드의 중요성 안녕하세요! 프론트엔드 개발자 코디(Kody)입니다. 👋🏻최근에… 정말 뼈아픈 경험을 했습니다.광고 메인배너의 데이터가 뒤섞이는 문제가 발생해, 결국 회사가 광고비를 환불해야 하는 상황까지 갔어요. 😨광고라는 것은 단순한 UI 요소가 아니라 실제 금전적 가치가 연결된 기능이기 때문에, 이런 실수가 반복되면 신뢰 문제까지 발생할 수 있죠. 그래서 “이런 일이 다시는 발생하지 않도록 해야 한다!”는 생각으로🔹 문제의 원인을 분석하고,🔹 어떤 해결책이 가장 효과적인지 고민하고,🔹 결과적으로 테스트 코드를 도입하여 안정성을 높이는 과정을 거쳤습니다. 이번 글에서는✔️ 문제가 발생했던 상황과 그 심각성✔️ 버그의 원인이 무엇이었는지✔️ 이 문제를 해결하기 위해 어떤 방식으로 테스트를 도입했는지✔️ 결과.. 더보기
팀 내 개발 프로세스 개선. 스타트업다운 해결 방법? 안녕하세요! 프론트엔드 개발자 코디(Kody)입니다. 👋🏻스타트업에서 일하다 보면, 환경이 끊임없이 변화하는 걸 몸소 경험하게 되는데요. 특히 새로운 팀원이 합류하면, 기존 방식이 자연스럽게 바뀌고, 때로는 예상치 못한 문제들이 발생하기도 합니다.저희 팀도 비슷한 경험을 했어요.저희 팀은 초기에 원래는 개발자들끼리만 있는 팀이었고, 빠른 대화와 즉각적인 코드 수정으로 빠르게 기능을 만들어내던 팀이었습니다.이후 서비스 확장을 위해 기획자분과 디자이너분을 새롭게 모시게되면서 저희의 개발 프로세스에도 변화가 생겼었는데요!📌 결과는?체계적인 프로세스 덕분에 디자인 퀄리티가 높아지고, 기능 기획도 더 촘촘하게 진행할 수 있게 되었어요.하지만… 속도가 확연히 느려졌습니다. 🫠기존 방식은 너무 자유로웠고, 새.. 더보기
이벤트루프와 캐싱을 활용한 데이터 필터링&정렬 성능 최적화 프론트엔드 개발을 하다 보면 클라이언트에서 데이터를 필터링하고 정렬하는 작업을 수행해야 할 때가 많습니다. 특히 API 호출 후 데이터를 클라이언트에서 처리해야 하는 경우, 데이터 양이 많아질수록 필터링, 검색, 정렬 등의 작업이 점점 무거워집니다. 저희 서비스는 API로 데이터를 가져온 후 거의 모든 필터링, 검색, 정렬을 프론트에서 처리하고 있는데요. 물론 추후 개선될 예정이지만, 현재로서는 데이터 필터링 작업에서는 이 과정에서 몇가지 문제들이 나타났습니다. 데이터가 방대하다 보니 UI가 잠깐 멈추거나 부드럽지 못한 문제가 발생했죠. 이번 글에서는 이 문제를 해결했던 과정을 공유하려고 합니다.문제1: 방대한 데이터 필터링 시 UI 멈춤 현상캠프 데이터는 보통 몇백 개이지만, 많게는 수천 개 이상으로,.. 더보기
스타트업 프론트엔드 개발자의 사내 디자인시스템 구축기 안녕하세요👋🏻  프론트엔드 개발자 코디(Kody)입니다.저희 회사는 작은 스타트업 팀입니다. 소규모 스타트업 팀은 빠른 결정을 통한 움직임과, 보다 유연한 협업을 가능하긴 하지만, 언제나 저희의 문제점은 한정된 리소스죠. 최근 서비스 전체를 리뉴얼 하는 큰 프로젝트를 수행하며, 디자인 시스템의 구축의 필요성을 절감하게 되었던 것 같습니다.이번 글에서는 저희 서비스에서 디자인 시스템 구축을 생각하게된 배경, 그리고 어떻게 설계하고 운영하고 있는지, 그 과정에서 겪었던 문제점이나 해결 방안, 그리고 디자인 시스템 도입 후의 성과와 향후 계획에 대해 자세히 소개해드리겠습니다. 긴 글이 될 수 있지만, 디자인 시스템 구축에 관심이 있는 분들께 유익한 정보가 되기를 바랍니다🙆🏻‍♂️작은 스타트업 팀에도 디.. 더보기
검색 기능 간단한 개선/리팩토링 과정 안녕하세요👋🏻 프론트엔드 개발자 코디(Kody)입니다.최근에는 서비스에서 검색 기능을 사용하다가 문제점을 발견해서 살짝 개선해보고자 리팩토링을 해보았는데요,이번 글에서는 기존 검색 기능의 한계를 느낀 상황부터 개선을 통해 얻은 성과까지 공유해 보려고 합니다.기존 검색 기능의 한계1. 단일 필드 검색의 제약기존 검색 로직은 데이터의 특정 컬럼(예: 브랜드명, 교육과정명 등)에서만 검색어를 찾는 방식이었습니다. 즉, 유저의 검색어가 각 캠프 컬럼 데이터 안에 포함되는지 여부를 통해 필터링 하여 검색되고 있던 것입니다.😓function applySearchFilter(campList: CampListElement[], searchState: SearchItemType | null): CampListEle.. 더보기

티스토리툴바