[항해 플러스 프론트엔드 코스 5기] 9주차 회고

 

안녕하세요! 프론트엔드 개발자 강신규입니다.

 

9주차 과제 회고 바로 시작하겠습니다.

---

항해 플러스 프론트엔드 9주차 과제

프론트엔드 배포 파이프라인

개요

1. Checkout 액션을 사용해 코드 내려받기
2. npm ci 명령어로 프로젝트 의존성 설치
3. npm run build 명령어로 Next.js 프로젝트 빌드
4. AWS 자격 증명 구성
5. 빌드된 파일을 S3 버킷에 동기화
6. CloudFront 캐시 무효화

주요 링크

• S3 버킷 웹사이트 엔드포인트 : http://front-5th-chapter4-1-singyukang.s3-website.ap-northeast-2.amazonaws.com/
• CloudFrount 배포 도메인 이름 : https://donf7c57g46t3.cloudfront.net/

배포 프로세스 구조

주요 개념

GitHub Actions과 CI/CD 도구:

• GitHub Actions는 GitHub에서 제공하는 CI/CD(Continuous Integration/Continuous Deployment) 플랫폼으로, 소프트웨어 개발 워크플로우를 자동화하는 도구입니다.
• CI/CD는 지속적 통합(Continuous Integration)과 지속적 배포(Continuous Deployment)를 의미합니다. CI는 코드 변경 시 자동으로 빌드와 테스트를 수행하여 코드의 품질을 유지하고, CD는 코드가 성공적으로 빌드되면 자동으로 배포하여 최신 상태를 유지합니다.
• commit을 통해 코드를 브렌치에 푸시하면은 자동으로 빌드, 테스트, 배포를 수행합니다.

S3와 스토리지:

• Amazon S3 (Simple Storage Service)는 AWS에서 제공하는 확장 가능한 객체 스토리지 서비스입니다. 정적 웹사이트 호스팅을 포함해 다양한 기능을 지원하며, 높은 내구성과 가용성을 바탕으로 여러 형식의 파일을 안정적으로 저장하고 서비스할 수 있습니다.
• 대표적인 사용 사례로는 백업 및 복원, 데이터 아카이빙, 빅데이터 분석용 데이터 레이크, 정적 웹사이트 호스팅 등이 있습니다.

CloudFront와 CDN:

• Amazon CloudFront는 AWS에서 제공하는 콘텐츠 전송 네트워크(Content Delivery Network, CDN) 서비스입니다. 전 세계에 분산된 엣지 로케이션(Edge Location)을 통해 사용자에게 정적 및 동적 콘텐츠를 빠르고 안전하게 전달합니다.
• CDN은 사용자와 콘텐츠 서버 간의 거리를 줄여 지연 시간을 최소화하며, 이미지, 동영상, HTML, CSS, JavaScript 파일 등 다양한 콘텐츠의 로딩 속도를 향상시킵니다.
• CloudFront는 S3, EC2, Load Balancer 등 다른 AWS 서비스와도 긴밀하게 통합되며, HTTPS 암호화, 사용자 인증, 캐싱 정책 설정 등 다양한 기능을 통해 보안성과 성능을 동시에 제공합니다.

캐시 무효화(Cache Invalidation):

• CloudFront의 엣지 로케이션에 캐싱된 콘텐츠를 강제로 새로고침하여, 사용자가 항상 최신 버전의 콘텐츠를 받을 수 있도록 보장하는 과정입니다.
• 새로운 배포 시 이전 캐시된 콘텐츠를 무효화하여 최신 콘텐츠를 제공합니다.
• GitHub Actions의 deployment.yml 워크플로우에서 create-invalidation 명령어를 통해 자동으로 수행됩니다.

Repository secret과 환경변수:

• Repository Secret은 GitHub 저장소에서 민감한 정보를 안전하게 관리하기 위한 기능입니다. 환경 변수와 유사하게 동작하지만, 외부에 노출되지 않도록 보호됩니다.
• AWS 인증 정보 같은 민감한 정보를 안전하게 저장하고 관리합니다.
• 워크플로우 실행 시 필요한 값들을 환경 변수로 주입하여 사용합니다.

CDN과 성능최적화

