UNDEFINED

사실 리액트를 설치하는 방법은 간단합니다.

앞서 알려드렸던 Node js 를 설치하기만 하면 되는데요

https://nodejs.org/ko/

Node JS 홈페이지에 들어가셔서

다운로드 버튼을 눌러서 설치 파일을 다운받으시면 됩니다.

현재 최신 버전은 13.6.0 버전 까지 나와 있지만

저는 안정적인 12.14 LTS 버전을 추천 드립니다.

참고로 LTS 란 Long Term Support

의 약자로 오랜 기간동안 서포트를 보장 해주겠다는 의미입니다.

설치파일을 받으신 뒤 실행을 해주시면

Next

I Accept the terms in the License Agreement 에 체크 해주신후 Next

설치해줄 파일을 지정해 주신 후 Next

여기서는 따로 다른 설정을 안건드리고 바로 Next 를 눌러줍니다.

여기서도 바로 Next 를 눌러줍니다.

Install 버튼을 눌러 주시면 설치가 됩니다.

설치가 잘 되었는지 확인해 보시려면 

cmd 창을 여신 후

node -v

npm -v

이 두 명령어를 입력했을 때

이렇게 버전 정보가 나오면 잘 설치가 된 겁니다.

(버전은 다르셔도 상관 없습니다.)

그럼 이제 리액트 샘플을 실행시켜 보겠습니다.

우선 워크스페이스가 될 폴더를 하나 정해서 만들어 주십니다.

(저의 경우는 c 드라이브 아래에 dev 란 폴더를 만들고 react 란 폴더를 만들어주었습니다.

그리고 cmd 창에서 해당 폴더로 이동한 후

npm install create-react-app

라는 명령어를 입력하시면

이렇게 리액트 샘플 페이지가 설치가 되고

를 입력해보시면

이렇게 react 샘플 페이지가 인터넷 창으로 뜨게 됩니다.

React는 페이스북에서 개발한 Node JS 기반의 프론트엔드 자바스크립트 라이브러리입니다.

그렇다면 Node JS 란 무엇이냐

자바스크립트는 웹(Chrome이나 Explorer 같은)기반에서만 사용 가능했지만

Node JS 자체가 런타임이 되어 자바스크립트를 사용 가능하게 합니다.

그래서 NodeJS가 자바스크립트 런타임이라는 말이 나오게 된 겁니다.

그렇다면 Node JS를 사용하는 이유는 무엇이냐

그동안의 개발 체계는

이런 식으로 백엔드와 프론트엔드의 구분이 명확하게 나누어져 있었습니다.

그러나 NodeJS를 사용하게 되면

이런 식으로 자바스크립트를 이용하여 백엔드와 프론트엔드 모두 개발을 할 수 있게 됩니다.

Node JS의의 장점으로는

우선 자바스크립트 만으로 풀 스택 개발을 할 수 있다는 점과

단일 스레드(Single비동기(non-Blocking I/O, Async)인데인데

이게 무슨 뜻이냐면

기존에는 어떤 작업을 할 때 하나의 요청이 발생을 하면

그 요청에 응답을 받아야 다음 작업을 실행할 수 있었습니다.

 그림으로 보면

이런 식이 되겠죠

그런데 Node js의 단일 스레드(Single비동기(non-Blocking I/O, Async) 방식은

어떤 요청이 들어오면 요청이 들어올 때까지 기다리는 것이 아니라

그다음 작업을 계속하다가

요청에 대한 처리가 끝났다는 콜백이 돌아오면 작업을 계속 이어나가는 방식입니다.

그림으로 표현하기가 조금 애매하긴 하지만 굳이 그림을 그려보자면

이런 식이 되겠네요.

(멀티스레드 방식과는 조금 차이가 있으니 잘 설명이 되어있는 블로그 Link를 걸어드리겠습니다.)

https://hamait.tistory.com/694

그래서 Node JS에서의 처리 속도가 굉장히 빨라지게 되는 것이죠

그리고 실시간(반응형) 어플리케이션 개발을 하기에 유리하다는 것이 장점입니다.

또한 npm 이라는 강력한 패키지 관리 툴을 제공하여서

마치 Spring 에서의 Maven 처럼

필요한 패키지들을 바로 설치하고 사용하는 과정을

편리하게 할 수 있도록 해줍니다.