1. 네트워크 통신과 HTTP 🔥 ...

 1. 리액트의 본질과 컴포넌트 �...

 1. 자바스크립트 기본 및 데이터 ...

 1. display 🔥 💡 ...

 1. DOCTYPE 🔥 ...

프론트엔드 아키텍처에서 API 통신은 단순히 데이터를 가져오는 행위를 넘어, 불확실한 네트워크 환경 속에서 데이터의 무결성을 보장하고 통신의 가용성을 주도적으로 통제하는 과정이다. Next.js 공식 문서 역시 서버 측 호출 시 fe...

muroom 프로젝트의 로그인 모달은 단순히 창이 뜨고 사라지는 상태(State)가 아니다. 우리는 이를 독립적인 주소를 가진 라우트로 설계했다. 유저가 어디서든 로그인 페이지 링크를 공유할 수 있어야 하고, 소셜 로그인이나 회원가입...

0. 들어가며: 네이버 지도라는 도전 과제 muroom 프로젝트에서 가장 고전했던 지점은 명령형(Imperative) SDK인 네이버 지도를 리액트의 선언적(Declarative) 환경에 이식하는 것이었다. 단순히 기능을 구현...

muroom 프로젝트에서 기술적 도전 과제가 가장 컸던 지점은 단연 지도 기반의 통합 검색 시스템이었다. 가격, 크기, 옵션 등 20여 개의 필터와 지도 좌표를 실시간으로 동기화하는 작업은 결코 만만치 않았다. 이는 단순히 상태를 관...

pnpm과 Turborepo를 기반으로 muroom 프로젝트의 뼈대를 잡으며 했던 고민들을 복기해본다. 이번 설계의 핵심은 코드 중복을 최소화하고, 1인 개발 환경에서 배포와 관리의 공수를 어떻게 줄일 것인가에 있었다. 1. ...

'헬로월드' 프로젝트의 메인 페이지는 사용자가 자신의 작업 환경을 직접 구성하는 개인화된 위젯 대시보드로 설계되었다. 고정된 레이아웃의 틀에서 벗어나 사용자에게 완전한 자유도를 제공하기 위해, 드래그 앤 드롭(DnD)을 활용한 위치 ...

모노레포 기반의 Next.js 프로젝트에서 프런트엔드 개발의 최대 병목은 백엔드 API의 완성 유무다. 단순히 로컬 환경에 국한된 모킹을 넘어, Vercel 배포 환경에서도 운영 환경과 동일한 비즈니스 로직을 검증하기 위해 가짜 도메...

 접근성(Accessibility)...

🧐 위젯 시스템 마이그레이션: 왜 엔진을 격리했나? 최초 apps/web 내부에 구현했던 위젯 시스템은 서비스 규모가 커짐에 따라 점차 거대한 부채가 되어갔다. 로직이 비즈니스 코드와 뒤섞이며 관리가 어려워진 것은 물론, 운...

🚀 프런트엔드 보안의 시작과 끝: SOP & CORS 완벽 가이드 웹 개발을 하며 가장 빈번하게 마주치는 에러가 바로 CORS다. 단순히 "서버에서 헤더 하나 열어주면 해결되는 귀찮은 문제"로 치부하기 쉽지만, 사실 이는 브...

🚀 모노레포 배포 전쟁기 pnpm과 Turborepo 기반의 모노레포 프로젝트를 진행하며 구축한 브랜치 전략과 배포 파이프라인을 복기해본다. 이번 설계의 핵심은 단순히 배포 자동화를 넘어, 한정된 자원을 어떻게 전략적으로 사...