서문 - 제 1원칙

1. 가장 중요한 것은 가독성이다.

   • 항상 코드 그 자체가 문서가 될 수 있도록 한다. (과도한 주석 사용은 불필요하다)

     // 주석을 포함한 아래 코드는
     // Total value of something
     let total = 0;
     
     // 이렇게 작성하는 것이 보기 편함
     let totalValueOfSomething = 0;
     

2. 문제가 생기면 최대한 빨리 오류가 나도록 한다.

   • 어떻게든 실행되다 멈추는 게 가장 나쁜 상황임을 인지한다.

3. 개발 과정에 일어나는 모든 오류는 해결한다.

I. 메인 코딩 표준

1. 함수명, 변수명 등 주석 외 모든 곳에 영어 이외의 언어를 사용하지 않는다.

2. Interface, Type, Element를 반환하는 함수명, 생성자, Class명, 네임스페이스, enum엔 파스칼 케이스를 사용한다.

   interface MyInterface {
   	foo: string;
   }
   
   type MyType = number | string;
   
   function ReturnsElement(): HTMLElement {
   	return document.createElement("div");
   }
   
   class MyClass { }
   
   namespace MyNamespace { }
   
   enum UserResponse {
     No = 0,
     Yes = 1,
   }
   

3. 그 외 지역 변수, 함수, 함수 매개변수, 클래스 멤버, 메서드 등엔 카멜 케이스를 사용한다.

   function myFunction() {
   	const myVariable = 1;
   
   	return myVariable;
   }
   

4. 파일 내에서 전역으로 사용되는 상수의 이름은 모두 대문자로 하며, 언더스코어(_)로 띄어쓰기를 분리한다.

   const MY_GLOBAL_VARIABLE = 1;
   

5. 인터페이스엔 I , 타입엔 T 를 접두어로 사용하지 않는다.

   lib.d.ts 나 @types/node부터 시작해 대부분의 타입 파일이 해당 접두어 없이 인터페이스와 타입을 정의한다. 비관습적 표현의 사용으로 가독성 저하를 지양하자.

   // 잘못된 예시
   interface ICircle = {
   	xCoord: number;
   	yCoord: number;
   	radius: number;
   }
   
   int iAge = 1;
   
   type TShape = Circle | Square;
   
   // 올바른 예시
   interface Circle {
   	xCoord: number;
   	yCoord: number;
   	radius: number;
   }
   
   type Shape = Circle | Square;
   

6. 값을 반환하는 함수는 반환값을 예측할 수 있는 이름을 짓는다.

   function getUserName(): string { }
   

7. 단순히 반복문에만 사용되는 변수가 아니라면 반복문 내에서도 i 등의 변수명 대신 index 처럼 명확한 변수명을 사용한다.

8. 언더스코어(_)를 접두어로 사용하지 않는다.

   일반적으로 은닉된 정보에 해당 방식을 사용하기에, private 필드의 접두어로 #을 사용하는 자바스크립트에선 착각을 유발할 수 있다.

   // 잘못된 예시
   this._name = "John";
   
   // 올바른 예시
   this.name = "John";
   
   // 올바른 예시 - Private
   class ClassWithECMAPrivateField {
   	#privateField;
   
   	constructor() {
   		this.#privateField = 42;
   	}
   }
   
   class ClassWithPrivateField {
   	private privateField;
   
   	constructor() {
   		this.privateField = 42;
   	}
   }
   

9. default export 가 있을 땐 파일 이름이 그와 대소문자까지 완벽히 일치하도록 한다.

   // drawCircle.ts
   export default function drawCircle() { }
   

10. 한 가지만 export 하는 모듈에선 default export 를 사용한다.

    가독성과 유지보수성 향상을 위함

    // 잘못된 예시
    export function drawCircle() { }
    
    // 올바른 예시
    export default function drawCircle() { }
    

11. 배열 타입을 선언할 땐 Array<T> 대신 T[] 를 사용한다.

    // 잘못된 예시
    function squareValues(numbers: Array<number>) {
        return numbers.map(x => Math.pow(x, 2));
    }
    
    // 올바른 예시
    function squareValues(numbers: number[]) {
        return numbers.map(x => Math.pow(x, 2));
    }
    

12. import 순서는 외부 라이브러리, 내부 .ts , .tsx 파일, 내부 .css 파일 순으로 하며, ts , tsx 등 자바스크립트 관련 확장자는 생략한다. 가능하면 알파벳 순서를 따른다.

    import React from "react";
    
    import Editor from "./Editor";
    import Viewer from "./Viewer";
    
    import "./index.css";
    

13. switch case문엔 항상 default 를 추가한다.

    default case에 할 것이 없다면, 개발 환경(예: process.env.NODE_ENV === 'development')에서 에러를 throw하도록 작성한다.