안녕하세요, 이상혁입니다

이 글은 프론트엔드 공통 코드를 기존의 런타임 API 방식에서 빌드타임 코드 포함 방식으로 전환한 경험을 다룹니다. 빌드타임에 공통 코드를 객체로 변환해 타입 안정성과 자동완성을 높이고, 네트워크 의존성과 유지보수 부담을 크게 줄였습니다. 이로써 초기 화면 속도, 코드 관리 효율, 개발자 경험이 모두 개선되었습니다.

기존 프로젝트의 복잡한 구조를 개선하기 위해 백엔드의 계층화 패턴을 프론트엔드에 적용했는데, 프레젠테이션, 비즈니스, 퍼시스턴스, 데이터베이스 계층으로 나누되 프론트엔드 특성에 맞게 외부 API와 Web Storage를 데이터 계층으로 대체했습니다. 실제 구현 과정에서는 초기 설계의 80%만 이행되었고, 도메인별 분리보다는 페이지 경로 기준으로 비즈니스 로직을 관리하는 방식으로 전환했으며, FSD(Feature-Sliced Design) 방식을 참고하여 각 라우트별로 컴포넌트와 훅을 묶어 관리하는 구조로 발전시켰습니다.