TIL SLASH22 Frontend Clean Code

Youtube 클린코드 관련해서 좋은 컨퍼런스 영상이 있어서 보고 정리해 봤다. https://www.youtube.com/watch?v=edWbHp_k_9Y

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

   = 유지 보수 시간의 단축 (코드파악, 디버깅, 리뷰)

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

   1. 하나의 함수가 여러가지 기능.
   2. 함수의 세부 구현 단계가 제각각.

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

4. 액션 아이템

클린코드 = 원하는 로직을 빠르게 찾는 코드

• 응집도 : 하나의 목적을 가진 코드가 흩뿌려져 있어요. → 하나의 목적을 가진 코드를 뭉쳐야 한다.
• 단일책임 : 함수가 여러 가지 일을 하고 있어요. →단일책임 원칙에 의해서 쪼개야한다.
• 추상화 : 함수의 세부구현 단계가 제각각 이에요.→ 필요한 부분만 노출해야한다.

응집도 : 같은 목적의 코드는 뭉친다.

1. 무엇을 뭉쳐야 하는가 ? → 당장 몰라도 되는 디테일 /
2. 뭉치면 답답한 정보는? → 코드파악에 필수적인 핵심 정보
3. 코드 응집 Tip : 핵심 데이터와 세부 구현 나누기

   • 선언적 프로그래밍 : 핵심 데이터만 전달받고 세부 구현은 뭉쳐 숨겨 두는 개발 스타일

     <Popup
     	onSubmit={질문전송}
     	onSuccess={홈으로이동}
     /> //'무엇'을 하는 함수인지 빠른 이해 가능

   단일책임

   리액트의 JSX 문법을 사용하다보면 html에 선언적 프로그래밍을 사용할 수 있다는 장점이 있지만 props로 어떤걸 세부적으로 넘겨야 하는 경우에는 명령형 설계도 필요. 리팩토링 예시 )

   async function 함수이름은?()
   {
   	const 약관동의 = await 약관동의_받아오기();
   if (!약관동의) {
   		await 약관동의_팝업열기();
   	}
   
   	await 질문전송(questionValue);
   	alert("질문이 등록되었어요.");
   }
   

   • handle질문제출

     async function handle질문제출()
     {
     // 약관 체크 후 팝업
     	const 약관동의 = await 약관동의_받아오기();
     if (!약관동의) {
     		await 약관동의_팝업열기();
     	}
     
     // 질문 제출
     	await 질문전송(questionValue);
     	alert("질문이 등록되었어요.");
     }

     함수 이름에 중요 포인트가 모두 담겨 있어야 한다.

     기능 추가 시 함수는 더욱 잡탕이 되어짐

     리팩토링 Tip 1

     한가지 일만 하는, 명확한 이름의 함수

     async function handled연결전문가질문제출() {
     	await 연결전문가_질문전송(questionValue);
     	alert(`${연결전문가.name}에게 질문이 등록되었어요.`);
     }
     
     async function handled새질문제출() {
     	await 질문전송(questionValue);
     	alert(`질문이 등록되었어요.`);
     }
     
     async function handled약관동의팝업() {
     	const 약관동의 = await 약관동의_받아오기();
     if (!약관동의) {
     	await 약관동의_팝업열기();
     	}
     }

     리팩토링 Tip2

     한가지 일만 하는, 기능성 컴포넌트

     // Before
     // 버튼 클릭 함수에 로그 찍는 함수와 API 콜이 섞여 있다.
     <button 
     	onClick={async () => {
     	log('제출 버튼 클릭')
     	await openConfirm();
     	}}
     />
     //After
     //로그는 버튼을 감싼 컴포넌트에서 찍고, 버튼 클릭함수에서는 API콜만
     //신경 쓴다.
     <LogClick message='제출 버튼 클릭'>
     	<button onClick={openConfirm} />
     </LogClick>

     리팩토링 Tip3

     조건이 많아지면 한글 변수도 유용하다.

   추상화

   //Level 0
   <Button onClick={showConfirm}>
   	전송
   </Button>
   {isShowConfirm && ( 
   		<Confirm onClick={() => {showMessage("성공")}}/>
   )}
   
   //Level 1
   <ConfirmButton
   	onConfirm={() => {showMessage("성공")}} >
   	전송
   </ConfirmButton>
   
   //Level 2
   <ConfirmButton message="성공">
   	전송
   </ConfirmButton>
   
   //Level 3
   <ConfirmButton />

   답은 없습니다 상황에 따라 추상화를 해야한다. 추상화 수준이 섞여 있으면 코드 파악이 어려워진다. 추상화 단계가 비슷하게 정리.

   액션 아이템

   1. 담대하게 기존 코드 수정하기
   2. 큰 그림 보는 연습하기 : 기능 추가 자체는 클린해도 , 전체적으로는 어지러울 수 있다.
   3. 팀과 함께 공감대 형성하기 명시적으로 어떻게 개선할지 이야기를 하는 시간이 필요하다.
   4. 문서로 적어보기 향후 어떤 점에서 위험할 수 있는지, 어떻게 개선할 수 있는지.