리팩토링 스터디 #9 - API 구조 개선 & 상속 다루기

리팩토링 스터디 아홉번째 시간입니다. 이번 시간에는 API 구조 개선의 후반부 내용과 상속에 관한 내용을 다루었는데요, 챕터는 많았지만 각각의 분량이 적어 짧게 끝났습니다. 슬슬 다음 북스터디의 주제를 생각해볼때가 다가오고 있네요.

 

일단 이야기가 나온 후보군으로는 클린아키텍처와 TDD, 코드 컴플리트, 클린 소프트웨어 등이 있었는데 아직 확정된건 없네요. 다음 계획은 천천히 정하도록 하고, 우선 리팩토링 스터디부터 시작하겠습니다. 

 

 

이미 유명한, 알고있던 기법들

생성자를 팩토리 함수로 바꾸기 기법은 리팩토링 스터디 뿐 아니라 다양한 곳에서 이미 널리 통용되던 기법이었다고 합니다. 전 개인 사정으로 참여하지 못해서 몰랐던 내용이었지만, 동아리원분들이 이전에 진행했던 이펙티브 자바나, 디자인 패턴 등의 책에서도 나왔던 내용이었다고 하네요. 저 책들도 구매해서 볼 예정인데 이 내용이 나오면 반가울 것 같습니다.

 

수정된 값 반환하기 기법을 이해하는데 도움이 될만할 예시로 확인창이 나왔습니다. 사용자에게 무엇인가 알려줄 내용이 있다면 javascript에서 지원하는 confirm을 사용해도 되지만 직접 만든 모달이나 다이얼로그 등으로 대신하여 사용할 수 있는데, 이때 확인이든 취소든 사용자가 누르게 되면 특정한 값을 전달해줄 수 있다는 점에서 수정된 값 반환하기와 같은 맥락으로 이해해도 좋을 것 같았습니다. 요소들을 유연하게 사용하는 방법 중 하나가 되겠네요.

 

js confirm()

 

오류 코드

프론트앤드 개발을 처음 하는 사람에게 많이 보이는 특징 중 하나가 API에서 제공하는 오류 코드를 그대로 비즈니스 로직에 가져와서 사용한다는 점입니다.

 

오류 코드와 같은 부분은 그대로 가져와서 사용하지 말고 따로 API 클라이언트를 만들어서 사용합니다. 오류 코드에 따른 동작은 여기서 정의해주시면 좋습니다. 이렇게 하면 API와 프로그램 간의 직접적인 연결도 끊을 수 있어 의존성을 줄이는데 도움을 줍니다.

 

여기에서 오류코드를 예외로 바꾸어 표현력을 높여주라는 것이 리팩토링 스터디 #8.5 - 내용 미리보기에서 보았던 오류 코드를 예외로 바꾸기 기법이 의미하는 것입니다.

 

 

API와의 직접적인 연결은 그만!

위의 사례처럼 비즈니스 로직에 무엇이 들어있는지 생각하지 않고 만드는 실수가 자주 보인다고 하는데, 알고리즘 문제 해결할때 테스트 케이스를 짜고, 반례를 찾아보고 하듯이 비즈니스 로직에도 어떤 예외가 있는지, 제약 조건은 무엇이 있는지 생각하면서 개발하는 것이 나중에 더 큰 문제로 고통받는 일을 줄이는데 도움이 될듯하네요.

리팩토링 해보기 - Axios/defaults.js

저번시간부터는 Axios 라이브러리 내의 파일을 하나씩 골라 리팩토링을 해보는 시간을 가졌습니다. 주로 사용되었던 기법들은 변수 이름 바꾸기, 함수 선언 바꾸기 등 로직을 다듬는것 보다는 처음 코드를 봤을때 빠르고 명확하게 파악할 수 있도록 만드는 과정을 주로 진행했습니다.

 

아무래도 라이브러리를 깊게 이해하고 있지 못하고있기 때문에 복잡한 내용까지 들어갈 수는 없었지만 오픈소스로 운영되고 있는 라이브러리인 만큼 이러한 작업도 충분히 의미있는 리팩토링이었다고 생각합니다.

 

예시로 일부를 가져왔습니다.

 

/**
 * 여러 조건을 한번에 검사하던 기존의 코드를
 */
transformRequest: [function transformRequest(data, headers) {
    normalizeHeaderName(headers, 'Accept');
    normalizeHeaderName(headers, 'Content-Type');
	if (utils.isFormData(data) ||
        utils.isArrayBuffer(data) ||
        utils.isBuffer(data) ||
        utils.isStream(data) ||
        utils.isFile(data) ||
        utils.isBlob(data)
    ) {
    return data;
}
...

/**
 * 함수 추출하기를 이용해 바꿔줍니다.
 */

function dataValidationCheck(data) {
	if (utils.isFormData(data) ||
        utils.isArrayBuffer(data) ||
        utils.isBuffer(data) ||
        utils.isStream(data) ||
        utils.isFile(data) ||
        utils.isBlob(data)
    )
    
    return data;
}

transformRequest: [function transformRequest(data, headers) {
    normalizeHeaderName(headers, 'Accept');
    normalizeHeaderName(headers, 'Content-Type');
	if (dataValidationCheck(data))
    {
        return data;
    }
    ...
}

 

이런식으로 코드들을 한눈에 파악하기 편하게 정리해주는 과정이 대부분이었습니다. 직접 해보고, 또 하는걸 지켜보니 재미있는 경험이었네요.

 

리팩토링 전의 원본 코드는 여기에서 확인하실 수 있습니다.

 

 

다음 스터디가 벌써 마지막이네요. 끝까지 열심히 해서 잘 마무리 지어야겠습니다.