3.1 휴무로 인해 뭔가 격차가 더 큰 것 같다..
CRA(create-react-app)
create-react-app은 페이스북에서 만든 공식적인 React 웹 개발용 Boilerplate이다. 직접 모든 개발환경을 설정하지 않아도 되고 페이스북이라는 거대한 기업에서 지속적으로 업데이트를 해주기에 많은 사람들이 사용하고 있다.
Create React App은 React 배우기에 간편한 환경이다
이것은 개발 환경을 설정하고, 최신 JavaScript를 사용하게 해주며, 좋은 개발 경험과 프로덕션 앱 최적화를 해줍니다. Node 10.16 혹은 상위 버전 및 npm 5.6 혹은 상위 버전이 필요합니다. 새로운 프로젝트를 만들기 위해 아래의 명령어를 실행합니다. 공식문서 내용
"기업마다 CRA를 활용하는 곳도 있고 0부터
webpack,babel등 직접 세팅하는 곳도 있다고한다!!"
먼저 node와 npm update 실시!
node -v
sudo npm cache clean -f
sudo npm install -g n
npm -v
sudo npm install -g npm
npm -v// CRA 프로젝트를 설치하려는 디렉토리로 이동
cd Desktop/wecode
// CRA 설치
npx create-react-app 프로젝트명
// 프로젝트 진입
cd 프로젝트명
// 로컬 서버 띄우기
npm start
위와 같이 나오면 성공!
Why React?
- "지속적으로 데이터가 변화하는 대규모 애플리케이션 구축하는 것?을 목표로 2013년 facebook에서 개발한 Library.
- MVC(Model - View - Controller)와는 다르게 리액트는 오로지 View만 담당
- 내장되어 있는 기능이 부족해 **third-party 라이브러리 (ex. React-router, Redux)**를 함께 사용한다.
- 페이스북의 지속적인 관리와 함께 생태계 활성화되어 있으며 다양한 자료, 그리고 React Native의 사용으로 인해 사용자가 꾸준히 증가한다.
- 사용자와의 인터렉션을 UI로 쉽게 구현하고 대규모의 웹페이지를 관리하기 위해 사용합니다.
What is React?
React 정의
사용자 인터페이스(UI)를 만들기 위한 JavaScript 라이브러리
- 리액트와 같은 프론트엔드 라이브러리 또는 프레임워크를 사용하는 가장 큰 이유 중 하나는 UI를 자동으로 업데이트해 준다는 점
- 리액트는 **(Virtual DOM)**을 통해 UI를 빠르게 업데이트
- SPA(Single Page Application)!!는 말 그대로 한 개의 페이지로 이루어진 어플리케이션이라는 의미
React 주요한 특징 3가지
컴포넌트
리액트에서 컴포넌트(component)는 UI를 구성하는 단위입니다. 마치 자동차에 부분부분들을 개별로 만들어 조립한다고 생각하면 이해하기 쉽습니다!
바퀴 + 차대 + 의자 + ... = 자동차
로그인 + 회원가입 + 카테고리 + ... = 하나의 웹서비스
단방향 데이터 흐름
MVC 패턴인 양방향 데이터 흐름이 아니라 리액트는 데이터 방향이 단방향입니다. 양방향보다 단순한 데이터흐름으로 이해하기 쉬워 디버깅에 조금 더 수월하다는 장점과 서버에 부담이 적다는 것
가상(Virtual) DOM
기존의 웹에선 DOM 객체의 변화를 감지하면 전체적인 DOM을 다시 그리는 방식이었습니다. (새로고침과 같이 잠깐 화면이 깜빡)
가상돔은 쉽게 생각하자면 기존의 DOM 트리와 가상 DOM 트리와 비교해서 변화된 부분만 업데이트 하는 방식
westargram -> react로 옮기기
