[클린코드] 미션 3가지 예시 만들기

QUIZ 01

원칙 1. 플래그 인수를 사용하지 마라.

Before 😣

const { colorScheme } = useColorScheme();
const isDarkMode = colorScheme === 'dark';
 
const getTheme = (isDarkMode) => {
// theme 정의
	return isDarkMode ? darkTheme : lightTheme;
}
 
getTheme(isDarkMode);

▶️ 고치려는 문제 1. isDarkMode라는 플래그 인수를 전달하고 있다. → 이 경우는 함수가 한가지 일을 하지만, 플래그 인수를 사용하면 하나의 함수가 여러가지 일을 할 가능성이 있다는 것을 암시한다.

After 😎

const { colorScheme } = useColorScheme();
 
const getTheme = (colorScheme) => {
// theme 정의
	return colorScheme === 'dark' ? darkTheme : lightTheme;
}
 
getTheme(colorScheme);

▶️ 어떻게 고쳤는가? 1. 플래그 인수가 아니라 colorScheme을 자체를 인수로 전달하여, getTheme 함수의 역할을 명확히 하였다.

QUIZ 02

원칙 2. 오류 코드보다 예외를 사용하라

Before 😣

const validateUserInput = (data) => {
	const ERROR_CODE = {
		SUCCESS: '0',
		INVALID_EMAIL: '1',
		INVALID_PASSWORD: '2',
	}
 
	if(!data.email) {
		return ERROR_CODE.INVALID_EMAIL;
	}
	if(!data.password) {
		return ERROR_CODE.INVALID_PASSWORD;
	}
 
	return ERROR_CODE.SUCCESS;
}
 
 
const onSubmit = (data) => {
	const errorCode = validateUserInput(data);
 
	if(errorCode === '1'){
	highlightInvalidEmail();
	} else if(errorCode === '2') {
	highlightInvalidPassword();
	} else {
	submitForm();
	}
}

▶️ 고치려는 문제

1. 에러코드 ‘1’, ‘2’ 같은 값들의 의미를 알기가 어렵다.
2. 정상흐름과 오류처리가 섞여있어 가독성이 떨어진다. After 😎

const createValidationError = (message, field) => {
    const error = new Error(message);
    error.field = field;
    return error;
}
 
const validateUserInput = (data) => {    
    if(!data.email) {
        throw createValidationError('Email is required', 'email');
    }
 
    if(!data.password) {
        throw createValidationError('Password is required', 'password');
    }
}
 
const onSubmit = (data) => {
    try {
        validateUserInput(data);
        submitForm();
 
    } catch (error) {
        if(error.field === 'email') {
            highlightInvalidEmail();
        } else if(error.field === 'password') {
            highlightInvalidPassword();
        } 
    }   
}

▶️ 어떻게 고쳤는가?

1. 정상 로직과 오류 처리를 분리
2. error.field로 어떤 필드가 문제인지 에러에 의미를 부여

QUIZ 01

원칙 3. 의미가 불분명한 불용어 사용을 자제하라.

Before 😣

const {data : userData} = useQuery({
	queryKey: ['user', userId],
	queryFn: () => apis.getUserData(userId),
});

▶️ 고치려는 문제

1. data라는 의미없는 불용어를 사용

After 😎

const { data: profile } = useQuery({ 
	queryKey: ['profile', userId], 
	queryFn: () => apis.getProfile(userId), 
});

▶️ 어떻게 고쳤는가?

1. 변수명, 함수명에서 data라는 불용어를 제거
2. 구체적으로 의미있는 이름인 profile을 사용