갱신된 캐시 데이터 사용을 위해서 BFF의 요청 캐시 설정을 force-cache에서 no-cache로 변경하였습니다.

Cron Job을 통해 Stale While Revalidate 주기마다 한 번 호출하여 캐시 지속성 유지시켰습니다.

global-error.tsx를 두어 애플리케이션 단에서 발생하는 최소한의 에러 핸들링 페이지를 제공하였습니다.

Input 태그 value에 상태 변수를 두어 리액트에서 controlled되는 상태로 인지하게 만들어 리렌더를 방지하였습니다.

Flex의 기본 속성은 align-items: stretch이기 때문에 자식의 큰 요소 사이즈에 맞춰 자동으로 다른 요소도 사이즈도 늘어나게 되는데 align-items를 flex-start로 지정하여 시작 위치로부터 지정한 사이즈를 정상적으로 보이도록 수정하였습니다.

자주 호출되는 BFF API를 캐싱하여 리소스 사용을 줄이고 성능을 개선하였습니다. 캐싱이 필요한 API는 응답의 변동 주기에 따라 구분하였습니다. 변동이 적은 문제의 풀이 정보 같은 경우 Cache API로 한달마다 만료되도록 적용하였고, 오프라인에서도 확인할 수 있도록 하였습니다. 랜딩 페이지의 데일리 문제 풀이 상태는 Tanstack query로 30초의 캐싱 시간을 가져, 잦은 페이지 이동 시에 불필요한 추가 호출이 되지 않도록 구성하였습니다.

호출하는 API가 많아질수록 파라미터나 응답값으로 전달할 때 휴먼 에러가 날 수 있는 경우가 늘어납니다. 이를 방지하고자 Orval를 도입하여 타입을 자동으로 생성하였습니다. Axios, Fetch 등으로 HTTP Method를 포함하여 API 호출하는 함수 또한 자동 생성 가능했으나 현재는 Fetch를 커스터마이즈하여 사용하고 있었기 때문에 이 기능을 사용하진 않았습니다.

개인별로 맡은 작업량이 많은 상황에서 페이지 단위로 Pull Request을 올려서 진행하였습니다. 큰 모듈 단위로 진행하니 PR 내용이 길어지는 상황에 놓이게 되었고 작성시간 또한 길어지며 가독성 또한 좋지 않은 상황에 놓였습니다. 이 문제를 해결하기 위해 ChatGPT를 이용하여 PR 내용을 자동으로 생성하는 기능을 도입하였습니다. PR 제목과 설명을 작성할 때, 커밋 메세지 기반으로 제목을 만들고 하위 설명으로 ChatGPT가 변경된 파일의 내용을 분석하여 요약해주는 기능을 추가하였습니다. 이를 통해 PR 작성 시간을 단축하고, 가독성을 높일 수 있었습니다.

Next.js에서 공식적으로 지원하는 Fetch에 interceptor를 연동하여, 요청 전후에 특정 조건을 확인하여 핸들링하는 로직을 추가하여 사용성을 개선하였습니다. 또한 커스터마이즈하며 API 응답을 핸들링 하는 방식에 대해 고민할 수 있는 계기가 되었습니다.

기존 디자인을 포함한 개발이 완료되어갈쯤 디자이너가 새롭게 중도 합류하게 되었습니다. 디자인 시스템으로 웹 페이지를 구현하기 위해 타이포그래피, 색상, 간격 등 스타일을 정의하고, 컴포넌트 라이브러리를 구축하여 일관된 디자인을 유지할 수 있도록 하였습니다. 그 결과 개발 생산성이 높아졌고 유지 보수하는데에도 적은 시간이 드는 효과를 얻었습니다.

OAuth2 기능을 사용하여 간편 로그인 로직을 구현하였습니다. BFF API로 인증 code를 전달하여 사용자 정보를 서버에서 처리하고, 서버 인증 절차를 거친후 Frontend에 JWT 토큰을 전달하는 방식으로 구현하였습니다.