미리보기

github repository

프론트엔드

NextJS, Typescript, React-Query, axios, tailwindCSS

• Vercel 배포 자동화 파이프라인을 구축하여 기능 개발에만 집중할 수 있도록 환경 개선

• 전역 에러, 컴포넌트 단위, 비동기 단위로 에러 핸들링 체계화하여 개발 단계 디버깅 환경 및 프로덕션 단계 사용자 경험 개선

• axios interceptor로 토큰 추가 로직 자동화하여 과거 프로젝트에서 매 요청마다 토큰을 추가했던 반복적인 코드 개선

• refresh token 재발급 로직 또한 interceptor로 구현하여 인증 관련 로직의 일관성을 유지

• zod schema 사용하여 form 유효성 검사 기준을 문서화하는 효과 경험

백엔드 (Springboot 견습)

SpringBoot, JPA

• 백엔드를 이해하는 프론트엔드 개발자로의 성장을 목표로 학습 중이므로 스프링부트 api 개발 견습

  • 게시물, 댓글, 유저 엔티티 간의 관계 학습 후 댓글 엔티티 생성,

    상태코드별 에러 핸들링,

    댓글 조회 DB 쿼리문 작성

  • CORS 에러를 처음 접하는 백엔드 팀원과 협력하여 SpringBoot 코드에 CorsFilter 직접 추가

velog

프론트엔드

NextJS, Typescript, SWR, zustand, tailwindCSS

• Prettier, ESLint, tsconfig 설정

  • import 순서를 사전에 지정한 기준에 따라 자동 정렬하여 import 경로 확인에 소요되는 피로도 감소

  • any type 사용 시 lint 경고 설정하여 타입 안정성 강화

• 라우팅 시 대항목 카테고리, 소항목 카테고리가 둘 다 존재하지 않는 param을 고려하여 optional 동적 라우팅 구현

  • 프레임워크에서 필요한 기능을 정확히 파악하여 구현하는 역량 향상

• zustand + SWR을 이용하여 2-depth 셀렉트 박스 구현

  • 사용자가 대항목 카테고리를 선택한 이후에만 소항목 카테고리를 선택할 수 있도록 UI 구현

백엔드 (NestJS 실습)

NestJS, MySQL

• 2-depth 카테고리 구현 시, 엔티티 간의 관계 설정 과정에서, 이전에 학습했던 '외래키는 자기 자신이 속한 테이블의 기본키를 참조할 수 있다'는 이론을 적용

github repository

velog

React, Redux, React-query, Styled-Components

역할

• 팀장

  • 코드 충돌 감소를 위해 git flow 도입, 팀원들이 git flow에 신속히 적응할 수 있도록 practice 폴더 생성 후 함께 실습하는 시간 마련

• 소셜 로그인 인증 메커니즘을 백엔드 팀원과 논의하며 access token과 refresh token을 관리하는 방법을 보안 관점에서 학습

• 렌탈 예약 기능 생성 시 사용한 직접 만든 달력 알고리즘 3개년 입출력 유닛테스트 통과하여 예약 기능에 대한 팀원들의 신뢰 확보

프로젝트 회고 및 개선할 점

첫 프로젝트인만큼 아쉬운 점이 많이 남아 기록해두고 이후 프로젝트를 거듭하며 아래 사항을 개선해왔습니다.

• 코드 품질을 위한 컨벤션 부재

  • eslint, prettier를 충분히 이용하지 못함

• 일관되지 못한 상태 관리 로직 (data-fetching 시 redux와 react-query 혼용)

• data-fetching 로직과 UI가 분리되지 않음

• 토큰을 수동으로 추가