React
사용자 인터페이스(뷰 부분) 개발을 위한 자바스크립트 라이브러리이다.
React(페이스북) <---> Angular(구글)
특징
-ui 상태를 자동 관리해준다(수정이 어렵다)
-가상 dom 기반으로 가볍다(실시간으로 수정가능)
-컴포넌트 기반으로 재사용성이 좋다
-선언형이다
-es6문법을 주로 사용한다
-결합이 용이한 ui를 지원하는 api로 컴포넌트끼리 중첩이 가능하다
*babel: es6 syntax를 지원하지 않는 브라우저에서 react를 사용할 수 있도록 해주는 라이브러리
webpack: 모듈 번들러
설치 순서
node.js설치(서버)
비주얼스튜디어코드 설치 및 환경설정
jquery설치
yarn설치
react-app@3.0.1설치
create-react-app myapp (myapp 프로젝트 생성)
프로젝트가 생성되면, myapp 경로로 이동한 후
yarn start
*npm(Node Package Manager): npm 은 자바스크립트 프로그래밍 언어를 위한 패키지 관리자이다. 자바스크립트 런타임 환경 Node.js의 기본 패키지 관리자이다. 명령 줄 클라이언트, 그리고 공개 패키지와 지불 방식의 개인 패키지의 온라인 데이터베이스로 이루어져 있다.
yarn: yarn 또한 npm과 같이 js 패키지 매니저로, 페이스북에서 제공하는 yarn은 npm보다 속도와 안전성 면에서 조금 더 우수하다고 한다.
마켓플레이스
vscode 한글팩 설치-설치 후 재시작
vscode html snippets 설치
open in browser 설치
-설치 경로
vscode 용 html을 사용하기 위해 html템플릿 만들어두기
vscode-open folder- html- abusaidm.html-snippets-0.2.1 폴더 선택
snippets > snippets.json 에서 편집(원하는 설정으로 html템플릿 만들기)
html파일을 만든 후, 위에서 생성한 html템플릿 단축키를 입력하면
자동으로 템플릿이 입력된다
웹 브라우저에 띄우기 테스트
test.html 파일 생성
위에서 생성한 단축키 입력
<body>test입력</body>
마우스 우 클릭 후, open in default browser
마켓플레이스
Reactjs code snippets 설치
작업영역으로 쓸 폴더 열기
js파일 생성
rcc(reactClassComponent), rccp(reactClassComponentPropTypes), rcfc(reactClassComponentWithMethods),
rcjs(reactJustClassComponent)
등을 제공해준다는 것을 확인할 수 있다.
'React' 카테고리의 다른 글
| [React]Immutability Helper 사용하기 (0) | 2021.04.26 |
|---|---|
| [React]vscode에서 react파일 실행, react프로젝트 내보내기(node_modules) (0) | 2021.04.20 |