[React] React JS 시작하기

플러터를 공부한지도 반년에 근접하고 있다.

product를 만들기 위해 매일같이 출근해 근무하는 덕에 비약적으로 실력이 느는 것이 느껴지지만

새로운 기능들을 추가하고 기술들을 접할 때마다 머리를 싸매고 답이 나올때까지 구글링을 한다.

정말 주니어 개발자의 길은 멀고도 험하다.

하지만 아무리 힘들어도 앱을 만드는 것만으론 만족할 수 없다. 웹도 공부하자.

 

최근에 내가 존경하고 좋아하게된 사람이 리액트를 배우고있다.

경쟁심이 불타기도 하고, 함께하고 싶은 마음에 나 또한 리액트를 틈틈히 배우고자한다.

리액트와 플러터 둘 모두를 자유자재로 다룰줄 안다면 정말 세계정복이 가능하지 않을까?(..)

또, 플러터와 리액트(네이티브)가 비교되는 기술인 만큼 둘의 장단점을 확실히 알고 사용할 수 있을 것 같다.

 

React JS

리액트는 플러터에 비해 국내 자료가 상당히 많다. 유명 유튜버만 해도 다수가 리액트의 유료 및 무료 강의를 제공해준다.

이런 강의들을 참고하면 플러터를 배우는 것보다 커리큘럼 대로 수월하게 배울 수 있을 것이다.

 

 

설치

Node JS를 설치한다

Node.js

 

터미널/CMD에서 아래 명령을 입력한다.

npm i -g create-react-app

 

프로젝트를 생성한다

npx create-react-app my-app

플러터처럼 VS Code 팔레트에서 생성하려면 확장 프로그램이 필요하다.

 

 

디버깅 설정

VS code에서 프로젝트를 불러와 F5를 누르면 blank screen이 출력될 것이다.

VS code의 왼쪽 하단의 디버그 모드를 node JS로 변경해주어야한다.

왼쪽 아래의 Run Script... 부분을 클릭하고, 팝업되는 창에서 Node.js를 선택

그리고 F5로 디버그하면 감격스러운 리액트 웹페이지를 볼 수 있다.

리액트도 플러터와 같이 hot reload를 지원한다.