프리온보딩은 원티드 정승일님, 위코드 김예리 멘토님, 루트임팩트 이지현님과 함께하는 프론트엔드 실무 과정입니다. 💕
🙂 4차 수업
이번 수업은 클린 코드에 대한 내용이었다.
클린 코드
- 함수는 하나의 행동만 하게 하자.
- 원본 프로젝트에 주석은 쓰지말고, 코드 파악하거나 공부시에만 쓰자.
- 더러운 코드 다시 쓸 생각하지 말자.
- 리팩토링은 보일때마다 하자.
React에서의 좋은 코드
- 1개의 컴포넌트가 하나의 일만 하게 하자.
- state 막쓰지 말자. 변경되는 데이터만 state로 쓰자.
- import 순서부터 정해라. (특히 팀프로젝트시 중요)
클린 코드 예시
그리고 수업시간에 영상을 보여주셔서 봤는데, 너무 좋은 내용이 있었다.
토스의 진유림님이 찍은 프론트엔드에서의 클린 코드 였는데, 여기에 있는 내용은 꼭 외워둬야 한다는 생각이 들었다.
1. 응집도
custom hook으로 모든 로직을 다 응집한다고 좋은게 아니다.
당장 몰라도 되는 것을 응집해야 한다.
(남겨야할 것 / 숨겨도 될 것) 을 구분하고, 컴포넌트를 만들자.
ex) 팝업 title, content props로 넘기기
2. 단일 책임
단일 책임 원칙은 하나의 함수가 하나의 일만 하도록 하는 것이다.
새로운 기능을 추가하면서 이 단일 책임이 깨지기도 하는데, 리팩토링해서 잘개 쪼개서 하나의 일만 하도록 하자.
클린 코드라는 것은 짧은 코드가 아니라, 유지보수가 쉬운 코드다.
3. 추상화
추상화란 얼마나 보여줄지 결정하는 것이다.
추상화에는 단계가 있고, 얼마나 추상화를 할 것인지 생각하라.
읽는 사람을 위해 프로젝트의 전반적인 추상화 수준을 맞추어라.
추상화 단계가 높다고 해서 좋은 코드가 아니다.
추상화 단계를 맞춰서 읽는 사람에게 신뢰를 줘야한다.
https://www.youtube.com/watch?v=edWbHp_k_9Y&t=960s
🧐 4차 과제
주제 및 내용
(▲ 이응수 대리의 책 찾기 프로젝트)
이응수 대리의 프로젝트를 살펴보고, '짝과 코드리뷰 문서 작성하기'가 이번 주제였다.
과정
프로젝트 살펴보기
이번 프로젝트에서는 재완님과 짝이 되었는데, 우리는 각자 시간을 갖고 프로젝트를 살펴보았다.
나는 코드를 열어서 전체적인 흐름을 보기위해 노력했다. 어떤 식으로 컴포넌트가 작성되어 있는지 살펴보고, 어떤 라이브러리들을 이용하는지, 코드의 작성 방식은 어떠한지 보았다. 내가 처음 살펴본 느낌은 이랬다.
1) 컴포넌트가 작은 단위로 나뉘어져 있는 편
2) React-native에서 쓰이는 스타일 방식
3) 코드가 깔끔하다고 느껴짐
4) 내가 써보고 싶었던 라이브러리들이 있군! (tailwind, react-spring)
1차 회의
각자 파악한 내용으로 문서를 작성했고, 서로 공유했다.
공통적인 부분도 있었고 서로 다르게 생각했던 부분도 있었다. 과제로 낼 문서를 작성하면서, 시간을 갖고 고민해야할 부분들이 있어서 다음날 다시 만나기로 했다.
프로젝트에 대해 고민하기
우리는 문서를 작성하다 채우지 못한 부분에 대해 각자 고민하기로 했다.
1) 버그 해결책 고민
2) 프로젝트의 장단점 및 이응수 대리가 해야할 것
프로젝트에는 두 가지의 버그가 있었다.
첫번째, 검색 결과가 없을 경우 로딩중이면서 에러메세지가 떳고 두번째, 최신순 정렬이 먹지 않았다. 컴포넌트를 하나하나 추적해보며 버그들을 수정했다.
확장 가능성을 고려해서 이응수 대리가 해야할 것을 생각해보는게 쉽지 않았다. 남이 만든 것에 대해 조언해준다는 것 자체가 쉽지 않았다. 고민해본 결과 나는 개발문서를 작성하는게 앞으로의 확장 가능성을 위해 제일 필요하다는 생각이 들었다.
2차 회의 및 문서 작성 완료
2차 회의때는 서로 버그를 해결한 방식을 설명하고, 간결한 코드를 문서에 담았다.
그 외에도 각자 생각해본 것을 토대로 이야기했고, 작성하던 문서를 약간 수정하고 내용을 추가하면서 마무리했다.
어려웠던 점
내 생각 말하기
둘이서 하나의 코드 리뷰를 작성해야 했기 때문에 어떤 내용을 쓰려면 상대방에게 왜 그렇게 생각하는지 설명해야했다. 정답이 없는 것이기 때문에 나의 생각을 전달하려면 상대방이 바라보는 눈으로 말을 해야 한다. 내가 말하는 것이 상대방에게도 와닿을지, 사실은 아직도 어렵다. 프리온보딩 과정이 끝날 때쯤엔, 내 생각을 말하는 것이 많이 향상되어 있을 거라는 생각이 든다.
코드 리뷰
남이 작성한 코드를 리뷰한다는게 쉽지않았다. 나랑 생각하는 것이 다를테고, 또 다른 의도가 있을 수도 있는데 이 사람이 작성한 코드를 지적하는 것이 조심스러웠다. 또, 지적을 해도 좋은 부분인지, 나의 주관적인 생각일 뿐인지 구분이 조금 어려웠다. 이번에 긴가민가 하는 부분은 나의 주관적인 생각일 수도 있다고 판단해서 코드 리뷰 문서에 작성하지 않았고, 확실하다고 생각되는 부분만 적었다.
