[JS] 대체 리펙토링이 뭔가? ajax로 리펙토링 쉽게 이해하기.

리펙토링이 뭘까요?

리팩터링(refactoring)은 소프트웨어 공학에서 '결과의 변경 없이 코드의 구조를 재조정함'을 뜻한다.
1. 주로 가독성을 높이고 유지보수를 편하게 한다.
2. 버그를 없애거나 새로운 기능을 추가하는 행위는 아니다.
3. 사용자가 보는 외부 화면은 그대로 두면서 내부 논리나 구조를 개선하는 유지보수 행위이다.

리팩터링의 잠재적인 목표는 소프트웨어의 설계, 구조 및 구현을 개선하는 동시에 소프트웨어의 기능을 보존하는 것이다. 리펙터링은 코드의 가독성을 향상시키고 복잡성을 감소시키는 효과를 가지며, 이러한 이점은 소스 코드의 유지 보수성을 개선하고 확장성을 개선하기 위해 더 단순하고, 깔끔하거나, 표현력이 뛰어난 내부 아키텍처 또는 객체 모델을 만들 수 있게 한다. 그리고 소프트웨어 엔지니어는 더 빠르게 수행되거나 더 적은 메모리를 사용하는 프로그램을 작성해야 하는 지속적인 과제에 직면해 있기에 성능 향상이 리팩터링의 또다른 목표가 된다.

구글에서 검색하면 제일 먼저 나오는 내용입니다.

 

뭔가 어려운 내용같기도 하지만 쉽게 이야기하면 코드를 정리해서

 

코드를
보기 편하게,
관리하기 편하게,
추가개발이 편하게

 

결국 '편하게' 관리하기 위한 것이라고 생각하면 되지 않을까 싶습니다.

 

복잡하고 반복되는 중복 코드

사용하는 측면이 정말 무수히 많은데 쉽게 이해하기 위해서 예제를 통해 이해를 하면 좋을거 같아요!

ajax로 이해하기

ajax.open('GET', url, false);
ajax.send();

return JSON.parse(ajax.response);

위와 같은 코드가 있습니다. 이걸 리펙토링하여 함수(메소드)로 만들어서 사용하지 않는다면 아래와 같이 사용하겠죠?

ajax.open('GET', 뉴스피드데이터, false);
ajax.send();

var newsFeed = JSON.parse(ajax.response);

ajax.open('GET', 뉴스코멘트데이터, false);
ajax.send();

var newsComment = JSON.parse(ajax.response);

ajax.open('GET', 뉴스이미지데이터, false);
ajax.send();

var newsImage = JSON.parse(ajax.response);

 

데이터를 불러올 때마다 중복된 코드를 반복해서 사용해야합니다.

 

이런 데이터를 아래와 같이 하나의 '함수'로 넣어서 사용하면 보다 간편하게 사용하고 직관성 또한 좋으니 우리 모두 해피하지 않을까요? 

//json 객체 데이터 불러오기
var newsFeedJson = 뉴스피드데이터;
var newsCommentJson = 뉴스코멘트데이터;
var newsImageJson = 뉴스이미지데이터;

//ajax 불러오는 데이터 리펙토링(함수화)
function getDate(url){
    ajax.open('GET', url, false);
    ajax.send();

    return JSON.parse(ajax.response);
}

//함수로 정의한 데이터 불러오는 부분 사용하기
var newsFeed = getDate(뉴스피드데이터);
var newsComment = getDate(뉴스코멘트데이터);
var newsImage = getDate(뉴스이미지데이터);

이렇게 반복되는 코드를 함수화를 통해서 리펙토링을 해볼 수 있습니다.

 

HTML와 JS의 리펙토링은 대표적으로 데이터 리펙토링과 코드 리펙토링으로 나뉠 수 있죠.

 

JS 리펙토링은 앞서 함께 봤는데 그러면 데이터 리펙토링은 무엇일까요?

 

데이터 리펙토링은 중복된 코드의 반복을 for문이나 while문과 같은 반복문을 사용해서 코드의 반복을 감싸주는 것이에요!

아래 예제와 같이 li문을 10회 반복시켜줄 수 있습니다!

for(let i = 0; i<10; i++){
    const div = document.createElement('div');

    div.innerHTML = `
        <li>
            <a href="#${newsFeed[i].id}">${newsFeed[i].title.rendered}</a>
        </li>
    `

    ul.appendChild(div.firstElementChild);
}

 

작업하시다가 궁금하신 부분이 있으시면 댓글주세요~~

댓글보고 해결법 있으시면 대댓글 달아주시면 우리의 집단지성은 조금씩 만들어지게 됩니다!

 

감사합니다~~