코드 리팩토링이란 - kodeu lipaegtoling-ilan

Question

리팩토링(refactoring)

목차 Show

리팩토링(refactoring)
this 키워드 사용
중복 제거
Code Refactoring 이란?

코딩을 하고나면 코드에 비효율적인 면이 생기기 마련이다.

코드 자체를 효율적으로 만들어서

그 코드의 가독성을 높이고, 유지보수를 편리하게 만들고, 중복된 코드를 줄이는 방향으로 코드를 개선하는 작업을

리팩토링이라고 합니다.

소프트웨어의 규모가 커지고 복잡해지면 틈틈이 리팩토링 해야 좋은 프로그램을 만들 수 있다.

사례

조건문을 이용하여 토글 기능이 있는 버튼을 구현하는 코드이다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>자바스크립트</h1>
    <h2>조건문</h2>

    <input type="button" id="night_day" 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';
        }
    ">

    <p>코딩하는 코린이</p>

    

</body>
</html>

this 키워드 사용

onclick과 같은 이벤트 안에서 실행되는 코드에서는 현재 코드가 속해 있는 태그를 가리키도록

약속돼 있는 특수한 키워드를 사용한다. 바로 this 키워드 이다.

<input type="button" id="night_day" 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';

document.querySelector('#night_day').value= 'day';

여기서 doucment.querySelector('#night_day')는 자기 자신을 가리킨다.

따라서 이 코드 대신 this로 바꾸면 된다.

 <input type="button" id="night_day" 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';
        }
    ">

 this.value= 'day';

코드가 훨씬 간결해졌다.

중복 제거

위에 코드를 보면

 document.querySelector('body')

부분이 중복 해서 등장하고 있다.

중복된 코드를 간결하게 하여 유지보수 하기 편하게 만들어보자

<body> 태그를 변수 target에 할당

var target = document.querySelector('body');

<input type="button" id="night_day" 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';
        }
    ">

코드가 간결해졌다.!!

게시글 관리

구독하기coding develop

'JavaScript' 카테고리의 다른 글

JavaScript 함수 (function) (0)2020.12.06조건문 활용- 토글(toggle) (0)2020.12.06JS의 이벤트 (0)2020.12.06script 태그 (0)2020.12.06JavaScript 란? (0)2020.12.06

Code Refactoring 이란?

코드 리팩토링 단어 그자체로 유추 할 수 있다. 코드를 개선하는 작업을 코드 리팩토링이라고 한다. 즉, 기존에 어떠한 코

드를 조금 더 좋은 코드로 개선하는 작업을 의미한다.

직관적인 예시 하나가 뭐가 있을까?

(1) - > (2) - > (3) 순으로 효율적 관리를 위한 작업

(1) : 각 클래스 타입을 입력하여 일일이

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

Dog d = new Dog("강아지", 1);

System.out.println(d.toStr());

Cat c = new Cat("고양이", 2);

System.out.println(c.toStr());

Bird b = new Bird("새", 3);

System.out.println(b.toStr());

class Dog{

...

}

class Cat{

...

}

class Bird{

...

}

cs

(2) 업캐스팅을 통해 배열로 관리(관리의 효율성)

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

Animal d = new Dog("강아지", 1);

Animal c = new Cat("고양이", 2);

Animal b = new Bird("새", 3);

Animal[] arr = {b,c,d};

for(int i=0; i<arr.length; i++){

System.out.println(arr[i].toStr());

}

class Animal{

...

}

class Dog extends Animal{

...

}

class Cat extends Animal{

...

}

class Bird extends Animal{

...

}

cs

(3) 리스트 라이브러리인 ArrayList를 통한 관리

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

import java.util.ArrayList

Animal d = new Dog("강아지", 1);

Animal c = new Cat("고양이", 2);

Animal b = new Bird("새", 3);

ArrayList<Animal> list = new ArrayList<Animal>();

list.add(d);

list.add(c);

list.add(b);

for(int i=0; i<list.size(); i++){

System.out.println(list.get(i).toStr());

}

class Animal{

...

}

class Dog extends Animal{

...

}

class Cat extends Animal{

...

}

class Bird extends Animal{

...

}

cs

게시글 관리

구독하기코딩LevelUp

저작자표시 비영리 변경금지

'* IT > Dictionary' 카테고리의 다른 글

BIOS란? (0)2021.02.25동기(Synchronous)와 비동기(Asynchronous) 방식의 차이점 (0)2021.01.02큰 그림과 단계별로 이해하는 API, Rest(ful) API, SDK 개념 (0)2020.12.25[큰 그림 이해하기] 쿠키(Cookie), 캐시(Cache), 세션(Session) 개념 (0)2020.12.23[한번에 이해하는 개념] JSON 이란? (0)2020.10.23