React의 설치와 실행

오늘은 Frontend Web Framework 중 하나인 React의 설치와 실행에 대해서 알아보도록 하겠습니다

 

1. React.Js란 ?

React는 Meta에서 제작한 Javascript Library 중 하나로서 User Interface를 만들기 위해 사용됩니다

React의 경우 JSX(Javascript XML) 이라는 특별한 문법을 사용하는데,

하나의 파일에 Javascript와 HTML을 동시에 작성할 수 있다는 특징이 있습니다

이러한 React만의 특이한 문법을 Babel을 통해 Javascript 형태의 코드로 변환시켜 줍니다

 

2. React의 설치

React를 설치하기 위해선 컴퓨터에 Node.js의 Package Manager인 NPM이 설치되어 있어야 합니다

Node.js (nodejs.org) 

Node.js

NPM의 경우 Node.js 를 설치하면 자동으로 따라오게 됩니다

 

Node js을 설치하셨다면 React를 설치하실 준비가 끝났습니다

하지만 저희는 NPM을 사용하는 것이 아닌 NPX라는 것을 이용할 것입니다

 

그러면 React 프로젝트는 어떻게 만들 수 있을까 ? 

새로운 React 앱 만들기 – React (reactjs.org)

새로운 React 앱 만들기 – React

React의 공식 Docs에 글을 찾아보았을 때 위 방식으로 React 프로젝트를 생성하고 실행시킬 수 있다 알려주고 있습니다

( Node js 가 설치되어 있어야 함 )

 

3. React 프로젝트의 설치와 실행

npx create-react-app my-app # my -app 이라는 프로젝트 생성

cd my-app # 위의 명령어로 제작된 명령어 폴더 안으로 경로 이동

npm start # React 프로젝트 실행

단, 프로젝트의 이름을 작성할 때 주의할 점은 프로젝트의 이름에 대문자가 들어가면 안된다는 것입니다

프로젝트 이름을 지을 땐 스네이크 표기법(Snake case)나 케밥 표기법(Kebab case)를 사용하는게 좋습니다

 

그런 후 npm start를 입력하면 이렇게 컴파일이 완료됩니다

후에 인터넷 브라우저를 킨 후 http://localhost:3000을 주소로 입력하면

React 프로젝트 생성과 실행이 완료됩니다