[javascript refactoring] 자바스크립트 리팩토링(최적화) 방법 및 예시 - 개선 원리 및 설명 포함

 

자바스크립트 리팩토링은 선택이 아니라 필수이다.

 

 

글을 시작하기 전, '자바스크립트 리팩토링(최적화)를 왜 해야 하는가?' 에 대한 물음에 답하자면,

• 가독성 향상 – 코드를 더 이해하기 쉽게 만들어 유지보수를 용이하게 한다.
• 재사용성 증가 – 중복 코드를 줄이고 모듈화를 통해 재사용성을 높인다.
• 성능 개선 – 불필요한 연산을 줄여 코드 실행 속도를 향상시킨다.
• 버그 예방 – 코드 구조를 명확하게 하여 오류 발생 가능성을 낮춘다.
• 확장성 확보 – 변경 및 추가 기능 구현이 쉽도록 유연한 코드 구조를 만든다.

 

여러모로 리팩토링을 하는 게 좋아 보인다.

단, 리팩토링을 한다고 코드가 짧아지는 게 아니라, 길어질 수도 있다.

 

 

1. 반복문 최적화

변경 전:

javascript

let loopList = '';
for (let i = 0; i < 5; i++) {
    loopList += `<li>${i}</li>`;
}
document.getElementById('loopOutput').innerHTML = loopList;

 

 

변경 후:

javascript

 

const loopOutput = document.getElementById('loopOutput');
loopOutput.innerHTML = Array.from({ length: 5 }, (_, i) => `<li>${i}</li>`).join('');

 

이유:

• Array.from()을 사용하여 배열을 생성하면서 map()을 활용해 리스트를 한 번에 만들 수 있음.
• join('')을 사용해 문자열을 결합해 innerHTML에 바로 넣음.
• 코드 길이를 줄이고 가독성을 높임.

 

개선된 원리

• Array.from({ length: 5 }) → 길이가 5인 배열 생성.
• (_, i) => <li>${i}</li>→ i 값을<li>` 요소로 변환.
• .join('') → 배열을 하나의 문자열로 합쳐서 innerHTML에 삽입.

왜 좋은가?

✅ 코드가 더 간결하고 직관적임.
✅ for 문을 줄이고 함수형 스타일을 적용하여 유지보수 쉬워짐.
✅ innerHTML을 한 번만 업데이트하여 성능 최적화됨.

---

 

 

2. 이벤트 핸들러 최적화

변경 전:

javascript

<button onclick="showMessage1()">클릭하세요</button>

function showMessage1() {
    document.getElementById('message1').innerText = '버튼이 클릭되었습니다!';
}

 

변경 후:

javascript

 

document.getElementById('message1').textContent = ''; // 초기화
document.querySelector('button[onclick="showMessage1()"]')?.addEventListener('click', () => {
    document.getElementById('message1').textContent = '버튼이 클릭되었습니다!';
});

이유:

• onclick 속성을 제거하고 addEventListener 사용 → HTML과 JavaScript 분리.
• ?.(optional chaining) 사용 → 버튼이 없을 경우 오류 방지.

 

개선된 원리

• onclick 속성을 직접 HTML에서 제거하고, addEventListener로 이벤트 리스너 추가.
• ?.(optional chaining) 사용 → 버튼이 없을 경우 에러 방지.
• textContent 사용 → innerText보다 성능이 좋고 보안에 더 안전함.

왜 좋은가?

✅ onclick을 HTML에서 제거하여 자바스크립트와 분리 (클린 코드).
✅ addEventListener를 사용하면 같은 이벤트에 여러 개의 핸들러를 추가할 수 있음.
✅ 유지보수 시 버튼 ID를 변경해도 이벤트가 유지됨.

---

 

 

3. 비동기 처리 개선 (async/await 적용)

변경 전:

javascript

 

fetch('https://jsonplaceholder.typicode.com/todos/1')
  .then(response => response.json())
  .then(data => console.log(data));

변경 후:

javascript

 

const fetchData = async () => {
    try {
        const response = await fetch('https://jsonplaceholder.typicode.com/todos/1');
        const data = await response.json();
        console.log(data);
    } catch (error) {
        console.error('데이터 불러오기 오류:', error);
    }
};
fetchData();

이유:

• async/await를 사용하여 가독성을 높이고 try/catch로 오류 처리 추가.

 

개선된 원리

• fetch() → 네트워크 요청을 보냄.
• await response.json() → 응답을 JSON으로 변환.
• try-catch 추가 → 네트워크 오류 시 예외 처리 가능.

왜 좋은가?

✅ then 체인을 제거하여 가독성이 높아짐.
✅ try-catch로 에러 처리하여 안정성 향상.
✅ await 사용으로 코드가 동기식처럼 읽히므로 이해하기 쉬움.

---

 

4. 로컬 스토리지 활용 개선

변경 전:

javascript

 

localStorage.setItem("test", "가나디");
console.log(localStorage.getItem("test"));
localStorage.removeItem("username");

변경 후:

javascript

 

const storage = {
    set: (key, value) => localStorage.setItem(key, JSON.stringify(value)),
    get: (key) => JSON.parse(localStorage.getItem(key)),
    remove: (key) => localStorage.removeItem(key),
};

storage.set('test', '가나디');
console.log(storage.get('test'));
storage.remove('username');

이유:

• 로컬 스토리지를 storage 객체로 감싸서 일관성 있게 관리 가능.
• JSON.stringify()와 JSON.parse()를 사용해 다양한 데이터 타입을 저장 가능.

 

개선된 원리

• set(key, value) → JSON.stringify()로 데이터를 문자열로 변환하여 저장.
• get(key) → JSON.parse()로 문자열을 객체로 변환하여 가져옴.
• remove(key) → 특정 키를 삭제하는 메서드 제공.

왜 좋은가?

✅ JSON 변환을 자동으로 수행하여 객체도 저장 가능.
✅ 일관된 API로 관리하여 사용이 편리해짐.
✅ 코드의 가독성이 좋아지고 유지보수가 쉬워짐.

---