리액트 학습

React를 위한 환경 조성하기

• 기존 jQuery에서 쓰던 <script ~></script>방식으로는 만들 수 있는 가능성의 범위가 굉장히 적어진다.
• React는 Node, yarn, Webpack, Babel 등의 도구를 설치하여 프로젝트 기반을 닦아놓으면 기존의 개발보다 더 쉽고 편리한 환경을 얻을 수 있게 된다.

---

Webpack과 Babel의 용도

• Webpack은 여러 파일들을 한개로 결합하기 위해 사용하는 도구다.
• Babel은 JSX 등의 새로운 자바스크립트 문법을 무리없이 사용할 수 있도록 해주는 도구다.

---

React 시작하는 방법

• yarn 또는 npm을 설치한 후 cmd에서 npm install -g create-react-app 또는 yarn global add create-react-app 명령
  을 통해 create-react-app을 설치해준다.
  (이하 yarn으로 통일하나 npm으로 명령해도 동일한 효과가 나타남)

npm을 통한 create-react-app 설치

---

 

• cd를 통해 원하는 폴더로 이동 후 create-react-app (원하는 폴더 이름) 명령을 통해 프로젝트를 시작한다.

react-app폴더를 새로 생성 후 리액트 프로젝트 기본 설정을 넣는다.

---

 

• yarn start 명령을 통해 개발 모드로 어플리케이션을 실행시킨다.
  생성된 react화면은 localhost:3000의 주소를 가지고 있다.

react가 성공적으로 시작했을 때 출력되는 글자

yarn start를 프로젝트 폴더 내에서 실행하면 나타나는 화면

---

 

* 프로젝트 시작 시 Command failed with exit code 1. 에러가 발생할 수 있다.

•  보통은 yarn또는 npm이 해결 방법을 제시해주기 때문에 따라만 한다면 금세 해결이 가능하다.
•  나의 경우에는 7번까지의 해결 방법이 전부 먹히지 않아 webpack버전 차이의 문제라 생각했었지만, 휴식을 취한 후 다시 시도해본 결과 바보같이 yarn을 제대로 설치하지 않은 상태로 진행하여 제대로 된 결과물이 나오지 않았다는 것을 알게 되었다.
• 다시 yarn을 설치해도 정상적으로 해결되지 않아 yarn의 종속성 해결 조언을 면밀히 살펴보니 webpack의 버전이 내 컴퓨터 안에 두 가지가 함께 존재하는 중이라는 것을 알게 되었다. 하여 두 가지 버전을 모두 지운 다음 새로 webpack을 설치하여 문제를 해결했다.

---

yarn 설치하기

• Yarn 설치 링크에 들어간 후 자신의 운영체제에 맞는 설치 방법을 따라 yarn을 설치한다.