미리보기

생산성 향상과 QA 문화 구축

QA 문화 구축

• 팀 내 QA 표준화가 없어 수정 사항 우선순위를 가리기 힘들었음.

  • 주변 자문을 통해 테스트 케이스(TC)에 대해 학습한 뒤, 기획 의도와 관련된 주요 가설 위주로 테스트 케이스를 새롭
    게 설정.

  • 팀원 성향마다 추가요청 사항 작성 및 전달.

TanStack Query, React-hook-form 사내 도입

• 기존 프로젝트에서 상태 관리 체계가 부재해 한 컴포넌트의 props가 최소 10개 이상 전달되어 복잡한 디버깅 및 최적화 문제 존재.

• React19에서 Context API의 일부 개념이 사라지는 변화에 대응 필요.

  • React-hook-form 도입으로 form 상태 관리 로직 30%이상 감소.

  • React-hook-form을 이용해 비제어 / 제어 컴포넌트를 기획에 따라 유연하게 대응할 수 있도록 구조 변경.

  • 상태 함수 분리해 관리 할 수 있도록 TanStack Query 도입 및 디버깅 시 생산성 기여.

기존 CRA 환경 Next.js App router, Vite로의 마이그레이션

• CRA 지원 중단으로 개발 환경 변경의 필요성.

  • 기존 CRA 프로젝트를 Next.js(App Router) 또는 Vite로 전환.

  • Hydration 에러 등 마이그레이션 중 발생할 수 있는 주요 문제 해결.

사내 커머스, 어드민 서비스개발

유저 구매 후 티켓 사용 과정 처리 및 예외 관리

• 유저가 구매 후 받은 티켓을 사용하기 위한 과정에서, 올바르지 않은 경로로의 접근(예: 예외 URL)에 대한 차단 처리 구현.

• 각 예외 상황에 맞는 페이지별 UI를 제공하여 유저 경험을 보호하고 원활한 서비스 흐름을 유지.

• 기획 및 디자인 팀과 협업하여, 각 예외 상황에 적합한 UI/UX 변경 사항을 요청하고 구현.

판매 현황 대시보드 및 제품별 유저 사용 완료 일괄 처리 기능 개발 및 개선

• 대시보드에서 유저가 제품별 사용 완료를 일괄 처리할 때, UI가 변경되지 않았음.

  • 유저가 의도를 파악하지 못하고 새로고침하거나 더블클릭으로 서버 요청을 반복하는 문제가 있을 것이라고 생각.

  • Optimistic UI를 도입하여 일괄 처리 시 UI가 즉시 반영되도록 처리.

  • Alert 대신 우측 상단의 토스트 메시지를 띄워 처리 상태를 안내.

  • 유저가 반복적으로 alert을 보며 에러를 심각하게 인식할 수 있겠다는 가설을 세우고 적용.

대규모 리조트 XR 가이드 서비스

• 검색 기능 개발.

  • React Devtool을 활용한 리랜더링이 되는 부분을 최소화하는 최적화 진행.

• NAVER Map 기반 테마 길 시각화 및 거리 기반 유틸리티 함수 개발.

• 각 테마 길의 주요 지점을 나타내는 좌표 간 Polyline을 연결하여 길을 시각화.

• 거리 기반 Polyline 정리 유틸리티 함수 작성.

  • 각 좌표 간의 거리를 계산하여 Polyline 연결 상태를 검증.

  • 설정된 임계값(예: 50m)을 초과하여 연결된 Polyline을 비정상적인 연결로 간주하고 제거.

  • 이를 통해 의도치 않은 잘못된 경로 시각화를 방지하고, 데이터의 신뢰도 확보.

Next-auth와 AWS cognito 통합한 로그인 구현

• 클라이언트에서 로그인 요청 시, 웹 로컬 스토리지에 5개의 provider과 사용자의 정보가 저장되는 문제 확인.

• 라이브러리를 사용.

  • amazon-cognito-identity-js와 next-auth 사용.

  • credentials와 callback을 활용한 서버 사이드 처리 및 1개의 쿠키로 간소화.

결제 심사를 위한 페이지 개발 (공지사항, FAQ, 결제 페이지)

컴플라이언스 & RFC 대응을 고려한 개발진행

