클린코드
[JavaScript] 클린 코드 - 6. SOLID
S.O.L.I.D 객체지향 5대 원칙의 약자를 딴 것이다. Single Responsibility Principle Open Close Principle Liskov Substitution Principle Interface Seggregation Principle Dependency Inversion Principle 1. 단일 책임 원칙 (Single Responsibility Principle, SRP) 하나의 객체는 하나의 책임을 가진다. 클래스를 수정할 때 수정할 이유가 2개 이상 있으면 안 된다. 이는 하나의 클래스가 많은 기능을 가진 거나 다름없기 때문이다. 이러면 수정할 때 다른 모듈들에 어떤 영향을 끼치는지 이해하기 어려워진다. // BAD - change, verify 2개의 기능 가짐..
[JavaScript] 클린 코드 - 5. 클래스
1. 함수보단 클래스를 사용한다. 함수로 상속을 구현하기는 어렵다. 상속이 필요하다면 클래스를 사용하는 것이 좋다. // BAD const Animal = function (age) { if (!(this instanceof Animal)) { throw new Error("Instantiate Animal with `new`"); } this.age = age; }; Animal.prototype.move = function () {}; const Mammal = function (age, furColor) { if (!(this instanceof Mammal)) { throw new Error("Instantiate Mammal with `new`"); } Animal.call(this, age);..
[JavaScript] 클린 코드 - 4. 객체와 자료구조
1. getter와 setter를 사용한다. JavaScript는 public, private 키워드나 인터페이스 문법이 존재하지 않는다. (TypeScript에선 모두 제공하고 있다. 굿굿) 그래서 중요한 내용을 내부 인터페이스로 따로 분리하여 관리하는 것이 어렵다. 대신 getter와 setter를 사용하는 것을 추천한다. 다음과 같은 장점을 가질 수 있다. 단순히 속성을 얻는 것 이상의 행동을 쉽게 구현할 수 있다. 만약 검증 로직이 필요하다면 간단하게 추가할 수 있다. 내부용 API를 캡슐화 시킬 수 있다. getting, setting 로그를 관리하거나 에러 처리를 쉽게 할 수 있다. 서버에서 객체 속성을 받아올 때 lazy load 할 수 있다. lazy load - 페이지를 읽는 시점에서 중..
[JavaScript] 클린 코드 - 3. 함수 (2)
1. 함수형 프로그래밍을 지향한다. (여기선 간단히만 다룸. 중요한 패러다임이니 따로 공부할 예정) 함수형 프로그래밍이란 함수를 기반으로 하는 프로그래밍이다. 이러한 함수형 프로그래밍에선 순수 함수를 사용해야 한다. 순수 함수 같은 입력이 주어지면 항상 같은 값을 반환해야 한다. 부작용(Side effect)이 없어야 한다. = 함수의 실행이 프로그램의 실행에 영향을 미치지 않아야 한다. ex 함수 내부에서 인자의 값을 변경하거나 프로그램 상태를 변경하는 행위 프로그램에 변화를 주지 않고, 입력에 대한 결과를 예측할 수 있어서 테스트가 쉬워진다. 또한 함수형 프로그래밍은 데이터를 변경하지 않고 기존 데이터의 복사본을 다뤄야 한다. 복사본을 만들기 위한 JavaScript의 대표적인 순수 함수는 map, ..
[JavaScript] 클린 코드 - 2. 함수 (1)
1. 함수 인자는 2개 이하가 이상적이다. 매개변수의 개수가 적다는 것은 테스트할 경우의 수가 줄어든다는 것을 의미한다. 1~2개가 이상적이다. 인자가 2개가 넘으면 그 함수는 너무 많은 역할을 하고 있는 중이다. 참고) ES6의 비구조화(destructuring) 문법을 사용한다면 함수의 속성을 명확하게 보여줄 수 있다. // BAD function createMenu(title, body, buttonText, cancellable) { // ... } // GOOD! - 비구조화(destructuring) function createMenu({ title, body, buttonText, cancellable }) { // ... } createMenu({ title: "Foo", body: "Ba..
[JavaScript] 클린 코드 - 1. 변수명 짓는 방법
1. 의미 있고 발음하기 쉬운 변수명을 사용한다. const yyyymmdstr = moment().format('YYYY/MM/DD'); // BAD const currentDate = moment().format('YYYY/MM/DD'); // GOOD! 2. 같은 의미의 변수를 여러 개 만들지 않는다. // BAD - 같은 의미의 변수들이다. getUserInfo(); getClientData(); getCustomerRecord(); // GOOD - 변수들을 하나로 묶는다. getUser(); 3. 검색 가능한 이름을 사용한다. 의미를 가지고 있는 값이라면 상수로 만들어 관리하자! 손쉽게 검색할 수 있게 된다. 동료와 협업할 때, 예전의 내 코드를 찾아볼 때 등의 상황에서 코드 이해에 큰 도움을..