BO의 개발로그

11/17 TIL | React 성능 최적화 1탄. React.memo & React.PureComponent 오늘은 어제 수요 지식회에서 언급됐었던 React 성능 최적화에 대해 한번 정리해보려고 한다. 시작하기에 앞서, 사실 성능 최적화는 엄청나게 중요한 요소는 아니다. 물론 미리 해놓으면 언젠가 bohyunkang.tistory.com 어제 TIL에서 양이 많아져 2탄으로 쪼갠 React 성능 최적화하기! 바로 시작해보자👏 🥸 참조형 타입 주의하기 1탄에서 설명한 예제는 값이 바뀌었는데도 리렌더링하지 못한 경우였다면, 이번엔 값이 안 바뀌었는데 리렌더링하는 경우를 살펴보려고 한다. 1. props로 함수 전달 시 useCallback 사용하기 // Before // 자식 컴포넌트 Button.jsx..

오늘은 어제 수요 지식회에서 언급됐었던 React 성능 최적화에 대해 한번 정리해보려고 한다. 시작하기에 앞서, 사실 성능 최적화는 엄청나게 중요한 요소는 아니다. 물론 미리 해놓으면 언젠가는 좋겠지만! 그건 내가 만드는 서비스가 성능 최적화에 대해서 고민해야 할 정도로 잘 나갈 때 고려해야 하는 문제이다..! 최적화하기 위한 코드는 가독성이 좋지 않고 프로그램 복잡도가 높아져 유지 보수가 힘들어지는데, 일어나지도 않을 미래의 일을 생각하면서 코드의 본질을 놓치면 절대 안 된다는 것이다(열심히 차려놓은 잔칫집에 손님 한 명도 안 오면 어떡하냐며..😅). 더군다나 지금은 램이 128GB까지도 가능한 2022년! 성능 최적화를 고려할 정도로 컴퓨터 사양이 좋지 못한 시절이 결코 아니라는 거~! React에서..

이번 주에 React 상태 관리를 배우는 주간! useStore라는 Flux 패턴의 Store를 직접 만들어 사용하는 방식으로 강의가 진행되었는데, 이번 FEConf 2022에 홀맨님이 발표하신 useStore-ts의 개념을 가지고 강의에서는 조금 더 단순하게 제작을 하는 방식으로 진행되었다. 👇 FEConf 2022 홀맨님 세션에 대해서 기록했던 10월 8일의 TIL 보러 가기 10/8 TIL | 밀린 과제 처리! 그리고 useSyncExternalStore(feat. FEConf 2022) 오늘은 8주차 주말 학습의 첫날!이지만..ㅎㅎ 7주차 퀘스트 과제를 마무리하지 못해 과제를 하였다.😅 밀린 과제는 바로 로그인/회원가입 기능 구현인데, HTTPServer로 웹 서버를 띄우고 입력 값들 bohyun..

어제 작성한 TIL은 React Virtual DOM의 재조정(Reconsiliation)에 대한 내용으로 React가 보다 더 효과적으로 DOM을 갱신하기 위해서 채택하고 있는 내부 방식에 대해 정리하였다. 11/14 TIL | 리액트 Virtual DOM의 재조정(Reconsiliation) React는 선언적 API를 제공하기 때문에 갱신이 될 때마다 매번 무엇이 바뀌었는지를 걱정할 필요가 없다. 이게 뭔 소릴까? 이를 이해하기 위해선 Virtual DOM이 무엇인지 먼저 알아야 한다. 💡 Virtual D bohyunkang.tistory.com 홀맨님께서 이 TIL을 보시고는 코멘트 달아주셨는데 내용은 아래와 같다. 요약하자면 Virtual DOM가 수반하는 오버헤드가 상당하기 때문에 요새는 V..

React는 선언적 API를 제공하기 때문에 갱신이 될 때마다 매번 무엇이 바뀌었는지를 걱정할 필요가 없다. 이게 뭔 소릴까? 이를 이해하기 위해선 Virtual DOM이 무엇인지 먼저 알아야 한다. 💡 Virtual DOM 말 그대로 가상의 DOM이다. 브라우저에 실제로 보여지는 DOM이 아닌 메모리에 가상으로 존재하는 DOM으로 ReactDOM과 같은 라이브러리에 의해 “실제” DOM과 동기화하는 프로그래밍 개념이다. 리액트는 상태가 업데이트되면, 업데이트가 필요한 곳의 UI를 Virtual DOM을 통해서 렌더링하고, 그러고 나서 실제 브라우저에 보여지고 있는 DOM과 비교를 한 후, 차이가 있는 곳을 감지하여 이를 실제 DOM에 패치시켜준다. ⇒ 이 과정을 재조정(Reconciliation)이라고..

Flux 패턴은 MVC 패턴의 단점을 보안하기 위해 만든 페이스북에서 발표한 디자인 패턴으로 React, Redux의 디자인 패턴이기도 한다(참고로 이러한 Flux 패턴에 영감을 받아 Vue에서는 Vuex를 만들어 활용함). 먼저 MVC 패턴이 어떤 것인지 알아보자. MVC는 Model View Controller의 약자로, Model은 "무엇을 할지"에 대해 내부 비지니스 로직을 처리하고, View는 "무엇을 보여줄지" 유저에게 보여줄 화면을 처리하고, Controller는 유저의 요청을 받아서 "어떻게 처리할지" Model에 요청하는 구조의 디자인 패턴이다. 하지만 이러한 MVC 패턴이 갖고 있던 가장 큰 단점은 바로 양방향 데이터 흐름이다. 특히 Model이 업데이트되면 View가 이걸 화면에 반영..

12주차였던 이번 주는 React와 Jest를 활용하여 Todo App과 마카오페이 웹 페이지를 만들었다. 11/12 TIL | 나만의 메뉴 만들어보기. 어제까지 작성한 퀘스트 과제는 React로 마카오페이를 만들고, 나만의 메뉴를 추가하는 것이었다. 이번에는 Jest로 React 테스트를 써서 테스트 커버리지 100%까지 도전하는 것을 목표로 했는데 막상 bohyunkang.tistory.com 작업 측면에서 개인적으로 만족스럽지 못한 한 주였는데, 이번 주에 칭찬할 점과 반성할 점을 적어보자면 아래와 같다. - 칭찬할 점: 밀리지 않고 과제를 잘 마무리한 점 - 반성할 점: 개인적인 이유로 작업에만 몰두하지 못한 점, 과제 커버리지 100프로 챙기지 못한 점 그래서 다가오는 13주차 주간 학습 기간에..

어제까지 작성한 퀘스트 과제는 React로 마카오페이를 만들고, 나만의 메뉴를 추가하는 것이었다. 이번에는 Jest로 React 테스트를 써서 테스트 커버리지 100%까지 도전하는 것을 목표로 했는데 막상 useState를 사용하는 쪽은 테스트가 어려워 100프로 다 챙기지는 못하였다. 무튼! 그렇게 내가 추가한 나만의 메뉴 기능은 디지털 시계와 송금 일지로 아래 화면과 같다! 송금 기능을 통해 송금이 이뤄지면 송금 일지 드롭다운 박스에서도 확인할 수 있어 등록할 수 있다. 디지털시계는 송금 일지만 넣기에 너무 빈약한 거 같아 함께 넣어봄 ㅎㅎ.. 무튼 이번 과제는 전역적으로 상태 관리를 하고 있지 않아 새로고침되면 내용들이 다 사라졌는데, 13주차 강의부터는 전역 상태 관리를 하기 때문에 이 문제는 해..