https://www.youtube.com/watch?v=edWbHp_k_9Y
위 동영상을 보고 정리한 내용을 바탕으로 실제 내가 쓴 코드에 대한 리뷰 및 리팩토링을 한다
📌클린 코드란?
- 클린코드는 짧은 코드가 아니다, 누가 봐도 직관적으로 쉽게 이해할 수 있는 코드가 클린 코드이다
📌클린 코드의 의의
- 원하는 로직을 빠르게 찾을수 있는 코드로 과거의 나 혹은 동료가 짠 코드를 쉽게 이해할 수 있게 된다
- 디버깅 시간 단축된다
즉, 코드의 유지보수하는 시간이 단축되는것에 의의가 있다
📌클린 코드를 위한 3원칙
📖 1. 응집도 : 하나의 목적을 가진 코드를 모아둔다
- 당장 몰라도 되는 디테일들을 모은다
- 코드파악에 필수적인 핵심정보들은 모으지 않는다
1-1 핵심 데이터과 세부 구현을 나눈다
세부구현 : 컴포넌트 세부 마크업, true/false로 나뉘는 세부 useState 등
핵심 데이터 : 어떤 액션, 보여줄 제목, 내용 등
1-2 세부구현은 커스텀 훅, 컴포넌트 등으로 모아서 숨겨두고 핵심 데이터는 외부(props)에서 전달하여 쉽게 바꿀수 있도록 한다
무조건 선언적 프로그래밍을 하려 하기보다는 props로 세부 데이터를 받아야할때는 명령형 프로그래밍을 사용한다
📖 2. 단일 책임 : 함수가 여러가지 일을 하고있을때 함수를 쪼개어 하나의 일만 하도록 한다
- 한가지일을 하는 명확한 이름의 함수가 되게하자
- 한가지일을 하는 기능성 컴포넌트를 사용하여도 된다
- 변수나 함수나 조건이 너무 많아지면 한글이름을 사용하여 보자 주석을 추가하는 효과를 준다
📖 3. 추상화 : 중요하고 핵심적인 부분은 잘 드러나도록, 세부적인 부분은 감춘다
- 위에서 언급한것 처럼 세부적인 부분을 함수, 컴포넌트, 커스텀훅을 사용하여 뭉치면서 따로 감춘다
- 추상화를 함으로써 세세한 부분을 보지않고도 어떤 코드인지 대략 감이 올 수 있게한다
- 추상화를 어느정도로 할지는 선택이지만 추상화 수준을 비슷하게 정리하여야 가독성이 높아진다
- 추상화를 너무 높은수준으로 하면 오히려 유지보수가 어려워질 수 있으니 주의
2022 /11 / 24 우테코 프리코스 진행후 클린코드 기준 추가 및 구체화
📖 함수, 메소드는 15줄 이하로 한다(🚨공백 포함)
📖 파라미터는 3개이하로
📖 JSDoc 주석을 사용하여 변수 타입, 함수 파라미터 타입, 반환 타입등을 설명한다(🚨단, 모든 함수, 변수마다 사용하는 것은 아니며 비교적 복잡한 경우에 필요하다고 생각되는 경우)
