React 설치 및 기타설치 모음

 

 

🐶 01  React 설치

준비하기

//(1)버전확인해서 node.js 안깔려있으면 사이트들어가서 설치하기

$ node -v
$ npm -v

//---------------------------------------------------------------

//(2)npx 설치하기

npm install npx -g

//npm install -g에서 -g옵션은 시스템 디렉터리에 패키지를 설치하는 것을 의미한다.
//-g 옵션이 없다면 module은 현재 디렉터리 내부에 로컬로 설치된다.

//---------------------------------------------------------------

//(3)작업파일 생성

npx create-react-app my-app 

//'my-app'은 폴더이름이므로 변경가능

(1) Node.JS 설치

NodeJS 버전정보가 안뜨면 https://nodejs.org/en/ 들어가서 설치를 해준다.

npm 은 nodejs 를 설치 할 때 함께 설치되기 때문에 따로 설치할 필요가 없다.

*npm (Node Packaged Manager : Node로 만들어진 pakage 들을 관리해주는 툴)

(2) npx 설치

(3) React app 설치(작업 폴더생성)

 

 

시작하기

 

(4) React app 브라우저 열기

> npm start

//[http://localhost:3000/]에 접속이 된다.

 

(5) src폴더 정리

src폴더 내부에서 아래 파일을 제외한 필요없는 파일들을 삭제한다.

src
├── App.js
└── index.js

---

-기타 설치모음-

 

🐶 리액트 라우터(React Router) 설치

(1) 설치하기

npm install react-router-dom //npm

yarn add react-router-dom //yarn

 

🐶 recoil설치 (상태관리 라이브러리) 

공식문서 https://recoiljs.org/ko/docs/introduction/installation

npm i recoil

 

🐶 axios설치 (API 연동) 

npm i axios //npm

yarn add axios //yarn

 

🐶 React-Query설치 (API 연동) 

Hook을 기반으로 데이터 로딩을 편하게 구현하도록 도와준다.

npm i react-query //npm

yarn add react-query //yarn

 

🐶 styled-components설치 (스타일링하기) 

//설치
$ npm i styled-components

//import
import styled from "styled-components";

<사용법 및 관련세팅>

https://jaylee-log.tistory.com/21

[React-css] styled-component 설치 및 사용법 + 작업환경 셋팅하기

 

🐶 react-icons설치 (아이콘사용) 

//설치
npm i react-icons --save

//import
import {아이콘이름} from 'react-icons/fa';

https://react-icons.github.io/react-icons

위 사이트에서 아이콘 둘러볼 수 있음.

 

 

---

기타 세팅하기

🐶JSX에서  HTML 태그 자동완성 세팅

리액트를 사용하면서 html문법이 자동완성이 안되는 문제점이 있었다. 아래와 같이 해결하면 된다.

 

(1) vscode 에디터에서 F1를 눌러 Open setting(JSON)를 연다.

(2 )아래의 코드를 삽입한 후 저장

"emmet.includeLanguages": { "javascript": "javascriptreact" },