[ React ] React 설치

React를 사용하는 데에는 많은 방법이 있지만, 여기서는 커맨드-라인 인터페이스(command-line interface; CLI) 툴인 create-react-app을 사용할 겁니다. 이 툴은 패키지를 설치하고 파일들을 생성하여 툴링들로 개발하는 과정을 신속히 처리함

 

create-react-app 없이 웹 사이트에 React를 추가하는 것은 HTML 파일에서 <script>요소들을 복사해오는 것으로 가능하지만, create-react-app CLI는 React 애플리케이션을 만드는 가장 흔한 시작점임. 애플리케이션을 빌드하는 데에는 더 많은 시간이 걸리나 설정에 걸리는 시간은 줄일 수 있습니다.

<script>: 스크립트 요소 - HTML: Hypertext Markup Language | MDN

Add React to an Existing Project – React

 

설치 과정

1.  Node.js를 설치 :  LTS(오랜 기간 지원된; long-term support) 버전을 사용하는 것을 추천. Node는 npm(the node package manager)와 npx (the node package runner)를 포함함.

2. 작업용 새로운 폴더 만들고, 우클릭 -> '폴더에서 새로운 터미널 열기' -> npx create-react-app 프로젝트명 입력 (오류시 : sudo npx create-react-app 프로젝트명 입력)

3. VScode에서 만들어둔 파일 Open

4. src 폴더중 App.js에서 코드 작성

5. 미리보기는 터미널 -> 새로운 터미널->npm start 입력

( npm start 오류시 : (맥 보안 때문)

sudo chown -R $USER /Users/parkseunghui/Desktop/ConnecTeam/project/node_modules <- 경로)

https://codingapple.com/forums/topic/sudo-npx-create-react-app-blog%EB%8F%8C%EB%A6%AC%EA%B3%A0-npm-start%EB%8F%8C%EB%A6%AC%EB%A9%B4-%EB%9C%A8%EB%8A%94-%EC%98%A4%EB%A5%98/

맥북 npm start시 permission denied mkdir 오류... - 코딩애플 온라인 강좌

- npm start 오류 : -> package.json파일에서 터미널 열고 npm start하기 / 디버깅 해보기 / cd 프로젝트 해서 경로 똑바로 찾아가보기

https://velog.io/@osohyun0224/npm-start-오류-해결-방법-총정리-missinng-script

- 'Retry as Sudo' to retry as superuser : VS 저장 오류

echo $USER

• 유저이름이 출력된다.

echo $HOME

• 홈디렉토리가 출력된다.

sudo chown -R [유저이름] [홈디렉토리]