• 서비스 운영 시, 사용자의 개인정보는 컴플레인이 많이 일어나는 요소라는 것을 인지.

  • 개인정보 위반 여부 컨펌 받은 후 개발 진행.

  • RFC 이메일 패턴, 회원 가입 시, 체크 박스 전체 동의 조건 등 개인정보 가이드에 맞게 개발.

사용 기술: JavaScript, Next.js(PageRouter), SCSS, Redux

단순 퍼블리싱에서 프로그래밍 접근 방식으로의 문화 개선

• 무분별한 선택자 사용 및 CSS 오버라이드로 인해 브라우저의 렌더링 성능 저하 발생.

  • PR 템플릿 설명 JS Docs를 통한 문서화로 가이드 제작.

  • 지속적인 화상 회의를 통해 팀원 간 지식 격차를 줄이고 원활한 협업을 유도.

  • 디자인 토큰 기초 토대 마련 및 SCSS 구조화(함수 기반으로 코드량 감소, 클래스 생성 자동화)

  • 약 4만줄 전역 레거시 CSS 제거.

  • 페이지 로딩 속도 약 30% 개선.

레거시 CSS 제거 및 SCSS로의 리팩토링,  신규 서비스 개발

• 현재 서비스의 80%를 디자인 토큰이 적용된 SCSS로 변경.

• 튜토리얼 서비스, 기프티콘 충전 및 구매 서비스 개발.

• 소통 부분

  • 주 2회(월, 목) 팀 전체 정기 회의 진행을 주도하면서, 각 팀별 진행 사항 보고 및 안건 해결

  • 개발 팀 내 주 5일 짧은 스크럼으로 얼굴을 보며 책임감 강화, 진행 사항 체크

  • 두 번의 팀원 탈퇴 했을 시, 결속력을 위한 팀원 1대 1 온라인 미팅 진행

  • 기획과 개발 해결 가능성을 조율하기 위해 미팅 다수 주선

• 로그인 페이지 제작

  • @supabase/auth-helpers-nextjs를 이용한 미들웨어로 세션 관리

  • Code Exchange를 통한 로그인 관리

    • 기존 로컬 스토리지로 들어오는 공개된 정보를 쿠키 처리

  • React-cookie를 이용한 자동 로그인 처리

• Storybook 배포 자동화

  • 정기적인 업데이트의 번거로움을 줄이기 위해 GitHub Actions를 활용하여 특정 브랜치에 푸시될 때 자동으로 배포되도록 설정

• AWS 프론트엔드 소모임 모임 운영 지원.

• cognito-identity-js와 next-auth를 통합한 유연한 UI를 구축하는 경험을 공유.

• next-auth의 credentials을 이용한 서버사이드 인증 처리 과정 소개.

• 기타 자료(링크):

  • 발표 유튜브 영상

  • 발표자료

  • 관련 레포지토리 링크

1. 프론트엔드 스쿨 플러스 심사위원 (2023.12)

• 정규 프론트엔드 과정을 수료하고, 심화 과정을 수강한 학생들의 파이널 프로젝트를 심사 및 피드백.

• 기획 의도에 맞는 UX 설계 수준, 완성도 평가.

• 서비스 타입의 컴플라이언스 평가.

• 기본 동작 테스트 및 평가.

• 코드 레벨 피드백.

2. MVP 설정을 통한 파이널 프로젝트 준비하기 (2023.08)

• 특강 내용:

  • 2시간 특강 + 2시간 맨 투 맨 멘토링 진행.

  • “3주의 시간동안 어떻게 효율적으로 프로젝트를 진행 할 것인가?”라는 관점에서 학생들이 많이 겪는 방해 요소를 정리.

  • mvp 소개.

  • IA & UserFlow, 백로그 등 개발에 앞서 제작해야 하는 과정에 대한 당위성 설명.

3. 개발 프로젝트 기획 방법 (2023.02)

• 특강 내용:

  • 경험을 녹인 기획 프로세스에 대한 전반적인 설명.

  • 도큐먼트 작성 방법에 대한 케이스 스터디.

4. github를 이용한 프로젝트 협업 방법 (2023.01)

• 특강 내용:

  • 깃이슈, 마일스톤, 프로젝트 사용법 소개.

  • 케이스 스터디를 통한 이해 고도화.

  • 라이브러리의 깃 이슈와 디스커션을 활용한 정보 교환 사례 소개.