지난주에 프론트엔드 프로젝트를 완료하고 그에 이은 백엔드 프로젝트를 진행 중이다. 프론트엔드 프로젝트를 하고, 마스터클래스를 통해 내 코드를 마스터님께 직접 코드리뷰를 받아보면서 얻게 된 것이 굉장히 많았다!

처음에 마스터님이 코드를 리뷰하신다고 해서, 그룹원들이랑 이거 공개처형감이 되는 게 아닐까.. 하고 무서워했었는데 막상 리뷰를 받게되니 좋았다. 언제 내 코드를 마스터님 같은 개발자에게 평가 받을 수 있을까! 아마 회사를 다니게 되더라도 흔한 일은 아니었을 것 같다.

코드리뷰 외에도 마스터클래스에서 프로젝트를 하면서 궁금했던 점이나, 여러가지 얘기들을 했었는데 정말 유익한 시간이었다. 프로젝트를 시작할 때의 마스터클래스와 끝날 때의 마스터클래스는 사뭇 다른 느낌이었다. 아무래도 내가 직접 고생하던걸 토론하다보니 더 집중도 되고 했던 것 같다 :P

코드 리팩토링!

프로젝트를 했을 때 코드가 얼마나 예쁜가에 대해서는 신경쓰지 않았다. 신경을 쓰긴 했는데 내가 볼 줄 알고, 내 코드니까 어디가 보기 불편한지 크게 느끼지 못했던 것 같다. 내가 보기엔 다 금방 읽히는 것 같았지.. 코드리뷰를 받기 전까진 말이다!

코드리뷰 그 이후

arrow function과 익명함수를 남발하지 말자

자바스크립트에는 쓰기 편한 아주 좋은 함수 형태가 있다. 바로 arrow function! 처음 배웠을 땐 익숙하지 않아서 잘 쓰지 않았는데, 요즘에는 틈만 나면 이 형태의 함수를 사용하고 있다. 주로 콜백 함수에 사용하곤 했는데, 간단한 기능을 하는 함수가 아닐 땐 이 방법을 콜백에 사용하는 건 별로라는 것을 알게 되었다.

콜백 함수는 바깥에서 바로 접근하기 쉬운 형태가 아니다. 따라서 이 코드는 테스트하기가 조금 까다로운 면이 있는데, 거기다 arrow function처럼 익명함수이기까지 한다면 어떤 동작을 하는 것인지 코드를 직접 읽어보기 전까지는 알기 쉽지 않다. 내가 짠 코드라면 금방 이해하겠지만 만약 처음 코드를 보는 사람이 이를 보게 된다면 수많은 익명함수를 파악하는 데 오랜 시간이 걸렸을 지도 모른다.

특히 eventListener에 익명함수를 사용하게 되면 더 난해할 수 있다. eventListener에는 짧게 스타일을 바꾸는 동작이 들어갈 수도 있지만, 버튼을 눌렀을 때 서버로 어떤 신호를 보내거나, 입력값을 검증한다던가 하는 긴 동작이 들어가기도 한다. 만약 콜백 함수로 이런 긴 코드가 들어간다면..? 아무리 상위 클래스나 함수를 통해 동작을 파악할 수 있더라도 가독성이 썩 좋진 않다.

조건문은 되도록 빨리 return 해주자

조건문은 보통 여러 개의 조건들 중 한 개에 걸리게 되어있다. 이 때 조건에 만족한 경우가 발생했다면 되도록 return을 통해서 이 조건문을 빨리 탈출하도록 하는 것이 좋다고 한다.

만약 조건문을 다 살펴본 후 맨 마지막에 return을 하도록 했다면, 컴파일러는 굳이 기억하지 않아도 될 뒤의 조건까지 모두 비용을 소비하고 return을 하게 된다. 때문에 빨리 탈출을 돕는 편이 좋다!

Javascript에서 스타일을 직접 주는 것은 지양하자

이번에 코드를 짜면서, 한개 스타일만 바뀌기 때문에 element.style.~ = ?와 같이 직접적으로 JS에서 CSS 스타일을 변경해줬다. 한개의 스타일을 위해서 클래스를 생성하는 방식이 더 별로일 것 같아서 이렇게 해봤는데, 이렇게 하는 방법은 미래를 위해서 지양하는 것이 좋다.

만약 이 부분에서 스타일이 더 추가되거나, 같은 스타일이 다양한 곳에 사용되거나, 스타일이 변경될 경우에는 CSS 클래스 스타일만 변경해주면 될 것을 JS 코드를 일일히 다 고쳐야한다. 거기다 JS로 직접 스타일을 변경할 때는 HTML소스에 직접 반영이 되어서 별로 예쁘지 않기도 하다..

스타일은 CSS에게 맡기도록 하자!

리팩토링에 대해서만 배운 것은 아니지만, 이번 주 프론트 마스터클래스를 하면서 가장 감명 깊었던 내용이다. 코드를 어떤 식으로 변경하면 더 좋을 지 직접 보여주시기도 해서 백엔드 프로젝트를 마치고나서 프론트 코드를 지적받은 부분을 기반으로 고쳐볼 생각이다.

프론트는 부스트코스를 통해서 조금이나마 경험해본 적이 있어서 그래도 어떤 식으로 해결해봐야 할 지 어느정도 감이 잡혔는데 백엔드는 정말 JSP로도 해봤다고 말하기 민망할 정도로 안해본 수준이라.. 네트워크부터 다시 공부해보면서 개발 중이다.

모르는 게 너무 많기도 해서 집중도 잘 안되고 힘든 여정 중..ㅠㅠ 어찌어찌 완성은 해나가고 있는 것 같지만 백엔드는 내 길이 아닌가? 하는 생각도 몇 번 들었다. 그래도 문제를 하나씩 해결하면서 생기는 즐거움을 통해서 다시 힘내고 개발하는 중! 꼭 제대로 완성해서 배포하고 싶다!!

다음주의 모습을 기대하는 중 :D