React 시작하기
(먼저 관련 이미지 첨부 후, 내용 작성 예정)
우선 node와 npm 설치가 선행되어야 합니다.
node가 설치되면 npm도 함께 설치되므로 따로 설치할 필요가 없습니다.
node 설치 후, node와 npm 버전을 확인해서 아래와 같이 버전 정보가 보인다면 성공적으로 설치가 되었습니다.
CRA 설치
- 프로젝트 폴더 진입
- 프로젝트 설치
- 설치한 프로젝트 진입
- 로컬 서버 띄우기
npm start 입력 시, http://localhost:3000 주소 확인 가능
로컬 서버 띄우기 결과창
http://localhost:3000 접속 시, 아래와 같은 첫 화면이 보이면 성공! CRA 프로젝트 설치 완료!
본격적으로 리액트를 다루기 전에 알고 있으면 우리가 사용할 라이브러리와 도구들의 개념을 먼저 이해해봅시다.
React란.
사용자 인터페이스(UI)를 만들기 위한 자바스크립트 라이브러리
View만 담당하여 최종적으로 그려지는 화면만 상상
(그 외에 프레임워크는 Angular, Vue가 있다.)
3세대 웹 발전.
시간이 지나면서 애플리케이션의 규모가 커지고 복잡한 애플리케이션을 개발하고 있습니다. 이전에 사용하던 방법(DOM, jQuery)으로는 많은 양의 데이터를 관리하고 코드 유지 보수하는데 어려움이 있어 편리하게 도와주는 프레임워크와 라이브러리가 등장하여 웹 어플리케이션이 발전하게 되었습니다.
React를 사용하는 이유.
프론트엔드 라이브러리와 프레임워크는 UI를 자동으로 업데이트 해줍니다.
리액트는 이전 UI 상태를 기억하고 최소한으로 변경할 수 있도록 하는 기술인 가상 돔을 통해 UI를 빠르게 업데이트합니다. 이를 통해 필요한 UI만 업데이트함으로써 성능이 좋아집니다.
React 작업 환경 설정 (Node.js & npm)
Node.js
자바스크립트가 통신 없는 브라우저 밖에서도 동작할 수 있도록 해줍니다. 프로젝트 개발하는 Babel, Webpact과 같은 도구들이 Node.js 기반이기 때문에 필수로 설치한다고 생각하면 됩니다.
npm(node package manager)
Node.js를 설치하면 npm이 자동으로 설치되는데 노드를 사용하기 위한 패키지들을 설치하고 버전을 관리할 수 있는 패키지 도구입니다.
CRA(Create-React-App)
우리는 위 내용을 참고해서 CRA 초기 세팅을 완료했습니다.
말 그대로 리액트로 웹 애플리케이션을 만들기 위해 CRA로 리액트 개발환경을 구축할 수 있습니다.
