본문 바로가기

전체 글

스크롤에 따른 헤더 노출 컨트롤 UX 리팩토링 기술 회고 안녕하세요, 부트텐트 프론트엔드 개발자 코디입니다.이번 글에서는 부트텐트의 캠프 리스트 페이지에서 진행한 사용자 경험 개선 작업, 그중에서도 “스크롤에 따라 헤더를 숨기고 다시 보여주는 동작”에 관한 리팩토링 과정을 다뤄보려 합니다.단순히 헤더를 숨기고 다시 보여주는 기능처럼 보이지만, 실제로 구현에 들어가 보니 사용자 흐름과 맥락을 세심하게 고려해야 했고, 반복적인 구조 변경과 상태 설계 리팩토링이 필요했습니다.이 글에서는 그 과정에서 마주친 문제 상황과 다양한 시도들, 각각의 선택에서 얻은 인사이트, 그리고 최종적으로 도출된 안정적인 구조까지의 여정을 기록했습니다.프론트엔드 UI 개선에서 “작은 개선 하나가 어떻게 사용자 경험 전체를 바꿀 수 있는지”에 관심 있는 분들에게 이 글이 도움이 되었으면 합.. 더보기
부트캠프리스트 필터링 구조 리팩토링 회고 안녕하세요! 부트텐트에서 프론트엔드 개발을 맡고 있는 코디입니다.이번 글에서는 캠프 리스트 페이지의 필터링 기능을 쿼리스트링 기반으로 리팩토링한 과정을 회고해보고자 합니다. 부트텐트의 캠프 리스트 페이지에는 다양한 필터링 및 정렬 기능이 존재합니다. 사용자들이 원하는 교육 프로그램을 빠르게 찾을 수 있도록 다음과 같은 네 가지 종류의 필터와 정렬 기능을 제공하고 있습니다.카테고리 필터 - 웹개발, 모바일, 데이터, AI, 디자인, 마케팅, 기획 등옵션 필터 - 비용, 참여 시간, 운영 기업, 선발 절차 등토글 필터 - 내가 찜한 캠프, 추천 프로그램 보기→ 향후에는 채용 연계 프로그램, 재직자 대상, 관심 기반 프로그램 등 프리셋 필터도 토글필터에 추가 예정검색 필터 - 유저의 키워드 기반의 텍스트 검.. 더보기
부트캠프를 마치고 난 뒤, 불안함보다 중요한 정리의 시간 - EP.2 Ep.2 | 부트캠프 출신 비전공 개발자가, 여전히 불안한 당신에게 안녕하세요, 프론트엔드 개발자 코디입니다.오늘은 부트캠프를 수료한 이후, 많은 분들이 겪게 되는 공통적인 고민에 대해 이야기해보려고 해요. 저도 그랬고, 지금도 부트캠프 수료 이후를 준비하거나 막 마친 분들과 상담을 하다 보면“이 상태로 괜찮을까요?”, “뭘 더 공부해야 할까요?”, “또 다른 부트캠프를 들어야 할까요?”같은 질문을 많이 받게 됩니다.부트캠프 한 번으로 충분하지 않다고 느껴지는 건, 당연한 감정이에요.요즘은 부트캠프 하나만 듣고 끝나는 경우가 드물어요.실제로 두 개, 세 개씩 듣는 분들도 많고,수료 이후 바로 다른 부트캠프를 등록하려는 분들도 자주 봐요. 이게 꼭 나쁘다는 건 아니에요.내가 부족한 부분을 정확히 인지하고,.. 더보기
부트캠프를 고민하고 있다면, 시작 전 꼭 생각해봐야 할 것들 - EP.1 Ep.1 | 부트캠프 출신 비전공 개발자가, 시작을 고민하는 당신에게안녕하세요, 프론트엔드 개발자 코디입니다.저는 비전공자로 부트캠프를 수료하고, 현재는 프론트엔드 개발자로 일한 지 2년이 된 개발자예요.부트캠프를 처음 시작했던 때가 엊그제 같은데,어느덧 시간이 흘러 이제는 부트캠프를 고민하는 많은 분들과 상담을 나누는 입장이 되었어요. 요즘 부트캠프는 꽤 흔한 선택이 되었지만, 정작 ‘어떻게 시작할지’, ‘무엇을 기준으로 선택해야 할지’막막해하는 분들이 많다는 걸 느낍니다. 부트캠프를 고민하는 분들에게 제가 명확한 답을 드릴 수는 없어요.하지만 저 역시 같은 고민을 겪었던 사람으로서, 그리고 현재 그 길을 지나오고 있는 한 사람으로서,조금이라도 방향을 찾는 데 도움이 되었으면 하는 마음으로 이 글을 적.. 더보기
구독-발행(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 요소가 아니라 실제 금전적 가치가 연결된 기능이기 때문에, 이런 실수가 반복되면 신뢰 문제까지 발생할 수 있죠. 그래서 “이런 일이 다시는 발생하지 않도록 해야 한다!”는 생각으로🔹 문제의 원인을 분석하고,🔹 어떤 해결책이 가장 효과적인지 고민하고,🔹 결과적으로 테스트 코드를 도입하여 안정성을 높이는 과정을 거쳤습니다. 이번 글에서는✔️ 문제가 발생했던 상황과 그 심각성✔️ 버그의 원인이 무엇이었는지✔️ 이 문제를 해결하기 위해 어떤 방식으로 테스트를 도입했는지✔️ 결과.. 더보기

티스토리툴바