항해 플러스 프론트엔드 5기 수료

4챕터 회고 바로 보기

항해 플러스 프론트엔드 과정 후기

사실 이번주도 평범하게 챕터에 대한 학습한 내용에 대한 큰 틀만 작성하려고 하였습니다.

아무런 관련없이 이 글을 찾아 들어오시는 분들에게는 후기가 더 중요한 내용이 될 것 같아 항해 플러스 프론트엔드 과정에 대하여 간략하게 나마 챕터별 내용과 어떤 분들에게 도움이 될 지에 대한 것을 남겨 보려고 합니다.

수료식에서 많은 분들이 저와 같은 경험을 하신 것 같아 다른 분들도 좋은 경험이 되었으면 하는 마음에 후기를 먼저 작성해봅니다.

챕터 별로 무엇을 배우는 지

• 챕터 1: 프레임 워크 없이 SPA 만들기 & React, Beyond the Basics
  • 기본 Vanilla JS를 활용하여 DOM의 조작방식을 이해하고, 현대의 프레임워크가 어떻게 동작을 하는 지 알게 됩니다.
  • 현재 FE개발을 하시는 분들은 바로 React, Vue를 접하게 되는 경우가 많은데, 1~3 주차 과정에서 진짜 기본기를 체득하는 과정을 경험하실 수 있습니다.
  • 과정중에는 물론 React를 위주로 과제가 진행이 되지만, 기본기를 익혔을 때의 장점은 React에 국한된 것이 아닌, 웹이 동작하는 방식에 대한 이해로, 다른 프레임 워크를 쓰더라도 프레임워크 저반에서는 이런 동작을 하고 있겠구나 하는 이해가 가능해집니다.
• 챕터 2: 클린 코드와 리팩토링, 디자인 패턴과 함수형 프로그래밍, 관심사 분리와 폴더구조
  • 더티코드(현실적으로 가장 나와 가까운 코드)를 깔끔한 코드로 리팩토링하는 과정에서 어떤 것이 필요한 지 알게됩니다.
  • 가장 깔끔한 코드와 디렉토리 구조는 사실 누가 설명하지 않아도 바로 알 수 있는 구조와 패턴을 보인다는 것이 가장 중요하다고 느껴졌었습니다.
  • 그리고 다른 챕터보다 가장 빠르게 현업에 반영할 수 있는 과정이고, 수료식에서 대부분의 교육생들이 1위로 뽑은 챕터입니다.
  • 정답은 아니지만, 서로 공감할 수 있는 코드와 디렉토리를 구성하여 타인과의 소통을 유리하게 할 뿐만 아니라, 과거의 나와의 소통에도 도움이 되게 발전합니다.
• 챕터 3: 프론트엔드 테스트 코드
  • 말로만 듣던 테스트 코드를 체득하고, 테스트와 TDD의 개념에 대하여 알 수 있는 과정입니다.
  • 1~2 챕터 때도 작성된 테스트 코드가 존재하여 어느정도 동작에 대한 개념을 인지하고 있는 상태에서 직접 기능 요구사항에 맞게 테스트를 코드를 짜는 과정을 숙달합니다.
  • 테스트 코드의 스코프를 어떻게 잡아야 하는 지, 테스트 환경 세팅은 어떻게 하는 지 알게 됩니다.
  • 과정 중 아마 가장 도전적인 챕터가 아니었나 생각이 듭니다.
  • 꺾이지 않고, 끝까지 도전해보면 정말 도움이 많이 되는 챕터입니다.
• 챕터 4: 인프라 관점의 성능 최적화 & 코드 관점의 성능 최적화
  • 프론트엔드 개발자 수준에서의 인프라 환경 세팅에 대한 이해와 숙달, 성능 개선을 위한 측정 툴들을 배우게 됩니다.
  • 코딩만 할 줄아는 주니어에서 조금 더 성장한 주니어가 될 수 있습니다.
  • DevOps의 맛을 체험할 수 있는 과정이었습니다.
  • 저의 경우에는 현업에서 직접하고 있는 부분들이라, 이론적인 측면에서 도움이 많이 되는 챕터였습니ㅏ.

이런 분들께 추천드립니다.

• 지방에 거주하거나 소규모 개발팀에 속해 개발자 관련된 커뮤니티가 부족하신 분들
• 주니어로 업무는 하고 있는데, 잘하고 있는 지 자신감이 들지 않는 분들
• 기술 부채가 심해, 업무 환경에서는 개발 실력이 늘지 않을 것 같으신 분들
• 최근 트렌드에 대하여 이해를 넘어서 빠르게 체득하는 과정이 필요하신 분들
• 사수가 없는 분들
• 유명 시니어 개발자 분들의 이력서 코칭이 필요하신 분들

