[리액트] 시작하기

 

개발환경 구성하기

 

1) Node.js

설치확인

 

window

1. 명령프롬프트 실행 : Winkey + R > cmd (엔터)
2. 명령어 수행 : node --version

MacOS

1. 터미널 실행 : cmd + space > terminal (엔터)
2. 명령어 수행 : node --version

결과값이 출력되지 않을 경우 설치

 

 

설치하기

• https://nodejs.org 에서 프로그램 내려받아 설치.
• 대부분의 경우 LTS 버전 권장.
• Mac M1 버전의 경우 17 이상 버전 필요함.
• 설치 완료 후 열어두었던 명령프롬프트나 터미널을 종료하고 재시작.
• 앞서 수행한 버전확인 명령어를 통해 설치 완료 확인.

 

 

2) yarn

npm install -g yarn

 

 

3) visual studio code

 

작업시 도움되는 extension

 

color Highlight

ESLint

Image preview

npm Intellisense

prettier - Code formatter

vscode-styled-components

Auto Close Tag

Auto Rename Tag

Reactjs code snippets

translate

 

 

 

작업시 도움되는 setting

"emmet.syntaxProfiles": {
    "javascript": "jsx"
},
"emmet.includeLanguages": {
    "javascript": "javascriptreact"
},
"terminal.integrated.defaultProfile.windows": "Command Prompt"

 

 

---

 

 

프로젝트 생성하기

 

1) 프로젝트 생성

 

터미널에 아래와 같이 작성

yarn create react-app 프로젝트이름