[ TIL ] Day 50, 51 - 실습 : 타입스크립트 셋팅 & 파일 적용

🗓️ 수업 일자 : 2025.12.4~5

✨ 오늘의 수업 평가 :  [ HARD ]  집중은 했는데, 흡수는 글쎄? 꼭 다시 복습하기!😵‍💫📉

 

이번 미션이 기존에 작업했던 자바스크립트 파일들을 타입스크립트로 변환하는 미션이다보니

그동안 미루고 미뤘던 전체 코드 리뷰의 계기가 되었다. 

 

사실 타입스크립트라는 새로운 이름이 붙어서 그렇지 

사용하는 방식은 기존의 자바스크립트와 크게 다른 부분이 없어서(?)

말 그대로 타입 지정만 잘 해주면 대부분의 오류가 해결되었다..

 

하지만, 작업 하면서도 이게 내가 이해하고 하는 작업인지 확신이 서지 않는 작업이었다.. 

난해하다, 타입스크립트..

 

그럼에도 작업하며 확실하게 느낀 점은

타입스크립트는 단순한 타입 지정을 떠나서 전체 로직의 흐름이 지정한 타입으로 올바르게 사용되는지,

현재의 로직에서 발생할 문제점은 없는지에 대해 검토 해 주는 아주 똑똑한 언어임을 알 수 있었다.

 

하나하나 파일을 다시 들여다 보고 내가 만들었던 로직 중 불필요한 부분 / 보강 할 부분에 대해서

다시 한번 고민하게 하는 작업이 되었다 👍

 

 

👩‍💻 [개인 프로젝트] 오늘 작업 내용 💻
- 전체 파일 타입스크립트로 적용

 

📝  오늘 배운 내용  

- 타입스크립트 셋팅하기

- 타입스크립트 패키지

- JS → TS 변환 시 참고 할 점!

 

---

1. 타입스크립트 설치하기

개발 환경 PKG 다운로드

1) npm init : node.js 개발 환경 셋팅, 이미 node.js 개발환경 이라면 skip 가능

2) npm install --save-dev typescript : 타입스크립트 설치, 개발 환경에서만 사용하므로 꼭 --save-dev 또는 -D 옵션 사용!

3) npx tsc --init : 타입스크립트 설정 파일인 tsconfig.json 생성, TS 환경 기본 설정 자동 세팅

4) npm install -D ts-node nodemon : 작업의 편의성을 높여 줄 패키지 다운로드 후 package.json 셋팅

 

package.json 셋팅 

"main" : "dist/app.js", 
"script": {
   "start" : "node dist/app.js",
   "dev" : "nodemon --watch src --exec ts-node src/app.ts",
   "dev" : "nodemon --watch src src/app.ts", // 간결하게 사용 가능
   "build" : "tsc"
}

 

 

tsconfig.json 셋팅

"rootDir" : "src",      → 작업 한 파일 위치
"outDir" : "disk"       → 변환 된 파일이 들어갈 위치

 

 

2. 타입스크립트 관련 패키지 적용하기

자바스크립트에서 타입스크립트로 변환하는 작업에서,

기존에 쓰던 패키지와 동일한 패키지가 필요한 데 타입 선언 된 패키지가 필요함 

⇒ npm.js에 접속하여 모듈 지원 범위 확인 https://www.npmjs.com/

 

마크 [ DT ] : 별도의 모듈 설치 필요

→ 해당 마크를 누르면 타입스크립트 전용 패키지 페이지로 이동 

해당 패키지를 새로 다운로드 받아야 함 

 

 

 

 

 

마크 [ TS ] : 별도의 모듈 설치 필요없음 

→ 하나의 패키지로 자바스크립트 / 타입스크립트 모두 사용 가능. 기존에 설치 되어 있다면 추가로 패키지를 다운 받을 필요 없음

 

 

 

 

 

 

@types 타입용 패키지 (설치 필요)

• npm install -D @types/express
• npm install -D @types/jsonwebtoken 
• npm install -D @types/multer 
• npm install -D @types/bcrypt
• npm install -D @types/cors
• npm install -D @types/cookie-parser

 

 

JS/TS 공용 패키지 사용 (설치 불필요)

• superstruct 
• nodemon 

 

3. JS → TS 변환 시 참고 할 점! 

1. 작은 단위부터, 가장 독립적인 파일부터 (팀원에게 받은 꿀 팁😉🍯)

아래의 이미지는 app.ts 파일입니다. 모든 파일의 마지막 종착지인 파일이죠.

이렇게 많은 부분이 엮여있는 파일보다는 단일로 사용되는 미들웨어 / 유효성 검증 파일 부터 작업하는 것이 훨신 수월합니다. 

 

middleware, validator, lib, struct 등 > Router 단위로 한 파트씩 진행 > 마지막 전체에 적용되는 app.js 파일 수정 

에러가 발생하고 있는 app.ts 파일

 

2. 여러 패키지들이 제공하고 있는 인터페이스 사용

우리가 작업할 때 사용하는 프로퍼티들은 이미 많은 서비스에서 사용하는 기준과 비슷하기 때문에, 

작업을 위해 설치한 타입용 패키지의 인터페이스들을 보다보면 우리의 모델 구조와 유사한 부분이 나오게 됩니다.

이를 직접 적용하여 사용 하거나, 인터페이스를 재선언 하여 필요한 필드를 확장하는 등 유용하게 사용 할 수 있습니다. 

 

 

3. 단순히 타입 지정만으로 끝나지 않는다 🛡️TS 방어선 구축!

타입스크립트가 변수/객체/함수 등등에 대한 타입 선언만 해 주면 해결되는 것이 아닙니다. 

1차적으로 변수가 사용할 타입을 선언 해 주거나 혹은 값을 통해 추론할 수 있게 해 줬다면, 이후에 사용 할 때에도 동일한 타입으로만 로직이 진행 될 수 있도록 2차 방어선을 만들어 주어야 합니다. 

 

한 예시로 제가 전역 타입 설정으로 req.user의 타입을 prisma에서 제공하는 인터페이스 "USER"로 설정 하였지만, 계속 에러가 발생하였습니다. 그 이유는 req.user값 자체가 없어서 undefined가 생기는 경우에 대해 대응하라는 경고 메세지였습니다. 따라서 2차 방어선으로 req.user의 값이 해당 함수로 전달받지 못한 경우 "유효하지 않다"는 메시지를 반환하도록 처리했습니다.

이미 타입을 선언 했음에도 에러가 발생

정보가 존재하지 않는 경우에 대한 예외 처리 진행

 

 

---

작업 자랑 😉

1. TS 변환 전 / 2. 변환 중간 체크 / 3. 변환 완료! :)

---

 

📃 내일은 뭘 배울까 🤔

- 코드레벨 아키텍쳐 : 레이어 아키텍쳐