Post

러닝 타입스크립트 파트 1: 개념 [챕터 1] (항해99 사전스터디)

Posted Updated
By Kang Donghyun
10 min read
러닝 타입스크립트 파트 1: 개념 [챕터 1] (항해99 사전스터디)

현재 다니고있는 회사에서 지원해주는 부트캠프를 시작하기전에 스파르타에서 arrange 해준 사전스터디를 진행하게 되었습니다. (대표님 꾸벅 🙇🏻‍♂️)

러닝 타입스크립트

사실 영어 원본의 번역본으로 알고있습니다만, 번역의 퀄리티가 조금 떨어진다는 평을 들어서 걱정은 됩니다.

그리고 사실 한국어보다는 영어가 훨씬 편하지만 (문법, 맞춤법 다 틀릴예정입니다), 이 부트캠프는 한국에서 진행해주시는거기에, 교재도 한국어로 보는게 맞다고 생각해서

친구 교보문고 계정으로 결제해서 스터디 교재로 사용하게되었습니다

물론 교재 추천은 스터디원분중 한분이 추천해서 사용합니다!

교재를 읽고, 의식의 흐름, 부가 설명, 짧은 요약이 들어있는 글입니다.

챕터 1

1.1 ~ 1.2 자바스크립트

자바스크립트는 ECMAscript 언어 (ECMA 기관이 만든 스크립트 언어)로, 웹앱과 인터넷의 성장을 이끈, 장점이 많고 유연한 동적(dynamic) 언어입니다. 항상 다른 언어에서 제공하는 기능에 맞춘 새로운 기능도 제공하고, 다양한 환경에서 새로운 버전과 이전 버전의 호환성을 오랫동안 유지해왔다고 합니다.

동적 언어: 컴파일 과정 중 수행하는 특정 일들을 런타임에 수행하는 언어

그렇지만, 바닐라 자바스크립트(no 언어확장, no 프레임워크)는 고통입니다. 그냥 아파요.

유연했다고 한거처럼, 코드 구성하는 방법에 제약이 없습니다. 프로젝트 초반에는 너무 재밌지만, 점점 프로젝트가 진행되면 정말 걷잡을수없는 문제들이 생겨날수있습니다.

문제들을 조금 상쇄하기 위해서 개발자들은 JSDoc을 사용하곤 합니다만, 그게 코드가 잘못된걸 막을 순없고요, 코드 변경할때마다 수동적으로 바꿔줘야하는 문제, 복잡한걸 설명할때는 너무 장황해서 어렵습니다.

1
2
3
4
5

/**
 * 이런식으로 생긴게 JSDoc입니다
 * @param 요런식
 * @returns 이런식
 * */

타입을 식별하는 방법은 내장되어있지않고, JSDoc이랑 코드는 쉽게 분리가 되기때문에, 대규모 변경, 코드 이해 같은건 너무 너무 어려워서 class 이름 바꾸는거나 타입 선언된곳으로 가기같은 요즘은 좀 당연하다 여겨지는게 JS유저들은 신기하답니다.

1.3 ~ 1.7 타입스크립트

마이크로소프트 내부에서 만들어진 언어로써 타입있는 자바스크립트라고 불립니다. (실제로도 맞음)

그럼 타입스크립트는 진짜 무엇인가?

  1. 자바스크립트의 모든 구문과, 타입을 정의하고 사용하기위한 새로운 타입스크립트 고유 구문이 포함된 언어
  2. 타입 검사기로서 모든 구성 요소를 이해하고, 잘못 구성된 부분을 알려줌
  3. 컴파일러로서 타입 검사기를 실행하고 문제 보고 후, 이에 대응되는 자바스크립트 코드를 생성
  4. 언어 서비스 (VScode에 검사기를 사용하게 해주어서 개발자에게 유용한 유틸리티 제공법을 알려줌)

일반 자바스크립트로 작성된 코드에 타입스크립트 타입 검사기가 점검하면?!

1
2
3

const firstName = "Brian";
const nameLength = firstName.length();
// Error: This expression is not callable

length는 함수가 아니라 숫자를 부르는것이라는 지식을 활용해서 주석으로 오류를 표기해줍니다.

사실 이런건 정말 간단한 오류죠? 근데 이걸 나~~중에 실행하고 나서 오류가 발생할때까지 기다리는게 좋을까요.. 훨씬 유용하겠죠. 이렇게 편집기(IDE)에서 간단한 오류를 알려줍니다.

일시적인 편함과 자유

는 프로그램한텐 쥐약입니다. 자바스크립트에서는 예를들어, 한 함수의 매개변수 (arguments)가 2개에서 1개로 변경되었지만, 그 함수를 부를때 실수로 2개를 사용한다면, 아무문제없이 그냥 2번째꺼는 무시하고 1번째것만 포함해서 보여집니다. 잘못된 수의 인수를 사용해서 함수를 호출하는게 아무 제약이 없다는 것이죠.

근데 타입스크립트는 작성중에 알려줍니다. (“야! 너가 지금 쓰는 그 함수, 1개만 부르게 되어있음”)

문서화도 차원이 다릅니다.

1
2
3
4
5
6
7

interface Painter {
  finish(): boolean;
  ownMaterials: Material[];
  paint(painting: string, materials: Material[]): boolean;
}

function paintPainting(painter: Painter, painting: string): boolean{ /*...*/}

타입스크립트 처음 쓰는 사람도 이걸보면서 아, Painter는 적어도 3가지 속성이있고, 그중 2개는 메서드라는걸 이해하겠죠. 이렇듯 구문을 적용해서 객체(object)의 형태를 설명해줍니다!

IDE에서의 자동 완성들도 타입스크립트가 제안하는것!

타입스크립트 컴파일러에 타입스크립트 구문을 입력해보면, 타입을 검사후, 작성된 코드를 해당 자바스크립트로 내보내는걸 볼수있습니다.

타입스크립트는 자바스크립트 코드를 구조화하는데 도움이 되지만, 해당 구조가 어떻게 보여야 하는지에 대해서는 어떤 것도 강요하지않습니다. 즉슨, 다양한 패턴 (OOP, 함수형, 모듈 기반 구조, React등)을 자유롭게 적용할 수 있도록 합니다. 특정한 방식으로 강제하지 않기에, 프로젝트의 요구사항에 따라 최적의 패턴을 선택할 수 있습니다. 원하는 어느 아키텍쳐 패턴을 사용할 수 있고, 지원합니다.

타입스크립트의 설계 목표는

  1. 현재와 미래의 ECMA스크립트 제안에 맞춘다
  2. 모든 자바스크립트 코드의 런타임 동작을 유지한다.

자바스크립트에 추가되거나 충돌할 기능들을 추가하지 않기 위해 매우 열심히 노력했고 하고 있다합니다.

아 그리고, 자바스크립트로 먼저 컴파일 되는것 때문에 코드 빌드 하는데 시간이 좀 더 걸린다고 합니다..! (물론 큰 프로젝트에서만 느껴지지 않을까요 ㅎㅎ)

Programming, Learning Typescript
Typescript 항해99
This post is licensed under CC BY 4.0 by the author.