돈 값을 하는 지?

저는 과정 시작 바로 전주에 신청하게 되어 거의 최대 금액으로 신청했었습니다.
금액을 보면 사실 적지 않은 돈이라고 처음에 느껴졌었습니다. (코치님 초대 코드로 일부 할인을 받았습니다.)

그런데, 생각해보면 월~목 저녁 8시부터 10시까지, 늦게는 새벽까지도 팀 토의와 시니어 코치님들 멘토링을 받고, 토요일은 오후 내내 개념에 대한 교육, 커뮤니티를 경험 할 수 있다는 점을 그것도 무려 10주 동안이나 받는 다는 것은 시니어 분들 노임 단가 생각해보면 이게 단체여서 가능한 과정이구나 싶은 생각이 들었습니다.

그리고 무엇보다 거의 정가를 친 입장에서, 내가 이 돈을 주고 과정에 들어왔는데 하는 생각에 더 열심히 과제를 해결하는데 참여하게 되고, 뭐라도 하나 더 배워가자 하는 마음이 절로 들게 되는 이점도 있었습니다.

5기 까지 오면서 커리큘럼에 대한 완성도는 매우 높았고, 내가 얼마나 투자하여 뽑아가는 지만 달라진다고 생각이 되었습니다.

무엇보다 저는 풀스택 개발을 하고 있는 입장에서 1~2주차에 아 프론트 5기가 이정도면 백엔드 9기 과정도 들어보고 싶은데? 하는 마음이 들었었고, 가장 할인율 높은 시기에 바로 백엔드까지 같이 결제를 하게 되었습니다.

아마 궁금해서 이 글을 읽어보시고 다음 6기로 진행을 하시는 분들은 백엔드 과정 9기에서도 고군분투하고 있는 저를 보실 수도 있으실 것 같습니다.

과정 수료생도 다른 분들께 20만원 할인을 제공해드릴 수 있어 코드를 남겨둡니다.

※ 추천코드 : CdNkjs
※ 신청링크 : https://bit.ly/3JV04NX

마지막으로

항해 플러스 프론트엔드 과정을 시작하면서 몇가지 목표가 있었습니다.

• 2일에 한번은 일기 처럼이라도 기록을 해보자
• 못해도 하루에 2시간은 집중하자
• 토~일에 집중해서 주중에 부담이 없게 과제를 열심히 수행하자.
• 심화까지 꼭 도전해서 더 많이 얻어가자

Velog를 항해플러스 시작하면서 처음으로 작성해보게 되었고, 7주차 테스트 코드에서 약간 어려워 지기 전까진 2일마다 꼬박 기록을 해봤습니다. (테스트 코드 부터 과제에 치여 글쓰기는 살짝 꺾였습니다.)

그래도 엉덩이 붙히고 2시간 이상씩은 코딩과 개념공부에 집중을 열심히 해서 붉은 잔디도 빼곡하게 채웠습니다.
(3일차는 종료 실수, 중앙에 하루는 시스템 에러, 마지막 날 잔디는 확인 불가)

과제 또한, 다행하게도 모두 통과하여 가장 높은 등급에 뱃지를 획득 할 수 있었습니다.
잔디나 뱃지, 학습 시간 측정 등 나름 시스템적인 부분에서 알게 모르게 동기부여가 되는 것들이 있었습니다.

그리고, 생각에도 없던 회고상 수상..

(일부러 작게 올렸더니 피고상처럼 보이네요.)

과정을 진행하면서 이과지만 글을 조금이라도 써보자 하는 마음에 매주 제출했던 WIL을 좋게 봐주셔서
성심당 빵만 전달하고, 박수만 치다 올 줄 알았던 수료식에서 상장을 받게 되었습니다.

함께 해주셨던 팀원들과 메이트님들, 그리고 과정을 알차게 제공해주신 코치님들과 운영진분들께 감사하다는 말씀 남기면서 프론트엔드 과정 마지막 회고를 마치도록 하겠습니다.

한달 쉬고 백엔드 과정으로 다시 돌아오겠습니다. 😊

---

4챕터 회고

1. 먼저

이번 챕터는 사용자 입장에서 어플리케이션 성능을 최적화 하는 방법을 배우는 과정이었습니다.
9주차는 약간 쉬어가는 주차라고 느껴지는 과정이었지만, 10주차는 고민을 많이하고 시간을 쏟아야 하는 과정이었습니다.

