React+TypeScript 개발환경 세팅 및 Startup

패키지 매니저 NPM 사용 시

 

※ 일반적인 React 프로젝트 시작 시

https://developer.mozilla.org/ko/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_getting_started

React 시작하기 - Web 개발 학습하기 | MDN

 

 

npx create-react-app demo-jpkim --template=typescript

npm install -S styled-components react-router-dom dotenv
npm install --save-dev @types/styled-components babel-plugin-styled-components @types/react-router-dom
npm install -D gh-pages
npm audit fix

npm install

 

패키지 매니저 Yarn 사용 시

저장소 등록하기

$ curl --silent --location https://dl.yarnpkg.com/rpm/yarn.repo | sudo tee /etc/yum.repos.d/yarn.repo

 

설치하기

$ sudo yum install yarn
## 또는 ##
$ sudo dnf install yarn

$ yarn set version stable (꼭해야하는건 아님)
$ yarn -v
$ yarn init

그리고 demo-app 경로를 만들고 yarn.lock 파일을 vi로 생성해준다. 그리고 React Workspace를 Create한다.

$ yarn create react-app demo-app --template typescript

 

개발이 일단락되면 관련 패키지를 다운로드 한다. 

$ cd demo-app
$ yarn install

yarn run만 입력했을 때, package.json 파일에 scripts가 명시된 것이 없다면 패키지에서 실행할 수 있는 모든 스크립트를 나열한다. 반면에, scripts를 정의해둔다면, scripts에서 매핑했던 명령어들이 나열되고, 어떤 명령어를 쓸지 선택할 수 있도록 해준다.

 

Script를 Workspace별로 나누었을때 실행방법(NPM 방식도 유사)

$ yarn workspaceName build // 미들웨어 등을 쓸 경우 Artifact 생성 
$ yarn workspaceName start // 이 경우는 빌드 및 Startup 수행

 

※ Craco Add 하기

$ yarn add craco-alias @craco/craco