기업과제 리뷰
오늘은 특별한 게스트가 와서 코드리뷰를 받을 시간이 주어졌다. 저번 기업과제 결과를 리뷰 요청해서 받을 수 있었다. 정신없는 와중에도 나름 잘 해보려고 노력한 부분도 보였지만 실수도 많았고 고칠 부분이 많았다.
주석
급하다는 핑계가 부질없는건 알지만 마무리를 급하게 하면서 몇몇 파일에 의미없는 주석이 남아버렸다. 동작을 이해하기 위해, 임시로 쓴 주석들이 있었는데 이런건 잘 신경써야겠다. 그리고 주석을 잘 남기려고 하기보단 주석 없이 코드를 이해하기 쉽게 만드는 것에 신경쓰는것이 좋을 거라는 피드백도 들었다.
코드 분할
api요청시 받은 에러에 따라 출력해 줄 에러메시지를 가져오는 함수를 컴포넌트 내에서 만들어서 return문 안에서 jsx 구문과 함께 사용했는데 이 때 이 함수가 사실 컴포넌트의 로직과 관계있는건 아니니 따로 빼는게 좋겠다는 이야기를 들었다. 아예 별도의 파일로 빼는 것이 좋겠다. 그리고 이전에 이런 함수 호출을 jsx 리턴문 안에서 사용하는것이 별로라는 이야기도 있었다. state로 관리하거나 해서 해당 state를 리턴문 안에 넣어주는것이 더 깔끔할 것 같다.
삼항 연산자
어떤 조건에 의해서 컴포넌트를 렌더링 할 때 습관적으로 삼항 연산자를 썼다. state값이 true면 컴포넌트를, false면 null을 리턴하도록 하는 구문이었는데 이런건 지양해야한다고 피드백이 왔다. 큰 고민 없이 삼항연산자를 사용하면 가독성이 많이 떨어진다. 이런 경우 오늘 리뷰어님은 대부분 컴포넌트를 따로 분리하는 편이라고 했다. 작은 단위로 파일, 타입, 컴포넌트들을 분리하는 게 꺼려진다면 프론트엔드 개발자가 아니라는 말도 하셨다. 지금 당장은 하나의 파일이지만 조금만 진행하면 금방 불어나기 십상이라고말이다.
그래도 만약 조건이 필요하다면 삼항연산자보다는 && 를 활용하라고 하셨다.
모달 컴포넌트에 React Portal 사용
모달을 만들 때 react portal을 사용해 만들어봤는데 이 부분은 좋기 봐주신 것 같다. portal을 사용하면 기존 root가 아닌 새로운 렌더 트리에 컴포넌트를 렌더시킬 수 있는데 이렇게 분리해서 사용하면서도 props로 데이터는 전달할 수 있다. 지금 당장은 프로젝트 크기도 작고 기능도 작아 큰 이점을 못 느끼지만 나중에 더 복잡한 컴포넌트 구조가 된다면 분명 이점이 있을거라고 생각한다.
하지만 모달 내부에서 또 삼항연산자를 쓰면서 지적을 받아버렸다.. 가독성을 높이는 방법을 항상 생각해야겠다.
느낀 점
eslint, prettier, stylelint의 도움이 컸다. 거기에 typescript와 함께 사용하니 사실 사용하기 복잡한 부분도 있지만 그런 설정과 스타일을 한번 적용하고 나면 기존 코드보다 훨씬 깔끔한 코드가 완성된다. 앞으로도 꼭 사용하고 에러메시지를 무시하지만 않는다면 굉장히 보기 좋은 코드를 만들 수 있을 것 같다.
