[Mac OS] React js 코딩을 위한 도구 및 React JS 라이브러리 설치하기!

********************

MAC 사양 : MacBook Pro(16인치, 2019)

프로세서 : 2.6 GHz

메모리 : 16GB

********************

 

 

안녕하세요.

 

React JS는 간단히 설명드리자면,

 

Facebook에서 개발한 웹 / 앱의 View를 만들기 위해 사용하는 JavaScript 기반 라이브러리 입니다.

 

 

대표적인 React JS의 특징은

 

  1)  가상 DOM 사용

  2)  선언형

  3)  컴포넌트를 활용한 웹 / 앱 의 View 제작 가능

  4)  SPA(Single Page Application)

 

*** SPA에 대해 헷갈리시나요?

[WEB CS] SPA(Single Page Application) 에 대해 간단 개념 정리!

 

 

가 있습니다.

 

 

쉽게 이해하기 위해 정리하자면,

 

원래 JS(JavaScript) 언어를 웹으로 출력하기 위해서는 

 

JavaScript에서 DOM API 를 호출하여 DOM(HTML 덩어리. HTML tag로 이루어진 트리라고 생각하시면 됩니다.) 이 알아볼 수 있도록 JavaScript 언어로 가상 DOM을 만듭니다.

 

이는 웹 브라우저 엔진 내에 자바스크립트 해독기(JS 엔진이라고 통함) 에서 진행되는데,

 

React는 이러한 JavaScript 언어를 사용하며, 사용자가 JavaScript 로 웹 View를 만들기 편하게 사용 방법을 정의해둔 라이브러리 입니다.

참고로, React는 언어가 아닙니다! 라이브러리 입니다!

 

 

 

 

React 정의는 여기까지만 하고,

 

이러한 React를 사용해서 개발하기 위해 도구 및 React를 설치해보겠습니다.

 

 

 

설치 순서

 

  1)  Node.js

  2)  Yarn

  3)  VS Code

  4)  create-react-app

 

입니다.

 

 

 

 

Node.js 설치

---

  -  JavaScript 런타임 입니다. 

 

  -  React 내장 도구들이 Node.js 기반이기 때문에 설치 필수 입니다.

 

  -  설치 경로 : https://nodejs.org/ko/download/current/

다운로드 | Node.js

 

설치 확인 방법 (터미널)

~ % node --version 
또는 
~ % node -v
// 터미널 실행 시 ~ % 부분을 제외하고 입력하시면 됩니다.

 

 

Yarn 설치

---

  -  Facebook 에서 만든 JavaScript 패키지 매니저

 

  -  기존에 npm이 있지만, npm보다 yarn의 장점이 많아 yarn을 사용

 

*** yarn 장점 

    1)  더 나은 캐시 시스템을 사용하여 속도가 빠름

    2)  보안성 높음

    3)  신뢰성 또한 높음

 

  -  설치 경로 : https://classic.yarnpkg.com/en/docs/install#mac-stable

Yarn

 

 

 

 

VS Code 설치

---

  -  atom, eclipse 등 과 같은 소스 코드 에디터. React JS 를 개발하기 위해 사용할 에디터.

 

  -  마이크로소프트에서 만듬(비쥬얼 스튜디오 보다 이쁨)

 

  -  설치 경로 : https://code.visualstudio.com/

Visual Studio Code - Code Editing. Redefined

 

 

 

 

create-react-app (React) 설치

---

  -  Facebook에서 제공해주는 도구로, 초심자들이 추가로 설치할 도구(Webpack, Babel 등) 설치에 어려움이 많아 이를 모아놓음

 

  -  간단하게, React app 개발 통합 도구 라고 생각하면 됩니다.

 

  -  설치 경로 (터미널에서 진행)

// Yarn 설치했으니까
~ % yarn global add create-react-app

// npm으로 설치할래!
~ % npm install -g create-react-app

 

 

React 개발을 위한 도구 설치는 전부 끝났습니다.

 

이제, 프로젝트를 만들어 실행해보겠습니다.

 

 

 

프로젝트 생성

// 터미널에서 프로젝트 폴더를 생성하려는 경로에 들어온 이후
~ % create-react-app react-sample

 

하는 순간 react-sample 폴더가 만들어지고, 내부에 react app 프로젝트 폴더와 파일들이 생성됩니다.

 

 

이후, 프로젝트 내부로 경로 이동 후

~ % yarn start

하면, URL이 localhost:3000 인 웹 페이지가 뚜둔! 하고 나올겁니다.

 

*** 터미널 실행 결과 화면

  -  저는 이전에 3000 포트로 실행하고, 강제종료해서 포트가 변경되었습니다..!

 

 

 

*** 웹 페이지 결과 화면

 

 

이상입니다!

 

 

틀린 부분, 진행되지 않는 부분이 있으면 댓글 부탁드립니다.

 

 

 

 

 

 

 

 

**** 참고 ****

https://medium.com/@pakss328/yarn%EC%9D%B4%EB%9E%80-b4e8edf1638b

https://geonlee.tistory.com/92

https://velopert.com/3621