시작하면서

프런트엔드 개발자라면 반드시 익혀야하는 기술인게 요즘 프런트엔드 개발자 채용공고를 보면 리.액.트가 없는 곳이 없을 정도로 핫한 기술이라고 생각한다.

또한 vue, angular를 모르지만 react는 javascript로 이루어진 라이브러리로서 리액트를 공부하면 자연스럽게 javascript의 숙련도도 오를거라고 생각한다.

자 그럼 노마드 아카데미의 리액트 무비 앱을 클론 코딩하면서 전반적인 리액트의 그림을 살펴보고 어떤식으로 공부해야 될지에 대한 감을 잡아보자.

환경세팅

리액트 프로젝트를 시작하기 위해서는 다음의 것들을 해야한다.

1. node js
2. npm
3. npx
4. create reactive app
5. 시작!!

1. node js, npm 설치

curl -sL https://deb.nodesource.com/setup_12.x | sudo -E bash -

우분투에 다음과 같이 입력하면 node js, npm이 설치가 된다.

2. npx 설치

npm install -g npx

npx를 전역으로 설치하는 방법이다.

4. create reactive app 시작하기

npx create-react-app [project_name]

react의 문법을 브라우저가 이해할 수 없기때문에 이를 못생기게 변환시키는 과정이 필요하다. 하지만 페이스북에서 이미 이것을 위한 과정을 정리해놓았다. 우리는 위의 명령어를 입력하기만 하면 된다.(추후에 그 과정을 전반적으로 이해해보자.)

5. 시작!!

프로젝트 디렉토리에 들어가서 다음을 입력하게 되면

npm start

아래와 같은 response를 얻을 수 있다. 신기한건 로컬뿐만이 아니라 네트워크 ip주소로도 접속할 수가 있다. (매우 신기...)

Compiled successfully!

You can now view movie-app in the browser.

  Local:            http://localhost:3000
  On Your Network:  http://192.168.0.67:3000

Note that the development build is not optimized.
To create a production build, use npm run build.

소감

인생 첫 ReactJS 프로젝트를 시작하면서 핫한 기술을 배운다는 생각때문에 매우 설레고 프런트 개발자가 되기 위한 여정에서 한 걸음을 내딛었다는 뿌듯함도 느꼈다. 물론 이를 완벽히 내 것으로 만들기 위해서 많은 노력이 필요할 것이다. 다시 초심잡고 화이팅하자!