[React] 00. React 시작하기부터 VS Code HTML 자동화까지

 

 

 

 

 

📌React 설치 순서

---

1. Node.js 설치
2. VS Code 설치
3. 프로젝트 생성
4. 간단 React 구조

 

 

🙆‍♂️Node.js 설치

---

https://nodejs.org/ko/

Node.js

 

 

 

위 사이트에서 LTS 버전으로 설치하시면 됩니다.

 

 

🙋‍♂️VS Code 설치

---

https://code.visualstudio.com/

Visual Studio Code - Code Editing. Redefined

 

 

Download 버튼을 통해서 다운로드를 진행하시면 됩니다.

 

 

🤷‍♂️ 프로젝트 생성

---

https://create-react-app.dev/docs/getting-started

Getting Started | Create React App

React 프로젝트를 간단하게 설치하는 앱? 라이브러리 입니다. 이것을 사용해서 React 프로젝트를 만들어보겠습니다.

 

 

 

먼저 바탕화면에 프로젝트 폴더를 생성합니다.

 

이 폴더를 Shift+우클릭을 해서 여기에 PowerShell 창 열기를 합니다.

아니면 PowerShell로 직접 경로 이동해서 찾아가도 됩니다.

 

이렇게 이동된 모습이고

 

npx create-react-app %PROJECT_NAME%

이렇게 %PROJECT_NAME%에는 원하는 프로젝트 며을 작성해주고 엔터치면 react 설치가 진행됩니다.

 

저는 Success라고 나오며 잘 됐다고 합니다.

 

만약 허가되지 않은 스크립트 에러가 난다면

Set-ExecutionPolicy Unrestricted

명령어를 입력하고 y해서 설정해주면 됩니다.

 

 

이제 설치가 완료된 프로젝트를 VS Code로 열어보겠습니다.

 

VS Code에서 파일 > 폴더 열기 > 만들어진 파일을 선택하면 됩니다. 맨처음 만든 프로젝트 폴더를 선택하는 것이 아닌

PowerShell로 생성한 프로젝트 폴더를 선택하는 것입니다.

 

 

💆‍♂️간단 React 구조

---

이렇게 src 폴더 밑에 App.js에 코드를 짜서 넣을 수 있습니다.

 

그리고 미리보기도 가능한데 

 

VS Code에서 터미널 > 새 터미널을 하거나 Ctrl+Shift+`(백틱)을 해주면 터미널이 나옵니다.

 

이곳에서 npm start라고 입력해주면 됩니다.

 

 

그럼 이렇게 라이브 브라우저가 잘 나옵니다.

 

🚀VS Code에서 HTML 자동완성 키는 법

---

1. Ctrl+ ,(콤마)를 하거나 파일 > 기본설정 > 설정에 들어가서 설정창 키기

 

2. include language 검색

 

 

3. 항목추가 클릭 후 항목에 javascript 값에 javascriptreact 넣은 후 확인

 

4. 끝