클린 코드를 작성하기 위한 규칙 설정

먼저 알아야할 것은 짧은 코드라고 해서 무조건 클린 코드는 아니라는 것을 명심해야합니다.

현재 우리 리팩토링의 목적은 가독성과 재사용성을 높여 서로 파악하기 쉬운 코드를 짜는 것이기 때문에 다음 내용들을 잘 지켜 코드를 작성해 주시면 감사하겠습니다.

코드의 가독성을 높이기 위해선 해당 코드가 맡은 기능과 어떤 목적을 가진 코드인지 한번에 이해할 수 있어야합니다. 이를 위해서 3가지를 중점으로 생각하며 코드를 작성해봅시다 🫠

1. 응집도 : 하나의 목적을 가진 코드는 뭉쳐져 있어야합니다. ⇒ 하나의 기능을 하는 코드가 여러 곳에 뿌려져 있으면 한번에 파악하기 힘듭니다.

2. 단일 책임 : 함수가 여러가지 일을 하면 안되고 하나의 일만 해야합니다. ⇒ 여러가지 일을 하는 함수가 있다면 나누어주도록 합시다

ex)

const myFucntion = async() => {
	const callData = await fetch("url", {
		method: "GET"
	})
	
	const sendData = await fetch("url", {
		method: "POST"
		body: JSON.stringify(data)
	})
}

위와 같이 데이터를 받는 것과 보내는 것을 동시에 하는 함수가 있다면 아래와 같이 분할해 줍시당 그리고 함수 이름도 어떤 일을 하는지 알 수 있게 제대로 적어주면 좋아요

const sendDataFunction = async() => {
	const sendData = await fetch("url", {
		method: "POST"
		body: JSON.stringify(data)
	})
}

const callDataFunction = async() => {
	const callData = await fetch("url", {
		method: "GET"
	})
}

1. 추상화 : 함수의 세부 구현 단계가 통일되어야합니다. ⇒ 세부 구현 단계 통일이란 모두 같은 방식으로 추상화가 되어 있어야한다는 뜻입니다. 아래 그림을 보면 바로 이해할 수 있을거에요

그리고 추상화를 할 때는 아래와 같이 핵심 개념이 드러나도록 해주는게 제일 좋습니다.