210306_TIL (Typescript, Dev Matching)

🍎 오늘 한 일

---

Typescript
유튜브 영상으로 대충 왜 사용하는지 정도만 알고있었는데, Typescript로 이런저런 코드들을 테스트해봤다. 이름 그대로 Type을 지정하는 Javascript이기도 하고, 인터페이스나 클래스를 이용해서 입출력 데이터 타입을 확실히 지정할 수 있고, 덕분에 실수들을 방지할 수 있다는 장점이 있었다. 타입스크립트를 쓰면 함수나 인자들이 많아져도 자잘한 실수로 인해서 undefined가 뜨는 경우를 방지할 수 있을 것 같다. 

프로그래머스 Dev Matching
순수 바닐라 자바스크립트만으로만 평가를 한다고해서 복습도 할 겸 가벼운 마음으로 참가해봤다. 세시간동안 페이지에서 기능의 일부분을 구현하는 과제였는데, 알아서 자동완성을 해주고 문법도 고쳐주던 익스텐션 하나 없이 순수 HTML, CSS, Javscript만 사용하니까 생각보다 기본적인 명령어도 헷갈려서 엄청 검색해봤던 것 같다. 시간이 생각보다 빨리가서 마지막에 세션에 api요청을 저장하는 부분은 하다말고 제출해야했다. 짧은시간이지만 짧고 굵게 복습 + 공부를 한것같다,, 잊기전에 새로 알게된것들은 기록해둬야지..!

 

🍎 기억할 것

---

Typescript - tsconfig.json 파일
1. compilerOptions : tsc 명령 형식 옵션
module : 웹브라우저나 Node.js 를 구분해 맞는 모듈방식으로 컴파일
moduleResolution : module값에 따라 설정
target : 트랜스파일할 대상 Javascript 버전 설정
baseUrl : 트랜스파일된 js 파일 저장하는 디렉터리 설정 (보통 . 으로 설정)
outDir : baseUrl 설정값을 기준으로 했을 때의 하위 디렉터리명
paths : import문에서 from부분을 해석할 때 찾아야하는 디렉터리 설정
paths : import문에서 from부분을 해석할 때 찾아야하는 디렉터리 설정
sourceMap : .js.map 파일 생성
downlevelIteration : generator을 정상작동시키려면 true로 설정해야함
nolmplicitAny : 기본적으로 타입명시 안하면 암묵적으로 any 타입을 설정한걸로 간주

2. include : 대상 파일 목록

Typescript - Interface 선언문
object 타입은 interface, class의 상위 타입이다. object에는 마구잡이로 값을 넣을 수 있지만, interface는 하나하나 타입을 지정해둔 것! 어떤 속성이 있어야한다는 규약에 불과할 뿐, 진짜로 만들어주지는 않기 때문에 class 안에 반드시 인터페이스가 정의하고있는 속성을 멤버 속성으로 포함해야한다. (= 직접 만들어야됨)

 

🍎 더 공부할 것

---

✔️ Typescript 로 간단한 웹페이지 만들어보기
✔️ MVC 패턴, 인증 복습