본문 바로가기
코딩일기/항해99

FE 성능최적화 일대기

by zenna 2025. 2. 22.
야! 너두 수치화된 기술경험 가질 수 있어~!

 

 

가입이 제일 어려운 AWS

분명 구글 계정에 연동된 계정이 있는건 알겠는데.. 어딘가에 적어둔 비밀번호도 찾았는데 12자리 verify 키는 뭔가요. 그리고 왜 나는 내 비밀번호를 찾을 수 없나요…!

결국 네이버 계정으로 새로 가입하기로 마음먹었지만 신용카드 연결부터 한세월.

가입을 완료하고 S3 - 버킷으로 진입

모든 개발자 교육에는 AWS로 요금 폭탄을 맞았다는 설화가 전해진다. 나는 그얘기를 참 무서워한다.
매번 AWS 실습 때에는 a이름이 버킷이었나..B이름이 버킷이었나...헷갈렸던 기억이 있었으므로 이름 안에 "뭐다"를 적어주는게 좋았다.

 

중간과정은 생략하고 일단 next.js 업로드 성공!

 

CDN 추가. CDN을 이용한 부분이 훨씬 빠르고 압축되어서 배포되는 모습 확인

좌 : 그냥 S3 / 우 : CDN배포

 

IAM 작업중. 나에게 IAM은 아이브 뿐인데.

여기서 내 예측이 그대로 들어맞았다. 내 버킷 이름을 입력해야 하는데 zenna bucket으로 설정한것까지도 기억하면서 zenna-bucket인지 zennaBucket인지 헷갈리기 시작. 위에 캡쳐가 있으니 걱정없다. (그리고 사실 버킷 명명규칙에 대문자는 불가능했다)

오 이제 생성한 사용자로 로그인해야 하는데 나한테 alias 알려준적 없잖아요

 

콘솔 로그인 세부정보에 AccountID같은건 없었어서 당황했는데.,,,.....

콘솔 로그인 URL의 12자리 숫자를 의미하는 거였다. 헷갈리잖아요

 

챗GPT ....! C최G고P파트너T티쳐

 

나만 당황한게 아니었나보다.

AWS는 뭐가 뭔지 찾기가 힘들어서..

 

어떻게 꿈냥꿈냥해서 다 만들었고.. 성능 보고서 작성하기 시작

 

보고서는 따로 포스팅해야겠당!

 

 

FE 배포 파이프라인 구축(CI/CD)

프론트엔드 배포 CI/CD 파이프라인 구축하기 🤷‍♂️ 목적변경된 코드를 GitHub에 올리면 자동으로 지정된 아래 작업을 완료하고 배포하도록 만듦📦 구축된 CI/CD 의 빌드 과정Checkout 액션을 사

zenna9.tistory.com

 

 

FE -CDN 도입 성능 보고서

준비CDN도입 전 : S3CDN도입 후 : CloudFront 측정 환경 세팅측정 환경 : 동일한 PC / 윈도우 / Chrome측정 도구 : Chrome 개발자 도구 - Network, Performance, Lighthouse 기대 효과TTFB 감소: 요청이 지역 엣지 서버

zenna9.tistory.com

 

728x90

댓글