[프리온보딩코스 과제 회고 #4] 이응수 대리님의 코드를 리뷰해보자!

1. 과제 내용

※ 코드 리뷰를 위해 연출된 스토리입니다.

이응수 대리님이 혼자서 진행하였던 '책 찾기' 프로젝트가 예상치 못한 반응을 불러일으켰고, 회사는 서비스를 확장하고자 한다. 이응수 대리님의 코드와 결과물을 분석하고 리뷰하여 더 큰 규모의 프로그램이 될 수 있도록 개선 방향을 찾는다.

2. 과제 수행 시 신경 쓴 부분

- 실제 프로덕트라고 가정하고 리뷰한다.
- 확장 가능성에 주안점을 둔다.
- 좋은 점, 나쁜 점에 대해 솔직하게 반응한다.
- 본인의 개발 경험 중심으로 풀어나간다.
- 버그 발견 시, 추측이 아닌 구체적 방법을 제시한다.
- 수정할 수 있는 부분을 다 말한다.
- 클린 코드의 관점이 아니다.
- 내가 멘토라고 생각하고, 신입 사원에게 코드에 대해 리뷰한다는 느낌으로 작성한다.
- 사실에만 근거해서 쓰는 게 아닌 어떠한 이유로 이게 부족하다고 생각했고, 어떠한 이유로 이렇게 해야겠다고 생각했다 등의 생각 흐름을 정리하면 된다!
- 코드를 고쳐서 낼 필요는 없고 글로 작성한다. 하지만 '이런 예제로 가는 게 맞겠다~'하는 코드를 작성하는 것도 필요!
- 괜찮은 레퍼런스 페이지 링크도 첨부하면 좋다!
- 생각의 흐름, 소통의 방식, 지식의 정도가 중요한 키포인트!
- 해당 코드가 향후 어떤 점에서 위험할 수 있는지와 어떻게 개선할 수 있는지를 작성한다.
- 사용하는 패키지 조사하기!
- 지금까지의 세션 중에 있었던 내용들을 염두에 두고 코드를 살펴보기! 

3. 과제 수행 방식

3.1 코드 리뷰를 어떻게 진행할 것인가?

매번 코드 리뷰를 받던 입장이었지, 막상 내가 하려니까 도통 어떻게 해야할지를 갈피를 잡지 못하였다. 그래서 우선 코드 분석을 어떻게 할지 순서를 정하고, 그렇게 분석한 코드를 어떻게 개선하면 좋겠다는 가이드를 작성하는 방식을 찾아보았다.

- 코드 분석 순서  : 

1. entry point(index.js) 부터
2. Router
3. Router에서 사용하는 부모 컴포넌트 → 점점 자식 컴포넌트로 둘러보기
4. 자식 컴포넌트에서 사용되는 utils, constants 등등 추가적인 컴포넌트들 확인하기

- 코드 리뷰 레퍼런스 : 

🔗 코드 리뷰 가이드
🔗 주니어 개발자들의 (얕은) 코드 리뷰 도입기

3.2 팀원 간 코드 리뷰 내용 공유

이번 과제는 다은님과 둘이서 함께 진행을 하게 되었는데, 우선 제공받은 코드와 결과물을 1차로 각자 훑어보며 분석하는 시간을 가졌다. 나는 3.1번에서 정한 코드 분석 순서를 토대로 코드를 분석하여 정리하였고, 다시 모여 서로가 작성한 리뷰 포인트들을 공유하였다.

서로가 작성한 리뷰 포인트들을 읽어보며, 왜 이 부분을 리뷰해야 하는 포인트로 잡았는지에 대해 공유하는 시간을 가졌고, 공통되는 부분과 그렇지 않은 부분에 대해 표시를 하여 1차 내용 취합을 하였다.

3.3 리뷰 포인트 훑어보며 해결 방안 도출하기

이 과제는 리팩토링이 아닌 코드 리뷰였기 때문에 직접 코드를 고쳐서 낼 필요는 없고 개선점을 글로 작성하는 것이 메인이었는데, 눈에 띄게 보이는 에러 같은 경우는 어떻게 해결해야 할 거 같다는 코드를 작성하는 게 맞다고 판단하여 함께 트러블 슈팅을 하는 시간을 가졌다. 또한 파일은 존재하나 미사용 되고 있는 파일에 대해서는 무슨 의도로 만들었는지에 대해 생각하는 시간도 가졌다. 추가적으로 HTML 마크업이나 CSS 스타일링 및 성능 최적화에 대해서도 고려하여 해결 방안들을 최종적으로 도출하였다.

3.4 최종 코드 리뷰 내용을 정리하기

3.1번에서 찾아본 레퍼런스를 참고해 AS-IS/TO-BE 형식으로 파일 별 현 코드의 상황과 개선사항을 노션에 작성하기로 결정하였다. 또한 변경 코드 예시도 항목별로 코드 블록을 삽입하여 구체적인 방법을 작성하였다.

⛔ AS-IS : 현 코드의 상황 분석
✅ TO-BE : 개선 사항

4. 코드 리뷰 내용

🔗 최종 코드 리뷰 노션 링크

코드 리뷰

5. 과제 회고

5.1 새롭게 알게 된 것🆕

✅ ...Rest 파라미터

우선, Rest 파라미터 문법은 Spread와 비슷하지만 여러 인자들을 하나의 배열로 반환한다. 함수의 지역 인자 arguments와 rest의 다른 점은 arguments는 모든 인자를 포함하며 유사 배열이다.

함수의 마지막 파라미터의 앞에 ... 를 붙여 (사용자가 제공한) 모든 나머지 인수를 "표준" 자바스크립트 배열로 대체한다. 마지막 파라미터만 "Rest 파라미터"가 될 수 있다.

5.2 이번 과제를 통해 느낀 점🤔

❗ 공부해야겠다고 생각한 부분 : 리덕스와 ECMAScript 새로운 문법들!

일단 남의 코드 읽는 것이 쉬운 게 절대 아니라는 걸 다시 한번 느꼈다.... 주니어로서는 남이 짠 코드만 잘 읽어도 반은 간다는데... 더 열심히 공부하고 많이 찾아봐야겠다는 생각이 들었고!

이응수 대리님 코드 속에 ...rest라는 인자가 있길래 맨 처음에는 rest라는 state가 있나? 하고 봤더니 rest가 문법이었다! spread는 많이 썼어도 rest는 쓴 적도, 본 적도 없어서 이번에 되게 신기했다. 앞으로도 자주 쓸 수 있는 문법인 거 같다! 일단 ES6 문법을 다시 한번 살펴봐야 겠다는 생각과 매년 새롭게 나오는 문법들을 제대로 공부해야겠다고 느꼈다!