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

9주차 과제
기본과제 pass😃
심화과제 pass😃

발제 목표

• 인프라 수준의 성능 최적화를 할 수 있다.
• CloudFront를 통해 빌드 결과물을 보는 것과 S3를 통해 빌드 결과물을 보는 것의 차이를 알수있다
• CDN 활용 사례와 압축 적용 사례를 알 수 있다.
• git actions 사용해보기

9주차 계획

• 기본/심화 과제 완료하기
• CDN 개념 이해하기

어려웠던 점

• 발제 자료가 잘되어있어서 차근차근 따라하니까 어려웠던점은 없었다!
• 개념이해가 가장 어렵다..ㅎㅎ.. 인프라 지식을 더 공부해야겠다.

배운점

• 코드 레벨 보단 인프라 레벨 성능최적화가 더 효율적이다

  • 1. 인프라 수준의 최적화 (강력하다, 우선순위가 젤 높다)
    • 1) 캐시 도입
    • 이미지 로딩이 느리다(LCP), 히어로 이미지
      • next.js에서는 <Image>
  • 2. 코드 수준의 최적화

• 프론트엔드 프로젝트가 배포되는 과정

  • 1) build 명령어를 통해 빌드를 진행한다
    • js, json, 이미지 등의 정적파일들이 생성된다
  • 2) 웹하드(storage)에 빌드 결과물을 올린다.
    • AWS에서 제공하는 s3에 빌드 결과물을 올린다.
    • 성능이 엄청 느리다
  • 3) 캐시 도입
    • AWS에서 제공하는 CloudFront를 통해 캐시를 세팅한다
  • 4) 도메인 연결

회고

• 우리회사에서는 jenkins를 사용하고있는데 git actions라는 것도 있었구나..!
  • 두가지의 차이점이 무엇인지 더 공부해봐야겠다.
• 우리팀은 시스템 담당자가 각각 2-3명씩 밖에 없어서 요구사항 별로 feature따고 dev에 merge하고 main에 push해서 main 기준으로 배포하는 방법으로 하고있어서, 많은 인원이 있는 팀에서는 어떤 방법으로 팀내에서 Git을 활용하여 협업하는지 궁금해졌다!
  • 네이버에서는 -> gitflow를 변형해서 사용하고 있다고 하신다
• 평소에 회사에서 네트워크나 인프라까지 굳이 내가 알고있어야하나..? 하는 생각이 들었었는데 이번 발제 주제를 통해서 생각이 바뀌었다..!
  • 발제 내용 ) 프론트엔드 개발자가 인프라 개념 알아야할까?
    • CDN의 작동 원리를 이해하면 더 효율적인 asset 관리가 가능하고, 캐싱 전략을 알면 애플리케이션의 성능을 크게 개선할 수 있어요. 장애 발생 시 원인을 파악하는 데도 유리합니다.
    • 또한 이런 지식은 백엔드 팀이나 DevOps 팀과의 커뮤니케이션을 원활하게 만들어줍니다. "이 기능을 구현하려면 서버 설정을 이렇게 바꿔야 해요"라고 명확하게 요청할 수 있게 되죠.
    • 결국 인프라에 대한 이해는 더 넓은 시야를 갖게 해주고, 더 나은 해결책을 찾는 데 도움을 줍니다. 완벽한 전문가가 될 필요는 없지만, 기본적인 개념과 원리를 이해하고 있다면 훨씬 더 효과적인 프론트엔드 개발자가 될 수 있을 거예요.
• 귀여운 우리팀