개요

이 글은 강좌가 아닙니다. 부족한 부분이 있더라도, 너그럽게 봐주신다면 감사하겠습니다. 피드백 언제나 환영입니다 :)

원래라면

원래라면 세기말 플레티넘 도전을 위해 주말 내내 롤을 하고있었겠지만, 강등당한 이후 포기하고 자기계발에 힘쓰려 합니다. 팀운 x망겜 그럼 한번 시작해보죠!

create-react-app

우선 create-react-app 으로 새 프로젝트를 만들어요.

    $ npx create-react-app EmojiBingo --typescript

그 후, 필요한 모듈들을 설치해요.

    $ yarn add styled-components
    $ yarn add @types/styled-components // styled-components 설치

다 설치가 완료되었다면, 구조를 아래와 같이 바꿔보아요.

    src/
        components/
        containers/
        hooks/
            App.tsx
            index.css
            index.tsx
            react-app-env.d.ts
            serviceWorker.ts
            ...

원래 mobX 스토어를 통해 상태관리를 하려했는데, 지금은 크게 필요가 없을거 같아서 나중에 설치하도록 해요. 이번 프로젝트의 관건은 얼마나 custom-hooks를 잘 만들것인가 인데... 힘내야겠네요.

tsconfig

tsconfig.json을 입맛대로 수정해주세요. 많은 속성들이 있지만, 저는 크게 바꾼 부분은 없는거 같아요.

    {
        "compilerOptions": {
              "target": "ES2017", // 사용할 ECMAScript 버전 설정
        "lib": [
          "dom",
          "dom.iterable",
          "esnext"
        ],
        "allowJs": true, // js파일 컴파일 허용 여부
        "skipLibCheck": true, //
        "esModuleInterop": true,
        "experimentalDecorators": true,
        "allowSyntheticDefaultImports": true,
        "strict": true, // 타입 엄격한 검사 활성화
        "strictNullChecks": true, // null과 undefined 구분 여부 활성화
        "forceConsistentCasingInFileNames": true,
        "module": "esnext",
        "moduleResolution": "node",
        "resolveJsonModule": true,
        "isolatedModules": true,
        "noEmit": false, 
        "locale": "ko", // 에러 메세지를 한국어로
        "pretty": true, // 에러 메세지를 예쁘게
        "allowUnusedLabels": false,
        "jsx": "react"
      },
      "include": [
        "src"
      ]
  }

저도 속성들을 다 알지는 못하겠어요. 나머지 부분은
https://www.typescriptlang.org/docs/handbook/tsconfig-json.html 에서 확인해요.

이외에도

prettier, eslint 등 여러가지를 설정해줄수 있지만, 이번 프로젝트에서는 tsconfig.json만 수정할게요.

저장소

모든 코드와 진행과정은 https://github.com/mango906/EmojiBingo 에서 확인 가능합니다.