Home

WeddingBook

회원 수 80만 명, 월 이용자 10만 명을 보유한 결혼 준비 서비스입니다.

    🛠️ 사용 기술

    Next.js

    React.js

    Typescript

    Zustand

    ReactQuery

    Scss

    Git

    GitFlow

    🙋🏻‍♂️ 담당 역할

    • 프론트엔드 개발

    💻 담당 업무

      • 웹뷰(React.js) 내 신규 기능 개발 및 운영
      • 네이티브 앱으로 개발된 페이지 및 기능을 웹뷰 기반으로 이전
      • 검색 노출 및 레거시 프로젝트 개선 및 통합을 위한 웨딩북 리뉴얼 프로젝트(Next.js) 신규 개발 참여 및 운영
      • 웨딩북 웹뷰의 경우 대부분의 기능이 React.js 기반으로 구현이 되어있으나 일부 기능은 다른 스팩(Vue.js, Next.js 등)으로 만들어진 레거시 프로젝트에 있어 기술 스택 통일화 및 프로젝트 관리를 편하게 하기위해 분산된 프로젝트를 통합시키는 작업 진행
      • Jwt 저장 방식을 로컬스토리지에서 쿠키로 전환하여 XSS/CSRF 취약점 제거 및 인증 보안 수준을 개선.
      • 프로젝트 디렉토리 구조 개선
      • Layer-based 구조에서 Feature-based 구조로 변경

    🧨 트러블 슈팅

      • Jwt 로컬스토리지 기반 인증 → 쿠키 기반 인증 구조로 개선

      • [문제 배경]기존 로직은 로그인 시 Jwt Access, Refresh 토큰을 클라이언트 로컬 스토리지에 토큰들을 저장하는 구조 즉, XSS에 취약한 환경이었습니다.

      • [해결 방법]로그인 시 서버에서 API 응답 값으로 받아오는 토큰을 Next.js 내부 서버로 전달하여 Access 토큰의 경우 Same Site(CSRF 방어) 옵션을 적용하여 쿠키로 저장. Refresh 토큰의 경우 쿠키에 Http Only(Js에서의 접근을 방지하여 XSS 방어), Same Site(CSRF 방어) 옵션을 적용하여 안전하게 관리되도록 처리하였습니다. 그리고 운영 환경에서는 쿠키에 Secure 옵션도 추가로 적용하여 주었습니다.

      • 프로젝트 디렉토리 구조 개선

      • [문제 배경]기존 Layer-based 구조를 기반으로 서비스가 점점 고도화되면서 기능과 이에 따른 파일이 많아지며 폴더가 비대해졌습니다. 디렉토리 구조상 기능 개발 및 수정하기 위해 여러 폴더를 이동하며 작업해야하고, 여러 폴더 안에는 서로 다른 도메인의 코드가 섞여 가독성 및 관리가 어려워졌습니다.

        [문제 배경]

      • [해결 방법]서비스 초기에는 도메인의 경계를 명확히 하는 게 어려워 Feature-based 구조를 적용하기 힘들었을 수 있으나, 서비스가 일정 수준 고도화되었기 때문에 도메인이 명확히 구분되어 있어 Feature-based 구조를 적용하여 도메인에 관련된 코드가 한곳에 모여 있어 기능 개발과 유지보수를 효율적으로 할 수 있게 되었습니다.

        [해결 방법]

    👨‍👨‍👦 참가 인원

    • 프론트엔드 4명, 백엔드 5명