기존 코드 리팩토링 (feat: 추상화)

회사에서 기존 코드를 가져다 써야하는 일이 발생했는데 내가 올린 커밋에 개선점이 필요한 코드를 그대로 올리고 싶지 않았다. 팀장님께 여쭤보고 리팩토링 시간을 확보해서 작업을 하였다. 아래 내용은 어떻게/왜 리팩토링 했는지에 대한 작업 내용입니다.

리팩토링 목적

1. 추상화 레벨을 높여서 코드를 일일히 확인하는게 아니라 함수/변수명만 읽어서 기능동작을 이해하기 위함
2. 기존 데이터 매핑시 순차탐색으로 찾던 (O(n)) 처리를 인덱스 연산으로 (O(1)) 성능개선
3. 파일의 분리 및 관리 - co-locate
4. 불필요한 코드 제거

핵심 요약

회사의 confluence에는 목적 4가지에 대해 어떻게 풀어나갔는지 모두 적혀있으나 여기에는 성능개선만 적었습니다.
회사의 코드는 첨부 할 수 없어 성능을 어떻게 개선했는지를 증명을 위해 군더더기를 제거한 핵심적인 부분만 가상으로 작성하였습니다.

핵심은 텍스트 한 줄을 띄우기 위해 기준이 되는 배열전체 순차탐색하며 하고 잇는 연산을 객체의 인덱스 연산으로 O(1)에 매핑했다는 이야기입니다.

//예제 코드 작성 리팩토링 전
const workType = [
    {id: 'APPLE', name: '사과', title: '123kjhdfasjk'},
    {id: 'KIWI', name: '키위', title: '123dsafasdf'},
    {id: 'ORIENTAL_MELON', name: '참외', title: 'asdfasdfasdf'},
    {id: 'PEACH', name: '복숭아', title: 'sdfsadfsdfsdf'},
    {id: 'STRAWBERRY', name: '딸기', title: 'fsdgsdgsdag'},
    {id: 'PRUNE', name: '자두', title: 'gsdgasdf'},
    {id: 'CHERRY', name: '앵두', title: 'sdfasdfasdf'},
    {id: 'WATER_MELON', name: '수박', title: 'asdfsadf'},
    {id: 'GRAPE', name: '포도', title: 'sdgfsdgdsg'},
    {id: 'PEAR', name: '배', title: 'gsdgsdg'},
    {id: 'AVOCADO', name: '아보카도', title: 'sdgsdgsdgsadgsd'},
    {id: 'BLUEBERRY', name: '블루베리', title: 'sadfsadljkqwejih'},
]; // 실무에서 해당 배열은 이것의 10배 이상 길이였습니다.

function getType(key) {
    //서버에서 내려온 키값을 토대로 이렇게 순차 탐색하고 있었습니다.
    const _type = workType.find(type => type.id === key);
    return _type;
}

const temp = getType('BLUEBERRY');
console.log(temp);
한 페이지에 해당 정보가 100줄도 표기되는 상황인데 그러면 최악의 경우 
한 고객의 정보를 표기하기 위해 6100번까지도 연산할 수 있는 상황이였습니다. 

//리팩토링 후 
const workType = {
    APPLE: {name: '사과', title: '3kj123hdfasjk'},
    KIWI: {name: '키위', title: '13kjhdfasjk'},
    ORIENTAL_MELON: {name: '참외', title: 'kjhdf!@#asjk'},
    PEACH: {name: '복숭아', title: 'ASDCI812'},
    STRAWBERRY: {name: '딸기', title: 'SD8981B'},
    PRUNE: {name: '자두', title: 'DSAFJLHDS8'},
    CHERRY: {name: '앵두', title: 'ADSLIKFHLSD'},
    WATER_MELON: {name: '수박', title: 'SD93N'},
    GRAPE: {name: '포도', title: 'S8JB1'},
    PEAR: {name: '배', title: 'DS89Y23B'},
    AVOCADO: {name: '아보카도', title: 'DS82B'},
    BLUEBERRY: {name: '블루베리', title: '12OI3KLDS'},
};

function getType(key) {
    return workType[key];
}

const _type = getType('BLUEBERRY');
console.log(_type);

매핑된 데이터를 모아놓은 객체를 상기 이미지처럼 만들면 키 값으로 바로 인덱스 연산 가능합니다.

실무에서는 훨씬 복잡하게 얽혀있지만 핵심만 표기하면 위와 같습니다.