어쩌면 현업에선 굳이 하면서 외면했던 부분일 수도 있고, 사용자의 요청이 많지 않은 환경이라면 선택과 집중을 위해 우선순위를 낮게 관리하는 분야라는 생각이 들었습니다.

다만 개발자로써, 그리고 언젠간 성능을 반드시 고려해야할 대규모 트래픽을 발생시키는 서비스를 개발할 것을 대비하여 정확하에 어느 부분에 최적화가 가능한 지를 알 수 있게 되는 과정이었다고 생각합니다.

챕터 구성

• Chapter 4-1. 인프라 관점의 성능 최적화
• Chapter 4-2. 코드 관점의 성능 최적화

2. 챕터 목표

9주차는 프론트엔드 개발자 수준에서 알아야 할 DevOps 환경에서의 성능을 최적화하는 것을 목표로 했습니다.
인프라 단계에서의 최적화 및 프론트엔드 배포 파이프라인의 이해, CDN을 통한 캐싱전략을 수립하는 것을 단계적으로 구현하는 것을 각각의 항목으로 진행이 되었습니다.

10주차는 코드 레벨에서의 성능 최적화를 구현하고, 성능 측정 도구를 활용할 수 있고, 바닐라 JS 프로젝트, React 프로젝트를 최적화하여 배포하는 것을 목표로 하고 있습니다.

3. 성취

먼저 9주차 과정의 경우에는, 원래 현업에서 하던 업무와 크게 다른 점이 없어 기술적인 부분으로 크게 성장한 것은 아니지만, 중간 중간 찾아보면서 배포 파이프라인을 구성하는 하는 단계에서 주로 쓰는 자동 배포환경에 대한 나만의 템플릿 yml을 구축해논 점의 성과가 있었습니다.

• 프로젝트의 코드가 수정되어 main 브랜치에 병합될 경우 git actions가 동작합니다.

  • .yml에서 *.md 파일은 예외처리하여, 단순 README.md 수정은 git actions 가 트리거 되지 않도록했습니다.

    on:
      push:
        branches:
          - main
        paths-ignore:
          - '*.md'
    
      workflow_dispatch:

• Git actions으로 가상 머신의 ubuntu-latest 환경에서 빌드된 정적 파일들을 S3 Sync로 배포가 됩니다.

  • npm ci 로 package-lock.json으로 의존성을 설치하고, npm run build로 프로젝트를 빌드합니다.

    jobs:
      deploy:
        runs-on: ubuntu-latest
    
        steps:
          - name: Checkout repository
            uses: actions/checkout@v4
      
          - name: Install dependencies
            run: npm ci
      
          - name: Build
            run: npm run build

  • 정적 빌드된 파일을 aws s3 sync 로 저장된 AWS_ACCESS_KEY와 같은 github secrets에 저장된 환경변수를 이용하여 배포합니다.

          - name: Configure AWS credentials
            uses: aws-actions/configure-aws-credentials@v1
            with:
              aws-access-key-id: ${{ secrets.AWS_ACCESS_KEY_ID }}
              aws-secret-access-key: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
              aws-region: ${{ secrets.AWS_REGION }}
      
          - name: Deploy to S3
            run: |
              aws s3 sync out/ s3://${{ secrets.S3_BUCKET_NAME }} --delete

• S3 배포 이후, CloudFront 엣지 로케이션에 캐싱된 이전 파일들을 무효화합니다.

  • aws cloudfront create-invalidation을 이용해 이전에 저장된 캐싱 정보를 무효화합니다.

          - name: Invalidate CloudFront cache
            run: |
              aws cloudfront create-invalidation --distribution-id ${{ secrets.CLOUDFRONT_DISTRIBUTION_ID }} --paths "/*"

• 사용자는 S3 혹은 CloudFront 도메인으로 접근이 가능합니다.

  • s3-website 로 접근 시는 원본에 바로 접근하며, http 만 접근이 가능합니다.
  • CloudFront 접근 시에는 엣지 로케이션에 저장된 캐싱 정보가 있다면 캐싱을 먼저 제공하고, 없는 경우에 원본을 제공합니다.

10주차 과정은 만들어진 Vanilla js 프로젝트를 성능 측정 도구를 활용하여 코드 상에서의 문제를 해결하는 basic과정과 더미 API와의 통신하는 과정이 포함된 react-vite 프로젝트를 바탕으로 불필요한 리랜더링을 일으키는 상태관리를 해결하는 advanced과정을 숙달했습니다.

• basic: https://github.com/anveloper/front_5th_chapter4-2_basic
• advanced: https://github.com/anveloper/front_5th_chapter4-2_advanced

---