[React] (1) React란 무엇인가, React 개발 환경 조성

  이번 카테고리에서는 React라는 것이 무엇인지 알아보고 React개발 환경 조성과 사용방법을 차례대로 포스팅할 예정이다.

 

React란?

  간단하게 정의해서 프론트엔드 라이브러리이다. Angular, Vue.js와 같은 역할을 한다고 보면 된다. React는 페이스북에서 제공하고있다. 그리고 React로 만든 웹사이트는 html 태그가 있지만 내용물은 다른 저장소에 있어서 사용자들에게는 소스코드를 보이지 않게 할 수도있다.

  React는 기본적으로 Component기반이다. 이 뜻는 각 Component를 만들어 놓고 조립하듯 웹 페이지를 구성할 수 있다는 뜻인데 포스팅 뒤로 가면 그 뜻을 이해할 수 있을 것이다.

 

 

React 개발 환경 조성

1. Node.js 설치

우선 node.js는 기본적으로 설치되어 있다고 가정한 후 진행하겠다.

node.js는 https://nodejs.org/ko/

Node.js

  위 페이지로 이동하여 설치하면 된다. 설치 방법은 간단하므로 설명하지 않겠다. Node.js가 설치되어 있어야 npm명령어가 실행 가능하기 때문에 설치하는 것이다. 또한 Node.js는 javascript를 이용하여 server를 구성할 수 있게 만들어준다.

 

 

2. create-react-app 명령어로 설치하기

 

  VS code에서 Terminal을 실행시킨 후 해당 경로에서 아래 명령어를 입력한다.

npx create-react-app 원하는프로젝트폴더이름

  프로젝트 폴더 이름을 first라고 만들었다. 위 명령어의 뜻은 리액트 환경이 세팅된 boilerplate를 만들겠다는 뜻이다. create-react-app은 줄여서 CRA라고도 부른다.

 

  이제 만들어진 해당파일(first) 경로로 이동한 뒤에 npm start를 한다.

first폴더로 경로 이동후 npm start

 

  npm start를 하게 되면 자동으로 localhost:3000에서 이러한 페이지가 뜰 것이다. 이유는 이미 리액트가 세팅된 폴더이기 때문에 이 화면이 세팅되어 있는 것이다.

 

  이것으로 리액트를 사용하기 위한 개발 환경 세팅은 끝이 났다. 아래는 위 환경설정이 저장된 github 주소이다.

 

---

 

https://github.com/ukcasso/react/tree/main/first

ukcasso/react