SLASH 21 - 실무에서 바로 쓰는 Frontend Clean Code

 

 

21년도 발표 영상이라 시간이 조금 많이 지난 영상이지만, 팀 내에서 화제의 Frontend Fundamentals로 스터디를 해보면 어떻겠냐는 얘기가 나와서 스터디하기 시작하기 전에 징검다리 같이 한 번 보면 좋을 것 같아 영상을 시청했다. 20분 남짓해서 한 번 쓱 보기에 부담없는 분량이다. 

 

'클린코드'에 대해서 항상 클린코드란 대체 무엇인지, 각자의 정의가 다양할 뿐더러 가령 읽기 좋은 코드라고 정의할 때 어떤 코드가 A에게는 읽기 좋지만, B에게는 읽기 좋지 않을 수도 있어서 이런 부분이 어렵게 느껴졌다. 

 

 

위의 영상에서는 개발자의 시간이 곧 회사의 자원이고, 이를 단축시켜줄 수 있는 코드가 클린코드라고 정의한다. 팀마다 시간을 단축시킬 수 있는 방법과 토대가 다를 것이라 우리만의 방법이 무엇인지 찾아가는 여정이 곧 클린코드일 것 같다. 

 

반대로 클린코드가 아닌 코드에 대한 반례는 다음과 같이 설명했다. 

- 흐름 파악이 어렵고,
- 도메인 맥락 표현이 안 되어
- 동료에게 물어봐야 알 수 있는 코드

 

영상에서 실무 사례를 바탕으로 발표자의 PR을 바탕으로 구체적인 before / after 코드를 제시한 점이 좋았다. 

 

시간 단축이라는 관점에서 결국 원하는 로직을 빠르게 찾을 수 있는 코드가 클린 코드라고 하며, 다음과 같은 세 가지 기준을 제시한다.

 

한 가지 '추상화'라는 키워드가 잘 공감이 되진 않았다. 평소 생각하고 있던 추상화란 인터페이스를 어디까지 열고 닫을지에 대한 부분이라고 생각해서 함수의 위계를 맞추는 것과는 조금 다른 얘기 아닌가 하는 생각을 했다. 

 

 

이직을 한 후 그토록 내가 원하던 '다른 사람이 쓴 코드에 미끄러져 들어가기'를 경험하고 있다. (이전 회사는 소스코드 0줄에서 시작한 지라.. 내가 작성한 그 모든 코드가 레거시가 되었다. 아하하하 🤣) 여러 부분에 놀라움의 연속이지만, 코드가 깔끔하다고 느낀 이유 중에 한 가지는 폴더구조, 파일명, 함수명 등 모든 곳에서 층위가 같은 코드가 반복되어서 금방 패턴에 익숙해질 수 있었던 점이다. 이것이 바로 코드를 파악하는데 시간을 단축하는 클린코드의 효과! 

 

이 영상을 보고 한 주 동안 PR을 올릴 때마다 위의 세 가지 관점에서 코드를 구성해보려고 했다. 요즘 input을 많이 붓는 반면 output은 그만큼 없다는 생각이 드는 시기인데, 무엇을 습득하든 그걸 '지금' 내가 하고 있는 '일'에 접목해보려는 시도를 의식적으로 하고 있다.