[React.Js] 리액트 시작하기, Create-React-App

 

JavaScript를 공부하면서 어느 정도 이해하기 시작했다는 생각이 들자 이것저것 프로젝트를 더 만들어보고, 더 쉽게 만들어보고 싶다는 생각이 들었다. 그렇게 리액트에도 손을 댔다.

 

React(리액트)는 자바스크립트 라이브러리 중 하나로서 사용자 인터페이스를 만들기 위해 사용된다. 페이스북 개발자들이 만든건데, 작년까지만 해도 굉장히 핫했는데, 요세는 또 다른게 핫하더라. 하지만 어쩔 수 없다 일단. 나는 리액트 배를 탔다.

사실 그냥 웹페이지는 HTML, CSS 만으로도 충분히 만들 수 있다. 하지만 페이지가 점점 늘어나고, 동적인 인터랙티브한 웹을 만들기 위해서는 자바스크립트가 필요하다. 게다가 요즘은 단순한 웹이 아니라, 모바일에서도 쓸 수 있는 유동적인 걸 좋아하다보니 이럴 때, 리액트가 정말 유용하다. 싱글페이지 어플리케이션이나 모바일 어플리케이션을 개발할 때 유용하게 쓰인다.

특히나 리액트같은 프레임워크는 DOM관리와 상태를 업데이트, 관리하기 편하고 자유도도 높다. 그래서 확실히 인기가 많은 편!

 

React.js 시작하기

리액트를 사용하기 위해서는 개발환경 셋팅해줘야 합니다. 익숙해지면 간단하게 느껴지는데 처음에 시작할 때는 복잡하게 느낄 수도 있습니다.

필요한 것들

• Node.js 설치
• code editor (like as VScode)

 

npm

Node.js를 설치하면 안에 포함되어있어서 자연스레 설치됩니다. Node Packaged Manager을 줄인말인데, 통합 관리해주는 툴이라고 생각하시면 될 듯해요. 자주 등장할 아이이기 때문에 기억해두시면 좋아요

create-react-app

필요한 것들을 다 설치해주셨다면 이제 create-react-app을 실행할 차례입니다.

이때 npx가 필요합니다. npx는 npm을 이용해서 설치할 수 있답니다

터미널을 켜서 진행해주세요~

 

npm install -g

 

 

npx가 설치되었다면 이제 정말로 create-react-app을 할 차례입니다.

 

 

npx create-react-app (app 이름)

그러면 app이름의 폴더가 생성되고 그 안에 리액트를 실행시키기 위한 모듈 파일과 폴더들이 가득 생겨납니다.

React App Start

폴더가 생성되고 폴더안의 프로젝트를 실행 시킬려면 npm을 이용하면됩니다.

 

npm start

 

제대로 실행이 되었다면 아래와 같은 화면이 뜰 것입니다.

필요한 파일과 필요없는 로고파일 등을 제거하고 프로젝트를 시작하시면 된답니다

다른 폴더는 건드릴 것 없고, src 폴더안에 App.js / index.js만 남겨두고 다 지우셔도 무방합니다.