레벨3, 4 학습 내용 총정리🤪
팀 프로젝트 S-HOOK과 함께한 레벨3, 4
소중한 기억을 정리해보자!
그래서 뭘 배웠어?🤷♂️
개인적으로 몰입했던 키워드는 다음과 같다.
- 프론트엔드 개발 환경
- 프론트엔드 최적화 + AWS
- 찐~한 협업과 찐~한 소프트 스킬
1. 프론트엔드 개발 환경
팀 프로젝트를 위한 개발 환경을 밑바닥부터 하나하나 설정했다.
오만가지 설정법과 설명이 있는 webpack docs를 보고있자면 토가 나오는 것 같았지만 아무렴 어때!
개발 환경 구성에 필요한 기술들을 접하고 이해하면서 프론트엔드 개발환경의 큰 그림을 이해하게 됐다.
webpack, babel, eslint, TS, react... 이외에도 자잘한 부수 기능까지...!
입맛대로 환경대로 골라서 적용하는게 점점 재미가 붙었다.
'아는 만큼 더 잘 쓸 수 있는 번들러의 세계'라고 할 수 있을 것 같다.
CRA와는 이별이다. 안녕...!
2. 프론트엔드 최적화 + AWS
최적화. 단어만 들어도 묵직하고 엄청난 지식과 스킬이 있어야 할 것 같다.
하지만 막상 부딪혀 보면 별거 없고, 하나도 어렵지 않다.
알아야 할게 많을 뿐.
레벨4 무렵에는 최적화 미션을 통해 프론트엔드에서 고려할 수 있는 전반적인 최적화 방법에 대해 배웠다.
2-1. 요청 크기 줄이기
번들 크기, 정적 파일 크기 최적화 등등 요청의 크기를 줄이는 방법은 다양하다.
- minify, uglify
- 소스맵 타협
- css파일 추출
- gzip, brotli 와 같은 압축 포멧 적용
- 정적 asset의 사이즈 줄이기 ex) 이미지, 비디오
이외에도 다양한 방법으로 요청하는 리소스의 크기를 줄일 수 있다.
2-2. 필요한 것만 요청하기
만약 당장 필요하지 않다면 요청을 하지 않도록 하면 된다.
- code spliting
- Tree shaking
2-3. 같은 건 매번 새로 요청하지 않기
다시 요청할 필요가 없다면 안 하면 된다.
- CDN(cloud front), 브라우저 캐싱
- api 응답 캐싱
2-4. 최소한의 변경만 일으키기
변화가 일어나야 하는 부분만 변경시키는 것이 당연하다.
- React.memo
- Repaint, Reflow 최적화
2-4. AWS 환경 이해
EC2, S3, CloudFront 를 직접 구성하여 프로젝트를 배포하고, 캐시 정책을 설정하면서 AWS의 각 환경에 대한 이해도가 높아졌다.
다음 프로젝트에서는 혼자서 거의 모든 환경 구축이 가능한 수준이 되었다!
3. 찐~한 협업, 소프트 스킬
단언컨데 가장 성장한 부분이 아닐까 싶다.
평소 새로운 사람들을 사귀는 것을 좋아하고, 서글서글한 성격을 가져 사람과 소통하는 것에 자신있었다.
물론 코드를 사이에 두고 대화해보기 전까지 말이다.
찐한 협업을 진행하면서, 내 코드에 대한 확증편향을 내려놓을 수 있었다.
이게 좋다, 저게 좋다. 이런건 사실 크게 의미가 없었을지도 모른다.
🍚 꽉꽈라꽉꽉 눌러담은 레벨3, 4 🍚
우테코 생활이 마무리 되었다.
얼마나 많은 밥을 먹었을까?
나는 얼마나 많은 성장을 했을까?
이제 증명할 시간이 왔다.
취준 드가자!
'목표와 회고' 카테고리의 다른 글
| 신입 개발자 이도현 시작! (9) | 2024.02.03 |
|---|---|
| 23년의 이도현 (45) | 2024.01.01 |
| 우테코 레벨2 학습 내용 총정리 (4) | 2023.06.19 |
| 우테코 레벨1 학습 내용 총정리 (5) | 2023.04.06 |
| 22년의 이도현 (5) | 2022.12.30 |