프론트엔드와 THE TWELVE-FACTOR APP

간단 소개

FE 개발자가 12Factor App 원칙을 이해하고 실제 서비스에 적용한 사례를 소개하며, 특히 코드베이스, 종속성, 설정, 빌드/릴리즈/실행 분리, 로그 시스템 구축의 중요성을 강조한다.

AI Summary

12Factor App 소개 및 FE 적용의 필요성
- 12Factor App은 독립적인 애플리케이션 운영을 위한 12가지 요소로, BE 영역에서 필수 원칙으로 여겨짐
- FE 개발 스펙트럼이 넓어짐에 따라 FE 개발자도 12Factor를 이해하고 적용하는 것이 중요
- Next.js 기반 서비스에서 FE 개발자가 직접 운영하는 사례가 늘고 있으며, API 라우팅, 미들웨어 등의 기술 변화도 이를 뒷받침
12Factor App 주요 원칙과 FE 적용 사례
- 코드베이스: 서비스 간 의존성을 낮추고 독립된 커뮤니케이션 구조를 유지하는 것이 핵심. 모노레포는 각 패키지가 별도의 코드베이스가 되므로 12Factor 위반이 아님
- 종속성: Node.js 버전 명시, package.json 버전 고정, 도커 컨테이너화 등을 통해 외부 시스템으로부터 독립성을 확보
- 설정: 환경별 변수를 코드 내부에 두지 않고 외부에서 주입받아 환경 독립성을 확보. Next.js의 runtimeConfig 활용, Sidecar Nginx 프록시 방식 등 다양한 방법 존재
- 빌드, 릴리즈, 실행: 각 단계를 철저히 분리하여 개발과 운영의 독립(DevOps)을 실현. 도커를 이용해 배포에 필요한 모든 설정을 결합하고, 릴리즈된 결과물을 여러 환경에서 실행 가능하도록 함
로그의 중요성 및 로그 시스템 구축
- FE 영역에서 로그 중요도를 높게 보고, 손쉽게 로그를 남기고 수집하여 중앙화된 로그 분석 시스템을 통해 열람하는 것을 목표
- 미들웨어 엑세스 로그, 애플리케이션 에러 로그(Sentry), 서버사이드 로그, 클라이언트사이드 로그를 수집하여 이슈 트래킹에 활용
- 특히, async_hooks를 이용하여 요청의 흐름을 추적(tracing)할 수 있도록 contextId를 로그에 남기는 것이 유용