확장성 있는 코드 짜기

9 Tips for Writing Scalable JavaScript Code

https://gmlwjd9405.github.io/2018/07/06/design-pattern.html

[Design Pattern] 디자인 패턴 종류 - Heee's Development Blog

9 Tips for Writing Scalable JavaScript Code

• 확장성 있는 코드: 기존 로직에 새로운 값들이 추가, 삭제 되어도 내부적으로 변경이 적은 코드. 로직의 변경이 아니라 사용되는 값들의 변경을 좀 더 유연하게 대처하기 위한 목적의 코드
• 확장성 없는 코드: 값이 변경될 때마다 컴포넌트의 값을 바꿔줘야 하는 구조

---

JS에서 확장성 있는 코드를 짜는 팁

• 확장성 있는 코드를 짜고 싶다면 디자인 패턴을 정해본다. 디자인 패턴은 코딩에서 공통의 문제를 풀 수 있는 하나의 템플릿이다. 확장성을 고려한다면 가장 먼저 정해야 하는 것이 디자인패턴이다.
• 하나의 함수는 하나의 Mission이 주어져야 한다.
• 모듈을 이용한다. 모듈이란, 관련있는 코드들만을 그룹화하는 하나의 공간이다. 예를 들어, 인증을 처리하는 모든 함수는 별도의 모듈에 배치되어야 한다.

function validate(username, password){
}
function login(username,password){
}
function logout(){
}
module.exports={
validate,
login,
logout
}

 

• 만약 내가 어딘가에서 이 기능을 사용하고 싶다면?

const{ validate,login, logout }=require('./AuthorizationModule')
	validate('yu',1234);
	login('yu',1234);
	logout();

 

• 코드 파일은 500줄 정도의 라인이 있는 것이 좋다. 그 이상으로 많아지면 새로운 파일로 분리하는 것이 좋다.
• 콜백 대신 async/await를 사용하는 것이 좋다. async/await는 비동기 코드를 동기적으로 작성할 수 있는 기능을 제공한다. 그렇기 때문에 async/await를 이용하면 코드의 가독성을 높일 수 있다.

 

• Destructuring을 사용한다. ( ES6 )

let person={
name:'yu',
age: 24,
job: 'Programmer'
};
let { name, age, job } = person;
console.log(name,age,job); 

• 이렇게 Destructuring을 사용하면 코드의 가독성이 올라간다. this.person.name과 같은 코드를 더 이상 사용하지 않아도 괜찮다.

 

• 함수는 아래와 같이 직관적으로 함수의 무엇을 전달해야 하는지 알 수 있게 만드는 것이 좋다.

function showProduct(name,price,description){
console.log(name,price,description);
}

• 비즈니스 로직에 대한 이해없이 확장성을 고려한 코드는 불가능

---

디자인 패턴

• 소프트웨어를 설계할 때 특정 맥락에서 자주 발생하는 고질적인 문제들이 또 발생했을 때 재사용 할 수 있는 훌륭한 해결책이다.

생성 패턴(Creational Pattern)

• 객체 생성에 관련된 패턴
• 객체의 생성과 조합을 캡슐화해 특정 객체가 생성되거나 변경되어도 프로그램 구조에 영향을 크게 받지 않도록 유연성을 제공

구조 패턴(Structural Pattern)

• 클래스나 객체를 조합해 더 큰 구조를 만드는 패턴
• 서로 다른 인터페이스를 지닌 2개의 객체를 묶어 단일 인터페이스를 제공하거나 객체들을 서로 묶어 새로운 기능을 제공한다.

행위 패턴(Behavioral Pattern)

• 객체나 클래스 사이의 알고리즘이나 책임 분배에 관련된 패턴
• 한 객체가 혼자 수행할 수 없는 작업을 여러 개의 객체로 어떻게 분배하는지와 객체 사이의 결합도를 최소화하는 것에 중점을 둔다.