React 개발 환경 설정

React UI라이브러리를 사용하기 위한 설정에 대해서 알아보자.

 

node.js 설치

https://nodejs.org/en

Node.js — Run JavaScript Everywhere

---

Visual Studio Code(vsCode) 설치

https://code.visualstudio.com/

Visual Studio Code - Code Editing. Redefined

Visual Studio Code(vsCode) 확장 프로그램 설정

• Terminal Toos 설치

---

Vite 생성

Vite란?

웹 애플리케이션을 위한 강력하고 빠른 프런트엔드 빌드 툴입니다

// vite 생성(@latest=최신 버전으로...)
>npm create vite@latest

✔ Project name: vite-project
✔ Select a framework: › React
✔ Select a variant: › JavaScript

>cd vite-project
>npm install
>npm run dev

https://ko.vite.dev/

Vite

---

Axios 설치

Axios란?
Axios는 node.js와 브라우저를 위한 Promise 기반 HTTP 클라이언트 입니다. 그것은 동형 입니다(동일한 코드베이스로 브라우저와 node.js에서 실행할 수 있습니다). 서버 사이드에서는 네이티브 node.js의 http 모듈을 사용하고, 클라이언트(브라우저)에서는 XMLHttpRequests를 사용합니다.

npm install axios

 

https://axios-http.com/kr/docs/intro

시작하기 | Axios Docs

---

Recoil 설치

Recoil란?

React를 위한 상태관리 라이브러리

npm install recoil

https://recoiljs.org/ko/

Recoil

---

Sass 설치

Sass란?

Sass는 세계에서 가장 성숙하고 안정적이며 강력한 전문가급 CSS 확장 언어입니다.

npm install -g sass

https://sass-lang.com/

Sass: Syntactically Awesome Style Sheets

 

 

 

 

React 기본 이해

*.jsx = javascript XML 파일

main.jsx = React 시작점

// .jsx 파일의 기본 구조

import 'FileName' from './FileName.jsx'

function Test() {
	return(
    	<p>some text</p>
    );
}

export default Test