Time to First Byte	Start Render	First Contentful Paint	Speed Index	Largest Contentful Paint	Cumulative Layout Shift	Total Blocking Time	Page Weight
3.385S	5.700S	6.499S	7.256S	10.302S	.582	5.379S	3,959KB
When did the content start downloading?	When did pixels first start to appear?	How soon did text and images start to appear?	How soon did the page look usable?	When did the largest visible content finish loading?	How much did the design shift while loading?	Was the main thread blocked?	How many bytes downloaded?

Time to First Byte	Start Render	First Contentful Paint	Speed Index	Largest Contentful Paint	Cumulative Layout Shift	Total Blocking Time	Page Weight
.733S	2.600S	2.605S	3.920S	7.006S	.582	4.793S	3,047KB
When did the content start downloading?	When did pixels first start to appear?	How soon did text and images start to appear?	How soon did the page look usable?	When did the largest visible content finish loading?	How much did the design shift while loading?	Was the main thread blocked?	How many bytes downloaded?

 

📊 성능 지표 비교

항목	S3 배포	CloudFront 배포	개선 (절대값)	개선률 (%)
Time to First Byte (TTFB)	3.385s	0.733s	⬇️ 2.652s	78.3% 개선
Start Render	5.700s	2.600s	⬇️ 3.100s	54.4% 개선
First Contentful Paint (FCP)	6.499s	2.605s	⬇️ 3.894s	59.9% 개선
Speed Index	7.256s	3.920s	⬇️ 3.336s	46.0% 개선
Largest Contentful Paint (LCP)	10.302s	7.006s	⬇️ 3.296s	32.0% 개선
Cumulative Layout Shift (CLS)	0.582	0.582	➖ 0.000	0.0% (동일)
Total Blocking Time (TBT)	5.379s	4.793s	⬇️ 0.586s	10.9% 개선
Page Weight	3,959KB	3,047KB	⬇️ 912KB	23.0% 감소

측정 지표	S3 단독	CDN	개선율
총 완료 시간	1.38s	1.12s	18.8% ⬇️
DOMContentLoaded	81ms	27ms	66.7% ⬇️
로드	109ms	55ms	49.5% ⬇️
전송 크기	59.5kB	61.1kB	2.7% ⬆️
리소스 크기	5.4MB	5.4MB	0% (동일)

🔍 CDN 적용 전후 성능 비교 분석

• CloudFront CDN을 도입함으로써 전반적인 페이지 로딩 성능이 확연히 개선된 것을 확인할 수 있습니다. 아래는 주요 지표를 중심으로 한 비교 분석입니다.

항목	개선 내용
Time to First Byte (TTFB)	3.385초에서 0.733초로, 약 78.3% 감소. 서버 응답 대기 시간이 크게 줄어들어 사용자 체감 속도 향상에 기여했습니다.
Start Render / FCP / Speed Index	최초 화면 렌더링 및 콘텐츠 표시 시점이 각각 54.4%~59.9% 개선되며 사용자에게 빠른 피드백을 제공하게 되었습니다.
Largest Contentful Paint (LCP)	10.3초에서 7초로 약 32.0% 개선, 검색 엔진 최적화(SEO)와 사용자 만족도 측면에서 긍정적인 변화입니다.
Total Blocking Time (TBT)	메인 스레드 차단 시간이 10.9% 감소하여 사용자 인터랙션 반응성도 일부 개선되었습니다.
Page Weight	3,959KB → 3,047KB로 23% 감소, 리소스 최적화로 인한 네트워크 효율 향상이 이루어졌습니다.

 

코치님 피드백

 

정말 수고 많으셨습니다 :) 이제 성능 최적화라는 마지막 챕터에 도착했네요. 

이번 과제는 React의 useMemo, useCallback 같은 컴포넌트 단위의 프론트엔드 레벨의 최적화가 아니라 웹이라는 관점에서 넓은 생태계를 통해 다양한 방법의 최적화들을 경험해보는 시간이었습니다.

이번 과제를 통해 성능 개선이라는 영역이 다양한 파이프라인을 통해서 가능하다는 것을 알게 되는 시간이 되었기를 바랍니다. 이미지 최적화부터 캐싱 전략, CDN 설정, 서버 응답 시간 단축등 프론트엔드 개발자이지만 내가 만든 결과물의 성능을 높이기 위한 노력들은 프론트엔드 밖에도 있다는 것을 알게 되는 시간이 되었을거라 생각합니다.

이제 진짜 마지막 1주가 남았네요. 여기까지 달려오시느라 정말정말 고생 많았습니다. 마지막 주까지 힘내서 완주하시길 응원합니다! :) 화이팅입니다.