프론트엔드 개발을 시작하고 나서 항상 갖고 있는 고민은 "이걸 이렇게 하는 게 잘하고 있는 건가?"입니다. 동작을 잘해도 "이걸 이렇게 구현하는 게 맞는가?"라는 생각을 항상 계속하게 됩니다.
이런 고민들 하던 중에 우아한형제들에서 주니어 프론트 개발자를 대상으로 리액트와 타입스크립트 교육을 진행한다는 공고를 보고 지원하게 되었습니다. 운이 좋게도 교육생 선발이 되어서 우아한테크러닝 3기에 참여할 수 있게 되었습니다.
앞으로 매 회차 교육에 참여하면서 그 날 다루어졌던 내용 중 정리하고 싶은 내용에 대해 학습하여 블로그에 기록할 계획입니다.
명시적인 코드를 작성하자
암묵적인 코드와 비교할 때 명시적인 코드가 더 많은 정보를 파악할 수 있기 때문입니다. 가독성이 좋은 코드가 좋은 코드라는 흐름에도 부합하는 작성법이기도 합니다. 또한, 자바스크립트 문법이 새로 추가되는 것을 살펴보면 암묵적인 부분에서 명시적인 부분으로 표현력이 확장되고 있다는 점을 알 수 있습니다.
일례로 가변 인자를 다루는 방법의 변화를 생각해볼 수 있습니다.
ES6 이전의 자바스크립트에서 가변 인자를 다루기 위해서는 arguments라는 함수 내부의 유사 배열 객체를 활용했습니다. 이 객체는 모든 함수 내부에 존재하며 배열의 형태를 갖습니다. 이 유사 배열 객체에는 함수 호출 시 전달된 모든 인자가 담겨있습니다.
이러한 자바스크립트의 특징을 이용하면 함수 선언 시 어떠한 파라미터를 입력하지 않아도 가변 인자를 다룰 수 있었습니다. 유사 배열 객체는 length 프로퍼티도 갖고 배열처럼 인덱스를 활용할 수 있지만, 이름에서 알 수 있듯이 배열은 아닙니다.
function foo() {
console.log(arguments);
console.log("Length: ", arguments.length);
console.log("is Array: ", Array.isArray(arguments));
}
foo(1, 2, 3, 4);
// Arguments(4) [1, 2, 3, 4, callee: ƒ, Symbol(Symbol.iterator): ƒ]
// Length: 4
// is Array: false
유사 배열 객체는 자바스크립트의 유연성을 보여주는 예입니다. 하지만 이런 식의 암묵적인 코드는 누군가 코드를 자세히 뜯어보기 전까지 이 함수가 가변 인자를 받아서 치리 하는지 알 수가 없기 때문에 좋지 못한 작성법입니다.
ES6부터는 Rest 파라미터를 이용하면 가변 인자를 배열로 다룰 수 있게 되었습니다. 함수 파라미터에 붙은 ...표시를 보면 누구나 이 함수가 가변 인자를 다루고 있다는 것을 바로 알 수 있습니다. 이전에 비해 훨씬 더 명시적으로 코드를 작성할 수 있습니다.
function bar(...rest) {
console.log(rest);
console.log("Length: ", rest.length);
console.log("is Array: ", Array.isArray(rest));
}
bar(1, 2, 3, 4);
// [1, 2, 3, 4]
// Length: 4
// is Array: true
타입스크립트를 이용하면 더 명시적인 코드를 작성할 수 있다.
TypeScript는 JavaScript의 상위 확장 언어로 JavaScript에 Type이 더해진 형태입니다. 강타입 언어인 타입스크립트를 이용하면 변수나 반환값의 타입을 사전에 지정해야합니다. 또한 type alias 등을 이용하면 더 읽기 좋게 코드에 의미를 부여할 수도 있습니다.
// type alias를 이용하여 primitive type에 의미를 부여했습니다.
type Age = number;
type Person = {
age: Age;
name: string;
}
const teacher: Person = {
age: 10,
name: "John",
}
이렇듯이 타입스크립트를 사용하면 자바스크립트로 코드를 작성할 때 보다 더 읽기 좋은 명시적인 코드 작성이 가능합니다.
타입스크립트에 대한 더 자세한 내용들은 차후에 더 자세히 다루겠습니다.