TIL no.22 - [React 1탄] Why React ?!

html, css, javascript로 적은 양을 만들 때는 쉽고 재밌다고 생각했는데

점점 데이터 양이 많은 것을 만들게 되면서 react를 배워야겠다는 생각이 들었습니다.

웹의 복잡도가 높아지면서 생겨난 react라는 것의 편리함을 함께 느껴봅시다.

 

 

Why        React   ?

Vue, Angular 가 아닌 React를 먼저 배우게 된 이유는,

다른 프레임워크에 비해 사용자가 많아 생태계가 활성화 되어 있으며 접근성이 보다 쉽기 때문에 선택하게 되었습니다.

 

 

 

What is        React   ?

리액트는 UI (User Interface) 를  만들기 위한 JavaScript Library입니다. 

웹의 점점 더 복잡해지면서 DOM에 접근하여 JavaScript만을 통해 동적으로 구현하기란 다소 어려워졌습니다.

규모가 커지고 더욱 복잡해지는 웹을 효율적이게 관리하기 위해 나타난 라이브러리가 바로 리액트입니다.

리액트를 사용하면 중복적으로 사용하게 될 코드를 반복하지 않게 되기 때문에 생산성이 향상되고 더 많은 양의 데이터 관리가 용이해지며 유지 보수가 더욱 편리해집니다.

리액트와 같은 라이브러리 혹은 프레임워크를  사용하는 가장 큰 이유 중 하나는 UI를 자동으로 업데이트 해 준다는 것입니다.

무엇이 다른가 ?

MVC(Model-View-Controller) 를 모두 포함한 Angular와 Vue와는 다르게 React는 오직 View만 담당합니다.

그렇기 때문에 다른 프레임워크와는 다르게 React가 라이브러리인 것이 아닐까 생각합니다.

React는 그만큼 내장되어 있는 기능이 부족해 third-party 라이브러리를 함께 사용합니다.

 

 

 

 

        작업 환경 설정 !  

- Node.js

Node.js 는 자바스크립트가 브라우저 밖 (서버) 에서도 동작하게 하는 환경을 의미합니다.

프로젝트를 개발하는데 필요한 주요 도구들이 Node.js 기반이기 때문에 설치해야 합니다.

$ node -v 를 터미널에 입력하여 version 정보가 나오면 node.js가 정상적으로 설치된 것 입니다.

 

- npm

npm 은 node package manager 라는 의미로 이 패키지 도구를 통해 Node 기반의 패키지를 사용할 수 있습니다.

npm 을 통해 다양한 패키지를 설치하고 버전을 관리할 수 있습니다.

npm 또한 npm -v 을 통해 설치 확인 할 수 있습니다.

 

 

✅CRA (Create-React-App)

: 리액트 프로젝트를 시작하는데 필요한 개발 환경을 세팅 해주는 도구

CRA를 이용하면 하나의 명령어로 리액트 개발환경을 구축할 수 있습니다.

CRA를 이용하면 개발 환경 세팅을 해주기 때문에 기존 기능을 개선하거나 새로운 기능을 추가했을 때 패키지 버전만 올리면 됩니다.

 

리액트는 정의에서 설명했듯이 UI를 위한 기능만 제공하기 때문에 개발자가 직접 구축해야하는 것들이 많습니다.
전반적인 시스템과 원하는 패키지를 직접 구축할 수 있으니 원하는 환경에 맞게 최적화할 수 있습니다. 하지만 이에 따라서 신경쓸 것이 많기 때문에 초기에 직접 개발 환경을 구축해야하는 것들이 많고 어려울 수 있습니다.
이러한 문제를 해결하기 위해 만들어진 것이 바로 이 CRA 입니다.

 

: -> CRA 초기 폴더 및 파일 세팅 구성

node.modules - package.json - gitignore

 

- node.modules

: CRA 를 구성하는 모든 패키지 소스 코드가 존재하는 폴더입니다.

 

- package.json

: CRA 기본 패키지 외 추가로 설치된 라이브러리/패키지 정보에 대해 업로드하며 기록되는 파일입니다.

 모든 프로젝트마다 package.json 파일이 하나씩 존재합니다.

 * dependencies 

    : 리액트를 사용하기 위한 모든 패키지 리스트, 버전 확인이 가능합니다.

      왜 ?     node.modules 와 package.json 에서 이중으로 패키지를 관리하는가?

 🏀사용한 모든 패키지에 대한 정보를 소스로 가지고 있는 폴더를 github에 올린다면

     기본적으로 올라가는 파일만으로도 엄청난 용량을 차지할 것이다.

     그렇기 때문에 기본적으로 내려받은 이후에 필요한 파일을 각자 install 받을 수 있도록 추가로 설치된 라이브러리/패키지 정보에 대해           기록해두는 것입니다.

- .gitignore

: 이 파일에 github에 올리고 싶지 않은 폴더와 파일을 작성할 수 있습니다.

  push를 해도 이 파일에 작성된 폴더와 파일은 올라가지 않습니다.

  github에 올라가 쓸데없이 용량을 차지하는 부분이 없게 하기 위해서 사용합니다.

 

index.html - index.js - App.js

 

 

 

 

---

 

 

npx 블라블라 npm 블라블라 입력하라는대로 입력은 하겠는데 두개가 뭔 차인지 모르겠는 저를 위해,,

 이 두 친구의 차이  를 정리해봤습니다. 

 

- npm  

: 이 친구는 아까 정리해줬듯이 다양한 패키지를 설치하고 버전을 관리할 수 있는 패키지 매니저 입니다.

 

- npx 

: 자바스크립트 패키지 관련 모듈인 npm의 5.2.0 버전부터 추가된 툴입니다.

패키지를 설치하지 않고 npm 패키지를 일회성으로 즉석 실행해볼 수 있는 도구입니다.

뭐 하나를 위한 사용으로도 설치-실행-제거 를 반복하게 되는 불필요한 과정을 줄이기 위해 일회성으로 실행하기 위한 목적으로 등장하게 된 도구입니다. 설치 완료되어도 전역에 머물러 있지 않고, 사용 후 제거됩니다.