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

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

Modal과 Drawer 컴포넌트는 전통적으로 루트에 두고 전역 상태로 제어했지만, 스타일링 문제(z-index 등)가 있었습니다. React의 Portal을 활용하면 부모 DOM 계층을 벗어나 원하는 위치에 컴포넌트를 쉽게 렌더링할 수 있어 이런 문제를 해결할 수 있습니다. 실제 프로젝트에서 Portal을 이용해 Drawer를 구현하니 추가 CSS 없이도 원하는 UI를 손쉽게 만들 수 있습니다.

AWS S3는 대용량 데이터를 저장하는 객체 스토리지 서비스로, 버킷을 생성해 정적 웹사이트를 호스팅할 수 있다.CloudFront는 전 세계에 분산된 CDN 서비스로, S3와 연동해 정적 웹사이트의 콘텐츠를 빠르고 효율적으로 전달한다.S3 버킷 정책과 퍼블릭 엑세스 설정, CloudFront 배포 설정을 통해 웹사이트 성능과 접근성을 높일 수 있다.