[메가테라 FE 생존코스] 2주차 회고

3L 회고

👍 Liked

• JSX 문법없이 React Element를 만드는 과제를 하면서 JSX 문법의 필요성을 배울 수 있어서 좋았다.
• JavaScript와 React로 DOM을 조작하는 것을 비교해보니 React의 선언적 API 사용이 얼마나 편한지 알 수 있어서 좋았다.
• "항해 99클럽"이라는 코딩테스트 스터디에 참가하여 매일 코딩테스트도 1~2문제씩 풀면서 코딩테스트에 대한 자신감을 얻어서 좋았다.
• 주차별 계획표를 세우면서 매일매일 달성한 것과 달성하지 못한것을 체크해보는 것만으로도 더 열심히 공부하게 되는 동기부여가 되서 좋았다.

📘 Learned

• JSX는 XML 문법으로 작성한 코드에 JavaScript를 포함하여 사용하기 위해 확장한 문법이다.
  • JSX는 React에서만 사용하는 것이 아니다. React Element를 더 쉽게 만들기 위해 사용하는 문법이다.
  • React Element를 만드는 것은 DOM 요소를 생성하는 것이 아닌 React에게 렌더링을 위해 설명하는 것에 가깝다.
• Recociliation(재조정)이 어떻게 비교를 하여 바뀐 부분만 업데이트 하는지 배웠다.
  • 재조정은 비교 알고리즘(diffing)을 사용하여 두 엘리먼트의 루트 엘리먼트를 비교한다. 엘리먼트 타입이 다를 경우 이전 트리를 버리고 완전히 새로운 트리를 구축하고 엘리먼트 타입이 같을 경우 기존 트리를 재사용한다.
  • 또한, 재조정될 때 엘리먼트의 위치도 중요한데 동일한 위치에 동일한 컴포넌트는 state를 보존하고 동일한 컴포넌트더라도 다른 위치로 이동하면 state를 초기화한다.
  • key prop을 사용하여 개발자가 의도적으로 동일한 위치의 동일한 컴포넌트더라도 서로 다른 key를 비교하여 state를 초기화할 수 있다.
• VDOM을 사용하는 근본적인 이유에 대해 배웠다.
  • DOM에 접근하는 것은 시간, 비용이 크기 때문에 VDOM에 접근하는 방식이 비용이 적고 빠르기 때문에 사용하는 것으로만 알고 있었다.
  • 이는 반은 맞고 반은 틀린 내용으로, VDOM을 사용하는 근본적인 이유는 리액트를 선언적으로 사용하고 유지보수를 위해 사용하기 위해서이다.
  • 이를 확인하기 위해 직접 JavaScript로 DOM을 조작해보고 React로 DOM을 조작해보고 비교해보니 선언적 API를 사용한 리액트 코드가 더 이해하기 쉽고 유지보수가 용이했다.

😅 Lacked

• 아침에 6시에 기상해서 책을 읽거나 일찍 출근해서 코딩테스트 문제를 풀고 싶은데 일찍 일어나는게 힘들다.

느낌점

이번주 수요일부터 항해 99클럽이라는 무료 코딩테스트 스터디에 참여하게 되어 매일 계급별로 1문제씩 실력있는 개발자분께서 엄선한 코딩테스트 문제를 출제해주시고 월, 목요일 저녁 9~11시에는 게더타운에 모여서 그룹장의 문제 풀이 및 본인의 풀이 설명을 공유하는 모임이 있다. 프론트엔드 개발자는 구현만 잘하면되는거 아니야? 라고 생각하고 코딩테스트를 놓은지 오래되었는데 테스트 코드 작성을 하거나 실무를 접해보니 알고리즘적 머리가 필요하다고 생각되어 공부를 시작했다. 앞으로 5주간 진행될 것으로 메가테라 생존 코스와 더불어 병행하여 코딩테스트도 놓치지 않고 싶다. 올 11월이면 와따에서도 1년을 일하는 셈이니 1년만 채우고 개발문화가 자리잡히고 성장할 수 있는 회사로 이직을 하고 싶다.