dev.daisy

서비스 구조에서 REST API 통신이 많고, 안정적이며 확장성 있는 네트워크 처리가 필요했기 때문에 Axios를 선정하게 되었습니다. 특히 Axios 1.8.4를 도입하면서, 안정적이고 체계적인 API 통신 구조가 얼마나 개발 생산성과 유지보수에 큰 영향을 주는지 실감했습니다. 인터셉터와 공통 설정을 활용하니 반복적인 요청 처리와 에러 핸들링이 훨씬 간단해졌고, 코드 가독성도 크게 향상되었습니다. 이전에는 fetch로 개별 처리하던 로직이 Axios로 통합되면서 중복 코드가 줄고 일관성이 생긴 점이 특히 인상적이었습니다. 또한 Tanstack Query, Zustand와 함께 사용하며 상태 관리와 비동기 통신을 자연스럽게 연결한 경험으로 복잡한 서비스 구조에서도 안정성을 유지할 수 있다는 자신감을 얻게..

프론트엔드 개발자라면 한번쯤은 Props drilling이 뭔지, 사용했을 때 어떤 장단점이 있는지에 대한 질문을 받아봤을 것 같습니다. 저는 실무에서 자연스럽게 습득한 개념이라 명확하게 설명하기에는 어려움이 있었는데, 이번 기회에 머릿속에 흩어져 있던 지식을 체계적으로 정리해보고 싶다는 생각에 개념부터 장단점, 해결 방법까지 깊이 있게 알아보며 제 것으로 만들 수 있었습니다. Props Drilling이란?React 기반 프레임워크에서 상위 컴포넌트의 상태(state)를 하위 컴포넌트로 전달하기 위해 여러 컴포넌트를 거쳐 props를 넘겨주는 과정을 의미합니다. 예를 들어, App 컴포넌트의 상태를 GrandChild 컴포넌트에서 사용해야 할 때, 중간에 있는 Parent 컴포넌트가 해당 props를..

이번 상태 관리 도구 선정 과정에서 여러 가지 중요한 점을 배울 수 있었습니다. 먼저 튜닝 서비스처럼 실시간 매칭, 채팅, 피드 등 다양한 상태를 동시에 관리해야 하는 구조에서는 단순히 기능만 많은 라이브러리보다 사용성과 유지보수 용이성이 중요하다는 것을 다시 느꼈습니다. Zustand는 단일 훅 기반으로 직관적인 API와 작은 번들 크기를 제공해 빠른 개발과 코드 가독성을 확보할 수 있었고, 비동기 처리와 React 통합이 자연스러워 실시간 상태 관리에 매우 적합했습니다.서버 상태 관리 도구로는 TanStack Query를 선택하며, 자동 캐싱, refetch, query invalidation 등 반복적인 API 통신을 라이브러리 수준에서 최적화할 수 있다는 점이 큰 장점이라는 것을 알게 되었습니다...

이번 TailwindCSS 4.0 선정 과정을 통해 유틸리티 퍼스트 접근 방식이 빠른 프로토타이핑과 일관된 스타일링에 얼마나 효과적인지 다시 확인할 수 있었습니다. 기존에는 styled-components가 더 익숙한 상황이었는데, 다른 스타일링 라이브러리와 비교하며 초기 개발 속도, 유지보수성, 성능 관점에서 TailwindCSS의 장점을 명확히 이해하고 해당 기술으로 선정하게 되었습니다. 이번 경험을 통해 서비스 요구사항에 맞는 프론트엔드 기술 선택이 프로젝트 효율과 안정성에 직결됨을 배웠습니다.3. Tailwind CSS 4.03-1. 선정 이유Tailwind CSS는 유틸리티 퍼스트 CSS 프레임워크로, 클래스 단위로 스타일을 조합하는 방식이기 때문에 빠른 UI 구현과 유지보수가 용이합니다.별도의..

이번에 기술 선택 이유를 고민해보면서 TypeScript와 버전 선택이 서비스 안정성과 유지보수에 미치는 영향을 생각해보게 되었습니다. 또 서비스 구조와 데이터 흐름을 미리 분석하며, 정적 타입 검사와 명확한 인터페이스 정의가 런타임 오류를 줄이고 개발 효율성을 높일 수 있다는 점을 확인헤 명확한 이유를 가지고 기술을 선택한 경험이 좋았습니다.무작정 개발 먼저 들어가거나 좋아하는 기술이라는 이유로 사용하기보다는, 설계 단계에서 타입 시스템과 프레임워크 환경을 충분히 검토하는 것이 대규모 서비스 개발의 안정성과 효율성을 결정짓는 요소가 될 것이라고 생각합니다.2. TypeScript 5.4.42-1. 선정 이유튜닝 서비스는 유저 기반 데이터와 인터랙션, 서버와의 비동기 통신 등 복잡한 데이터 상태와 흐름을..

