이 글은 강좌가 아닙니다. 부족한 부분이 있더라도, 너그럽게 봐주신다면 감사하겠습니다. 피드백 언제나 환영입니다 :)
원래라면 세기말 플레티넘 도전을 위해 주말 내내 롤을 하고있었겠지만, 강등당한 이후 포기하고 자기계발에 힘쓰려 합니다. ~팀운 x망겜~ 그럼 한번 시작해보죠!
우선 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.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 에서 확인 가능합니다.