실무에서 바로 쓰는 프론트엔드 클린코드 감상

클린코드를 시청한 이유

• 지금까지는 언어의 이해와 구현에 많은 리소스를 투자해왔습니다. 구현에 급급하다보니 질 좋은 코드가 나오기 힘들었습니다.
• 앞으로는 협업을 위한 스킬에 많은 리소스를 투자하려 합니다. 그 첫걸음은 클린코드라고 생각해서 클린코드 영상을 시청하게 되었습니다. 

https://www.youtube.com/watch?v=edWbHp_k_9Y 

 

클린코드의 목적

• 단일 목적을 하는 코드가 흩뿌려져 있거나, 하나의 함수가 여러 역할을 하고 있다면 동료 개발자들이 제 코드를 읽기 어려워 할 수 있습니다.
• 또는 나만 알고 있어서 나만 수정할 수 있는 코드가 생길 수도 있습니다.
• 이는 조직적 관점에서 좋은 현상이 아닙니다. 코드의 질에 따라 생산성에 차이가 생기며, 생산성은 시간이고 시간은 곧 돈이기 때문입니다.
• 따라서 클린코드는 짧은 코드가 아닙니다. 클린코드는 원하는 코드를 빠르게 찾을 수 있는 코드입니다.
• 클린코드 != 짧은코드
• 클린코드 == 원하는 코드를 빠르게 찾을 수 있는 코드

 

원하는 로직을 빠르게 찾으려면

아래 세가지를 인지하고 코드를 작성하면 좋을 것 같습니다.

• 응집도 : 같은 목적의 코드가 뭉쳐져 있는지
• 단일책임 : 하나의 함수가 여러가지의 일을 하고 있지는 않은지
• 추상화 : 함수의 세부구현 단계가 제각각으로 펼쳐져 있지는 않은지

 

더러우면 뭉쳐두는 코드에 대하여

• 커스텀 훅의 안티패턴은 더러우면 일단 뭉쳐두는 것입니다.
• 뭉쳐야 하는 것과 뭉치면 답답한 것의 기준을 명확히 해야 합니다.
• 뭉쳐야 하는 것 : 당장 몰라도 되는 디테일들
• 뭉쳐면 답답한 것 : 코드 파악에 필수적인 핵심 정보

클린코드는 단순히 짧은 코드를 의미하는 것이 아니므로, 적재적소에 코드를 추상화를 시키고 응집시키면 될 것 같습니다.

 

단일책임

• handle질문제출이라는 함수가 있다고 가정합니다.
• 이 함수 내부에는 약관체크 후 팝업 기능과 질문 제출 팝업 기능이 공존하고 있다고 추가로 가정합니다.
• 이 함수는 두 기능이 공존하기 때문에 단일책임을 지는 함수가 아닙니다.
• 함수를 쪼개서 약관체크 후 팝업 함수와 질문 제출 팝업 함수를 나눠준다면 다른 사람이 이 함수를 읽었을 때 하나의 역할만 할 수 있을 것이라 생각할 수 있습니다. (코드를 읽기 편해집니다.)

 

때로는 한글 변수명도 유용하다

• 변수를 영어로 작성했을 때 오히려 가독성이 떨어지는 경우가 발생할 수 있습니다.
• 이럴때는 변수명을 한글로 작성해보셔도 됩니다.
• 코드의 간결함과 주석을 다는 기능까지 한번에 누릴 수도 있습니다.
• 물론 팀과 협의가 되어야 할 것입니다.

 

감상평

• 너무 좋은 시기에 태어난 것 같습니다. 이런 양질의 강의를 유튜브로 볼 수 있다니...
• 영상을 보고 제 코드의 문제점에 대해 한번 상기해보는 시간을 가질 수 있었습니다.
• 저는 함수의 단일 책임 원칙은 나름 잘 지켜주었던 것 같습니다. 하지만 코드의 응집도와 추상화에 대해서는 크게 고려를 하지 않았던 것 같습니다.
• 현재 작업하고 있는 개인 프로젝트에서 클린코드 작성방법을 조금씩 연습해보아야 겠습니다