velog 메인에 떴어요!
조회수가 생각보다 잘 나와서 기분이 너무 좋았는데, 알고 보니 메인에 떴더라고요. 기대도 안 했는데, 이렇게 관심 가져주셔서 정말 감사합니다 ◟( ˘ ³˘)◞ ♡
가장 고치고 싶은 눈에 가시
사실 스파게티 코드를 Refactoring 하려고 접근하면, 가장 처음 개발자들 눈에 가시는 바로 Lint 이슈일 것이다. 하지만 개인적으로는 처음부터 Lint를 수정할 것을 권하지는 않는다. 그 이유는 이미 개발물이 만들어진 상태에서의 Lint 관련 수정은, 범위가 너무 광범위해지기 때문이다. 또한 일괄적으로 수정한 경우 git log를 추적하는데 불편함을 줄 수도 있다.
물론 auto fix 기능도 있다. 하지만 스파게티 코드 / Lint 설정이 잘못 구성된 코드에서 auto fix는 완벽한 수정이 지원되지 않을뿐더러, 너무 많은 코드가 수정되어 기존 서비스와 동일한 동작을 하는지 검증하기 어려워진다. 특히나 테스트 코드가 만들어지지 않은 경우에는 수동으로 검증해 줘야 하고, 그러면서 실수가 나올 확률이 높기 때문이다. 그래서 Lint 같은 경우에는 오히려 점진적으로 수정하는 것을 권하고 싶다.
<template>
<div>
4space 참을 수 없어요!
</div>
</template>그래서 뭘 고칠까?
코드를 정리하려면, 우선은 길어진 코드 길이를 줄여 가독성을 높여야 한다. 그래서 반복되는 부분을 줄이면서 정리하는 과정이 필요하다. 하지만 무방비한 수정은 기존 동작의 오류를 야기하기 때문에, 안정성 있는 수정을 해야 한다. 위에서 린트 수정을 추천하지 않았던 이유도 그렇다.
지난 글에서 가장 흔하게 반복되는 중복을 줄이는 방법을 알려준다고 했는데, 사실은 약간의 흥미 유발을 위한 어그로였다. (주제가 기대에 못 미치더라도 양해 부탁드립니다 (•‿• )) 개인적으로 Frontend를 작업에서 가장 많이 반복되는 부분이라 생각하고, 사실상 중복의 문제가 없으면 사실상 Best 케이스다. 바로 API 호출이다.
대부분의 Frontend 작업은 화면의 형태를 만들고, API 통신을 통해 받아온 데이터를 가공해서 요구 사항대로 화면을 구성한다. (참고: 캡틴판교님의 프론트엔드 개발자에게 필요한 역량) 그래서 컴포넌트당 1회 이상의 API 호출이 들어가는 경우가 많고, 컴포넌트가 쪼개지지 않은 경우에는 한 파일 안에 여러 번의 API 호출이 들어가는 경우들도 있다. 대부분 통신과정과 에러 처리에 반복된 패턴을 가지고 있는데, 그 부분을 interface로 만드는 것이 첫 번째 제안이다.
API call interface 만들기
Server API interface는 만들 경우 아래와 같은 장점이 생긴다.
- 안정성 있고 동일한 API 호출 환경을 제공한다
- 통일성 있는 에러 처리가 가능하다.
- method 구분이 쉬워진다. (api url 관리도..)
- (동일한) API 호출 작업에 쓰는 비용이 줄어든다.
- API 호출과 관련한 코드 라인수가 줄어든다.
그리고 API를 호출하는 코드가 잘못 구성된 경우(ex: 예외 처리 미비)에 대한 교정 효과도 있을 수 있다.
API 통신은 주로 axios라는 라이브러리를 사용하며, 대략 아래와 같은 방식으로 호출을 한다. (axios의 자세한 사용법은 검색해보면 많이 나온다.)
axios({
method: [method],
url: [url],
data: {}
}).then(response => {
if (response.status === 'ok') {
console.log('response를 처리합니다.)
}
}.catch(Error => {
console.log(error)
};API interface를 만들지 않았을 때는 아래와 같은 패턴을 계속 반복하며 호출을 하지만, interface를 만들면 변경되는 최소한의 정보만으로 API 호출할 수 있어서 훨씬 효율적이다. 이제 어떻게 API interface를 만들면 되는지 소개를 할 예정이다. API 분량에 따라, 약간의 노가다를 할 수 있다는 점과 swagger UI 등의 API 문서에 대한 준비가 필요하다.
우리가 구성할 파일들은 다음과 같다.
- api url이 있는 config 파일
- axios를 관리할 service.js
- api url 리스트 (api.js와 하나의 파일로 관리해도 무관)
- api list를 관리할 api.js
코드 구성에 대한 자세한 내용은 글이 길어질 것 같아, 다음 회차로 넘긴다. 업데이트는 최대한 빠르게 할 예정이다.
