[Githru.v] TS 프로젝트 초기 설정 하기_후... 쉽지 않다

0724 첫 과제

parser를 선택하게 된 이유

input이 문자열이고, 세부 정보들을 파싱하고 분류해서 나누는 작업을 하는 게 repository 이름으로 PR 정보를 들고 오는 crawler보다 조금 더 까다로울 것 같아서 도전해보고 싶었다.

git log 명령어로 나온 내용을 파싱하는 작업! 재밌을 것 같아서 선택하게 됐다.

수행 목록

1. yarn init
2. yarn add --dev @typescript-eslint/parser @typescript-eslint/eslint-plugin eslint typescript
3. .eslintrc.cjs 생성
4. .gitignore 생성
5. tsc --init
6. tsconfig.json 설정
7. npm install -g ts-node
8. src/index.ts, src/gitLogToJSONParser.ts 생성
9. README.md 생성

발생한 문제점

index.ts를 돌리는 script를 작성하는데에 어려움이 있었다.

항상 react-scripts로 하여 이런 문제가 발생한 것은 처음이라 많이 헤맸다.

Error: Cannot find module './index.ts'

TypeError [ERR_UNKNOWN_FILE_EXTENSION]: Unknown file extension ".ts" for /Users/chaejungkim/Desktop/open source/2022-tutorial/parser/blcklamb/src/index.ts

등의 오류가 발생했다.

해결 방법

ts-node를 새로 설치하고,

//package.json
"scripts": {
    "start": "ts-node src/index.ts"
  },

//tsconfig.json

{
  "compilerOptions": {
    "target": "es6",
    "lib": [
      "dom",
      "es6",
      "es2016",
      "es2017"
    ] ,
    "module": "CommonJS"
...
}
}

다음과 같이 설치하니 정상적으로 작동하게 되었다.

폴더 및 파일 구조

🪡 eslintrc.cjs

// https://typescript-eslint.io/docs/
// https://typescript-eslint.io/docs/linting/typed-linting

module.exports = {
  extends: [
    "eslint:recommended",
    "plugin:@typescript-eslint/recommended",
    "plugin:@typescript-eslint/recommended-requiring-type-checking",
  ],
  // 소스 파일을 분석할 때 어떤 패키지를 쓰는지
  parser: "@typescript-eslint/parser",
  parserOptions: {
    // 분석 프로그램에게 프로젝트의 루트 파일의 절대 경로를 알려준다
    tsconfigRootDir: __dirname,
    // 분석 프로그램에게 프로젝트의 tsconfig.json 파일이 어딨는지 알려준다
    project: ["./tsconfig.json"],
  },
  plugins: ["@typescript-eslint"],
  root: true,
};

🤹‍♀️ package.json

{
  "name": "parser-blcklamb",
  "version": "1.0.0",
  "description": "OSS githru.v parser for making JSON from git log command on console",
  "main": "index.js",
  "repository": "https://github.com/blcklamb/2022-tutorial",
  "author": "Chaejung Kim",
  "license": "MIT",
  "scripts": {
    "start": "ts-node src/index.ts"
  },
  "devDependencies": {
    "@typescript-eslint/eslint-plugin": "^5.30.7",
    "@typescript-eslint/parser": "^5.30.7",
    "eslint": "^8.20.0",
    "ts-node": "^10.9.1",
    "typescript": "^4.7.4"
  }
}

🚧 tsconfig.json

