자바스크립트(javaScript)_리팩토링(Refactoring)단계 정리

 

[⚙️Refactoring ]

 

- 모듈화(module), 즉 리팩토링(Refactoring)과정을 단계별로 정리해 보았다.

- 리팩토링의 장점 : 코드의 의미를 파악하기 쉽고 코드의 관리가 용이하며 가독성과 재사용성 등등을 개선시킬 수 있다. 

 

 

Refactoring 과정 

1. 🛠️모듈화(Export, Import) : 파일을 작은 단위로 나누어 생성하고 모듈화 하고 객체지향적으로 코딩한다. Export, Import하여 외부로 노출시키고 가져와서 활용한다.

• 모듈화의 장점 : 하나의 파일에 많은 코드를 작성하면 코드의 의미 파악, 관리, 재사용성이 떨어진다. 각각의 기능별로 파일을 분리하여 모듈화시키면 코드를 효율적으로 관리할 수 있으며 재사용성도 높아진다.

 

• ex) HTML에서 큰 섹션 단위인 game과 popup섹션의 기능을 나누어 js파일 생성하고, 그 안에서 다시 작은 단위로 모듈화하여 객체지향적(Class)으로 함수를 활용한다.

 

2. 🧩객제지향(Class) : 객체(Class)를 생성하여 함수들을 기능별로 나누어 사용한다.

• 객체지향(Class)의 장점 : 단일성, 고립성, 독립성, 테스트성, 재사용성 등등

 

• ex) game, popup, field 등 기능별로 파일로 나누고 각각의 객체(Class)를 생성한다. main.js에서 사용했던 함수들을 각자 파일의 기능에 맞게 나누어 객체(Class)안에서 멤버변수와 함수로 사용한다.

 

3. 🔗빌더 패턴(Builder pattern) : 빌더 패턴을 이용하면 Object를 간단 명료하게, 가독성 좋게 만들 수 있다.

• 빌더 패턴의 장점 : Object 생성 시 생성자에게 3개 이상의 인자를 전달할 경우, 어떤 위치에 어떤 타입의 값을 전달하는지 명확하게 제시할 수 있고 가독성도 좋다.

 

• ex) GameBuilder Class를 생성하여 Export하고, GameBuilder가 Game Class를 리턴하여 GameBuilder를 통해 Game에 생성자를 전달하고, 접근할 수 있도록 하는 방식이다.

 

4. ❄️객체 동결(Object.freeze()) : 문자열 인자를 전달할 때 문자열을 Object의 속성으로 동결(수정, 삭제, 변경 불가)시킨다.

• 오브젝트의 속성값으로 접근할 수 있도록 하여 사용자의 실수나 오타의 가능성을 줄이고, 추후 값이 변경되는 것을 막을 수 있다.

 

• ex) Reason Object를 생성하여 속성값으로서 'cancel', 'win', 'lose' 등을 인자로 전달하여 오타의 가능성을 줄인다.

 

5. 🧹함수를 깨끗하게(Clean) : 중복코드를 줄이고 재사용성을 높인다.

• main.js를 최소화 시켜 가독성이 좋고 코드의 의도를 파악하기 쉽게 정리한다.

 

• ex) stop()과 finish()의 중복되는 기능을 정리하여 하나의 함수로 통일시킨다.