useState 동작을 직접 구현하려 하다보니 자바스크립트 기본기가 정말 중요하다는 것을 느꼈습니다. 이 글을 통해 간단하게 useState를 구현하면서 자바스크립트의 기본기와 더불어 useState의 동작 원리를 알아보려합니다.첫번째 useState 구현 시도우선 맨처음 useState를 구현했던 코드입니다. 해당 코드는 문제가 있습니다.function useState(state) { let _val = state; function setState(newState) { _val = newState; } return [_val, setState];}const [state, setState] = useState(0);console.log(state);setState(1);..

이번에는 리액트 프로젝트에서 내가 진행했던 번들 사이즈 최적화에 대해 이야기 해보려 합니다. 그렇다면 왜 나는 번들 사이즈를 최적화하려 했을까?우선, 우리 서비스를 프로덕션 레벨에서의 성능을 확인해보기 위해 build를 해보았습니다. 위 스크린샷을 보면 root 밑의 assets/index-UgkYlaLr.js 하나의 파일로 번들 파일 전체를 차지하고 있는 것을 볼 수 있고, 밑에 스크린샷의 로그에서는 index-UgkYlaLr.js의 크기가 704.19KB인걸로 매우 크다는 걸 알 수 있죠. 로그에 나와있는 경고에도 500KB가 넘는다고 알려주며 코드 스플리팅을 해서 사이즈를 줄이라고 권장하고 있습니다.코드 스플리팅이란 무엇인가?코드 스플리팅은 말그대로 한국어로 번역하면 코드 분할입니다. 우리가 코드 ..