'🚀 우아한테크코스' 카테고리의 글 목록

레벨4 프론트엔드 성능 베이스캠프 2 - 필요한 것만 요청하기

2023.10.08

프론트엔드 성능 베이스캠프의 두 번째 주제는 필요한 것만 요청하기이다. 간단하게 생각해서 당장 필요 없는 모듈은 불러오지 않다는 것이다. 이와 관련하여 구체적인 요구사항은 다음과 같다. Home 페이지에서 불러오는 스크립트 리소스에 gif 검색을 위한 giphy 모듈이 포함되어 있지 않아야 한다. react-icons 패키지에서 실제로 사용하는 아이콘 리소스만 빌드 결과에 포함되어야 한다. 이번 챕터에서는 이러한 요구사항을 만족하기 위해 작업한 과정을 다룬다. 1. 준비과정 빌드가 되었을 때 번들된 파일이 어떤 모습인지 먼저 확인해 보자. 눈으로 보면서 비교하는 것이 중요한데 이를 도와주는 것이 Webpack Bundle Analyzer라는 도구(플러그인)이다. 이를 통해 번들된 파일에 어떤 모듈이 얼마..

🚀 우아한테크코스/Level4

레벨4 프론트엔드 성능 베이스캠프 1 - 요청 크기 줄이기

2023.10.06

