[항해 플러스 프론트엔드 3기] 9주차 WIL

Q1. 과제

  성능개선 1주차를 마무리하였습니다! 테스트 코드의 여파(?)를 감안해서 분량 조절을 해주셨습니다! 항해 막바지까지 단 한주를 남겨두고 단비와 같은 휴식을 가질 수 있었습니다.ㅎㅎ

  과제 주제는 프론트엔드 인프라 성능 최적화였고 내용은 AWS 가입부터 S3 버켓 생성 그리고 CloudFront를 구축해보는 것이었습니다. 프론트엔드 배포 경험은 면접 단골 질문인데 이렇게 쉬운 내용인 줄은 정말 상상도 못했습니다. 간단하고 분량도 적었지만 인프라 관련 지식의 혈이 뚫리는 느낌이었습니다.

Q2. 시도

  AWS 가입부터 S3, CloudFront 구축, 보고서 작성까지 문제 없이 마무리했습니다. 이번 과제에서 학습한 개념들을 정리하면서 이번주 WIL 간단하게 마무리하도록 하겠습니다.

1. GitHub Actions와 CI/CD 도구
 - GitHub Actions는 소스 코드 저장소의 변경 사항에 따라 자동으로 배포 워크플로우를 실행하는 CI/CD 도구입니다.

2. S3와 스토리지
 - S3는 AWS에서 제공하는 정적 파일(HTML, CSS, JS 등)을 저장하고 제공할 수 있는 안정적이고 확장 가능한 스토리지 서비스입니다.
 - S3를 정적 웹사이트 호스팅에 활용하면, React 같은 SPA(Single Page Application)를 배포할 때 간단히 설정할 수 있습니다.
 - 빌드된 정적 파일을 업로드하면 별도의 서버를 두지 않아도 웹사이트가 동작하며, 비용도 저렴합니다.

3. CloudFront와 CDN
 - CloudFront는 AWS에서 제공하는 CDN(Content Delivery Network) 서비스로, 전 세계 여러 엣지 로케이션에 파일을 캐싱하여 사용자에게 더 빠르게 콘텐츠를 제공할 수 있습니다.
 - 사용자의 위치에 따라 파일 전송 속도를크게 향상시킬 수 있고, 글로벌 사용자 기반 프로젝트에 필수적입니다.

4. 캐시 무효화(Cache Invalidation)
 - 배포 후에도 CloudFront에 캐싱된 이전 버전의 파일이 유지될 수 있습니다.
 - 캐시 무효화를 통해 CDN의 이전 버전 파일을 삭제하고 원본 서버에서 업로드된 파일로 다시 가져가도록 만들 수 있습니다.
 - 캐시 무효화는 AWS Console 또는 cli를 통해 GitHub Actions에서 배포 시 삭제하도록 설정할 수 있습니다.

5. Repository secret과 환경변수
 - AWS 자격 증명(AWS_ACCESS_KEY_ID, AWS_SECRET_ACCESS_KEY)이나 CloudFront 배포 ID와 같은 민감한 정보를 안전하게 관리하기 위해 GitHub Repository secrets를 사용합니다
 - GitHub에서 Repository - Settings - Secrets and variables - Actions 경로로 접근하여 Repository secrets를 설정할 수 있습니다.
 - 이렇게 저장된 Repository secrets는 워크플로우 설정 파일에서 ${{ secrets.<SECRET_NAME> }}와 같은 형식으로 접근할 수 있습니다.
 - Repository secret은 수정 및 삭제는 가능하나 조회할 수 없습니다.
 - 팀 작업 시 민감한 정보가 코드에 노출되지 않도록 필수적으로 적용해야 합니다.

Q3. 9주차 느낀 점

  8주 동안 못잤던 잠을 몰아서 다 잔 것 같습니다. 회복한 체력을 모아서 마지막 10주차 열심히 달려보도록 하겠습니다!! 끝까지 화이팅!