230411 프리온보딩 - 리액트 프로파일러 최적화

최적화 툴들의 문제점

어떻게 고칠 지 알려주진 않음
a. Navigation b. Timespan c. Snapshot
일반적으로 navigation 사용

간단하게 알 수 있는 방법

Lighthouse LCP값을 보고 느린지 아닌지 확인

 

개발자도구 performance 탭

렌더링이 오래 걸리는 탭을 찾아서 수정하기

React에서 제공하는 성능 측정도구 Profiler

컴포넌트별로 렌더링 시간 확인
onRender 함수 설정하면 쓸 수 있게 된다.

https://ko.reactjs.org/docs/profiler.html

다시 호출하느라 반짝이는 것은 안 좋은 UI

lazyLoading

페이지네이션이 되어있지 않으면 렌더링 오래 걸리는 부분
1) 먼저 렌더링 된 부분을 보여주기
2) 레이지로드 하면 초기에 보이는 화면만 렌더링하고, 
3) 이후는 스크롤 할 때 렌더링을 한다.

https://jasonkang14.github.io/react/lazy-loading-to-improve-web-vitals

개인적으로 회사 선택 기준

시리즈 A~B~C
초기 스타트업: 창업팀의 스펙(커리어, 학벌:서카포연고)
- 왜 이 사업을 하는 것인지 확인
규모가 클 것 같은 스타트업

- 사내 문화
어느정도 성장한 스타트업, 대기업

- 일하는 사람이 괜찮은가

개발 팀 규모

- 마이페이지에 4명 붙어서 한다면 아주 좋음
개발문화

- 코드리뷰를 하는지,
- 컨벤션이 있는지,
- 소통은 어떻게 하는지,
- 문서는 어떻게 정리하는지,
- 디자인과 서버가 소통하며 만드는지, 
- 스프린트를 얼마 동안 할 것인지

리더검증

- 리더는 어떻게 소통하는지
- 어떻게 이 회사에 오게 되었는지

- 합류할 때 중요하게 생각한 이유

- 팀을 어떻게 생각하는지

다양한 사람들의 의견

헤드헌팅 => 가능하면 연봉 정보는 알려주지 않기
lighthouse 70점대에서 90점대로 성능을 올린 경험
연봉은 일단 높게 부르는게 좋다. 심한가? 싶을 정도로
비전공자 출신 => 개발자로서 능력을 어필
초기에 사용하지 않는 컴포넌트 => dynamic import 하셔도 번들 사이즈 줄어요
web vital link 에서 권장하는 부분에서 time을 줄이면 최적화에 좋다
프론트 API부하 => timeout이후 retry하기(사실 서버에서 해결할 문제)
먼저 연봉제의를 듣고 => 너무 낮다고 생각하면 얘기해서 올리기
문의를 너무 많이 하면 안 좋음
인프런 멘토링 업데이트 질문 활용하기
lazy load => useVisibility hook을 써서 보인다면 컴포넌트를 보이도록 하기
면접 시 질문 => 코드리뷰는? 일정관리는? 중요하게 생각하는 코드는?
이리단 퇴직하지 말기 => 회사를 다니면서 이직을 하는 것이 좋다
정부사업만 따려는 회사는 고민해보기
무조건 연봉 많이 주는 곳이 좋음
3년차 => 무언가를 구현만 하는 것이 아니라 고민해본 경험이 있는가의 차이. 질러봐라
기술면접 있어도 지원 => 경험을 쌓아라
흔하지만 중요한 면접질문 => 개발할 때 중요하게 생각하는 것은? 요즘 관심있는 것은?
출근을 늦추고 싶으면 2주 뒤 정도까지
상태관리 잘하는 것이란? => 렌더링 덜 하도록 하는 것
이력서는 주요 성과 위주로만 기록하기
HR면접 => 날 떨어뜨릴 만한 이유가 있는가?


https://www.inflearn.com/mentors?mentor_id=947

인프런 멘토링 신청
https://portfolio.byeongjinkang.com/
포폴
https://jasonkang14.github.io/react/lazy-loading-to-improve-web-vitals
Lazy Loading web vital 개선