발표자-진유림

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

• 찾고싶은 코드를 빠르게 찾을 수 있는 코드
• 짧은 코드가 클린코드가 아님
• “그 코드는 안건드리시는게 좋을꺼에요” -> 흐름 파악 어렵고, 도메인 맥락 표현이 안되어, 동료에게 물어봐야 알 수 있는 코드
• 코드파악, 디버깅, 리뷰 시간 단축 시킨다.
• 시간 = 자원 = 돈
• 하지만 기존 코드에 기능을 추가하는 상황이라면?
  • 90% 기존코드에 기능추가 하는일

안일한 코드 추가의 함정

• 기능추가 요구사항이 들어옴 원하는 로직을 빠르게 찾으려면
• 응집도, 단일책임, 액션코드

1. 응집도 (같은 코드는 뭉쳐라)

• 핵심 데이터와 세부 구현 나누기
• 핵심데이터는 밖에서 전달, 나머지는 뭉친다.
• 커스텀훅의 안티패턴
• 무엇을 뭉쳐야할까?
  • (쾌적) 당장 몰라도 되는 디테일
  • (답답) 코드 파악에 필수적인 핵심 정보
• 선언적 프로그래밍: 무엇을 해야할지만 알려줘,

1
<Popup onsubmit={회원가입} onSucess={프로필 이동}> </Popup>

2. 단일책임

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

• 질문을 제출하는 함수 이름짓기

1
2
3
  function() {
  // 약관 체크후 팝업, 질문제출 두가지 기능이 있는 함수, 연결전문가 질문제출 (기능추가)
  }

1
2
3
4
5
6
7
8
9
10
  // 함수를 따로분리하는게 좋음 함수명도 한가지 기능만 하도록
  function() {
  //약관 체크후 팝업
  }
  function() {
  //질문제출 두가지 기능이 있는 함수
  }
  function() {
  //연결전문가 질문제출 (기능추가)
  }

1. 조건이 많아지면 한글 이름도 유용해요
2. 추상화 핵심 개념을 뽑아내자

• ex. 지하철 노선도의 추상화
• 팝업 코드 제로부터 구현
• 중요개념만 남기고 추상화

3. 액션아이템

• 담대하게 기존코드 수정하기 : 두려워하지 말고 기존 코드를 씹고 뜯고 맛보고 즐기자
• 큰 그림 보는 연습하기: 그때는 맞고 지금은 틀리다. 기능 추간자체는 클린해도, 전체적으로 어지러울 수 있다.
• 팀과 함께 공감대 형성하기: 코드에 정답은 없다. 명시적으로 이야기를 하는 시간이 필요하다.
• 문서로 적어보기: 글로 적어야 명확하다.