[원티드 프리온보딩 챌린지 2월] Week 1-2 Interface for TypeScript - 강의 후기

Week 1-2 Interface for TypeScript 

Interface, Modeling

 

 

1-2주차 시간은 타입스크립트를 사용하며 항상 의문을 가졌던 interface와 type alias의 차이에 대해 다뤄보았다. 나는 interface를 주로 사용하지만 그것을 왜 사용하는지에 대해서는 아직 설명하기 어렵다. 항상 그렇듯 '남들이 다 쓰길래'라는 답변은 도움되지 않는다. 자신만의 철학과 논리를 가지고 어떤 것을 왜 사용하는지 고민하는 시간이 꼭 필요하다고 하셨다. 

 

 

---

 

 

1. 지난 시간 복습, TypeScript 공부 방법

TS가 JS의 슈퍼셋인것만은 아니다. JS에 있는 것이 모두 TS에 있는 건 아니다. 

 

타입 에러시 타입을 바로 고치면 안되는 이유

타입스크립트는 내부 코드가 잘못됐을 때 오류를 알려주는 기능도 하고 있다. 런타임 환경의 잘못된 코드를 알려주는 역할도 하고 있기 때문에, 함부로 설계를 고치면 사이드이펙트가 발생할 수 있다. 

 

공부방법

1. any 금지 - 어려우면 unknown을 사용할 것 
2. 선타입 후구현
3. 집단지성 - TS 플레이그라운드, 공유

TS가 너무 어려우면 JS 기본기가 부족한 것일 수 있다.

추천 TS 강의로는 [8월 우아한테크세미나] 우아한 타입스크립트 영상을 알려주셨다. 조금 어려운 강의라고 한다.

 

1. 타입스크립트 플레이그라운드 https://www.typescriptlang.org/play

2. typescript-exercises https://typescript-exercises.github.io/

3. https://tsch.js.org/

 

typescript-exercises의 10단계 까지는 풀어보는 것을 추천하셨다. 그럼 이력서에 타입스크립트를 넣어도 될 것이라고 하셨다😂 그 후에 tsch.js.org 사이트로 넘어갈 것을 권장하셨다. 플레이그라운드는 나의 코드를 저장해서 남에게 공유도 할 수 있고, .JS 파일과 .D.TS 파일을 바로 나눠서 확인할 수 있기도 하다. 

 

 

 

 

2. 객체의 원형

인터페이스

• JavaScript에서는 존재하지 않는다.
• 객체의 타입을 정의하고 생김새를 가지도록 할 수 있다.
• TypeScript에서의 클래스 기능은 C#에서 유래된 것이 많다.
• 일부 기능은 TypeScript에서만 존재하는 고유 문법으로 컴파일 후에 사라진다. 
• extends가 아닌 implements 키워드로 구현한다.

 

자바스크립트와와 타입스크립트는 각각 마이웨이로 성장 중이다. 이 둘은 문법이 달라지기도, 일치하기도 한다. 컴파일 후 TS가 없어져 주어야 수많은 기존의 JS 코드가 정상적으로 동작한다. JS를 만들 때 실수라고 인정한 typeof null = object인 이유 역시, 바꾸지 못하는 이유는 레거시 코드 때문이다. 회사에서 사용하는 뷰 프로젝트를 리액트로 프로젝트로 쉽게 바꾸지 못하는 이유도 레거시 코드를 갈아엎기 어려워서이다. 반면 자바스크립트에서 타입스크립트로의 변환은 비교적 쉽다. 자바스크립트와 잘 호환되는 것은 타입스크립트의 BM이자 모토이기도 하다.

 

인터페이스에 대한 세 가지 관점

• 객체 지향 (데이터 설명서)
• 메타 데이터 - 데이터를 설명하기 위한 데이터
• Front-end 에서의 유용한 사용 방법
  • 예) React Component Typing

 

위는 멘토님이 생각하는 인터페이스에 대한 관점이다. 각자 '내가 생각하는 TS 인터페이스는 무엇인가?'에 대한 생각을 가지고 있어야 면접에서 대비가 가능하다. 리액트를 제외하고서도 타입스크립트를 생각해보자. 

 

 

 

 

3. Type Alias vs Interface

인터페이스와 타입 별칭 중 어떤 것을 쓸지 본인만의 기준과 논리를 갖고 있어야 한다.

https://www.typescriptlang.org/docs/handbook/2/everyday-types.html#differences-between-type-aliases-and-interfaces

• 각자 다른 개념이지만 비슷한 점도 많고 다른 점도 있어 알아둘 것이 많다. 둘다 많이 사용되는 키워드 둘다 많이 사용되면서 또 비슷한 역할을 대체하는 경우도 있다.
• 팀 & 개인의 규칙이나 선호도에 따라 다른 방식으로 사용될 수 있다.
• ⚠️ 비교표 수시로 찾아서 확인해보자 / 항상 최신 자료를 확인해야한다 (필수)

 

검색 TIP

수많은 정보 속에서 추려내는 스킬이 필요하다.

