10/8 TIL | 밀린 과제 처리! 그리고 useSyncExternalStore(feat. FEConf 2022)

오늘은 8주차 주말 학습의 첫날!이지만..ㅎㅎ 7주차 퀘스트 과제를 마무리하지 못해 과제를 하였다.😅

밀린 과제는 바로 로그인/회원가입 기능 구현인데, HTTPServer로 웹 서버를 띄우고 입력 값들을 받아 로그인/회원가입 유효성 검사를 해서 로그인 성공/실패, 회원가입 성공/실패를 보여주면 되는 거였다. 7주차 마카오 뱅크 강의에서 크게 달라질 부분 없지만 유효성 검사가 끼어드니 역시나 또 옴짝달싹 못하고 멍 때리다가 코딩 도장 테스트 코드 짤 때처럼 쪼개서 가자는 생각에 쪼개서 작업하였다.

치열한 쪼갬의 흔적..

이렇게 쪼개서 작업을 하니 확실히 이해가 가지 않았었던 이번 주차 강의 흐름을 이제야 조금 알 거 같다. 물론 여유롭게 작업을 할 수 있는 상황은 아닌지라 막히면 조금만 고민해보고 그래도 안 되면 바로 동기들의 코드를 참고하긴 했지만.. 이번 주차 강의가 대체 어떻게 돌아가는 건지조차 이해하지 못해 울적했던 이틀 전이랑 비교하면 그래도 감개무량하다.

그렇게 해서 완성된 나의 퀘스트 과제 그리고 Pull Requset! 셀프 리뷰까지 다 마쳤다..!🥹

그리고 오늘은 FEConf 2022의 날! 공교롭게도 우리 트레이너님이신 홀맨님이 연사로 나온다는 소식에 이번 해는 현장으로 가보고 싶어 제나님과 티켓팅을 도전했으나.. 300장 한정의 피켓팅을 뚫진 못하였고.. 대신에 집에서 유튜브로 시청했다!

홀맨님은 장바구니 상태를 관리하는 마이크로 스토어를 직접 만들어 React의 useSyncExternalStore로 연결해서 사용하는 법을 TDD로 라이브코딩 하셨다!

💡 useSyncExternalStore란?

useSyncExternalStore는 스토어에 대한 업데이트를 강제로 동기화하여 외부 스토어가 concurrent read를 지원할 수 있도록 하는 훅이다. 리액트 18부터는 concurrent 렌더링이 도입되여 렌더링을 잠시 일시중지할 수 있게 되면서, 일시중지된 사이에 발생하는 업데이트는 렌더링에 사용되는 데이터와 이와 관련된 변경사항을 가져올 수 있게 되었다.

이로 인해 UI는 동일한 데이터에 다른 값을 표시할 수 있게 되는 Tearing 현상이 생긴 것이다. 그로 인해 외부 데이터에 대한 원본에 대한 subscription을 필요로 할 때, 더 이상 useEffect가 아닌 useSyncExternalStore를 사용할 것을 리액트의 외부 상태와 통합되는 모든 라이브러리에 권장한다.

- External Store: 외부 스토어라는 것은 우리가 subscribe하는 무언가를 의미한다. 예를 들어 리덕스 스토어, 글로벌 변수, dom 상태 등이 될 수 있다.
- Internal Store: props, context, useState, useReducer 등 리액트가 관리하는 상태를 의미한다.
- Tearing: 시각적 불일치를 의미한다. 예를 들어 하나의 상태에 대해 UI가 여러 상태로 보여지고 있는, 즉 각 컴포넌트 별로 업데이트 속도가 달라서 발생하는, UI가 찢어진 상태를 의미한다.

(참고: 리액트 v18 버전 톺아보기, React 18의 Tearing 현상은 무엇인가?)

열심히 라이브코딩하고 계신 홀맨님

사실 TDD를 코딩 도장에 와서 처음 배운 거라 React로 저렇게 테스트를 하는 모습은 처음이라 생소했지만 전체적인 맥락은 지금 배우고 있는 자바랑 다를 게 없었다. 만약 코딩 도장에서의 얻은 지식이 없었더라면 오늘 라이브 코딩의 모든 과정을 과연 내가 이해할 수 있었을까? 싶고 역시 아는 만큼 보인다는 게 무엇인지 다시금 깨달았다.. 너무 재밌고 흥미롭게 볼 수 있었다! 덕분에 React 18 버전 지식도 +1!

p.s 입고 계신 메가테라 티셔츠 저도 주세요...

코딩의 신 아샬님의 수제자답게 엄청난 시간 관리로 40분을 꽉 채워 라이브 코딩하시는 홀맨님을 보고 너무 감명 깊었다. 심지어 중간중간 에러가 생겼는데도 40분을 넘기지 않고 앞광고(use-store 라이브러리 홍보)랑 클로징 멘트까지 하는 모습을 보고..... 완전 리스펙!👍🏻

한동안 손 놓고 있던 React를 라이브 코딩을 통해 오랜만에 다시 보니 새로웠고, 더 열심히 해서 저렇게 능숙하고 개발해내는 사람이 되어야겠다는 좋은 동기부여를 얻을 수 있었다!👍🏻 앞으로는 홀맨님을 더 많이 괴롭혀서 더 많은 걸 배워야겠다는 결심도 했고!(ㅋㅋ)

---

그리고 어제자 TIL도 티스토리 메인에 올랐는데(매번 방문자수가 증가하거나 모르는 사람들이 구독 or 댓글을 남기게 되면 확인하러 가본다..!) 이쯤 되니까 그냥 누구나 이 메인 피드에 올라가는 거 아닌가 싶을 정도로 자주 올라간다..?ㅋㅋㅋㅋ 뭐 쉽게 올라가는 거라고 해도 기분은 좋다!

드디어 토요일 저녁이 된 지금에서야 8주차 주말 학습을 시작할 수 있게 되었다. 일단 오늘 안에 강의를 다 시청하고 강의노트를 정리하고 내일은 개념노트 작성과 강의 2회차 시청 및 인출을 해볼 수 있게 해 보자! 파이탱~💪