create-react-app 타입스크립트 사용하기

설치하기

리액트 프로젝트를 시작하기 위해서는 바벨, 웹팩등을 설정해야합니다.
초기 설정에 많은 시간이 걸립니다.
create-react-app을 통해 초기 설정 시간을 단축 할 수 있습니다.
리액트의 사용법은 리액트 공식문서를 통해 배울수 있습니다.

npx create-react-app my-app --typescript
cd my-app
npm run start

사용방법

npm run start을 하면 프로젝트가 시작되며 연동되어 있는 웹브라우저에서 접속됩니다.
다음과 같은 페이지가 나올경우 성공한것입니다.

기본 url은 http://locahost:3000입니다.

폴더 및 파일 용도

eject 를 할시에 숨겨져있던 웹팩, 스크립트등의 파일이 생성됩니다.
웹팩이나 바벨등의 설정을 커스텀 할 것이 아니라면 되도록 npm run eject를 사용하지 않는 것이 좋습니다.

src

소스 파일을 저장하는 장소입니다.
컴포넌트, 컨테이너, 리덕스 모듈등은 여기서 관리합니다.

scripts

eject 시에만 보입니다.
package.json에서 사용하는 scripts의 파일입니다.

config

eject 시에만 보입니다.
웹팩 설정이 첨부 되어있는 폴더 입니다.

package.json

npm 패키지 설치 리스트 및 프로젝트 정보가 저장되어있는 파일입니다.

node_modules

package.json 의 패키지 파일이 실제로 저장되어 있는 폴더입니다.

시작 오류

node_modules폴더를 삭제후 다시 설치 npm install 을 합니다.

SCSS 오류

최신 create react app 버전 이라면 scss 가 자동으로 설정되어 있습니다.

import styles from './stylesheets.scss'

이런식의 파일을 불러올때 styles 부분에 빨간밑줄이 나오는 경우가 있습니다.
react-app-env.d.ts 파일에 아래부분의 내용을 추가하면 정상 작동합니다.

declare module '*.scss' {
	const classes: { [key: string]: string };
	export default classes;
}

declare module '*.sass' {
	const classes: { [key: string]: string };
	export default classes;
}