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

토스 개발자 컨퍼런스 진유림님의 강의를 정리했습니다.

클린코드라 하면 '명확한 이름', '중복 줄이기'를 먼저 말하곤하는데, 실무에선 이 외에도 좀 더 섬세하게 코드를 정리하는 스킬이 필요합니다.

1. 실무에서 클린 코드의 의의

2. 안일한 코드 추가의 함정

3. 로직을 빠르게 찾을 수 있는 코드

4. 액션 아이템

실무에서 클린 코드의 의의

흐름 파악이 어렵고 도메인 맥락 표현이 안되어 동료에게 물어봐야 알 수 있는 코드가 회사마다 존재한다.

이런 코드는 개발할 때 병목이되고 유지보수할 때 시간이 오래걸리며 심하면 기능추가가 불가능한 상태가 됩니다.

실무에서 클린코드의 의의는 유지보수 시간의 단축입니다. 동료, 혹은 과거의 내가 짠 코드를 빠르게 이해할수있다면..!!

읽기 좋은 깔끔한 코드는 코드리뷰의 시간도 버그가 났을 때 디버깅 시간도 단축시킵니다.

시간 = 자원 = 돈

안일한 코드 추가의 함정

하나의 목적인 코드가 흩뿌려져있으면 안된다. 나중에 기능을 추가할 때 스크롤을 위로 올려가면서 미로찾기를 해야할 가능성이 높다.
하나의 함수가 여러가지 일을 하면 안된다. 세부구현을 모두 읽어야 함수의 역할을 알게된다. 코드 추가및삭제도 시간이 더 걸리게 된다.하나의 목적인 코드는 뭉쳐서 개발한다.

코드가 길어질수 있다. 당연하다. 클린코드는 짧은 코드가 아니고 원하는 로직을 빠르게 찾을 수 있는 코드이기 때문이다.

 

 

 

하나의 목적을 가진 코드가 흩뿌려져 있다면 응집도를 높여서 뭉처두어야하고, 함수가 여러가지 일을 하고 있을 때 단일 책임 원칙에 의거하여 쪼개줘야합니다. 함수의 세부 구현 단계가 제각각이면 추상화 단계를 조정해서 핵심 개념을 필요한 만큼을 노출해야합니다.

응집도를 높일 때 무엇을 뭉쳐야 하는가? -> 당장 몰라도 되는 디테일
뭉치면 답답해지는 요소는 코드 파악에 필수적인 핵심 정보. 핵심구현은 숨겨놓고 데이터만 바깥에서 넘기면 이해하기 좋은 코드가 된다.

 

 

 

선언적 프로그래밍: 핵심 데이터만 전달받고 세부 구현은 뭉쳐 숨겨두는 개발 스타일 (무엇을 해야할지만 알려줘, 세부 구현은 미리 해놨거든)

선언형으로 뭉쳐두지 않고 하나하나 세부 구현을 작성한 방식을 명령형 프로그래밍이라고 합니다. 선언적 프로그래밍도 내부를 까보면 명령형으로 작성되어있습니다. 명령형 프로그래밍은 세부구현이 노출되어있어 이를 커스텀하기 쉽지만 읽는데 오래걸리고 재사용하기도 어렵다는 단점이 존재합니다.

 

 

 

 

다음은 단일 책임 원칙입니다. 함수는 한가지 일만 해야하는 단일 책임 원칙을 지키면 읽기 편한 코드가 됩니다.

아래에 서버에 로그를 찍고 다른 API를 호출하는 버튼이 존재합니다. 리팩토링 해봅시다.

 

 

 

 

다음으로 Intersection 옵저버를 다루는 코드에 api코드가 같이 있는 경우입니다.

 

 

마지막으로 이름짓기가 복잡하다면 한글 변수명을 이용하는 것도 좋다.

 

 

 

추상화는 여러가지 방법으로 생각해 볼 수 있다.

 

 

 

추상화 수준이 섞여 있다면 코드 파악이 어렵습니다. 추상화 단계를 비슷하게 정리해주면 코드가 이해하기 편해집니다. 예를 들면 서로 다른 추상화 수준으로 정리했을 때 하나의 컴포넌트에 들어갔는데 그 코드의 양이 방대하고 다른 컴포넌트에 들어갔는데 양이 적고 이렇게 들쑥날쑥한거 보다 일관되게 정리하면 더 가독성이 좋은 코드가 될것이다.

 

결론.

기존 코드를 씹고 뜯고 맛보고 즐기자. 두려워하지 말자.

큰그림 보는 연습하기 (그 때는 맞고 지금은 틀리다) (기능 추가 자체는 클린해도, 전체적으로 어지러울 수 있다.)

팀과 함께 공감대 형성하기

코드에 정답은 없다. 명시적으로 이야기를 하는 시간이 필요하다. 함께 만들어온 코드에서 고치고 싶은 포인트를 서로 말하고 각자 문제라고 생각하는 지점을 공유해 집단지성을 모으고 어떻게 개선할 것인지 고민하면된다.

문서로 적어보기. 클린코드는 모호한 개념이다 따라서 문서로 적어서 이 코드가 어떤점에서 향후 위험할 수 있는지, 어떻게 개선할 수 있는지 나만의 원칙을 적어보자.

 

 

아름다운 사람들은 머문자리도 아름답습니다.