좋은 코드란 어떤 코드일까

시작하며

좋은 코드란?

• 가독성이 좋은 코드

• 재사용성이 높은 코드

• 적절하게 추상화되어 있는 코드

가독성이 좋은 코드?

재엽님의 글 중 좋은 코드란 무엇일까? > 읽기 쉬우려면 주석을 쓰면 되지 않나? 에서 설명해주신 예시를 많이 참고했다.

// A: 포스트 카드
// b: 제목 날짜 이미지를 받는 인자
// b.c: 이미지
// b.d: 제목
// b.e: 날짜
const A = (b) => {
	return(
		<Container>
			<StyledPostImage src={b.c}/>
			<StyledTitle>{b.d}</span>
			<StyledDate>{b.e}</date>
		</Container>
	);
}

컴포넌트나 인자들의 명확한 명칭을 정하자

const PostCard = (props) => {
	return(
		<Container>
			<StyledPostImage src={b.postImage}/>
			<StyledTitle>{b.postTitle}</span>
			<StyledDate>{b.postUpdateDate}</date>
		</Container>
	);
}

재사용성이 높은 코드?

const PostCard = (props) => {
	return(
		<Container>
			<StyledPostImage src={props.postImage}/>
			<StyledTitle>{props.postTitle}</span>
			<StyledDate>{props.postUpdateDate}</date>
		</Container>
	);
}

새로 만든다면 비슷한 형태가 중복되는데 괜찮을까?

도메인 로직을 제거해보자.

포스트카드에서 도메인인 포스트만 제거하면 어떨까?

const TopImageCard = ({image, title, date}) => {
	return(
		<Container>
			<StyledImage src={image}/>
			<StyledTitle>{title}</span>
			<StyledDate>{date}</date>
		</Container>
	);
}

도메인 로직을 구분하는 기준은 뭐지?

Domain: 통치자나 정부가 소유하거나 통제하는 영토 지역

확장성 있는 코드

const TopImageCard = ({image, title, date}) => {
	return(
		<Container>
			<StyledImage src={image}/>
			<StyledTitle>{title}</span>
			<StyledDate>{date}</date>
		</Container>
	);
}

const TopImageCard = ({image, title, date, content, author}) => {

const TopImageCard = ({contents}) => {
	return(
		<Container>
			<StyledImage src={image}/>
			{contents}
		</Container>
	);
}

숨겨야할 코드와 드러내야할 코드

형태를 분리하는 경우

const TopImageCard = ({contents}) => {
	return(
		<Container>
			<StyledImage src={image}/>
			{contents}
		</Container>
	);
}

const VerticalContentCard = ({header, contents}) => {
	return(
		<Container>
			{header}
			{contents}
		</Container>
	);
}

기능을 분리하는 경우

export const useOnToggle = (selected, defaultSelected) => {
 //... 생략
  return [isToggle, handleToggle];
};

const [isToggled, handleToggle] = useOnToggle(isSelected, defaultSelected);

코드의 역할을 담고있는 핵심 로직(개발자가 몰라도 되는 세부구현)은 숨기고 이외의 로직은 드러냄으로서 확장성을 가져갈 수 있다.

적절하게 추상화되어 있는 코드는?

각자 상황에 알맞게 선택하는게 적절한 추상화가 아닐까?

정리하면

각자 상황에 맞는 추상화를 설정하자.

• “적절한” 추상화는 개발자의 몫

코드의 역할을 명확하게 설정하자.

추상화를 진행하기 전 다시 한번 “왜? 이걸 추상화 해야하는지, 어떤 역할인지”를 고민해보자.

• 역할이 명확해진다면 변수나 함수의 이름도 명확해진다.

• 역할이 명확해진다면 핵심 코드도 명확해진다.

• 추상화된 코드가 명확한 역할을 한다면 활용도도 그만큼 높아지게 된다.

💡

Ref

좋은 코드란 무엇일까?

‘성선설’에 기반하면 모든 개발자는 좋은 코드를 작성하고 싶으리라 생각한다. 누구나 관심 있어 하는 주제인 만큼 나 또한 여러 고민을 거듭해왔고 여태까지의 생각을 정리해보려고 한다. 어떤 프로그램을 구성하는 코드냐에 따라 좋다는 기준이 달라질 수 있을 것 같다. 이 글은 웹 개발, 그중에서도 웹 프런트엔드 개발 관점임을 짚고 넘어간다. Table of Contents…

https://jbee.io/etc/what-is-good-code/