[React.JS] Ready to React! .00

 

안녕하세요! RyuWoong입니다.

프론트엔드 개발자로 진로를 정하고 React를 공부하고 있습니다.

React를 공부하면서 배운 내용을 정리하고 쉽게 설명하여 향후 다른 분들께 도움이 되고자 이 글을 작성합니다.

⚠ 부족한 점이 많을 수도 있습니다! 부족한 내용이나 틀린 내용을 댓글로 알려주시면 반영토록하겠습니다.

 

2020.12.09 RyuWoong 드림.

---

🙋‍♂️React를 시작하기 전 준비하기.

 

먼저 React를 사용하기 이전에 HTML과 JavaScript 지식을 필요로 합니다.

해당 지식은 아래 링크에서 무료로 배우실 수 있습니다.

WEB - 생활코딩

WEB1 - HTML & Internet - 생활코딩

WEB2 - JavaScript - 생활코딩

 

그 다음, Node.js가 필요합니다. 아래 링크에서 설치할 수 있습니다.

Node.js

만약, Node.js에 관해 배우고 싶다면 아래 링크에서 무료로 배우실 수 있습니다.

WEB2 - Node.js - 생활코딩

 

Node.js까지 설치를 완료 하셨다면, 마음에 드는 IDE(통합개발환경) 또는 Editor(편집기)를 설치하세요.

대표적인 IDE로는 WebStorm이 있으며, Editor로는 VS Code , Atom 등이 있습니다.

저는 VS Code를 사용합니다. 아래에서 받으실 수 있습니다. 본인의 운영체제에 맞게 받아 설치하세요.

Visual Studio Code - Code Editing. Redefined

 

그 다음 터미널을 실행한 뒤, 아래와 같이 명령어를 입력해봅시다.

npm install -g yarn

npm은 Node.js를 설치하면 함께 설치되는 Node Package Manager의 약자 입니다.

install은 설치, -g 는 global의 약자로 전역에 설치하라는 의미입니다. 자세한 사항은 구글링!

yarn은 설치할 패키지명으로, 이것 또한 프로젝트의 의존성을 관리하는 JavaScript의 패키지 매니저입니다. 의존성이라는 말이 어려울 수 있는데, 개발을 하다보면, 개발자가 모든 코드를 처음부터 작성하는 것 보단, 때로는 잘 만들어진 코드(모듈)를 가져와 사용하게 됩니다. 그 모듈들을 리스트업 및 버전 관리, 설치, 제거 등을 해주는 역할을 합니다. 앞서 말한 npm 도 비슷한 역할을 하니 취향에 따라 고르시면 되겠습니다.

 

✋잠깐! Npm과 Yarn 뭐가 더 좋나요? 좋은 글이 있어서 덧붙입니다.

Npm vs Yarn

다음, 아래와 같이 터미널에 입력합니다.

npm install -g create-react-app

create-react-app(CRA)은 명령어로 쉽게 React App 초기 구성을 해주는 도구입니다.

CRA를 사용하면, Babel, Webpack 같은 도구를 따로 설치하지 않아도 React App을 쉽게 만들 수 있습니다.

설치가 다 완료되었다면, 터미널에서 프로젝트를 생성할 폴더로 이동 하신 후 생성할 폴더에서 아래와 같이 입력 합니다.

create-react-app newapp

현재 폴더에서 newapp폴더가 생성되고 안에는 새로운 React App이 생성됩니다.

터미널에서 newapp로 이동한 후 아래와 같이 명령어를 입력하면, React App이 실행 됩니다.

yarn start

위처럼 간단하게 React로 개발을 시작 할 수 있습니다.

여기까지 React를 시작하기 위한 준비단계였습니다. 그럼 시작해볼까요?