AI 양재 - 엘리스/React

React 시작하기

심전코 2022. 10. 26. 14:49

 

 

웹 페이지를 구성하는 부분을 크게 두가지로 나눈다면,

서버와 클라이언트로 나눌 수 있다.

 

서버는 말 그대로 사용자에게 보여지지 않는 부분 (Back) 을 의미하며,

클라이언트는 사용자에게 UI 적으로 보여지는 부분 (Front) 을 의미한다.

 

그럼 이제 클라이언트를 구축해야 하는데,

우리는 보다 사용이 간편하며

많은 사람들이 사용하는

React 를 사용해 Front 를 구축 할 것이다.

 

시작하기

서버를 구축하기 위해 Node.js 를 설치 했을 것이다.

https://battlecoding.tistory.com/43

 

Node.js 시작하기

Node.js 는 빠르게 개발중인 기술중 하나이다. 급변하는 기술인 만큼 보안 이슈, 버그 수정 등 최신 기술을 빠르게 적용했기에 가장 안정적인 최신 버전을 선택하는것이 최선이다. Node.js 설치 https:

battlecoding.tistory.com

Node.js 에서 제공하는 npm 명령어를 이용하여

React 의 기본 구조를 생성 해 줄 것이다.

 

npx create-react-app [생성할 프로젝트 명]

 

명령어를 입력하면 필요한 라이브러리(모듈) 들을 설치하는데,

다운 받는 작업이 조금 오래 걸린다.멈춘게 아니니 걱정 ㅎㄷㄷ 말자

 

위와 같은 메세지가 출력되었다면 정상적으로 설치가 된 상태이다.

 

생성한 프로젝트가 있는 경로로 이동하면

React 의 기본 구조가 생성된 것을 확인 할 수 있다.

 

설치된 React 서버를 실행시키려면,

생성된 프로젝트 경로로 이동하여

npm start 명령어를 입력하고,

실행 되었다는 메세지를 확인하면

localhost:3000 의 주소로 새 창이 열리게 된다.