멤버십 7주차를 마쳤다.
굉장히 바쁘고, 동시에 좀 뿌듯했던 한주였다.
저번 주의 해이해짐이 사라지고, 다시 열정을 찾아올 수 있었다.
배우고 느낀 것들
리액트 렌더링 방식 이해하기
기존의 코드는 innerHTML과 템플릿리터럴, 이벤트 기반으로 DOM요소를 직접적으로 조작하는 방식이었다.
여기서 관심사를 조금 더 분리하고, 컴포넌트를 보다 컴포넌트 형태로 관리하기 위해서 JSX를 도입하여 리액트의 렌더링을 구현해보는 형태로 변경했다.
이 과정에서 JSX가 어떻게 변환되는지, 리액트의 virtual DOM은 어떻게 부분렌더링에 기여하는지 등에 대한 이해도를 높힐 수 있었다.
수많은 리액트관련 글들, 그리고 책까지 많은 정보들을 접하고 개념을 이해했다고 생각했지만, 전혀 이해하고 있지 못했었나보다. 굉장히 어려웠다. 주말동안 이거 고친느라 회고글도 늦게 쓰게 되었다.
하지만 투자한 시간만큼 값진 시간이었다. 역시 개구리를 이해하려면, 개구리를 만들어보는게 최고다.
라이브러리를 이해하는 법
이번주엔 개인적으로 번들링을 이해하려고 노력했다.
여러 번들러가 어떻게 파일을 하나로 합치는지 궁금했기 때문이다.
그 과정에서 이전주보다 오픈소스 라이브러리들의 코드들을 더 잘 읽을 수 있게 됐다는걸 느낄 수 있었다.
핵심 기능을 먼저 익히고, 그걸 코드로 확인하기
뭐든간에 어떤 문제를 풀어내기 위해서는 핵심개념, 메인 미션이 존재한다.
그걸 어떻게 풀어내는지 확인하는게 첫번째이다.
그러나 라이브러리는 문제를 해결하고, 해결방식을 점차 개선해나가기위해서 최적화가 이뤄지고, 다른 기능들도 붙게된다. 이건 라이브러리 사용자에게는 너무나도 좋은 현상이지만, 코드를 읽는 사람에게는 고난이다.
처음 라이브러리 코드를 읽는 사람은 코드 읽기가 힘들게 되는 것이다.
물론, 앞서 리액트를 구현해보듯, 전부다 직접 구현해보면 너무나도 좋겠지만, 매번 전부 구현하다보면 시간이 삭제 될 수 있다.
하지만 정말정말 고맙게도, 핵심기능만 구현해놓은 코드들이 생각보다 잘 되어있는 것을 알 수 있었다.
예를들어 이건 minipack으로, webpack의 번들링 핵심 개념을 코드로 구현해놓은 것이다.
https://github.com/ronami/minipack/blob/master/src/minipack.js
이건 심지어 주석까지 너무 잘 달려있다.
이런 코드를 살펴보면서 좀 더 제대로된 학습을 해보자.
도움을 주고받기
사실 이전에도 리액트처럼 직접 구현해보고는 싶었는데, 이걸 어디서부터 어떻게 해야할지 엄두도 못내고 있었다.
그런데 저번주 피어 세션을 통해 이미 그렇게 구현하신 분을 만날 수 있었고, 그 분이 주요 개념을 설명해주셨었다.
이해가 안되는 부분은 정말 꼬치꼬치 캐물었다. 덕분에 영감을 받기도 했고, 도전에 대한 물꼬를 틀 수 있어서 너무나도 좋은 경험이었다.
그래서 이런 경험을 나누고자 이번주에는 스크럼이나 피어세션에서 좀 더 적극적으로 의견을 나누려고 했다. 내 코드가 누군가의 동기가 될 수도 있겠다라는 생각에 안물어봐도 좀더 설명을 더했다.
같은 문제를 고민할 수 있는 동료가 있다는건 참 좋은 일이다.
아쉬운점, 개선할 점
새로운 개념을 학습하고, 전체 코드를 다뜯어고치다보니 코드가 말그대로 엉망진창이 되는 걸 느낄 수 있었다.
또한 기능을 구현하는 것도 어려워서 오류를 고치느라 테스트코드도 얼마 작성하지 못했다.
틈날때마다 테스트를 쓰고 코드를 개선시켜야한다.