{
  "compilerOptions": {
    /* Visit https://aka.ms/tsconfig to read more about this file */

    /* Language and Environment */
    "target": "es6" /* Set the JavaScript language version for emitted JavaScript and include compatible library declarations. */,
    "lib": [
      "dom",
      "es6",
      "es2016",
      "es2017"
    ] /* Specify a set of bundled library declaration files that describe the target runtime environment. */,

    /* Modules */
    "module": "CommonJS" /* Specify what module code is generated. */,
    "rootDir": "src" /* Specify the root folder within your source files. */,
    "outDir": "dist",
    "moduleResolution": "node" /* Specify how TypeScript looks up a file from a given module specifier. */,
    "resolveJsonModule": true /* Enable importing .json files. */,

    /* JavaScript Support */
    "allowJs": true /* Allow JavaScript files to be a part of your program. Use the 'checkJS' option to get errors from these files. */,

    /* Emit */
    "sourceMap": true /* Create source map files for emitted JavaScript files. */,
    "noEmit": true /* Disable emitting files from a compilation. */,

    /* Interop Constraints */
    "isolatedModules": true /* Ensure that each file can be safely transpiled without relying on other imports. */,
    "allowSyntheticDefaultImports": true /* Allow 'import x from y' when a module doesn't have a default export. */,
    "esModuleInterop": true /* Emit additional JavaScript to ease support for importing CommonJS modules. This enables 'allowSyntheticDefaultImports' for type compatibility. */,
    "forceConsistentCasingInFileNames": true /* Ensure that casing is correct in imports. */,

    /* Type Checking */
    "strict": true /* Enable all strict type-checking options. */,
    "noImplicitAny": true /* Enable error reporting for expressions and declarations with an implied 'any' type. */,
    "strictNullChecks": true /* When type checking, take into account 'null' and 'undefined'. */,
    "noImplicitThis": true /* Enable error reporting when 'this' is given the type 'any'. */,
    "noUnusedLocals": false /* Enable error reporting when local variables aren't read. */,
    "noUnusedParameters": true /* Raise an error when a function parameter isn't read. */,
    "noImplicitReturns": true /* Enable error reporting for codepaths that do not explicitly return in a function. */,

    /* Completeness */
    "skipLibCheck": true /* Skip type checking all .d.ts files. */
  },
  "include": ["src/**/*"],
  "exclude": ["node_modules"]
}

궁금한 점 및 더 공부할 점

• tsconfig 목록
  이유: 지금까지 그래온 것처럼 Creat-React-App이 아니라 밑바닥부터 프로젝트 설계를 하려니 모르는 부분이 정말 많았는데 관련하여 ts 설정 세부 사항에 대해 좀 더 알아보고 싶다.
• build 파일 작성법
  이유: 다른 분들께서는 build 파일을 작성하였는데, 나는 아직 해당 파일을 다루는 법을 모르겠다.
• dist
  이유: 다음과 같은 오류가 발생하여 dist를 script에서 제외시켰는데, 정확한 작동 방식을 알아보고 싶다.
  

• ts-node를 쓰지 않고, ts 파일을 실행시키는 법
  이유: ts file이 extenstion 되지 않아 임시방편으로 ts-node를 넣었는데, 다른 분들처럼 cd dist && node index.js가 작동되도록 설정해보고 싶다.

느낀 점

지금까지 프레임워크가 익숙하고, 새롭게 프로젝트를 시작할 때도 기존 프로젝트를 그대로 따와서 시작했기 때문에 초기 설정의 어려움을 이렇게 느껴본 적이 없다. 지금은 React도 아니고 퓨어 타입스크립트로 코드를 작성하는 것이기 때문이다.

그리고 경험이 많았다면 여러 초기 설정값들에 대해 신중히 고를 수 있었을텐데 아직 아무것도 모르는 상태이기에 이 설정값이 진짜 필요한 것인지도 판단하기 어려운 수준이다.

언젠간 경험을 쌓고 쌓다보면 나만의 custom configuration도 만들 수 있을 것이다.

더불어 연습 과제임에도 이렇게 어려움을 겪는 것이 다소 부끄럽고, 앞으로 더 힘든 날이 올 것이라는 암시로도 느껴지지만,
이렇게 내가 부족한 부분들을 찾고 메꿔나가는 과정은 개발 공부에 있어서 불가피하지 않나 싶다.