약 한달 조금 넘는 기간동안 진행했던 TypeScript 스터디를 마치고, 다음 스터디로 무엇을 진행할까 하다 나온 주제가 '오픈 소스 열어보기'였다.

이전 👀TypeScript 스터디 보러가기

스터디의 사전(pre) 스터디

그런데 처음부터 너무 큰 프로젝트를 열어보면 아직 감이 없는 우리가 보기 힘들 것 같아서 규모가 상대적으로 작은 것부터 열어보기로 하였고,
그렇게 선정한 것이 우테코에서 진행된 프로젝트를 열어보는 것 이었다.

말이 웃기지만 앞서 말했듯이 큰 프로젝트를 열어보기 전 감을 잡고자하는 스터디의 pre-스터디를 위해 정한 레포가 우테코의 달롱이었다.

프로젝트의 서비스도 유용해보이고, 보기 좋을 것 같아보여 선정하게 되었다.
스터디에서 논의할 방향은 다음과 같다.

각자 맘에 들거나 관심가는 기능을 정하고, 해당 기능의 flow를 따라서 코드 뜯어보기.

일단 config부터!

tsconfig.json

프로젝트 코드를 따라가기 전에 일단 어떻게 설정되어 있는지 보기 위해 tsconfig파일을 열어보았다.

// tsconfig.json
{
  "compilerOptions": {
    "target": "esnext",
    "module": "ESNext",
    "jsx": "react-jsx",
    "forceConsistentCasingInFileNames": true,
    "strict": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "jsxImportSource": "@emotion/react",
    "moduleResolution": "node",
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"]
    }
  },
  "exclude": ["node_modules"],
  "include": ["src"]
}

• target: TypeScript 코드가 컴파일될 ECMAScript 버전을 지정
  • esnext는 최신 JavaScript 문법을 사용할 수 있다.
• module: TypeScript 모듈 시스템을 지정
  • ESNext는 최신의 ECMAScript 모듈 시스템을 사용할 수 있다.
    jsx: React 코드에서 JSX를 사용할 수 있도록 지원
  • react-jsx 옵션을 사용합니다.
• forceConsistentCasingInFileNames: 파일 이름에 대한 일관성 검사를 강제로 수행하도록 설정
• strict: 엄격한 타입 검사를 수행하도록 설정(true)
• skipLibCheck: 라이브러리 파일의 타입 검사를 생략하도록 설정(true)
• esModuleInterop: CommonJS 모듈을 ES 모듈로 변환할 때 ES 모듈의 default 내보내기(import/export)를 사용하도록 설정(true)
• jsxImportSource: React JSX를 변환할 때 사용되는 라이브러리를 지정
  • @emotion/react를 사용하도록 합니다.
• moduleResolution: 모듈 해석 방식을 지정
  • node는 Node.js의 해석 방식을 따릅니다.
• baseUrl: 상대 경로를 계산할 때 사용되는 기본 디렉토리를 설정
  • 이 경우 .으로 설정하여 프로젝트 루트 디렉토리를 기본 디렉토리로 사용합니다.
• paths: 상대 경로 대신 사용될 모듈 이름을 설정
  • @/ 패턴으로 시작하는 모듈 이름은 src/ 디렉토리 내의 파일로 해석

---

이걸 보면 일단 NextJS를 썼구나~싶고, 눈에 띄는 옵션은 "forceConsistentCasingInFileNames": true, "strict": true, "jsxImportSource": "@emotion/react"이었다.

참고

• "forceConsistentCasingInFileNames": true
• "jsxImportSource": "@emotion/react"

---

babel.config.json

// babel.config.json
module.exports = {
  presets: [
    '@babel/preset-react',
    '@babel/preset-env',
    '@babel/preset-typescript',
    '@emotion/babel-preset-css-prop',
  ],
  plugins: [
    '@emotion',
    [
      '@babel/plugin-transform-runtime',
      {
        corejs: 3,
        proposals: true,
      },
    ],
  ],
};

그 다음은 babel의 config파일이다. 4개의 프리셋과 2개의 플러그인으로 구성된다.

프리셋과 플러그인의 차이

• 프리셋: 플러그인의 집합체로써, 특정 목정을 위한 컴파일 규칙들의 집합체
• 플러그인: 단일 컴파일 규칙으로 구성된 babel의 확장

프리셋

• @babel/preset-react: React 애플리케이션의 JSX 구문을 JavaScript로 변환
• @babel/preset-env: 최신의 ECMAScript 기능을 사용하여 JavaScript 코드를 변환.
  • 이 프리셋은 Babel이 지원하는 가장 최신의 ECMAScript 버전을 사용할 수 있습니다.
• @babel/preset-typescript: TypeScript를 JavaScript로 변환
• @emotion/babel-preset-css-prop: Emotion의 css 프로퍼티를 사용하여 CSS를 적용할 수 있도록 설정

플러그인

• @emotion: Emotion을 Babel과 통합.
  • 이 플러그인은 Emotion에서 사용하는 컴파일러 플러그인을 지정합니다.
• @babel/plugin-transform-runtime: Babel을 사용하여 빌드된 애플리케이션에서 Polyfill을 사용할 수 있도록 합니다.
  • 이 플러그인은 corejs와 proposals 옵션을 사용하여 @babel/runtime 모듈의 필요한 버전을 설정합니다.

모르는 부분은 chatGPT 참고 ✌😉

---

그 밖의 config들

위 외에도 Webpack, Jest에 대한 config가 있었는데, 일단은 위 두개가 가장 궁금했기 때문에 둘을 먼저 살펴보았고, 이 두개는 차후로 미뤘다.

당장 스터디의 목적이 우리가 공부한 TypeScript의 실 적용에 대한 걸 보려고 한건데 config파일만 들여보느라 시간이 너무 갈것 같아서이다.

이건 차후 업데이트하도록 하고, 이제 Types들을 보러가자.

eslint와 pretierr는 코드 스타일에 대한 설정이라 공부목적에 대해서는 중요성이 약간 떨어지니 차차후