개발나라 스용공주

[생활코딩] JavaScript 왕기초 7장 - Visual Studio Code / 리팩토링(refactoring) - 중복 제거 본문

WEB/JavaScript

[생활코딩] JavaScript 왕기초 7장 - Visual Studio Code / 리팩토링(refactoring) - 중복 제거

스용공주 2024. 8. 26. 18:00
728x90
728x90

이번 글은 아래 강의를 바탕으로 작성되었습니다.

(생활코딩)

https://www.youtube.com/watch?v=vwRkFRke7ls&list=PLuHgQVnccGMBB348PWRN0fREzYcYgFybf&index=18

 

 

 

 

 

[ 리팩토링이란? ]

리팩토링(refactoring)은 결과의 변경 없이 코드의 구조를 재조정하여 중복된 코드의 중복을 최소화하고 불필요한 부분들을 생략해주는 것이다.

이로 인해, 우리는 더 깔끔한 코드를 만들어 낼 수 있다.

 

 

 

 

[ 리팩토링 실습 1 - this ]

아래 코드를 보면 document.querySelector('#night_day') 이 부분이 계속 반복되는 것을 알 수 있다.

하지만 document.querySelector('#night_day') 부분의 경우 해당 코드가 있는 <input> 태그 자기 자신을 id를 통해 지칭하고 있는 것을 확인할 수 있다.

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
    </style>
</head>
<body>
    <input id="night_day" type = "button" value = "night" onclick="
    if(document.querySelector('#night_day').value === 'night') {
    document.querySelector('body').style.backgroundColor = 'black';
    document.querySelector('body').style.color = 'white';
    document.querySelector('#night_day').value = 'day';
    }
    else {
    document.querySelector('body').style.backgroundColor = 'white';
    document.querySelector('body').style.color = 'black';
    document.querySelector('#night_day').value = 'night';
    }
    ">
    안녕하세요
</body>
</html>

 

 

따라서 이것을 this를 통해 해당 코드가 속해있는 태그를 지칭해줄 수있다.

아래 코드를 보면 위의 코드와 달리 id가 생략되어져 있고 this를 통해 id태그로 지칭하던 해당 <input>태그 자체를 지칭하고 있는 것을 확인할 수 있다.

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
    </style>
</head>
<body>
    <input type = "button" value = "night" onclick="
    if(this.value === 'night') {
    document.querySelector('body').style.backgroundColor = 'black';
    document.querySelector('body').style.color = 'white';
    this.value = 'day';
    }
    else {
    document.querySelector('body').style.backgroundColor = 'white';
    document.querySelector('body').style.color = 'black';
    this.value = 'night';
    }
    ">
    안녕하세요
</body>
</html>

 

 

 

 

[ 리팩토링 실습 2 - 변수 사용 ]

아래 코드를 보면 document.querySelector('body') 이 부분이 계속 반복적으로 사용되는 것을 확인할 수 있다.

document.querySelector('body')의 경우 위에서 this를 사용한 것과 달리 해당 태그 안을 가리키고 있는 것이 아니라 해당 태그가 존재하는 가장 큰 범위인 body태그를 지칭하고 있기 때문에 this로 지칭하는 것이 불가능하다.

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
    </style>
</head>
<body>
    <input type = "button" value = "night" onclick="
    if(this.value === 'night') {
    document.querySelector('body').style.backgroundColor = 'black';
    document.querySelector('body').style.color = 'white';
    this.value = 'day';
    }
    else {
    document.querySelector('body').style.backgroundColor = 'white';
    document.querySelector('body').style.color = 'black';
    this.value = 'night';
    }
    ">
    안녕하세요
</body>
</html>

 

 

따라서 document.querySelector('body')가 사용되고 있는 부분을 변수에 저장하여 해당 변수를 사용해주는 방법을 사용할 것이다.

아래 코드를 보면 document.querySelector('body')를 target이라는 변수를 만들어 해당 변수에 저장한 뒤 해당 변수 target으로 모든 document.querySelector('body')를 대체한 것을 확인할 수 있다.

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
    </style>
</head>
<body>
    <input type = "button" value = "night" onclick="
    var target = document.querySelector('body')
    if(this.value === 'night') {
    target.style.backgroundColor = 'black';
    target.style.color = 'white';
    this.value = 'day';
    }
    else {
    target.style.backgroundColor = 'white';
    target.style.color = 'black';
    this.value = 'night';
    }
    ">
    안녕하세요
</body>
</html>

 

 

그리고 실행해보면 코드는 간결해졌지만 결과 값은 모두 동일한 것을 알 수 있다.

 

 

 

[ 요약 정리 ]

  • this : 내가 지금 작성하고 있는 코드가 있는 태그 안에서 코드를 작성할 때 그 태그를 지칭할 때 사용하는 것.
  • 변수 : 중복되는 코드가 있다면 변수로 그 코드를 저장하여 해당 변수를 통해 해당 코드를 간결하게 줄일 수 있다.

 

728x90
728x90

'WEB > JavaScript' 카테고리의 다른 글

[생활코딩] JavaScript 왕기초 9장 - Visual Studio Code / 반복문(loop)과 배열(array) 실습 2 - 동일한 태그를 활용한 반복문  (0) 2024.08.29
[생활코딩] JavaScript 왕기초 8장 - Visual Studio Code / 반복문(loop)과 배열(array)  (0) 2024.08.29
[생활코딩] JavaScript 왕기초 6장 - Visual Studio Code / 조건문 실습  (0) 2024.08.23
[생활코딩] JavaScript 왕기초 5장 - Visual Studio Code / 조건문  (0) 2024.08.22
[생활코딩] JavaScript 왕기초 4장 - Visual Studio Code / 비교연산자와 불리언(Boolean)  (0) 2024.08.22
'WEB/JavaScript' Related Articles more
Comments