한달간의 원티드 프리온보딩 프론트엔드 인턴십 코스를 마쳤습니다.
1번과제 후기 및 중심 구현사항: 링크
2번과제 후기 및 중심 구현사항: 링크
3번과제 후기 및 중심 구현사항: 링크
과정을 통해 제가 목표로하던 React/TS 심화 개념에 대해서 보충할 수 있어서 뜻깊은 한달이었습니다.
배운점과 실제로 프로젝트에 적용해본 내용들
eslint, prettier 연동
항상 설정 충돌로 개인 프로젝트에서 자주 사용못했는데 프리온보딩을 진행하며 매번 설정하다보니 입맛에 맞는 BoilerPlate를 찾아서 기록해놓을 수 있었다. eslint-airbnb도 사용해봤는데 굉장히 엄격했지만 좋은 경험이었습니다.
husky를 활용한 git hook사용
갈고리를 걸듯이 커밋-푸시 이전에 특정 행위를 할 수 있게 해주는 툴이다. 과거엔 eslintrc가 있어도 각 팀원들의 pc상태나 개인설정 충돌로 인해 린트 충돌나는 경우가 있었는데 husky와 lint-staged를 결합한 git hook으로 그러한 충돌을 예방할 수 있었습니다.
깊이 파고든 React Hook과 최적화
기본적인 useState와 useEffect뿐만 아니라 React.memo, useMemo, useCallback과도 같은 메모이제이션 최적화 기법들에 대한 공부도 할 수 있었습니다.
특히 useEffect의 동작 시점과 sideEffect를 분류하고 다루는 방법에 대해서 깊이 배워 좋았고, 메모이제이션 기반의 최적화 방법이 만능이 아니라는 것도 다시 한번 이해했습니다.
관심사 분리
함수들은 추상화가 되어야 하고 제목만 보고도 무슨 일을 하는지 알 수 있어야 합니다. 또한 클린코드에 따르면 함수는 한가지 일만 하는게 좋습니다. 관심사 분리를 통해서 함수와 변수간의 의존성들을 낮춰야 합니다.
customHook
제가 개인적으로 아킬레스 건이라고 느꼇던 부분이었습니다. 코드의 재사용성을 높이기 위해 저는 보통 util함수를 작성하여 사용했었습니다. 그러면 그 util함수의 리턴값을 토대로 다시 상태에 할당하여 작업을 하는 비효율적인 상황이었습니다.
그러나 React스럽게 사고를 한다면, 값을 가지고있는 중복되는 상태들과 로직들은 customHook으로 추상화가 가능합니다. 그렇게 관심사의 분리도 되고 재사용성도 일반적인 util함수보다 더욱 높아지게 됩니다.
React Context
Context를 활용하여 props drilling을 회피하고, 이를 통해 의존성 주입(DI)를 하는 방법을 익혔습니다. Context에 특정 기능이 추상화 되어 있고, 이를 사용할때는 useContext를 통해 기능이나 값을 꺼내 쓰기만 하면 됩니다. Context를 api와 결합하면서 DI를 구현해보았습니다.
Redux와 Flux패턴
redux-toolkit을 사용해본 경험은 있었으나 flux패턴에 대한 정확한 이해가 부족했었습니다. 강의를 통하여 action - dispatch - store -view 에 대한 명확한 이해를 얻었습니다. 또한 개인적으로 Redux 뿐만이 아니라 React Hooks + Context + Reducer의 방법을 2차과제에 적용해보면서 useReducer 와 dispatch를 직접 구현하여 flux패턴을 몸소 익혀보았습니다.
동료 학습
저는 남의 코드를 읽는 것을 좋아합니다. 안티패턴을 찾을수도있고 좋은코드는 좋은코드대로 흡수가 가능하기 때문입니다.
나아가서 서로의 코드를 보며 얘기를 나누는 것이 저에게 성장이 된다는 점을 믿어 의심치 않습니다. 제가 다른 분의 코드를 지적하거나, 제 코드에 대한 지적을 방어하려면 그 지적과 방어를 위한 엄청난 지식이 필요하기 때문입니다. 이 지식은 정확성과 자세함이 뒤따라야 합니다.
그래서 항상 PR을 통한 의견 공유를 좋아하고 그간 해왔었습니다. 과거의 부트캠프에서도 그랬고, 이번 인턴십과정에서도 그랬습니다.
그래서 이번 인턴십 과정에서도 정말 열심히 코드 리뷰를 했습니다. 팀원들과 활발한 의견 교류를 했고 저는 팀장으로서 모든 팀원들의 코드를 리뷰하려고 노력했습니다. 새로운 것을 배우고, 잘못된 점들을 바로잡는 기회가 되었어서 매우 기쁘게 생각합니다.
(멘토님에게 팀적으로 좋은 학습이었다고 칭찬 받았습니다 😊)
