Chapter 3-1. 프론트엔드 테스트 코드 (1)
7주차는 6주차가 끝나고 공휴일 이슈로 한 주를 쉬어가게 되었고 급증한 과제 난이도에 많은 분들이 힘들어 하셨습니다.
과제는 115개의 단위테스트 및 통합테스트를 통과시키고 hard 기준으로 테스트를 위한 환경도 세팅해야 했습니다.
테스트 코드를 처음 접했지만 hard를 선택하면 bp를 받을 수 있다!라고 하셔서 호기롭게 hard를 선택했던것 같습니다.
msw를 통해서 테스트 환경을 구축하면서 괜히 어려운거 골랐나.. 싶었지만 다른 분들의 코드와 ai 덕분에 어찌저찌 잘 해결했던것 같습니다.
테스트 코드에 대한 인식 < 절망편😩 >
테스트코드를 작성하면서 느낀점은 생각했던것 이상으로 비용이 많이 든다는것을 알게 되었습니다.
그렇게 생각한 이유로는
- 테스트 환경을 구축하기 위해 필요한 것들이 많다. (msw를 통한 api 엔드포인트에 대한 모킹 구현, 경우에 따라서 테스트 서버가 필요)
- 높은 테스트 코드의 품질을 바란다면 그만큼의 대가(시간)를 치뤄야 한다.
커뮤니케이션 비용이 상당하다.
아마 현업에서 위와 같은 이유로 많은 회사들에서 테스트를 손으로 직접 테스트하거나 e2e테스트 정도로만 끝내지 않을까라고 생각하게되었습니다.
테스트 코드에 대한 인식 < 희망편😊 >
새로운 기술이 늘 그렇듯 낯설고 어려웠지만 그 과정속에서 나름의 재미를 느낄 수 있었습니다.
막연하게 재미있다고 생각했던것들의 이유를 살펴보자면..
- 지금 배우는 테스트 코드를 내가 만든 프로젝트에서 요긴하게 쓸 것 같다는 생각(거의 확신)이 들었습니다.
- 오픈소스에 관심이 꽤 있는데 많은 오프소스들에서 운영하는 테스트코드를 ai 없이(사실 불가능합니다.) 이해할 수 있겠다라는 기대가 있었습니다
자세한 코드는 이곳에서 확인해주세요!
https://github.com/hanghae-plus/front_5th_chapter3-1/pull/20
Chapter 3-1. 프론트엔드 테스트 코드 (2)
8주차에서는 TDD와 테스트 전략에 대해 학습하였습니다.(해당 포스트에서는 TDD 중심의 회고를 진행해보겠습니다.)
TDD(Test Driven Development)를 공부하며 세 가지 단계를 배울 수 있었습니다.
간략하게 TDD의 세가지 단계를 설명해보자면
- 실패하는 테스트 작성(Red)
- 테스트를 통과하는 코드 작성(Green)
- 코드 리펙토링
이렇게 세가지 프로세스를 반복하면서 개발을 진행하게 됩니다.
위의 프로세스를 처음 접했을때는 오! 이거 잘 적용하면 정말 안정적인 웹을 구축할 수 있겠다. 싶었습니다.
말 그대로 테스트를 주도하여 개발하는 방식이기 때문에 요구사항 위주의 코드들을 작성할 수 있고, 테스트 코드를 기반으로 안정적으로 개발할 수 있겠다고 생각했습니다.
과제는 저번주차에 진행했던 프로젝트에 여러 기능들이 더해진 프로젝트에서 테스트를 진행했습니다.
과제에 TDD를 도입하자마자 어려움이 찾아왔습니다.
TDD에서 제공하는 실패하는 테스트. 라는것을 나름대로 해석을 해봐도 코드레벨에서 적용하는것은 꽤 어렵게 다가왔습니다.
모든 단위테스트의 테스트 시나리오를 red로 만들고 시작 하는건가? 지금 작성하는 단위테스트에 대해서만 red가 되도록 작성해야하나? 이런 기준들이 모호하게 느껴졌습니다.
(과제를 점차 진행하면서는 하나의 단위테스트 단위마다 TDD의 프로세스를 도입하게 되었습니다.)
위의 단계에서 꽤 많은 시간을 투자하며 과제의 초반을 보냈습니다.
또한 실패하는 테스트 코드를 작성하고 성공하는 테스트 코드를 작성하면서 다시 실패하는 테스트 코드를 작성하는 경우도 많았기 때문에 제대로된 TDD를 수행했다고 생각이 들지는 않습니다.
위와 같은 경험을 하면서 수시로 요구사항이 달라지고 여러 엣지케이스를 다루는 프론트엔드에서의 TDD는 이상적으로 흘러가지 않겠다.라고 생각하게 되었습니다.
8주차를 진행하면서 모든 프로젝트에서 TDD를 따르기 위해 노력하기 보다는 프로젝트의 성질에 따라서 TDD를 일부 적용하거나 TDD의 프로세스를 참고하여 조금 더 안정성있고 요구사항에 맞는 테스트코드를 작성하는것에 의미를 두는것이 좋겠다라고 생각하였습니다.
Chapter 4-1. 인프라 관점의 성능 최적화
9주차와 10주차는 성능 최적화 챕터이며 9주차에서는 인프라 관점에서의 성능 최적화를 다루었습니다.
Next.js로 빌드된 프로젝트를 Github와 AWS를 사용해서 CDN이 적용된 CI/CD 파이프라인을 구성하는것이 과제의 목표였습니다.
그동안 프로젝트들을 진행하면서 위의 개념들을 자주 사용해봤기 때문에 학습을 하는데 큰 어려움은 없었습니다.
과제의 요구사항과 별개로 평소에 관심이 있었던 주제인 ‘캐시’에 대해 필자는 토스의 기술 블로그 “웹 서비스 캐시 똑똑하게 다루기”를 토대로 공부한것을 정리하여 pr로 제출하였습니다.
pr까지 작성하는데 하루만에 다 끝내어서.. 10주간의 기간중에 가장 무난하게 과제를 끝낸 주차였습니다.
자세한 내용은 pr에서 확인해주세요!
https://github.com/Nohgh/performance-optimization
Chapter 4-2. 코드 관점의 성능 최적화
9주차에서 인프라 관점에서의 성능 최적화를 진행했다면 마지막 10주차에서는 코드 관점의 성능최적화를 진행하였습니다.
최적화가 되어있지 않은 정적 웹사이트를 배포하고 성능을 개선하는 과제가 주어졌습니다.
밑의 사진을 pr에 작성한 성능 개선 표입니다.
위의 Lighthouse같은 경우는 배포를 하는 과정에서 자동으로 issue가 생성이 되도록하는 workflow를 통해서 작성된 보고서입니다.
위와 같이 극적인 개선을 인프라의 도움 없이 코드 레벨에서 진행할 수 있었고, 제가 진행한 사항은 다음과 같습니다.
- 기존의 jpg, png의 이미지 파일을 모두 webp로 변환
- picture + source와 디바이스별 최적화된 이미지를 로드하도록 변경
- 바로 랜딩되는 이미지가 아닌 요소에 대하여 lazy 적용
- defer를 적용해 스크립트의 로드 지연
- image에 alt를 명시
- 미작성된 meta 태그를 작성
생각보다 간단한 동작들로 lighthouse에서 큰 개선을 볼 수 있었습니다!
그동안의 프로젝트에서는 배포를 끝나고 한번에 모든 최적화를 적용시킨뒤 lighthouse와 배포된 사이트를 통해서 반응 테스트를 진행했습니다.
하지만 이번 과제를 진행하면서 최적화를 점진적으로 적용하면서 어떤 동작을 통해서 무엇을 개선시킬 수 있는지를 명확히 파악할 수 있었습니다.bb
나의 뱃지는?
항해를 하지 않는 분들이 보았을때는 항해에서 주는 뱃지가 실력의 척도처럼 보여질 수 있겠지만
항해를 하며 생각한 바로는 뱃지의 컬라가 크게 중요하지 않다. 였습니다.
모든 과제를 잘 수행할 수록 뱃지는 블랙에 수렴하겠지만, 본인이 판단했을때 뱃지 보다는 특정 주차의 내용들을 더 딥하게 공부하고 싶을 수도 있습니다.
예를 들면 테스트 주차 이후의 성능 최적화 주차를 들어갔을떄 나는 테스트 주차에서 배운것을 심화있게 다루고 싶다하면 뒤의 성능 최적화 주차의 과제는 기본만 수행하고 추후에 제공되는 solution코드를 토대로 공부를 하겠다. 이런것이 가능합니다.
혹시라도 항해를 하고 싶은데 블랙, 레드 뱃지를 받는게 아니면 지원할 이유가 없다고 생각하시는 분들이 계시다면 ,“배움”에 초점을 두고 항해에서 딥다이브 하시면 좋은 공부를 많이 할 수 있을거라 자신있게 말씀드리고 싶습니다.
필자의 경우는 위의 내용도 중요했지만 일단 되게하라. 마인드를 탑재하여 과제를 통과하는것도 중요한 요소로 두어 모든 과제를 pass하는것을 목표로 삼았습니다.
결과적으로 클린코드, 성능최적화의 심화과제에서 fail을 받아 과제통과율을 90%가 되었고, BP는 2개를 받아 레드뱃지를 받게되었습니다!
항해를 하고 성장했을까..?
얼마전 작년에 진행한 프로젝트를 다시 볼 기회가 생겼습니다.
프로젝트를 다시 보면서 이거… 항해에서 과제로 리펙토링 하라고 시킬 정도인데…?(심지어 더 심합니다.)라는 생각들을 계속 했습니다.
관심사는 분리가 하나도 안되어 있고, 슈퍼더티코드이며, 최적화는 되어있지 않았습니다.
이전에 진행한 프로젝트를 보는 눈이 달라진것 같아 나 성장했구나! 싶으면서도 지금 내가 보고있는 프로젝트들을 포트폴리오에 쓸 수 있을까 하는 걱정을 동시에 하게 되었습니다.
항해를 마치고 얼른 그동안 진행한 프로젝트들을 리펙토링을 하던지 아니면 새로운 프로젝트를 시작해서 클린한 코드들로 만들던지 해야겠다라고 다짐을 했습니다.
항해에서 특별하게 기억남는것들..
먼저 가장 기억에 남는것을 하나 골라본다면 바로 멘토링입니다.
빅테크 기업에서 FE개발을 수년간 해오신 시니어 개발자분께서 해주시는 말씀 하나하나가 FE개발자를 꿈꾸는 저에게는 너무나도 도움이 되는 말씀들이었습니다.
단순 기술뿐만 아니라, 개발자로 살아가면서 직장인으로 살아가면서 필요한 조언들을 아끼지 않으셨습니다.
또 기억에 남는것은 바로 항해에 참여한 5기분들입니다.
회사를 마치고 오후 7시정도에서 늦으면 새벽 2시가 넘도록 잠을 줄여가며 공부하시는 분들을 보면서 나도 더 열심히 해야지.. 라는 생각을 자주 했습니다.
힘든 순간마다 젭에서 묵묵히 과제를 수행하던 분들이 있었기에 저도 잘 마무리를 할 수있었지 않았나 싶습니다ㅎㅎ
끝으로
10주라는 기간동안 항해에서 제공해주는 챕터들을 수행했지만, 지금까지 배운 내용들을 10주라는 기간에 온전히 내것으로 만들 수는 없다고 생각합니다. 그렇기에 앞으로 꾸준히 배운것들을 정리하고 더 공부해서 온전히 내것으로 만들어야 겠다고 생각합니다.
항해 플러스 5기는 종료되었지만 진정한 항해는 이제부터라고 생각하고 계속 나아가고자 합니다😊😊