토스 | SLASH 21 - 실무에서 바로 쓰는 Front-end Clean Code

명확한 이름

중복 줄이기

 

읽기 좋은 코드 짜기

실제 액션 아이템 공유

 

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

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

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

4. 액션 아이템

 

1. 클린 코드 의의

지뢰 코드..

- 흐름 파악이 어렵고

- 도메인 맥락 표현이 안 되어

- 동료에게 물어봐야 알 수 ㅣㅇㅆ는 코드

유지보수할 때 오래 걸림,, 기능 추가 불가능한 상태..유저 입장에서도 쾌적하지 못함

 

실무에서 클린 코드의 의의 = 유지보수 시간의 단축

 

기존 코드에 기능을 추가하는 일

 

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

As-is To-be

- 하나의 목적인 코드가 흩뿌려져 있으면 안된다! 헉

- 하나의 함수가 여러가지 일을 하고 있으면 안된다

- 함수의 세부 구현 단계가 제각각 ?? 

 

= 큰 그림을 보며 코드 리팩토링하기

1. 함수 세부 구현 단계 통일

- 함수 이름 위계 맞추기

As-is

- handleQuestionSubmit

- handleMyExpertQuestionSubmit

To-be

- handleNewExpertQuestionSubmit

- handleMyExpertQuestionSubmit

- 해당 함수에는 최소 크기의 로직만 넣는다 

ex. handleNewExpertQuestionSubmit엔 새로운 전문가에게 질문하는 로직만, handleMyExpertQuestionSubmit엔 연결 중인 전문가에게 질문하는 로직만

2. 하나의 목적인 코드는 뭉쳐 두기

ex. 팝업 관련 코드를 하나로 뭉쳐두기

As-is

팝업을 여는 버튼과 팝업 코드가 떨어져있음

To-be

새로운 컴포넌트를 만들어 띄워줄 팝업도 props로 받아 팝업 관련 코드를 뭉쳤다

<PopupTriggerButton
popup={(
<연결전문가팝업
onButtonSubmit={handleMyExpertQuestionSubmit}/>
)}
>
질문하기 </PopupTriggerButton>

3. 함수가 한 가지 일만 하도록 쪼개기

작은 로직으로 쪼개진 함수를 필요한 시점에서 부를 수 있도록 수정

 

클린 코드 != 짧은 코드

== 원하는 로직을 빠르게 찾을 수 있는 코드

 

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

1. 응집도 (하나의 목적인 코드는 뭉쳐 두기)

2. 단일책임 (함수가 한 가지 일만 하도록 쪼개기)

3. 추상화 (함수 세부 구현 단계 통일) - 핵심 개념을 필요한 만큼만 노출

 

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

- 응집도 : 같은 목적인 코드는 뭉쳐두자

무엇을 뭉쳐야 하는가? 당장 몰라도 되는 디테일만 뭉쳐두자

 

작성날짜 바뀌나?