Frontend Framework(Library) 삼대장
Angular
:: 2010년 Google에서 개발한 Framework. TypeScript 기반으로 매우 안정적이고 탄탄한 Frontend App 개발이 가능하며 Framework답게 다양한 기능이 내장되어있다. 무겁고 배우기 어렵다는 단점이 있다.Vue
:: 2014년 Evan You라는 개인이 개발한 Framework. 코드가 깔끔하고 배우기 쉽기 때문에 가장 나중에 생겼지만 성장 속도가 정말 빠르다.
우리가 배울 REACT ❗️❗️❗️❗️
:: 2013년 Facebook에서 개발한 라이브러리,
MVC(Model-View-Controller) Architecture (ex. Vue, Angular)와는 다르게 리액트는 오로지 View만 담당한다.
React Navite 사용으로 인해 꾸준히 증가한다.
React를 정의해보자 🙋🏻♀️🙋🏻♀️
사용자 인터페이스(UI)를 만들기 위한 JavaScript 라이브러리입니다.
리액트는 가상 돔(Virtual Dom)을 통해 UI를 빠르게 업데이트합니다.
가상 돔은 이전 UI상태를 메모리에 유지해서, 변경될 UI의 최소 집합을 계산하는 기술이다. 이러한 기술로 인해 불필요한 UI업데이트는 줄고, 성능은 좋아진다.
React의 작업환경설정은 Node.js & npm 👩🏻💻
::Node.js
는 자바스크립트가 브라우저 밖 즉, 서버에서도 동작하게 하는 환경을 말합니다.
리액트 애플리케이션은 웹 브라우저에서 실행되는 코드라서 node.js와 직접적인 연관은 없지만, 프로젝트를 개발하는데 필요한 주요도구들(ex. 바벨, 웹팩)이 node.js 기반이기 때문에 반드시 설치해야 합니다.
node.js를 설치하면 자동으로 npm(node package mananger)이 설치 되는데 npm을 사용하기 위해선 node.js가 설치되어 있어야 합니다.
node -v
::npm
node기반 패키지를 사용하려면 npm이라는 패키지 도구가 필요합니다.
이 npm을 통해 다양한 패키지를 설치하고 버전을 관리할 수 있습니다.
이 npm설치 여부를 확인하는 방법은
npm -v
CRA(Create-React-App)
: 리액트 프로젝트를 시작하는데 필요한 개발 환경을 세팅해주는 도구
리액트는 UI만 제공하기 때문에 이러한 문제를 해결하기 위해 CRA가 만들어졌습니다.
CRA는 리액트로 웹 애플리케이션을 만들기 위한 환경을 제공한다. CRA를 이용하면 하나의 명령어로 리액트 개발환경을 구축할 수 있다.
- CRA 설치하기 위해서는
// 1. Desktop - wecode 폴더 진입
cd Desktop/wecode
// 2. westagram-react 프로젝트 설치
npx create-react-app westagram-react
// 3. westagram-react 프로젝트 진입
cd westagram-react
// 4. 로컬 서버 띄우기
npm startnpm start를 입력하면 http://localhost:3000주소를 확인 할 수 있습니다 !
http://localhost:3000접속시 보여지는 첫 화면입니다.
위 화면이 나온다면 본격적으로 리액트 프로젝트 시작 가능 ! 🙆🏻♀️ 🙆🏻♀️
