[Typescript] 5252, 타입스크립트.. 한번 해 보자고. (feat.노마드 코더 "Typescript로 블록체인 만들기")

어디에 지원을 하건, 어디서 면접을 보건 꼭 나오는 그것들중 하나...

타입스크립트.

항해99에서 다른 팀의 코드를 깃허브에서 슬쩍 까볼때 이따금씩 고ㅡ수님들의 파일에서 보이던 .ts 파일들.

이게..대체 뭔데? 뭐하는 녀석인데? 어쩐지 어려워보여서 쫄아버림 + 같은 팀원 분들도 저거 쓰는 사람 없음 상태였어서 안써보다가 취준을 하게되니 정신이 퍼뜩 들었다.

모두가 쓴다, 타입스크립트.

어느 회사건, 진짜 다 쓰는거 같다.

대체 이걸 왜..왜 쓰는건데?! 이게 뭔데?!

그래서 이것저것 뒤적이다가.. 일단 노마드 코더 강의 보면서 따라써보기로 결정.

https://nomadcoders.co/typescript-for-beginners/lobby

Watch Now – 노마드 코더 Nomad Coders

 

타입스크립트의 유용성, 한마디로 정리된다.

타입을.미리.정해줄.수.있.다 . . . . . . . . .!

 

그게 왜 유용하냐? 그러게요. 저도 몰랐는데 말이죠.

니꼬쌤이 말씀하셨다. "네 멍충함으로부터 코드를 보호"한다고 하셨다. 이 말이 정말 딱이다. 

나같은 사람에겐 이 친구가 필수적이라고 생각하면 될 정도?

 

일단 누군가..이 글을 읽기전에 적어둘게 있다.

이 글은 정말, 생초짜가 공부하면서 적어둔 글이라 부정확한 부분이 있을 수 있다.

그래서 추천하는 다른 고수님의 글의 링크를 남겨둔다.

https://musma.github.io/2019/03/05/typescript-getting-started.html

TypeScript 사용합시다! (기존 JavaScript 프로젝트 대환영)

 

이미 수많은 고수, 고인물 개발자분들께서 인터넷에 타입스크립트에 대한 이야기를 적어두셨다.

 

...이런 말을 보고도 제 글을 읽으신다면 저의 면접관이시거나 저의 미래의 상사가 되실 분이시겠죠. 갑분존댓말

아니면 "으~딜 초짜주제에 정리글을 적어!" 라고 외치시는 분이시거나 이런 비루한 블로그에 조회수 1이라도 찍어주시는 천사분이시겠죠?

 

제발 읽지 말아주세요! 부끄럽습니다! 

말했다시피 정말 많은 고수분들이 정리해주셨다구요? 그분들의 빛나는 글에 살짝 끼여있는 이끼같은 저의 글을 굳이 읽으셔야겠습니까?!

이 글은 정말, 진심으로, 저 같은 생 초짜이면서 타입스크립트가 뭔지도 모르는데 찍먹은 해볼까 싶은 사람과 미래에 기초지식을 까먹고 홀홀거릴 저를 위해 적는 글입니다.

하지만..만약..정말로.. 제가 부끄러워하는걸 알고있음에도 불구하고 읽고싶으시다면 부디 읽어주십쇼. 한번 열심히 정리해보겠습니다.

 

진정하고..아무튼..그래서..타입스크립트가 뭔데?

https://www.typescriptlang.org/

JavaScript With Syntax For Types.

공식사이트 대문에 대문짝하게 이런 문구가 걸려있다.

 

TypeScript is JavaScript with syntax for types.
TypeScript is a strongly typed programming language that builds on JavaScript, giving you better tooling at any scale.

 

먼소리여? 파파고씨 이리 와보슈.

"TypeScript는 형식에 대한 구문을 가진 자바스크립트이다.
TypeScript는 자바스크립트를 기반으로 하는 강력한 타입의 프로그래밍 언어로서 어떤 규모에서든 더 나은 도구를 제공합니다."

 

쉽게 말하자면 css에 sass나 scss가 있는 것처럼 자바스크립트에겐 타입스크립트가 있다~ 는 것.

기존 언어보다 개발자가 좀 더 쓰기 편하게 만들어주기위한 존재로 sass를 컴파일링하면 css로 되듯이 타입스크립트도 컴파일링하면 자바스크립트로 변경된다.

 

설치는?

https://www.typescriptlang.org/download

How to set up TypeScript

여기 보면 npm으로 되어있는데 난 니꼬쌤 따라 일단 yarn으로 했다.

