Typescript + React + Styled-components + Router 초기세팅

1. Create React App(CRA) & Typescript 설치

npx create-react-app [프로젝트명] --template typescript

위의 명령어를 실행하면 아래와 같이 설치가 진행되고...

설치 완료 메시지와 함께 개발하면서 사용할 수 있는 몇 가지 명령어를 친절하게 알려준다.

프로젝트 폴더로 이동해서 다음 스텝을 진행한다.

2. Styled-components & Styled-reset & React-Router-Dom 설치

npm install styled-components @types/styled-components
npm install styled-reset
npm install react-router-dom @types/react-router-dom

마찬가지로 위의 명령어를 각각 실행하면 설치가 완료되고
아래와 같이 package.json 파일의 dependencies에 패키지 정보들이 잘 추가되어 있는 걸 확인할 수 있다.

🧐dependencies에 패키지 정보를 추가하기 위해 썼던 --save 옵션은 npm 5 버전부터 자동으로 추가되어 사용하지 않아도 된다!

3. 파일 정리

패키지 설치를 끝내면 Visual Studio Code에서 필요 없는 파일들을 정리한다.

정리 전	정리 후

4. 전역 스타일 지정

이제 전역 스타일을 정의한다.먼저 src 폴더 하단에 styles 폴더를 만들고 GlobalStyle.ts, styles.d.ts, theme.ts 파일을 생성한다.

4-1. GlobalStyles.ts

이 파일에서는 브라우저마다 다른 기본 스타일을 초기화하고 전역에서 쓰일 스타일들을 정의한다.

4-2. theme.ts

theme.ts 파일에는 자주 쓰이는 스타일, 예를 들면 브랜드 컬러나 폰트 사이즈 등을 지정해둔다.
각각의 타입을 typeof 연산자로 산출해 지정하고, 다른 컴포넌트에서 쓰일 수 있도록 export 한다.

4-3. styles.d.ts

DefaultTheme에 타입을 추가해준다.

4-4. index.tsx

위에서 지정한 스타일을 적용할 수 있도록 index.tsx 파일에 다음과 같이 불러온다.

5. Router 설정

위의 모든 설정이 끝나면 src 폴더에 pages 폴더를 만들어 프로젝트에서 구현할 페이지 파일을 생성한다.
나는 다음과 같이 폴더를 구성해 페이지별로 파일을 만들어두었다.

마지막으로 src 폴더에 Router.tsx 파일을 생성하고, 위에서 export한 페이지의 path를 지정해주면 초기 세팅은 마무리된다.