24년도 정보처리기사 필기 시험을 준비하면서, 이름만 들었던 SOlID 원칙의 개념에 대해 공부하게 되었다.
공부를 하던 도중 실제로 나의 코드에 적용해보면 좋겠다는 생각이 들어, SOlID 중 하나인 단일책임원칙을 적용해보기로 했다.
단일 책임 원칙(SRP)는 객체는 단 하나의 책임만 가져야 한다는 원칙을 말한다.
여기서 '책임' 이라는 의미는 하나의 '기능 담당'으로 볼 수 있다.
즉, 하나의 클래스나 함수는 하나의 기능 담당하여 하나의 책임을 수행하는데 집중되어야 있어야 한다는 의미이다.
const setUserInfo = useSetRecoilState(userInfoAtom);
const setSignupInfo = useSetRecoilState(signUpInfoAtom);
const navigate = useNavigate();
const sendCode = async (code: string, social: string) => {
try {
let response;
if (social === 'kakao') {
response = await postUserCode(code, 'kakao');
} else if (social === 'google') {
response = await postUserCode(code, 'google');
}
//가입 이력이 있을 경우
if (response.message === '로그인 성공') {
const { user, token } = response;
const { id, email, name, image, genre, about, rep_playlist } = user;
const { access, refresh } = token;
localStorage.setItem('token', access);
localStorage.setItem('refreshToken', refresh);
setIsLogin(true);
setUserInfo({
id,
email,
name,
image,
genre,
about,
rep_playlist,
token,
});
navigate('/main');
//가입 이력이 없고 뮤딕 프로필 설정이 필요한 경우
} else {
const email = response.email;
setSignupInfo({ email, type: 'social' });
navigate('/setprofile');
}
// console.log(response);
} catch (error) {
console.error('Error', error);
}
};
위의 코드는 sendoCode라는 함수의 매개변수로 들어오는 social의 값이 카카오인지, 구글인지를 확인하여, 해당 소셜로그인의 인가 코드를 post요청으로 전달해주는 함수이다.
허나 위 sendoCode라는 함수에는 추가로 가입 이력이 있는지, 없는지에 따른 동작을 추가로 진행하고 있는데 가입 이력이 있다면 바로
setUserInfo를 통해 전역 상태관리를 통해 유저정보를 저장하고 메인 페이지로 이동 시켜주고, 가입 이력이 없다면 서비스 이용에 필요한 추가 정보 입력을 위해 프로필 설정 페이지로 이동하는 동작을 추가로 구현하고 있습니다.
이제 위 코드를 단일책임의 원칙을 적용하여 보다 읽기쉬운 코드로 변경해보겠습니다.
const sendCode = async (code: string, social: string) => {
try {
let response;
if (social === 'kakao') {
response = await postUserCode(code, 'kakao');
} else if (social === 'google') {
response = await postUserCode(code, 'google');
}
//가입 이력이 있을 경우
if (response.message === '로그인 성공') {
handleSuccessLogin(response);
//가입 이력이 없고 뮤딕 프로필 설정이 필요한 경우
} else {
handleMoveSignUp(response);
}
// console.log(response);
} catch (error) {
console.error('Error', error);
}
};
const handleSuccessLogin = (response: ILogin) => {
const { user, token } = response;
const { id, email, name, image, genre, about, rep_playlist } = user;
const { access, refresh } = token;
localStorage.setItem('token', access);
localStorage.setItem('refreshToken', refresh);
setIsLogin(true);
setUserInfo({
id,
email,
name,
image,
genre,
about,
rep_playlist,
token,
});
navigate('/main');
};
const handleMoveSignUp = (response: ISignup) => {
const email = response.email;
setSignupInfo({ email, type: 'social' });
navigate('/setprofile');
};
위 코드에서 가입상태 여부에 따라 유저 정보와 페이지 이동을 설정하는 코드를 handleSuccessLogin, handleMoveSignUp 함수를 만들어 분리하였습니다.
handleSuccessLogin에서는 로그인 성공시에 필요한 유저정보 저장과 메인 페이지 이동의 기능을 구현하였고,
handleMoveSignUp에서는 추가 프로필 설정에 필요한 기능을 구현하였습니다.
단일책임원칙으로 기반한 함수 분리를 통해 코드들이 보다 가독성이 높아진 것을 확인할 수 있었습니다.