[02] react 프로젝트 생성

2022. 2. 13. 21:30

일단 프로젝트부터 만들고 무언갈 시작하려고 바로 터미널키고 프로젝트 부터 만들엇다 ㅋ.ㅋ

나는 타입스크립트를 써서 만들어 볼것이기 때문에 --template typescript를 명시하였다.

npx create-react-app 플젝이름 --template typescript

 

띠용? 근데 프로젝트가 안만들어지고 

??

자꾸 요런 오류가 뜨는 것이어따. 그래서 구글링을 해본 결과,, 킹짱오버플로우 에서 해결방법을 찾을수 있었는데 캐시를 지워주고 실행하면 된다는 것이어따!

npx clear-npx-cache

아무튼 그렇게 첫 리액트 프로젝트를 만들었다. 

그러고서, 추가적으로 필요한 라이브러리를 추가해 주었다.

npm i --save react react-dom typescript
npm i --save-dev @types/react @types/react-dom @types/node

헤헤

 

그리고 경로가 꼬일 수 있기 때문에  초기설정을 해두어야 한다고 한다. 

tsconfig.json 파일에 baseUrl: "./src"로 설정을 해주었다. 

 

 

그리고 여기저기 찾아보니, eslint라는 도구를 사용하는것이 좋다는 글들을 많이 보았다.

그래서 한번 사용해보기로,,하였다... 

eslint.org

 

ESLint - Pluggable JavaScript linter

Customize Preprocess code, use custom parsers, and write your own rules that work alongside ESLint's built-in rules. You can customize ESLint to work exactly the way you need it for your project.

eslint.org

vscode의 익스텐션에서 eslint를 설치해주고, 프로젝트에서 

npm install -D eslint

설치해주고, 프로젝트의 루트 폴더에 

npx eslint --init

을 해준다.

 

추가 플러그인 같은 경우에는 

https://koras02.tistory.com/106

 

[React] create-react-app & Typescript 초기 세팅법 완벽 정리

🥩 Typescript & create-react-app 최근 타입스크립트 강의를 들으면서 create-react-app을 설정하는 법이 궁금했다. 왜냐면 React 제일 많이 사용해보았고 포트폴리오도 React로 주 언어로 개발했기 때문이다..

koras02.tistory.com

요 블로그를 참고하여 설치하였다. 

 

 

이렇게 일단 리액트 프로젝트를 만들어보았다. 

시작이 반이니까 일단 반 한게 아닐까? ㅋㅋ

일단 이 설레는 마음을 안고 공식문서를 보며 뷰를 한번 짜 보고 다음 글을 써야겠다. 

'TypeScript' 카테고리의 다른 글

[01] Mac에 TypeScript 개발환경 구축  (0) 2022.02.12