React 리액트 설치 및 사용방법.

React 리액트 설치 및 사용방법.

 

 오늘은 리액트 설치에 필요한 것은 무엇인지,

사용하는 방법은 무엇인지 알아보려고 합니다.

여느 때와 같이 전혀 비전문적이게 간단하게 알아보겠습니다.

 

목차

1. Visual Studio Code란 무엇인가?
2. Node.js란 무엇인가?
3. React 사용법.

 

1. Visual Studio Code란 무엇인가?

 

짧게 VSCode라 불리며  Microsoft에서 제공하는 무료 코드 에디터입니다.

설치 방법은 간단합니다.

https://code.visualstudio.com/

Visual Studio Code - Code Editing. Redefined

1. Google에 VSCode를 검색합니다. 혹은 링크를 이용해주세요.

2. 맨 처음에 검색된 홈페이지에 들어갑니다.

3. OS(ex 윈도우, 리눅스, 맥)에 맞는 설치 파일을 다운로드 후 설치해줍니다.

 

많은 개발자들이 VSCode를 이용하여 개발하고 있으며, 추후 마켓플레이스에서

개발의 편의성 혹은 효율성을 위해 추가적인 익스텐션들을 다운로드를 할 수 있습니다.

VSCode를 이용하면 다양한 프로그래밍 언어를 손쉽게 작성하실 수 있습니다.

 

2. Node.js란 무엇인가?

 

 Node.js란 Chrome V8 Javascript 엔진으로 빌드된 Javascript 런타임입니다.

Node.js는 원래 백엔드 즉 서버 쪽에서 쓰이게 됩니다.

하지만 Node.js안에 npm 녀석이 리액트를 위해 필요합니다.

(추후 Node.js로 백엔드를 설명하게 된다면 그때 더 자세히 설명하겠습니다.

지금은 단지 Node.js의 API는 비동기식으로 작동하여,

멈추지 않고 지속해서 다음 동작을 수행한다는 것만 아시기 바랍니다.)

자 그럼 설치를 하러 가겠습니다.

 

https://nodejs.org/en/

 

1. OS에 맞는 최신 버전의 Node.js를 다운로드해주세요.

2. 모두 기본값으로 두신 뒤 설치를 진행하시면 됩니다.

3. 다운로드가 끝나면 cmd 창을 열어주세요.

(밑에 사진의 검색창에서 cmd를 검색 후 실행해주세요.)

4. 검은색 창이 뜨는지 확인해주세요.

(밑에 사진과 같은 창이 실행되었나요?)

5. cmd에서 node -v 혹은 node --version을 입력해주세요. 

6. 밑의 사진과 같이 설치한 Node.js의 버전이 뜨신다면 성공입니다.

(버전은 다를 수 있습니다.)

7. 이번에는 똑같이 npm -v 혹은 npm --version을 입력해주세요.

8 이번에도 별다른 에러 없이 버전 정보가 출력된다면 완료입니다.

 

 

3. React 사용법.

 

 이제 마지막으로 한 가지만 더 다운로드 후,

리액트를 시작할 수 있습니다.

그럼 과정을 알려드리겠습니다.

 

1. 바탕화면에 React를 위해 디렉터리(폴더)를 생성해 주세요.

(디렉터리(폴더) 이름은 아무거나 상관없습니다.)

2. VSCode를 실행하신 뒤 왼쪽 상단 File -> Open Folder를 클릭,

방금 바탕화면에 생성한 디렉터리(폴더)로 이동해주세요.

3. 왼쪽 상단 Terminal -> New Terminal을 선택해주세요.

VSCode하단에 아까와 같은 cmd 창이 생기게 됩니다.

4. 하단의 창 오른쪽 상단에 cmd라고 적혀있는지 확인하세요.

(사진을 참고해 주세요. cmd가 아닌 Powershell이라면 cmd로 바꿔주세요.)

* 꼭 바꾸실 필요는 없으나 혹시나 함에 있어 바꾸시는 걸 추천드립니다.

5. 아래의 명령어를 VSCode 내부의 cmd에 입력해주세요.

리액트 설치를 도와주는 모듈을 글로벌하게 설치하는 명령어입니다.

-g 명령어를 사용하여 설치하면, 폴더 위치가 어디든지 설치한 모듈을 실행 가능합니다.

npm install -g create-react-app

 

6. 추가로 아래의 명령어를 VSCode 내부의 cmd에 입력해주세요.

리액트를 도와주는 모듈을 이용해 리액트에 필요한 요소들을 설치하는 명령어입니다.

맨 끝부분 my-app은 리액트에 필요한 파일들이 설치된 디렉터리(폴더)의 이름입니다.

아무렇게나 이름을 바꾸셔도 좋습니다. 단! 디렉터리(폴더) 이름에 대문자가 들어가면 안 됩니다.

npx create-react-app my-app

 

7. 설치가 완료되면 추가로 명령어를 입력해줍니다.

이 명령어는 my-app 디렉터리(폴더)로 이동하는 명령어입니다.

폴더의 이름을 바꾸셨다면 cd 폴더 이름으로 명령어를 실행해 주세요.

cd my-app

8. 마지막으로 한번 더 아래의 명령어를 입력해주세요.

npm을 이용해 리액트를 실행시키는 명령어입니다.

그리고 기다려줍니다.

npm start

 

리액트가 작동하는 브라우저가 자동으로 실행되었나요??

축하드립니다!!!

리액트를 시작하실 준비를 모두 마치셨습니다.

다음에는 리액트가 어떻게 작동하는지 작은 과제를 같이 해보는 게시물을 작성해보겠습니다.

혹시 에러가 뜨시는 분은 밑에 댓글을 달아주시면 가능한 한 빠르게 도움을 드리겠습니다.

 

이렇게 리액트 설치방법이 끝이 났습니다.

이후 리액트로 만드실 수 있는 프로젝트는 무궁무진합니다.

언제나 새롭게 도전하고 개발해나가는 모습은 누가 봐도 멋집니다.

무언가 새롭게 시작한다는 말은 항상 긍정적인 부분과 부정적인 부분이 공존합니다.

하지만 부정적인 부분 때문에 포기한다면, 그 뒤에 있을 더 큰 긍정적인 부분들을 버리는 것과 같습니다.

항상 건강하시고 도전하세요!

 

완벽한 준비란 없다, 완벽한 준비란 영원히 시작하지 않는 것과 같다.