프론트엔드 성능 베이스캠프는 우아한테크코스 레벨 4 웹 성능 미션을 바탕으로 마주한 문제를 해결한 과정을 다룬다. 그중 첫 번째는 요청 크기 줄이기이다. 요청 크기라고 하면 다음과 같은 것들을 생각할 수 있다. 소스코드 이미지와 같은 assets 파일 폰트 이 중 소스코드와 이미지와 같은 assets 파일의 크기를 줄여보도록 한다. 성능 테스트에 사용되고 개선되는 코드는 여기에서 확인할 수 있다. 또한 해당 시리즈에서는 특별히 언급을 하지 않는 이상 성능 측정 환경은 dev 환경이다. 1. 소스코드 크기 줄이기 1-1. 기존 소스코드 크기 서비스를 실행하게 되면 bundle.js가 불러와진다. bundle.js 크기를 비교하기 전 package.json의 scripts를 다음과 같이 수정하자. { "sc..

🚀 우아한테크코스/Level3

레벨3 5~6주차 회고

2023.08.26

배포 준비 완료 2차 데모데이를 기준으로 하루스터디의 핵심 기능은 모두 완성되었다. 스터디를 개설하고 참여하고 진행하고 기록을 보는 것까지 모두 가능했다. 하지만 아쉬웠던 점은 배포를 하지 않았기 때문에 2차 데모데이에서 실제로 동작하는 서비스를 보여주지 못했던 것이다. 심지어 클라이언트와 서버의 연동도 확인하지 않아 어떤 에러가 있는지 파악도 못한 상태였다. 때문에 2차 데모데이가 끝난 이후 우선적으로 해야할 일이 바로 배포를 완료하여 실제 사용자들이 하루스터디 서비스를 이용할 수 있게 만드는 것이었다. 스터디 개설, 진행에 대한 추가 작업을 마무리 한 뒤, 클라이언트와 서버를 배포 완료하였고, 실제 배포가 잘 되었는지 확인을 해보았지만 역시나... 예상대로 정상 동작을 하지 않았다. 내가 맡았던 부분..

🚀 우아한테크코스/Level3

레벨3 3~4주차 회고

2023.07.27

하루스터디의 새로운 방향 1~2주 차의 하루 스터디는 하루만 진행하는 스터디를 모집하는 플렛폼의 역할을 하는 서비스였다. 하지만 1차 데모데이가 끝난 후, 팀원들과 하루 스터디의 방향, 핵심 가치에 대해 많은 고민을 가졌다. 본질적으로 모집 - 진행 - 관리가 사용자에게 빠르게 핵심가치를 전달해 줄 수 있을까?라는 의문점을 가지게 되었다. 어느 서비스에서나 가능한 기능이기에 하루 스터디만의 뾰족한 무언가가 필요했다. 1차 데모데이 직후 준의 피드백의 바탕으로 3주차 첫 날인 7월 10일에 팀원들끼리 직접 스터디를 진행 보았다. 스터디의 순서는 다음과 같다. 1. 목표 설정 2. 학습 진행 3. 회고 두 번의 싸이클을 돌고 나서 가장 크게 느꼈던 점은 '엄청난 집중력으로 학습 목표를 달성하기 위해 노력했다..

🚀 우아한테크코스/Level3

레벨3 1~2주차 회고

2023.07.10

팀 발표 레벨 3, 레벨 4에 진행하게 되는 팀 프로젝트의 팀이 방학 중에 발표되었다. 난 테오의 `플래시몹 스터디`에 뽑히게 되었다. 플래시몹이라는 단어를 생각하면 중학교, 고등학교 때 잠깐 운동장에 모여서 춤을 추었던 기억이 떠오른다. 그래서 그땐 어떤 스터디인지 감이 잡히지 않았지만, 테오의 2분 기획안을 다시 찾아보고 어떤 스터디인지 감을 잡을 수 있었다. 레벨 3, 레벨 4 동안 함께 협업을 진행하게 될 크루들은 총 6명이다.(나 제외) 프론트에선 룩소와 엽토가 같은 팀이다. 레벨 1, 레벨 2에서 함께 술도 많이 마시고 친하게 지냈던 크루들이라 반가운 마음이 컸다. 모두 술을 좋아하기 때문에 서로 잘 억제해 주길 바라며... 백엔드 크루들은 모두 처음 들어보는 닉네임이었다. 테오, 마코, 모디..

🚀 우아한테크코스/Level2

레벨2 - 인터뷰

2023.06.23

🚀 어김없이 찾아온 레벨 인터뷰 벌써 레벨 2를 마무리하는 레벨 인터뷰가 찾아왔다. 이번엔 준조였고 함께하는 크루는 세인, 노아이즈, 에디, 아커, 센트, 솔로스타였다. 레벨 1에서 레벨 인터뷰를 경험했기 때문에 긴장감은 지난번보다 크지 않았다. 하지만 레벨 1에서 받은 피드백을 얼마나 수용을 했는지, 지난번보다 얼마나 성장을 했는지를 스스로 판단을 해야 했기 때문에 이 부분에서는 부담감을 가질 수밖에 없었다. 인터뷰 순서는 조 배정에 나온 순서로 진행되었다. 레벨 1 인터뷰에서는 거의 마지막 순서였기 때문에 이번에는 오전에 깔끔히 인터뷰를 마무리하고 홀가분하게 점심을 먹고 싶었다. 하지만 나의 순서는 4번째로 매우 어정쩡한 순서였다. 다행히 10시에 바로 인터뷰를 시작하고 시간을 딱 맞추어 인터뷰를 진..

🚀 우아한테크코스/Level2

레벨2 장바구니 협업 - Step2

2023.06.22

개요 미션 기간 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일 금요일 나와 도리는 에단, 베베와 함께 이에 대해 이야기를 하고자 잠실 캠퍼스로 향했다. 다른 크루들도 잠실로 많이..

🚀 우아한테크코스/Level2

레벨2 장바구니 협업 - Step1

2023.06.20

개요 미션 기간 Repository PR & Review github pages storybook 장바구니 1단계 23-05-23 - 23-05-26 Repo PR & Review 🛒 장바구니 📚 스토리북 미션 회고 벌써 레벨 2의 마지막 미션이다. 레벨 2의 마지막 미션은 바로 이전 미션이었던 장바구니 미션의 연장선이다. 지금까지 서버 없이 mock 데이터로 개발을 했다면, 장바구니 협업 미션은 백엔드 크루와 함께 협업을 하면서 서버를 연동을 해야 했다. 바로 이전 미션에서 MSW를 사용하여 실제 API 통신을 하는 것과 같은 환경을 만들어 두면서 개발을 하였다. 때문에 서버만 잘 완성이 된다면 큰 무리 없이 서버를 연동을 할 수 있었다. 로컬에서만 확인하는 것이 요구 사항이었는데, 함께 협업을 하는 ..

🚀 우아한테크코스/Level2

레벨2 장바구니 - Step2

2023.06.06

개요 미션 기간 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. 사용자 경험 - 새로..

🚀 우아한테크코스/Level2

레벨2 장바구니 - Step1

2023.05.27

개요 미션 기간 Repository PR & Review github pages storybook 장바구니 1단계 23-05-09 - 23-05-14 Repo PR & Review 🛍️ 장바구니 📚 스토리북 미션 회고 레벨 2의 세 번째 미션은 장바구니 페이지를 만드는 것이다. 이번 미션을 바탕으로 백엔드와 협업 미션도 진행을 한다. 즉, 서버에 있는 데이터를 받아 상품 목록을 보여주고 장바구니에 상품을 담고, 삭제하는 과정도 구현해야 한다. 이를 위한 본격적인 기능 구현은 2단계에서 진행을 하게 된다. 1단계에서는 장바구니 마크업을 완성하고 상태를 관리하기 위한 빌드업 과정이라고 생각하며 미션에 임했다. 장바구니 1단계 미션의 필수 요구 사항은 다음과 같다. 1. 상품 목록 페이지 상품 목록 페이지에 ..

티스토리툴바