리코딩 : TIL

TIL : 타입스크립트(TypeScript)_feat. 노마드코더, 인프런

BreezeBm 2021. 2. 14. 23:25

타 입 스 크 립 트 등 장!

개인적으로 파랑색을 잘 뽑은듯!

0. INTRO

타입스크립트를 사용하게 된 계기는 바로 4주 프로젝트를 진행하기 위해서다. 이번에 백엔드에서 타입스크립트를 새로운 스택으로 추가해서 사용하기로 했다. 팀원과는 각자 개인적으로 공부할 시간이 주어졌다. 그래서 나는 노마드코더를 프로젝트 시작전에 들었고, 인프런강좌를 프로젝트 끝나고 수강했다.

왼쪽은 노마드코더 수료증, 오른쪽은 인프런 강좌를 수강한 기록!


 

1. 첫 만남

 타입스크립트를 처음 쓸 때는 조금 불편 했다. 하나하나 타입을 지정해야 했기 때문이다.

let isGood: boolean = true;

let money: number = 10,000;

let city: string = 'New York';

let numList1: number[] = [1, 2, 3];
let numList2: Array<number> = [4, 5, 6];

// 튜플! Tuple!
let newType1: [string, number] = ['New York', 77] // GOOD!
let newType2: [string, number] = [77, 'New York'] // BAD :p

// 만능열쇠 any
let everything: any = 4
let everything: any = 'hi'
let everything: any = [1, 'Korea']

 이렇게 해당하는 변수에 대해서 일일이 타입을 지정해 주어야 한다. 함수의 경우에도 매개변수들의 타입을 지정해 주어야 한다! 그리고 심지어 함수의 결과도 타입을 지정해 주어야 한다. ㅎ..

function hello(message: string): void {
  console.log(`Hello, ${message}`)
}

 자바스크립트는 단순히 선언, 할당만 해주면 끝나겠지만, 타입 스크립트는 타입을 꼬,,,ㄱ,,,, 부들부들... 자바스크립트의 자유롭던 생태계를 벗어나, 규칙과 틀이 있는 타입으로 넘어와서 조금 힘들었다....


2. 조금은 친해졌을..까?

 조금씩 타입스크립트에 대해서 알아가다보니, 정말 매력있는 친구였다. 생각보다 타입을 지정해주다보니 나중에 코드를 살펴볼 때도 명확해졌다. 그리고 프로젝트를 넘어서 현업이나 실무에서 더많은 코드를 다루어야 하는 경우에 더욱 더 빛을 발하는 게 타입스크립트일 것 같다. 코드가 많을수록 복잡해지고, 이해하는게 어려울 수 있다. 하지만 타입을 설명해주고, 알려주는 것만으로도 많은 도움이 될 것 같다!

 하지만 조금 친해졌다고 생각 했지만,,, 이제서야 이빨을 드러냈다...😂

우당탕당 세션충돌기

세션에 userid라는 프로퍼티를 만들어서 데이터 하나를 보내주려 했는데........ 속성이 없다는 오류가 두두등장 해버렸다.... 진짜 저 때 많은 삽질🛠을 했다. 


3. 정말 친해질 수 있을까?

 세션을 사용하기 위해서 @types/express-session을 받았다. 이 패키지는 세션의 타입을 지정해 놓은 패키지이다. 생각해보면 userid는 프로젝트에 필요해서 만든 속성이기 때문에 당연히 패키지에는 저 프로퍼티가 없는게 당연하다! 그래서 이걸 어떻게 해결 할 수 있을까 검색을 엄청하고 찾아보기 시작했다. 

 방법은 직접 속성을 만들어주고 타입을 지정해주면 된다! 하지만 패키지를 이미 받았기 때문에 받은 패키지를 활용하는 방법을 찾기 시작했고, 해답은 패키지 안에 있었다.

@types/express-session에 가서 찾아보니, 추가적으로 필요한 프로퍼티는 다음과 같이 작성하라는 주석을 발견했다💎! 이게 무슨일이고!!!!! 바로 망설이지 않고 추가해 주었다.

추가해주고 해당 로직으로 돌아갔더니!!

언제 그랬냐는 듯이 오류가 눈 녹듯이 사라졌다!


4. 지금은 어떤가?

 생판 처음 시작했을 때 보다는 많이 친해졌다. 하지만 더 다양하게 시도할 수 있으면 좋을 것 같다. 아직까지 이친구를 많이 활용하지 않았기 때문에 더욱 알고 싶은 친구다! 

 서론에서 말했지만, 노마드 코더는 정말 가볍게 타입스크립트를 훑는 느낌이다. 그래서 깊게 알기에는 조금 부족한 내용이 있다. 하지만 인프런은 전체적으로 기본을 잡아주는 느낌이었다. 다만 조금 강의를 이해하기 위해서는 어느정도 타입스크립트 공식문서를 읽어보고 오면 좋을 것 같다!

 지금도 틈틈히 공부하고 있다. 새로운 것을 배우는게 꺼려지기도 했지만, 의외로 너무 재미있고 즐거웠다. 앞으로도 꾸준히 배웠던 내용도 공부를 해야겠지만 새로운 언어나 스택에 대해서도 자신감 있게 배울 예정이다!