프론트엔드 성능 베이스캠프의 두 번째 주제는 필요한 것만 요청하기이다. 간단하게 생각해서 당장 필요 없는 모듈은 불러오지 않다는 것이다. 이와 관련하여 구체적인 요구사항은 다음과 같다. Home 페이지에서 불러오는 스크립트 리소스에 gif 검색을 위한 giphy 모듈이 포함되어 있지 않아야 한다. react-icons 패키지에서 실제로 사용하는 아이콘 리소스만 빌드 결과에 포함되어야 한다. 이번 챕터에서는 이러한 요구사항을 만족하기 위해 작업한 과정을 다룬다. 1. 준비과정 빌드가 되었을 때 번들된 파일이 어떤 모습인지 먼저 확인해 보자. 눈으로 보면서 비교하는 것이 중요한데 이를 도와주는 것이 Webpack Bundle Analyzer라는 도구(플러그인)이다. 이를 통해 번들된 파일에 어떤 모듈이 얼마..
프론트엔드 성능 베이스캠프는 우아한테크코스 레벨 4 웹 성능 미션을 바탕으로 마주한 문제를 해결한 과정을 다룬다. 그중 첫 번째는 요청 크기 줄이기이다. 요청 크기라고 하면 다음과 같은 것들을 생각할 수 있다. 소스코드 이미지와 같은 assets 파일 폰트 이 중 소스코드와 이미지와 같은 assets 파일의 크기를 줄여보도록 한다. 성능 테스트에 사용되고 개선되는 코드는 여기에서 확인할 수 있다. 또한 해당 시리즈에서는 특별히 언급을 하지 않는 이상 성능 측정 환경은 dev 환경이다. 1. 소스코드 크기 줄이기 1-1. 기존 소스코드 크기 서비스를 실행하게 되면 bundle.js가 불러와진다. bundle.js 크기를 비교하기 전 package.json의 scripts를 다음과 같이 수정하자. { "sc..
배포 준비 완료 2차 데모데이를 기준으로 하루스터디의 핵심 기능은 모두 완성되었다. 스터디를 개설하고 참여하고 진행하고 기록을 보는 것까지 모두 가능했다. 하지만 아쉬웠던 점은 배포를 하지 않았기 때문에 2차 데모데이에서 실제로 동작하는 서비스를 보여주지 못했던 것이다. 심지어 클라이언트와 서버의 연동도 확인하지 않아 어떤 에러가 있는지 파악도 못한 상태였다. 때문에 2차 데모데이가 끝난 이후 우선적으로 해야할 일이 바로 배포를 완료하여 실제 사용자들이 하루스터디 서비스를 이용할 수 있게 만드는 것이었다. 스터디 개설, 진행에 대한 추가 작업을 마무리 한 뒤, 클라이언트와 서버를 배포 완료하였고, 실제 배포가 잘 되었는지 확인을 해보았지만 역시나... 예상대로 정상 동작을 하지 않았다. 내가 맡았던 부분..
🚀 어김없이 찾아온 레벨 인터뷰 벌써 레벨 2를 마무리하는 레벨 인터뷰가 찾아왔다. 이번엔 준조였고 함께하는 크루는 세인, 노아이즈, 에디, 아커, 센트, 솔로스타였다. 레벨 1에서 레벨 인터뷰를 경험했기 때문에 긴장감은 지난번보다 크지 않았다. 하지만 레벨 1에서 받은 피드백을 얼마나 수용을 했는지, 지난번보다 얼마나 성장을 했는지를 스스로 판단을 해야 했기 때문에 이 부분에서는 부담감을 가질 수밖에 없었다. 인터뷰 순서는 조 배정에 나온 순서로 진행되었다. 레벨 1 인터뷰에서는 거의 마지막 순서였기 때문에 이번에는 오전에 깔끔히 인터뷰를 마무리하고 홀가분하게 점심을 먹고 싶었다. 하지만 나의 순서는 4번째로 매우 어정쩡한 순서였다. 다행히 10시에 바로 인터뷰를 시작하고 시간을 딱 맞추어 인터뷰를 진..
개요 미션 기간 Repository PR & Review github pages storybook 장바구니 1단계 23-05-26 - 23-06-05 Repo PR & Review 🛒 장바구니 📚 스토리북 미션 회고 2단계 미션에서는 우테코 3, 4단계에서 마주치게 될 협업의 과정을 미리 체험할 수 있는 경험을 할 수 있었다. 함께 2단계 요구사항에 대한 명세서를 작성하고 재화 관련 서비스를 무엇으로 할지를 정하는 것이 그것이었다. 장바구니 협업 미션의 요구사항은 다음과 같이 크게 2가지이다. 1. 재화 과련 서비스(포인트, 쿠폰, 할인) 2. 주문 목록 1단계 미션이 끝난 다음날인 26일 금요일 나와 도리는 에단, 베베와 함께 이에 대해 이야기를 하고자 잠실 캠퍼스로 향했다. 다른 크루들도 잠실로 많이..
개요 미션 기간 Repository PR & Review github pages storybook 장바구니 1단계 23-05-23 - 23-05-26 Repo PR & Review 🛒 장바구니 📚 스토리북 미션 회고 벌써 레벨 2의 마지막 미션이다. 레벨 2의 마지막 미션은 바로 이전 미션이었던 장바구니 미션의 연장선이다. 지금까지 서버 없이 mock 데이터로 개발을 했다면, 장바구니 협업 미션은 백엔드 크루와 함께 협업을 하면서 서버를 연동을 해야 했다. 바로 이전 미션에서 MSW를 사용하여 실제 API 통신을 하는 것과 같은 환경을 만들어 두면서 개발을 하였다. 때문에 서버만 잘 완성이 된다면 큰 무리 없이 서버를 연동을 할 수 있었다. 로컬에서만 확인하는 것이 요구 사항이었는데, 함께 협업을 하는 ..
개요 미션 기간 Repository PR & Review github pages storybook 장바구니 1단계 23-05-15 - 23-05-22 Repo PR & Review 🛍️ 장바구니 📚 스토리북 미션회고 다음은 장바구니 미션 2단계의 필수 요구 사항이다. 1. 장바구니 페이지 - 장바구니 페이지 마크업을 완성하고, 상품 목록 페이지와 함께 모바일 환경 대응 2. MSW를 활용한 API Mocking - MSW를 활용하여 실제 서버와 연동될 수 있는 API Mocking을 구현 - 단순한 Endpoint 변경으로 실제 API 사용이 가능하도록 작업 3. 테스트 - 장바구니 페이지에서 다양한 사용자 인터렉션에 대한 테스트 케이스를 고민하고, 선택한 도구를 이용하여 검증 4. 사용자 경험 - 새로..
개요 미션 기간 Repository PR & Review github pages storybook 장바구니 1단계 23-05-09 - 23-05-14 Repo PR & Review 🛍️ 장바구니 📚 스토리북 미션 회고 레벨 2의 세 번째 미션은 장바구니 페이지를 만드는 것이다. 이번 미션을 바탕으로 백엔드와 협업 미션도 진행을 한다. 즉, 서버에 있는 데이터를 받아 상품 목록을 보여주고 장바구니에 상품을 담고, 삭제하는 과정도 구현해야 한다. 이를 위한 본격적인 기능 구현은 2단계에서 진행을 하게 된다. 1단계에서는 장바구니 마크업을 완성하고 상태를 관리하기 위한 빌드업 과정이라고 생각하며 미션에 임했다. 장바구니 1단계 미션의 필수 요구 사항은 다음과 같다. 1. 상품 목록 페이지 상품 목록 페이지에 ..
개요 미션 기간 Repository PR & Review github page storybook 페이먼츠 미션 1단계 23-05-02 - 23-05-08 Repo PR & Review 💳 페이먼츠 📚스토리북 미션회고 페이먼츠 미션의 마지막 단계의 필수 요구사항은 다음과 같다. 1. 사용하던 모달을 분리해서 npm으로 배포하고, 그 라이브러리를 집접 import 해서 사용하기 2. 문서로서 스토리북을 고도화하기 위해 리팩터링 3. '카드를 등록 중입니다.' 스피너 추가 2, 3번의 요구사항보다 1번 요구사항에 초점을 두고 3단계를 진행하였다. 간략히 말하자면 스토리북은 7 버전으로 업데이트를 한 뒤, autodocs 기능을 사용하였. '카드를 등록 중입니다.' 스피너는 피그마에 있는 요구사항을 그대로 반영..
개요 미션 기간 Repository PR & Review github page storybook 페이먼츠 미션 1단계 23-04-24 - 23-05-01 Repo PR & Review 💳 페이먼츠 📚스토리북 미션회고 페이먼츠 2단계 미션의 필수 요구사항은 다음과 같다. 1. 주요 컴포넌트에 대한 Storybook 상호 작용 테스트 2. Controlled & Uncontrolled Components에 입각하여 Form 핸들링 3. Context API를 활용하여 전역 상태 관리 및 계층 재구성 이중 가장 부족했던 부분은 Storybook 상호 작용 테스트이다. 현재 스토리북을 보면 컴포넌트가 개별적으로만 테스트하고 있다. 여러 컴포넌트를 묶어 상호 작용 테스트는 미흡하다고 할 수 있다. 부족한 것을 알..
