BO의 개발로그

오늘은 어제 수요 지식회에서 언급됐었던 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가 이걸 화면에 반영..

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

현재 코딩 도장에서 같이 공부하고 있는 1기분들은 포트폴리오 주간이라 나의 두 달 뒤 미래를 미리 보고 있다. 두 달은 금방 지나가므로 원론적인 내용들은 미리 정리해놓는 게 좋을 거 같아 아샬님의 특강을 통해서 알게 된 유저 스토리 작성법을 알아보고자 한다. 우선 유저 스토리에 대한 정의를 알아보기 전에 이에 관련된 용어부터 정리해보자. - 이니셔티브(Initiative) or 테마(Theme): 서비스나 제품에서 큰 덩어리로 볼 수 있는 부분을 의미한다. 여러 개의 에픽으로 구성된 단위를 뜻하며, 여러 팀으로부터 진행된 Epic이 취합되어 이룰 수 있는 넓은 의미의 목표(Goal)를 의미한다. - 에픽(Epic): 완료하기까지 다소 오랜 시간이 걸리거나 몇 번의 스프린트가 요구되는 큰 업무 덩어리를 말..

어제오늘 아샬님이 1기분들의 포트폴리오 코드 리뷰 겸 리팩터링을 해주시러 코딩 도장에 오셨다. 오셔서 엄청나게 좋은 말씀을 많이 해주고 가셨는데.. 기억이 조금이라도 더 생생할 때 한번 정리해보고자 한다. 1. 기능에는 가치를 드러내야 한다. 단순히 기능만 나열하면 안 된다. 이 기능을 통해 사용자에게 어떤 것을 제공할 수 있는지, 또 사용자는 이 기능을 통해 어떤 것을 얻을 수 있는지에 대한 가치가 명확해야 한다.(As-I-So 기법 활용) 기능은 영원하지만 화면은 일시적이다. 화면에 집착하지 말자. 2. 규칙을 만들게 되면 우연에 따라가게 된다. 프로그래밍에는 정답이 없다. 이 경우에는 이 설계가 맞고, 저 경우에는 저 설계가 맞다. 근데 규칙을 만들어 버리면 설계에 대한 고민이 전혀 진행되지 않게 ..