이번에 Imhere 프로젝트를 폼프님이 자바스크립트에서 타입스크립트로 마이그레이션을 해 주셨다.
타입스크립트로 마이그레이션 해야 하는데 너무 오래 걸릴 것 같아서 고민이에요~
라고 말한 지 일주일 안에 모든 마이그레이션을 완료하셨다...정말 ... 갓폼프...
무튼 이번에 마이그레이션에 대한 챕터가 남아 있길래 나도 다음에 마이그레이션이 할 일이 있을 때 참고하기도 하고, 이번에 아임히어 마이그레이션 반영하면서 바뀌게 된 API 대응에 대해서도 다시 코드를 작성해야 하기 때문에 이 기회에 정리해서 나도 한번 써먹어 보려고 한다 ㅎㅅㅎ
모던 자바스크립트로 작성하기
먼저 프로젝트를 완료한 지 너무 오래되어 프로젝트가 모던 자바스크립트로 작성되어 있지 않다면 이를 모던 자바스크립트로 바꾸어 나가는 과정부터 시작이라고 볼 수 있다. 아래는 모던 자바스크립트의 특징들이다. 이를 참고해서 잘 안 된 곳이 있다면 뚝딱뚜딱~ 보충해라.
ECMAScript 모듈 사용하기
모듈을 가져오고 내보내는 것이 ES2015부터는 export와 import로 사용하기 때문에 이러한 표준을 이용하도록 하자.
프로토타입 대신 클래스 사용하기
프로토타입을 직접 조작하거나 객체를 만드는 건 자바스크립트만에서 이용하고, 자바스크립트에서도 클래스가 도입된 이후 잘 쓰이지도 않는다. 프로로타입 객체가 존재한다면 이를 클래스로 변환하여 주자.
var 대신에 let/const 이용하기
var 스코프는 우리의 상식과 다르게 움직일 수 있다. 블록 레벨 스코프로 움직이기 때문이다.
for(;;)대신 for-of 또는 배열 메서드 사용하기
for(;;) 루프는 C 스타일의 for문 루프이다. 그렇기 때문에 자바스크립트의 for-of 을 사용하거나, forEach와 같은 메서드를 따로 사용해주자.
함수 표현식보다 화살표 함수 사용하기
this 키워드의 바인딩을 사용할 때 화살표 함수는 상위 스코프의 친구를 바인딩하므로 예측하는 것과 같이 이벤트가 일어나기 쉽다. 그렇기 때문에 되도록이면 화살표 함수를 이용하여 바인딩을 사용하여 헷갈리지 않도록 하자.
단축 객체 표현과 구조 분해 할당 사용하기
const x = 1, y = 2, z = 3;
const pt = {
x: x,
y: y,
z: z,
};만약 객체 속성과 변수의 이름이 같다면 단축 객체 표현을 사용하여 간결하게 코드를 작성할 수 있다.
const { props } = obj;
const {a, b} = props;그리고 단축 객체 표현을 통하여 객체와 그의 프로퍼티에 대하여 간결하게 정의할 수 있다.
cosnt {props: {a, b}} = obj;배열에도 사용 가능하다.
const point = [1, 2, 3];
const [x, y, z] = point;
const [, a, b] = point; //첫번재 요소 무시함수 매개변수 기본값 사용하기
자바스크립트에서 함수의 모든 매개변수는 기본값을 직접 지정할 수 있다. undefined가 발생할 수 있는 경우라면 기본값을 지정해주는 것도 좋은 설계라 할 수 있겠다.
function parseNum(str, base=10) {
return parseInt(str, base);
}