돌돌 (DOLDOL)

Next.js App Router 환경에서 Cookie와 Middleware를 활용하여 서버 단에서 동작하는 Auth 로직을 구현하려 시도했으나, 브라우저 쿠키의 동작 특성(Cross-domain 등)과 Token 저장 방식에 따른 에러로 인해 정상적인 인증이 이루어지지 않는 한계에 부딪혔습니다.

서버 사이드 인증 방식의 한계를 인지하고, 문제를 우회하기 위해 브라우저의 LocalStorage를 활용한 클라이언트 사이드 인증 방식으로 전면 개편했습니다. React의 HOC(고차 컴포넌트)를 도입하여 페이지 권한을 분리하고, Axios Interceptors를 활용해 토큰 관리 로직을 중앙화하여 안정적인 인증 시스템을 구축했습니다.

• • 실패 경험을 통해 브라우저 쿠키(Cookie)와 로컬 스토리지(Local Storage)의 정확한 특징과 저장 방식에 따른 보안적/구조적 차이를 깊이 이해하게 되었습니다.
• • 트러블 슈팅 과정에서 무분별한 기술 블로그 참고를 지양하고, Next.js 공식 문서를 우선적으로 확인하고 적용하는 올바른 개발 습관을 길렀습니다.

• 돌돌(DOLDOL) Github Repository

3명의 프론트엔드 팀원이 협업하는 과정에서 각자의 코드 작성 스타일이 달라 병합 시 충돌이 발생했고, props 네이밍이나 컴포넌트 분리 기준이 모호하여 재사용성이 떨어지는 문제가 있었습니다. 또한 프레임워크에 의존적인 코드 작성으로 인해 자바스크립트 기본기에서 기인하는 에러들이 발견되었습니다.

나만 아는 코드가 아닌 '팀원 모두가 직관적으로 사용할 수 있는 컴포넌트'를 목표로 Props 네이밍 규칙과 확장성을 고려한 컴포넌트 설계를 주도했습니다. 또한 nvm, husky, .vscode 설정을 강제하여 팀원 간 개발 환경(DX)을 통일하고, 엄격한 코드 리뷰 문화를 정착시켰습니다.

• • '모던 자바스크립트 DeepDive'를 탐구한 내용을 기반으로 JavaScript 코어 리뷰를 진행하였습니다.
• • 단순히 결과물만 개발하는 것이 아니라, 코드를 작성하고 협업하는 과정 자체(개발자 경험, DX)를 개선하는 시야를 얻게 되었습니다.
• • 팀원들에게 내 코드의 동작 원리를 설명하고 설득하는 과정을 통해, 내가 아는 것과 모르는 것을 명확히 구분하는 메타인지 능력을 길렀습니다.

• JavaScript 문법의 중요성을 깨닫게 한 PR 리뷰
• [Velog] 모던 자바스크립트 Deep Dive 학습 시리즈