[타입스크립트 디자인 패턴] 프롤로그 + 1장

Ooleem·약 19시간 전
0

타입스크립트

목록 보기
1/1

원래는 "객체지향의 사실과 오해" 완독 스터디를 하면서 나만무 최종 프로젝트와 연결지어서 공부를 하려고 했는데.. 문제는 내가 타입스크립트와 NestJS, Next.js에 대한 이해가 너무 부족한 것 같았다.

과제가 아예 진행이 안 되서, 이대로는 안 되겠다 생각하고 타입스크립트부터 먼저 공부해야겠다 싶어서 고른 책, "타입스크립트 디자인 패턴"이다.

개인 블로그를 따로 만들어놓긴 했는데, 아무래도 이거 읽으면서는 각 잡힌 글로 정리하기 힘들 것 같아서 여기에 올려본다. 나중에 정리된 글을 쓸 정도로 이해도가 높아지면 다듬어보려고 한다.

1장. 도구와 프레임워크

사실 이 책이 2017년도 책이라 이 부분은 그대로 받아들이기 어려운 부분들이 좀 있는 것 같다. "이런 게 있었구나"하고 새로운 키워드를 알게 되는 데 집중해야겠다.

타입스크립트 프로젝트 구성

tsconfig.json

예시) 실제로 GoodJob_backend 리포지토리의 tsconfig.json

{
    "compilerOptions": {
        "module": "nodenext",
        "moduleResolution": "nodenext",
        "resolvePackageJsonExports": true,
        "esModuleInterop": true,
        "isolatedModules": true,
        "declaration": true,
        "removeComments": true,
        "emitDecoratorMetadata": true,
        "experimentalDecorators": true,
        "allowSyntheticDefaultImports": true,
        "target": "ES2023",
        "lib": ["ES2023", "DOM"],
        "sourceMap": true,
        "outDir": "./dist",
        "baseUrl": "./",
        "paths": {
            "@/*": ["src/*"],
            "@/config/*": ["src/config/*"],
            "@/auth/*": ["src/auth/*"],
            "@/database/*": ["src/database/*"],
            "@/lib/*": ["src/lib/*"],
            "@/modules/*": ["src/modules/*"],
            "@/onboarding/*": ["src/onboarding/*"],
            "@/ai/*": ["src/ai/*"],
            "@/stt/*": ["src/stt/*"],
            "@/tts/*": ["src/tts/*"],
            "@/types/*": ["src/types/*"]
        },
        "incremental": true,
        "skipLibCheck": true,
        "strictNullChecks": true,
        "forceConsistentCasingInFileNames": true,
        "noImplicitAny": false,
        "strictBindCallApply": false,
        "noFallthroughCasesInSwitch": false,
        "typeRoots": ["./node_modules/@types", "./src/types"]
    },
    "include": ["src/**/*", "test/**/*", "scripts/**/*"],
    "exclude": ["node_modules", "dist"]
}

컴파일러 옵션 (compilerOptions)

  • target: 타입스크립트 파일을 어떤 버전의 자바스크립트로 바꿔줄지 정하는 부분
    예시) es5로 세팅하면 es5 버전 자바스크립트로 컴파일
  • module: 자바스크립트 파일간 import 문법을 구현할 때 어떤 문법을 쓸지 정하는 곳
    책에서는 commonjs 쓰라고 하는 것 같은데, 우리는 nodenext를 사용
    모듈 관련 아티클 -> https://toss.tech/article/commonjs-esm-exports-field
  • declaration: 활성화하면 자바스크립트 출력과 함께 .d.ts 선언 파일을 생성 (현재 사용하는 모든 타입이 저장됨)
  • strictNullChecks:

(나중에 계속 업데이트 예정..)

profile
자동기술법 블로그 (퀵메모 용도)

0개의 댓글