대한항공 클론코딩 / 첫 코드리뷰 그리고 리팩토링

@oxlzlo · March 18, 2024 · 2 min read

대한항공 클론코딩 / 첫 코드리뷰 그리고 리팩토링

스크린샷 2024-03-12 오전 12 16 59

첫 코드리뷰와 리팩토링 완료


지난 HTML, CSS 클론코딩 과제에서 코드리뷰를 해보고, 받아봤다.

프로그래밍 공부를 시작하고 한 첫 코드리뷰였다.


우테코 프리코스 하면서 다른 분들은 코드리뷰 많이 하셨는데,

난 그 때는 솔직히 내 코드가 너무 엉망진창이라 다른 사람에게 보여주기를 꺼렸던 것 같다..

그래서 그냥 다른 사람들 코드 구경하면서 감탄만 했던 기억이 있다 🥲


스크린샷 2024-03-12 오전 12 24 40

스터디 조원들과 멘토님께 코드리뷰를 받았다!

사진에 첨부한 리뷰 말고 더 많은 리뷰를 받았지만, 추려서 올려본다..


확실히 코드리뷰를 받아보니 내가 미처 생각하지 못 했던 부분들과, 놓쳤던 부분들을 발견하고 보완할 수 있었다.



스크린샷 2024-03-12 오전 12 31 06

코드리뷰 받은 부분들을 리뷰 하나당 한 커밋으로 나누어 진행하였고,

리뷰의 리플라이로 커밋 넘버를 첨부해 바로 리팩토링한 부분을 확인 해볼 수 있도록 하였다.

커밋 넘버를 바로 첨부할 수 있는건 지난 멘토링 시간에 멘토님께서 말씀 해주셨는데, 좋은 정보를 얻은 것 같다.


스크린샷 2024-03-12 오전 12 33 08

실제로 내 코드에는 CSS가 중복되는 선택자들이 매우.. 매우매우매우매우 많았고,

리팩토링을 진행하며 하나의 공통된 선택자에 CSS를 적용해보았다.

결과적으론 당연하게도 훨씬 간결하고 깔끔한 코드를 작성할 수 있었다.




스크린샷 2024-03-12 오전 12 37 01

내가 스터디 조원들에게 해준 코드리뷰는 스스로 뿌듯했던 부분들의 사진으로 가져와봤다..

두 리뷰의 공통점이라면 조원들이 알지 못 했던, 혹은 실수했던 부분을 짚어줌으로써 도움을 줄 수 있었다.

처음엔 사실 아직 나도 잘 모르는데, 누군가의 코드를 리뷰할 수 있나..? 라는 생각이 들었는데

이번 코드리뷰를 통해 왜 코드리뷰가 필요한지 알게된 계기가 되었다.


그래서 내가 생각하는 ‘코드리뷰는 왜 필요한가?’ 라면,

  • 내가 놓친 부분을 발견할 수 있다
  • 몰랐던 사실을 알게 된다
  • 같은 동작을 위한 코드라도, 사람마다 코드 작성법이 달라서 ‘이건 이렇게도 작성할 수 있구나..’ 라는 걸 깨닫게된다
  • 내 코드에 대해 누군가 칭찬을 해주면 사기가 충전된다 (중요)
  • 내가 다른 사람이 알지 못 했던 부분을 코드리뷰를 통해 알려주게 된다면 굉장한 뿌듯함과 성취감이 생긴다 (중요)

사실 코드리뷰라고 하면 ‘이 부분은 왜 이렇게 작성 하셨나요?’ ‘이 부분은 이렇게 작성하는게 더 좋을 것 같아요’

이런 리뷰들만 생각 했었는데, ‘이 부분은 이렇게 작성하니 좋은 것 같아요!’ 라던가

서로서로 몰랐던 정보들을 주고받는다는 점이 사실 코드리뷰의 가장 큰 장점이 아닐까? 라는 생각이 든다

코드리뷰가 마인드셋에도 도움이 된다는 점이 가장 놀라웠고, 가장 좋았다.



좋았던 점

코드리뷰의 참기능을 알게되고, 내가 누군가에게도 도움을 줄 수 있다는 점.

HTML, CSS 과제 하면서 자존감도 많이 떨어졌는데, 마인드셋에 도움이 되었다.

아쉬운 점

리팩토링을 진행하였지만, 페이지 전체 비율을 건드리면 요소 하나하나의 위치를 전부 다 다시 잡아야할 것 같아서 페이지 비율에 대한 부분은 리팩토링을 하지 못 했다..

리팩토링을 진행하고, 시간 내에 제출해야 했기 때문에, 핑계지만 시간이 촉박했다 🥲

배운 점

코드리뷰를 리뷰이가 잘 작성했다는 부분에 대한 칭찬도 아낌없이 남겨도 된다는 것.

내가 잘못한 부분에 대해서만 돌아보게 될거라 생각했는데, 내가 잘 한 부분도 함께 돌아볼 수 있다는 것.

덕분에 떨어진 자존감을 회복할 수 있는 마인드셋에 도움이 된다는 것.

앞으로 노력할 점

다음 JS 과제에서는 페이지 전체 비율을 신경쓰고, 반응형으로 제작해볼 것.

전체 레이아웃을 짤 때, absolute를 지양해보자.

@oxlzlo
Front-End Developer