자료를 검색할때 영어와 한글 각각의 검색 결과 양이 엄청나게 차이가 난다. 한글로만 검색해 왔다면, 영어로도 검색을 해보자.

영어로 검색어 입력, 검색 날짜 1년, 모든 결과 > 한국어 웹 으로 검색해보면 정제된 결과가 나올 수 있다.

 

⚠️ TS 공식문서의 함정

TS 공식문서의 what’s new를 잘 확인하자.

https://www.typescriptlang.org/ko/docs/handbook/intro.html

새로 만들었다고 안내는 하는데 공식 문서가 아직 안 바뀌어 있을 때가 있다. 특히 마이크로소프트가 타입 별칭의 기능을 자주 바꿔서, 공식문서의 함정이 많았다고 한다. 더불어 공식문서는 한국어 번역본보다 영어가 더 빠르다는 것도 염두해 두자.

Breaking Changes도 꼭 확인해야 한다. 이전 버전과 호환되지 않는 내용이 담겨 있다.

 

interface

접두사, 프리픽스(타입에 I 붙이는 것)은 요새는 안 쓰는 추세이다. eslint I prefix 등으로 검색해보면 이에 관한 논의가 진행된 깃허브 레포를 찾아볼 수 있다. (참고로 접두사의 반대로는 접미사, 서픽스가 있다.)

extends를 상속 보단 확장의 개념으로 받아들이자. 부모가 쓰는걸 그대로 쓰는 상속이 아니라 더 넓힌다는 의미의 확장이다. 확장받은 인터페이스는 부모가 여럿인 것도 가능하다. 

인터페이스는 타입별칭을 확장할 수 있지만, 그 반대는 안 된다. 🤔 이런 내용을 일일이 외우고 있지 말라고 하셨다. 필요할 때 찾아보면 된다.

인터페이스는 선언 병합(= 중복선언)이 가능하다.

 

type alias

DRY 원칙 - 반복하지 마라(Don't Repeat Yourself), 너무 많은 반복을 하지 말자

& & & 로 계속 확장해서 사용하면 가독성이 떨어지고 한 눈에 파악하기 어렵다. 이는 컴퓨터에게도 컴파일이 오래걸린다는 단점이 있다. 컴파일 단에서 시간이 걸릴 수 있다.

수업에서 namespace라는 개념을 처음 알게 되었다. 

https://www.typescriptlang.org/ko/docs/handbook/namespaces.html

 

 

라이브러리 딥다이브

💡 라이브러리에 @types/ 가 붙는 이유를 아는 것이 중요하다.

 

@types/ 가 붙는 라이브러리는 기존의 라이브러리가 자바스크립트로만 되어 있었기 때문에 타입이 내장되어있지 않다. 타입스크립트에서 이러한 라이브러리를 사용하려면 각 기능에 대한 타입이 정의되어 있어야 한다. 그래서 별도로 타입 어노테이션이 붙은 라이브러리가 필요한 것이다. 

참고 자료 : https://github.com/DefinitelyTyped/DefinitelyTyped

분석해보면 좋을 라이브러리를 몇 가지 추천해 주셨다.

 

1. lodash

트리플 슬래시 지시자라는 것을 처음 알게 되었다. 단일 XML 태그를 포함하는 한 줄의 주석이며, 주석의 내용은 컴파일러 지시어로 사용된다.

 

2. axios

https://github.com/axios/axios

axios는 @types/를 따로 설치하지 않는데, 그 이유는 axios가 미리 타입을 준비해놨기 때문이다. axios는 다 JS로 작성되었고, 타입만 따로 추가되었다. 

 

 

axios

 

3. redux-thunk 

https://github.com/reduxjs/redux-thunk

redux-thunk는 TS로 작성되어있다.

라이브러리를 까보면서 axios와 redux-thunk 의 차이를 비교해보면 좋을 것이라고 하셨다.

redux-thunk

 

 

 

 

4. Q&A

취업 관련 질문 답변을 정말 잘 해주셔서 이번 챌린지의 꽃(?)이라고도 할 수 있는 시간이었다. 멘토님이 알고 계시는 꿀팁들이 대방출되었다. 이렇게 알려주는 선배이자 멘토가 존재한다는 사실과, 이런 기회를 제공해준 원티드에게도 무한한 감사를 보낸다. 블로그에 적기에는 사적인 내용도 있고, 적어도 되나 싶은 내용도 있어서 혼자 간직하는 것으로 하고 몇 가지 정보들만 추려보았다.

 

• 요즘 기업과제의 추세는 리액트 80 바닐라JS 20 정도의 비율이다.
• Axios는 XMLHttpRequests의 구현체이다.
• 혁신의 숲 https://www.innoforest.co.kr/ 사이트에서 회사 정보를 알 수 있다. 
• 겸손한 이력서의 시대는 지났다. 자기PR이 필요하다.
• 쉽게 붙은 회사는 이유가 있다. 내가 제대로 검증되지 못하고 실수로 붙은 사람일 수도 있다.
• 네트워킹을 (적당히) 하면 매우 도움이 된다. 특히 비슷한 위치에 있는 사람들과의 네트워킹은 취업에 도움 된다.