팀 프로젝트를 시작하기 전에 설계 문서를 작성했는데, 단순히 기술을 나열하기거나 '사용해보고 싶은 기술'이라는 이유로 선택하기보다 여러 스택을 비교해보며 왜 이 구조가 서비스에 가장 적합한가를 끊임없이 고민했습니다. 기술은 결국 문제를 해결하기 위한 수단이라는 점을 다시 한 번 깨달았고, 앞으로도 모든 선택에 근거를 가지고 기술을 선택하는 개발자가 되고 싶다는 목표를 가지게 되었습니다.0. 서비스 소개개발하고 있는 서비스 튜닝은 조직 기반의 소셜 매칭 커뮤니티 플랫폼으로, 동일한 소속(학교, 회사, 부트캠프 등)을 기반으로 AI가 관심사가 비슷한 사람과 자연스럽고 신뢰할 수 있는 인연을 만들어주는 서비스입니다.동일한 소속을 바탕으로 신뢰를 기반으로 한 자연스러운 만남을 유도하며, 단순한 매칭을 넘어서 뉴..

Fiber가 중요한 작업 먼저 처리하고 나머지는 뒤로 미루는 전략을 사용하는 것을 보면서, 개발자는 UI 흐름에서 어떤 부분이 사용자에게 더 중요한지 판단하고 그 맥락을 코드 구조에 반영해야 한다는 점을 깨달았습니다.React의 최신 기능들(Concurrent Mode, Suspense, Server Components)은 모두 Fiber 엔진 위에서 작동하고 있기 때문에, Fiber 아키텍처를 중심으로 React 내부 구조를 계속 학습하는 것은 진화하는 React 생태계에서 꼭 알아야할 필수적인 개념이라고 생각합니다. 찾아볼수록 어렵다고 느껴져 끊임없이 공부하며 글을 개선해보겠습니다 :)React를 사용하는 대다수의 개발자는 JSX → Virtual DOM → Reconciliation → DOM 업데..

기본적인 메서드이지만 코딩테스트를 공부하다보면 각각의 함수명이 제대로 생각나지 않아 꼭 구글링해보기 마련인데, 이 기회에 제대로 정리해보게 되어 좋았습니다. 앞으로 Set, Map 함수를 더 효율적으로 사용해 시간복잡도의 장점을 살려서 문제를 풀어보려고 합니다.자바스크립트로 코딩테스트를 풀다 보면 꼭 마주하는 개념인데, 알고리즘에 집중하다 헷갈리는 경우가 많아 글로 정리해보려고 합니다.1. Set: 중복 없는 값들의 집합자바스크립트의 Set은 중복을 허용하지 않는 유일한 값들의 집합입니다. 배열과 비슷하지만 중복을 자동으로 제거해 준다는 점에서 차이가 있습니다. Set은 주로 고유한 값들을 저장하거나 배열에서 중복을 제거할 때 유용하게 사용됩니다.Set의 주요 메서드new Set(): 비어 있는 Set을..

문서로만 공부했던 테스트코드를 직접 작성해보며 안정성 향상, 리팩터링 안전성 보장, 개발 속도 단축이라는 성과를 직접 체감해보았습니다. 특히 테스트 코드를 작성함으로써 코드의 입력과 결과값을 명확하게 보여준다는 점에서 코드를 처음 보는 사람에게는 사용법을 문서화하는 효과가 있을 것 같다고 느꼈고, 앞으로는 E2E 테스트와 성능 테스트를 통해 개발 생산성과 코드 품질을 끊임없이 개선해 나갈 예정입니다.이번에는 Jest와 React Testing Library를 중심으로 한 견고한 테스트 환경을 구축했는데, Next.js, React Query, Zustand 등 최신 라이브러리들과의 통합 테스트를 진행하며 상호작용 하는 모습이 새롭게 다가왔습니다. 앞으로도 지속적인 테스트 커버리지 향상과 더 나은 도구 도..

BFS와 DFS의 개념을 정리하며 두 알고리즘의 본질적인 차이를 명확이 이해할 수 있어 좋았습니다. 알고리즘 공부를 하다 보면 정말 많이 나오는 유형인데 단순히 개념을 암기하는 것을 넘어서 큐와 스택이라는 자료구조가 어떻게 너비 우선 탐색, 깊이 우선 탐색이라는 상반된 방식을 만들어내는지 원리적으로 공부할 수 있어 좋았습니다.기존에는 BFS와 DFS 중에 선택해서 풀 수 있는 문제가 많아 큰 기준을 두지 않고 편한 알고리즘을 위주로 구현했었는데, BFS가 최단 경로를 보장하는 대신 메모리 사용량이 크고 DFS는 메모리 효율을 보장하는 대신 최단 경로가 아니라는 명확한 트레이드오프 관걔를 파악한 후 상황에 맞는 알고리즘을 선택하는 기준이 생겼습니다. 공부한 내용을 바탕으로 앞으로는 이를 응용한 더 복잡한 ..