yarn init
yarn global add typescript

터미널에 이거 쳐주고

tsconfig.json 파일을 만들어서 아래와 같이 쳐주자. 

{
    "compilerOptions": {
        "module": "commonjs",
        "target": "ES2015",
        "sourceMap": true
    },
    "include": [
        "index.ts"
    ],
    "exclude": ["node_modules"]
}

 

근데..아마..내 추측상, 이거 편하게 쓸 수 있게 해주는 프레임워크같은게 있지 않을까 싶은데, 이따 찾아보고 업데이트 예정.

 

간단한 기본 형식부터 보자! feat.vscode

기존 자바스크립트의 함수와 다른점이 있다면.. 파라미터 부분이다.

string? number? 

눈치 50단정도만 되어도 저게 뭘 의미하는지 다들 알겠지!?

그렇다. 파라미터의 종류를 정해준것이다. 그니까, 그..원시..객체! 타입을! 정해주는..것.

그래서 "타입"스크립트 인가보다.

 

이제 함수를 불러보고 써보면 아래와 같이 뜬다.

친절함에 눈물이 난다. 이 위치에 어떤 값이 무슨 타입으로 들어가야할지 보여준다.

물론 이게 파라미터 몇개 안들어가는 작은 함수와 함수 몇개 쓰지 않는 작은 프로젝트라면 상관 없지!

하지만 실무에서 하는 것들은 대게 큰 프로젝트들이니 타입을 미리 정해두는게 사실상 필수적이라 본다.

정하지 않으면 함수 쓸때마다 함수 찾아서 파라미터 뭐 들어가나 봐야한다. 

편안~

 

여기서 잠깐! parameter와 argument를 나처럼 자주 헷갈리는 사람을 위해 다른 분의 게시글 링크 걸어둠.

http://taewan.kim/tip/argument_parameter/

argument와 parameter 차이점

 

근데 저 "void"는 뭐지? 하고 생각하는 찰나 강의에서 알려줬다.

타입스크립트는 return 값도 타입을 정해줄 수 있다!

 

const sayHi = (name : string, age : number):void => {
    console.log(`${name}'s age is ${age}`)
}

파라미터 뒤에 :을 붙이고 return 값의 타입을 정해줄 수 있는데, return 할 것이 없으면 void를 쳐주면 된다.

void..대충..공백? 이라는 뜻이라 딱인듯.

 

참고로 노마드코더에서는 tslint를 썻다고 했는데 이거 검색해보니까 이친구 수명이 끝났..다고...eslint를 쓰면 된당.

난 뭣도 모르고 니꼬쌤 따라 설치했다가 오잉 이거 eslint랑 똑같은거 아닌가? 싶어서 찾아보고 삭제..^^

 

그럼 이제 컴파일링을 하면 된다. 이건 쉽다! 그냥 터미널에 tsc 라고 적어주고 엔터하면 끝.

하지만 yarn start 와 함께 하고싶다면 package.json에 들어가 아래를 추가해주면 된다.

  "scripts": {
    "start": "node index.js",
    "prestart": "tsc"
  }

yarn start 를 치면 tsc로 컴파일이 되고 index.js 와 index.map.js 파일 두개가 생긴다.

map은 뭔지..모르겠고! index.js 가 index.ts 를 순수 자바스크립트화 시킨..그것임.

 

 

근데 yarn start 쳐서 계속 컴파일하는거..불편해~!

두둥, 이런 친구가 있다. "tsc-watch"

관련설명은 고수님의 글이 있어서 링크 넣기.

https://bigstar-vlog.tistory.com/20

TypeScript tsc-watch 사용하기

간단히 말해서 굳이 tsc, tsc, tsc.. 치지 않아도 타입스크립트의 변화를 바로바로 컴파일해주는 친구라고 한다. 

고수님의 글을 보면 알겠지만.. 글로벌로 타입스크립트 설치하면 tsc-watch 쓸때 에러 나기 때문에 나도 타입스크립트를 따로 설치해주었당..ㅋ..

tsc-watch 설치 후 package.json 에 아래와 같이 적어주자.

  "scripts": {
    "start": "tsc-watch --onSuccess \"node dist/index.js\""
  },

 

src 폴더와 dist 폴더를 생성한 뒤 src폴더 안에 index.ts 를 넣어준다.

그러고 나서 tsconfig.json 파일을 아래와 같이 수정해주자.

