들어가며 1편에서 UI Flow Specification(UI Flow Spec)의 개념/템플릿을, 2편에서 실전 패턴(XState, TanStack Query, Storybook, Playwright)을, 3편에서 “다단계 회원가입” 사례를 정리했습니다. 이번 4편은 “실시간 협업(문서 편집)”을 UI Flow Spec 형식으로 서술하고, 바로 적...

들어가며 1편에서 UI Flow Specification(UI Flow Spec)을 개념/템플릿으로 정리했고, 2편에서 코드를 향한 실전 패턴(XState, TanStack Query, Storybook, Playwright)을 소개했습니다. 이번 3편은 실제 사례로 “다단계 회원가입”을 UI Flow Spec 형식으로 서술합니다. 용어 주석...

들어가며 1편에서 UI Flow Specification(UI Flow Spec)을 “Use Case와 구현 사이의 간극을 메우는 프론트엔드 실무 템플릿”으로 제안했습니다. 이번 글은 그 템플릿을 코드와 바로 연결하는 실전 패턴을 정리합니다. 용어 주석: 본 글에서 사용하는 ‘UI Flow Specification’은 업계 표준 용어가 아니라...

들어가며 이번달 15일에 SQLD 자격증 시험을 위해 교보문고에 갔다가 우연히 Alistair Cockburn의 “Writing Effective Use Cases”를 발견했습니다. 20년이 넘은 책이지만, 몇 페이지를 넘겨보는 순간 이것이 현재 나에게 필요하다고 느꼈습니다. AI의 도움으로 관련 내용을 공부하는 중이며, 저자가 Use Case 3....

Next.js App Router와 CloudFront를 함께 사용하면 강력한 웹 애플리케이션을 구축할 수 있지만, 설정이 조금만 비켜가도 예상치 못한 문제가 발생할 수 있습니다. 이 글에서는 제가 실제로 겪은 세 가지 이슈와 해결 과정을 공유합니다. RSC(React Server Components) 페이로드가 CloudFront에 의해 잘못...

웹/앱 개발에서 필수적인 페이지네이션(Pagination) 은 대량의 데이터를 효율적으로 관리하기 위한 핵심 기술입니다. Frontend 개발자인 저는, Offset 방식과 Cursor 방식의 내부 동작 방식 차이를 깊이 고민하며 개발해 본 경험은 없었습니다. 최근 GraphQL과 Apollo Client 프로젝트에서 Cursor 방식 페이지네이션...

배열은 JavaScript에서 가장 많이 사용되는 자료 구조 중 하나입니다. 때로는 배열 내에 또 다른 배열이 중첩된 복잡한 구조를 다뤄야 할 때가 있습니다. 이러한 중첩 배열을 평탄화(flatten) 하여 단일 레벨 배열로 만드는 것은 데이터 처리 효율성을 높이고 코드 가독성을 개선하는 데 매우 중요합니다. JavaScript는 ES2019부터 A...

🚀 단위 테스트 작성부터 JWT 인증 검증까지 한방에 끝내기 🚀 안녕하세요! 오늘은 백엔드 개발의 핵심! 테스트에 대해 이야기해보려 합니다. 특히, 많은 개발자분들이 어려워하시는 백엔드 테스트 아키텍처를 중심으로, 실제 NestJS 코드 예시와 함께 백엔드 초보인 제가 어떻게 테스트를 설계하고 작성하는지 알려드릴게요. 👩‍💻👨‍💻 잘 짜여진 테스트...

목차 들어가며 객체 모델이란? DOM (Document Object Model) CSSOM (CSS Object Model) 실제 예시 DOM 생성 과정 바이트에서 문자로의 변환 문자에서 토큰으로의 변환 토큰에서 노드로의 변환 DOM...

제가 최근 프로젝트에서 경험한 Mock Service Worker(MSW)와 GraphQL을 활용한 프론트엔드 선행 개발에 대해 이야기해보려고 합니다. 특히 제가 겪은 실제 어려움과 깨달은 점들을 공유하고자 합니다. 목차 프로젝트 배경 MSW와 GraphQL 소개 및 선택 이유 개발 과정에서의 겪은 어려움 실제 서버로의 마이그레이션...