천지인 이력서

배경: 대시보드 파트를 구현할 때, 한 페이지에서 여러 API 호출이 연쇄적으로 이루어지며 화면의 데이터가 순차적으로 나타나는 문제가 발생했습니다.

액션: 기존 useEffect 내부에서 개별적으로 데이터를 가져오던 방식 대신, React Router의 loader에서 병렬 요청을 처리하고 페이지로 전달하는 방식으로 최적화 했습니다.

결과: 페이지 내 데이터가 순차적으로 로드되던 현상이 사라졌습니다. 이를 통해 사용자에게 일관된 화면을 제공할 수 있었습니다.

배경: 인수인계 받은 초기에 hosts.ini 파일을 수정하여 프로덕션 테스트 환경을 구성하고 있었습니다. 이 방식은 다른 개발자들의 온보딩과정에서 혼란을 주었고, 로컬과 프로덕션 환경 전환이 번거로웠으며, 다른 프로젝트를 확인할 때마다 추가적인 설정 변경이 필요하다는 문제가 있었습니다.

액션: Next.js의 next dev와 next start 스크립트를 기반으로 환경을 분리하고, 환경 변수 기반 설정을 적용하여 로컬과 배포 테스트 환경을 명확하게 구분하도록 개선했습니다. 또한 Next.js에서 제공하는 proxy를 이용해 로컬 개발 환경에서 API 요청을 우회하여 문제 없이 요청하도록 마이그레이션을 진행했습니다.

결과: 개발자들이 별도의 설정 변경 없이 일관된 환경에서 개발과 테스트를 진행할 수 있게 되었고 개발자 경험(DX)이 향상되었습니다.

배경: 기존 시스템에서 잘못된 URL 경로로 접근할 경우, 페이지가 잘못된 레이아웃으로 렌더링되는 문제가 있었습니다. 확인해보니 Next.js의 라우팅 시스템을 이용하고 있지만, 적절한 라우팅 가드가 이루어지지 않고 있는 점이 문제였습니다.

액션: 문제를 해결하기 위해 API에서 받아온 분류 코드와 URL 경로를 비교하여 일치하지 않으면 서버에서 바로 리다이렉트를 적용하는 방식으로 개선을 추진했습니다. 처음에는 클라이언트 사이드에서 렌더링 후 리다이렉트하는 방법(useEffect를 통해)을 고려했지만, 페이지가 렌더링 되고난 후 리다이렉팅 된다는 점에서 성능 저하와 비효율적인 동작을 우려하여, SSR을 활용한 Next.js 서버 사이드에서 리다이렉트를 처리하는 방법(Middleware를 이용하는 방법)으로 전환했습니다.

결과: 잘못된 레이아웃 렌더링 문제를 해결하였고, 불필요한 리렌더링을 제거하고 리다이렉션 속도를 개선했습니다.

배경: 회원가입이 여러 단계로 나뉘어 있었고, 개별 state로 관리하다보니 각 단계간 데이터 전달이 불편하고 데이터 흐름을 파악하기 힘들다는 문제가 있었습니다.

액션: 퍼널 구조를 도입하여 회원가입 단계를 하나의 흐름으로 연결하고, useFormState와 Server Action을 통해 서버에서 상태를 관리함으로써 데이터 흐름을 한 눈에 볼 수 있도록 설계하였습니다. 또한 추가적으로 Zod를 사용해 입력 값을 검증하여 데이터의 타입 오류를 런타임 환경에서도 검증할 수 있도록 했습니다.

결과: 회원가입을 하는 동안의 데이터를 한 눈에 파악할 수 있게 되었으며, zod 기반 데이터 유효성 검증을 추가하여 유효하지 않은 데이터가 저장되는 것을 방지할 수 있었습니다.

배경: 프로젝트에서 최초 로딩 시간이 7초나 걸리는 문제가 발생했습니다. 네트워크를 확인해보니 SPA로 만들어진 사이트라 모든 기능을 초기 페이지에서 불러오는데, 그 중 엑셀 관련 기능을 위해 Base64 형식으로 인코딩한 폰트 파일을 불러오는 데 약 5초 가량이 소요됨으로써 문제가 되는 것을 확인했습니다.

액션: 먼저 폰트파일을 압축률이 좋은 woff2 형식의 파일로 교체하려 했으나 라이브러리에서 지원하지 않았기 때문에 불가능 했고, 최종적으로 Base64 형식의 폰트 파일을 엑셀 기능이 필요한 페이지에서 불러오도록 레이지 로딩 및 서스펜스를 적용함으로써 최초 페이지의 로딩에서 해당 파일을 분리했습니다.

결과: 캐싱이 없는 상태에서 최초 페이지의 로딩 시간을 7초에서 2초 이내로 5초 가량 감소시킴으로써 사용자 경험을 크게 향상시켰습니다.