{
    "compilerOptions": {
        "module": "commonjs",
        "target": "ES2015",
        "sourceMap": true,
        "outDir": "dist"
    },
    "include": ["src/**/*"],
    "exclude": ["node_modules"]
}

outDir 을 추가하고 include를 변경했다.

include 는 무엇을 컴파일 할 지 가리키는거고 *은 전체를 의미하기에 src/**/* 은 src의 모든 파일, 폴더내의 파일 싹 다 가리키는것!

outDir 은 컴파일 후 어디로 배출할지 알려주는 것이라 컴파일후 생성된 js 파일이 dist 폴더에 저장된다.

 

이제 yarn start 후 ts 파일을 수정하고 저장하면 컴파일과 파일 실행이 바로바로 되는 모습을 볼 수 있다.

와!

 

이정도면 다 아는거 아니냐~?

아님. 

함수를 다루다보면 객체를 argument로 넘겨줘야할 때가 있는데, ts에서 그냥 넘겨주면..에러뜬다.

여기서 등장한게 interface 라는 친구!

 

나는 Hum 이란 인터페이스를 만들어주고 human이라는 객체를 만들어서 함수에 넘겨주었다.

여기서 Hum 은 객체 안의 값들의 타입을 미리 지정해준 틀이고

함수의 파라미터부분에서 기존에 파라미터의 타입을 적던 부분에 만들어둔 인터페이스를 넣어줄 수 있다.

이렇게 하면 Hum이라는 틀에 argument가 맞춰진 경우에만 제대로 돌아간다!

 

심지어 나의 Hum 이라는 인터페이스 안에 age와 name 이 있다는걸 타입스크립트가 파악하기에 파라미터에 .만 찍어도 무엇을 넣어줄지 자동완성이 떠준다. 행복해~!

 

 

일단 노마드코더 강의에서 이 이후는 블록체인 관련이라기에 스톱. (물론 강의는 계속 들을거임. 짧으니까 좋다^^)

 

그럼 여기서 궁금증 또 하나. 

나는 리액트를 주로 사용했고 내가 본 부트캠프의 다른 크루원들이 쓴 타입스크립트는 리액트 내에서 사용하던건데.. 위의 것들이랑 똑같이 쓰면 되나?

 

일단 공식문서는 찾았당.

https://create-react-app.dev/docs/adding-typescript/

Adding TypeScript | Create React App

생각했던대로.. 타입스크립트용 템플렛으로 cra를 할 수 있다!! 와!

와! 샌즈!

이미 cra로 된 파일을 변경하고 싶다면 

yarn add typescript @types/node @types/react @types/react-dom @types/jest

이걸 치면 된다구 한당!

좀 더 자세히 알고싶어서 예제 링크를 타고들어갔는데.. 와 처음보는 것들이 너무 많아서 스톱.

다시 구글링해서 이런 친절하신 고수님의 글을 발견했다.

https://www.kenrhee.com/blog/getting-started-with-typescript-with-react

Typescript + React 시작하기

이 분의 글을 읽다가 오잉 이게 뭐지? 싶은게 있었다.

type? 인터페이스랑 비슷한건가? 싶어서 또 구글링. 

https://jungpaeng.tistory.com/99

[TypeScript] type과 interface 비교

또 다른 고수님의 글 발견..!

읽어보니 둘의 사용 법은 거의 비슷하다. 다만 확장하는법이 다르고 인터페이스를 사용할시 특정 경우 에러가 발생할 수 있다고 한다.

이 "특정 경우" 에 대해 난..아직..정확하게 이해하지 못했으나 대부분의 경우 구분하지 않아도 좋다 하시니 믿는걸루!

 

아무튼 Typescript+React 시작하기 글을 읽어보니 useState, useRef에도 타입 설정이 가능하고 props도 타입을 설정해줄 수 있다!

조금 복잡한건 이벤트 함수 쓸 때 event 도 타입을 설정해줘야한다고..

리액트에서만 사용하는 이 타입 설정법들은 새로 글을 파야겠다. 

 

 

아무튼! 찍먹은 여기까지. 

아마 이것저것 또 구글링하다가 새로운거나 여기 적은 것중에 틀린게 있다면 지속적으로 수정 예정!

그럼 20000.

 

 

 

+

오늘 8월 10일, 서버에서 받아오는 값이 아직 정확하지않아 타입을 정할 수 없는데 타입스크립트를 쓰니까 댕빡침 

아니~~ length 받을 수 있다니까 저거 리스트로 들어온다니까 애가 말을 안들어진짜 ㅡㅡ