리액터 스타트(2022.06.14)

react 초기 설정 공유 합니다.

 

개발툴 VSCODE

NODE.JS HTTPS://nodejs.org/ko 

( LTS 버전 16.15.1 LTS )

 

리액트홈페이지 : https;//ko.reactjs.org/

git 2.36.1  https://git-scm.com/download/win

 

--- testapp 생성해보기 

npx create-react-app my-app

cd my-app

npm start

http://localhost:3000/   <== 기본 페이지

 

추천 plugin

 

-babel javascript 

ES201x JavaScript, React (including JSX), FlowType, GraphQL 구문 강조

 

-beauty

웹기반언어(html,css,javascript 등) 코드 자동정렬, 줄 맞춤

사용법: Ctrl + A -> Ctrl + Shift + B

 

-JS JSX Snippets

JavaScript (.js), TypeScript (.ts), JavaScript React (.jsx), TypeScript React (.tsx) 용 컴포넌트 등 자동완성

사용밥법 + 키워드 ↓

https://marketplace.visualstudio.com/items?itemName=skyran.js-jsx-snippets

 

-ES7+ React/Redux/React-Native snippets

ES7+의 React, Redux, React-Native용  컴포넌트 등 자동완성

사용법 : Ctrl + Alt + R

 

-ESLint

JS 문법 유효성 검사, 에러출력

 

-PowerShell 

vscode에서 powershell 지원(모듈, 멸령어, 스크립트)

 

-Reactjs code snippets

ES6에서 React.js용 클래스 컴포넌트, 클래스 등을 키워드로 자동완성해줌

키워드 ↓

https://marketplace.visualstudio.com/items?itemName=xabikos.ReactSnippets

Reactjs code snippets - Visual Studio Marketplace

 

 npm 검색설치

https://www.npmjs.com/

 

------------------------------------------

필요시 부가설치

Adding Bootstrap

npm i bootstrap

npm i reactstrap react react-dom

 

npm i route

 

axios

http request를 간편하게 만들어주는 모듈이다.

 

classnames

조건부로 className이 변경될 경우 유용하게 사용할 수 있다.

 

moment

Date관련 로직을 간소화해주는 라이브러리다.

 

npm install class-validator --save

class-validator

문자열에 대해 다양한 포맷 검사를 도와준다.

 

npm install --save styled-components

styled-components

js내에서 style을 작성할 때 생기는 불편함을 해소해 준다.

 

 

---------------------------------------------------------------------------------------------------

18 react 

suspense <-서버사이드

file.client.js -> Client Component

file.server.js -> Server Component

file.js -> Universal Component

 

---------------------------------------------------------------------------------------------------

npm i axios

axios

http request를 간편하게 만들어주는 모듈이다.

https://www.npmjs.com/package/axios

---------------------------------------------------------------------------------------------------

npm i classnames

classnames

조건부로 className이 변경될 경우 유용하게 사용할 수 있다.

 

예컨데, className={`${someCondition? 'positive': ''}`}를 classnames를 사용하면

className={classNames({positive: someCondition})} 처럼 쓸 수 있다.

 

조건부 className의 가짓수가 적을 때는 번거로워 보이지만 2~3개만 되어도 훨씬 편해진다.

https://www.npmjs.com/package/classnames

------------------------------------------------------------------------------------------------------

npm i moment

moment

Date관련 로직을 간소화해주는 라이브러리다.

 

js 내장 Date를 생으로 다루는 것 보다 훨씬 편하게 사용할 수 있다.

https://www.npmjs.com/package/moment

------------------------------------------------------------------------------------------------------

npm install class-validator --save

class-validator

문자열에 대해 다양한 포맷 검사를 도와준다.

 

가령 이메일 입력 칸에서 이메일 포맷인지를 검사할 수 있다.

https://www.npmjs.com/package/class-validator

------------------------------------------------------------------------------------------------------

npm install --save styled-components

styled-components

js내에서 style을 작성할 때 생기는 불편함을 해소해 준다.

https://styled-components.com/

 

 

------------------------------------------------------------------------------------------------------

npm i react-router