React

리액트란?

React는 Facebook에서 개발한 Javascript 라이브러리다.
React는 컴포넌트란 개념을 사용하여 코드의 재사용성과 테스트 효율성을 높여주었으며, 가상의 돔을 제공하여 코드의 업데이트가 일어나면 가상의돔에 먼저 업데이트한 뒤, 실제적인 돔과 비교하여 변한부분만을 업데이트한다.

React 설치하기

예전에는 리액트를 설치하는데 많은 시간이 걸렸다.
Babel과 Webpack을 설치하고 설정하는게 어려웠기 때문이다.
하지만 요즘은 CRA(Create React App)을 이용하여 편하게 프로젝트를 생성할 수 있다. 그럼 바벨과 웹팩이 뭘까?

Babel

최신 자바스크립트 문법을 지원하지 않는 브라우저들을 위해서 최신 자바스크립트 문법을 구형 브라우저에서도 돌아갈 수 있게 ES5의 문법으로 변환 시켜준다.

Webpack

예전의 웹사이트들은 적은수의 파일들만 이용해서 만들었는데, 요즘에는 굉장히 복잡한 파일시스템을 가지고있다. 이런 복잡한 파일들을 번들을 시켜줄수있는것이 웹팩이라고 보면된다.

npx create-react-app

앞서 나는 로그인과 회원가입에 대한 서버를 구현하였다.
이제 나는 리액트를이용하여 클라이언트를 구현하기위해 client폴더를 생성한 뒤 npx create react app을 이용하여 프로젝트를 셋팅할것이다.
위와 같이 클라이언트에 관련된 폴더를 하나 생성한다.
그런다음 터미널에서 디렉토리를 클라이언트에 들어간 다음
해당 명령어를 실행한다. 여기서 .의 의미는 현재 디렉토리에 리액트 앱을 설치하겠다는 의미이다.
다운로드가 끝나면 위와같이 프로젝트가 셋팅이 되어있다.
그런데 여기서 난 처음 보는 명령어가 생겼다. npx가 무엇일까..
나는 지금까지 npm을 사용하여 모듈을 가져왔다.

npm vs npx

What is npm???

->node pakage manager

• 라이브러리들을 받을 수 있는 저장소 역활
• App을 실행하거나 빌드하는데 사용되는 명령어

크게 위처럼 사용할 수 있다.

NPM INSTALL LOCALLY(지역)

-> 현재 프로젝트폴더의 node_modules/.bin에 저장된

NPM INSTALL GLOBALLY(전역)

-> 컴퓨터의 루트('/')기준으로 bin폴더에 저장됨

원래는 리액트를 npm을 이용하여 글로벌로 다운받아 리액트를 사용하였다.

what is npx???

• npm 레지스트리에 올라가 있는 패키지를 쉽게 설치하고 관리할 수 있도록 도와주는 CLI도구

NPM -> Pakage Manager(관리)
NPX -> Pakage Runner(실행)

기존에 npm설치 방법과는 다르게 일일이 설치, 실행, 제거를 할 필요가 없다.
일회성으로 원하는 패키지를 접근하여 실행시키고 설치하는 도구이다.