React의 등장배경
Web Aplication의 발전으로, 사용자와의 늘어난 상호작용과 복잡한 UI/UX를 처리하기 위해서 기존 JavaScript의 DOM 조작 방식의 한계로 인해 React 및 다른 프레임워크 및 라이브러리가 등장한다.
▶ 리액트의 등장으로 복잡한 웹 애플리케이션 개발의 생상성이 향상되었고, 많은 양의 데이터 및 코드 관리 및 유지보수가 용이해졌다.
웹 애플리케이션(유저가 별도의 응용 소프트웨어를 다운로드받지 않아도 웹 사이트 내에서 응용 소프트웨어 기능을 이용할 수 있도록 만든 웹 서비스) 내에서 UI(User Interface 사이트에 보이는 요소) & UX(User Experience) 가 다양해지고 복잡해짐에 따라 유저와의 상호작용과 처리해야 할 데이터 및 코드가 증가하게 되었다.
EX) 호버 시 애니메이션 효과, 장바구니 기능 등
이 때, JavaScript의 DOM을 통해 HTML에 직접 접근해서 조작하는 방법으로는 웹 애플리케이션의 유지 및 보수가 어려워짐에 따라 jQuery(DOM 조작을 쉽게 만들어주는 자바스크립트 메서드의 모음)라는 라이브러리뿐만 아니라, Angular, Vue, React를 필두로하는 프레임워크 및 라이브러리가 등장했다.
React의 필요성 (장점)
- 자바스크립트 문법을 그대로 사용하기 때문에 자바스크립트가 친숙한 개발 입문자가 활용하기 쉽다.
- 페이스북의 지속적 관리로, 사용자가 가장 많으며, 그에 따라 커뮤니티가 크기 때문에 에러에 대한 해결방안을 비교적 쉽게 찾을 수 있다.
- React Native를 통해 모바일 앱 개발도 할 수 있다.
Framework & Library
| Framework | Library | |
| 공통점 | 개발의 효율성 및 편의성을 높이기 위해 다른 사람들이 미리 짜 둔 코드를 사용하는 것 | |
| 차이점 - 개발의 자유성 | 정해진 틀 내에서만 개발이 가능하다. (개발자의 자유도가 낮다.) |
개발자가 직접 코드를 작성하면서 필요한 기능에만 능동적으로 라이브러리를 적용할 수 있다. |
| 실생활 예시 | 모든 주방도구가 갖춰진 주방 | 각각의 용도에 맞는 각자의 주방 도구 |
| 언어 예시 | Angular, Vue | React (라이브러리지만, 프레인워크적인 면모를 많이 가짐.) |
Node.js & npm
npm은 Node.js 환경에서 패키지를 관리하는 도구로, 리액트로 개발 프로젝트를 시작할 때 필요한 Babel, Webpack 등이 웹 브라우저가 아닌 내 로컬 작업 환경에서도 작동할 수 있게 하려면 반드시 필요한 도구이다.
Node.js
JavaScript는 웹 브라우저에서 동작하도록 만들어진 언어이기 때문에, 자바스크립트의 실행환경이 웹 브라우저 이외의 환경에서는 자바스크립트가 작동을하지 않는다. 이 때, 자바스크립트로 웹 브라우저 외의 다른 실행환경에서도 개발하고자 하는 니즈에 의하여 Google Chrome 웹 브라우저의 자바스크립트 v8 엔진을 기반으로 Node.js가 탄생했다.
npm
node package manager(npm)은 Node.js 설치 시 자동으로 함께 설치되는 도구로, Node.js 환경에서 사용할 수 있는 패키지를 관리하는 도구이다.
| 개념 | 실생활 예시 | |
| Package | Node.js 환경에서 실행할 수 있는 프로그램 | 앱 |
| Node.js | 실행 환 | 안드로이드 휴대폰 |
| npm | Node.js 환경에서 실행할 수 있는 프로그램들을 다운로드하고 삭제하고, 버전을 관리 하는 등의 일을 도와주는 도구 | 안드로이드 앱 스토어 |
관련 명령 프롬프터(터미널) 명령어
//node.js / npm 버전 확인하기
node --version
npm --version
// 간편하게 node.js 실행하는 명령어
node
// node.js 나가는 명령어
> .exit
// 패키지 다운로드
$ npm install [패키지명]
// 패키지 업데이트
$ npm update [패키지명]
// 패키지 삭제
$ npm uninstall [패키지명]