Visual Studio Code로 React 사용하는 방법(node js 사용)

Visual Studio Code로 React 사용하는 방법

오늘은 Visual Studio Code 에디터를 사용해서

React를 사용하는 방법에 대해서 알아보겠습니다.

 

물론 다른 에디터에서도 사용할 수 있지만

React를 사용하기 위해 필요한 터미널이 있고

무료이기 때문에 Visual Studio Code를 사용하겠습니다.

 

React를 사용하기 위해서는

React를 다운로드하거나, url을 통해 연결하거나, node js를

통해 불러오는 방법 등이 있습니다.

 

오늘은 node js를 통해서 React를 불러오는 방법을

소개해드리겠습니다.

 

(1)

node js 설치

 

우선 node js를 설치하셔야 합니다.

node js 홈페이지

구글에 node js를 검색하시고

우측의 최신 버전을 다운로드해줍니다.

(저는 window에서 진행했습니다.)

 

설치가 완료되시면  잘 설치가 되어있는지 확인해보겠습니다.

터미널이나 명령 프롬프트를 열어서

거기에 node -v을 작성하시면 됩니다.

 

이렇게 v 하고 버전이 나오면 설치가 완료된 것입니다.

만약 저와 다르게 뜬다면 다시 설치에 문제가 있는 것이기 때문에

다시 설치하시면 됩니다.

 

(2)

Visual Studio Code 설치

 

node js설치가 완료되시면 Visual Studio Code를 설치하시면 되는데

이미 설치가 되어 있으시면 다음 단계로 넘어가시면 됩니다.

 

설치가 아직 안되신 분들은 Visual Studio Code를 설치하셔야 합니다.

방법은 아래 링크에 작성해 두었습니다.

Visual Studio Code 설치(링크 포함)

 

(3)

React를 진행할 폴더 생성

 

이제 본격적으로 React를 진행할 폴더를 생성하시면 됩니다.

폴더를 생성하시고

Visual Studio Code에서 폴더를 연결해 주세요.

폴더와 연결되었다면

상단에 터미널(terminal)을 실행해 줍니다.

 

(4)

터미널을 사용해서 폴더에 React 생성

 

터미널을 켜셨으면 저와 똑같이 작성해 줍니다.

 

1) npx create-react-app '만들고 싶은 프로젝트 폴더의 이름'

먼저 폴더에 React를 생성하는 과정입니다.

Visual Studio Code와 연결된 폴더 안에

React로 작업할 프로젝트 폴더를 생성하는 과정입니다.

 

시간이 조금 걸려서 Visual Studio Code에

'만들고 싶은 프로젝트 폴더의 이름'을 가진 폴더가 등장하면 됩니다.

 

2) npm start

이제 React가 생성된 파일을 실행해주는 방식으로

npm start를 터미널에 입력하시고 조금 기다리시면

웹이 하나 실행될 것입니다.

 

npm start 결과 웹

 

(5)

완성

 

웹이 잘 실행되었다면 생성이 완료된 것입니다.

 

마지막으로 React를 사용해보고 마무리하겠습니다.

 

Visaual Studio Code에서

React를 생성한 폴더 중

 

src라는 이름의 폴더를 누르시면

많은 파일들이 보일 것입니다.

(src 폴더가 현재 React에서 다뤄지는 파일 영역입니다.)

 

파일 중에 App.js를 누르시면

JS지만 HTML의 구조를 가지고 있는

신기한 현상을 볼 수 있습니다.

 

이제 p태그에 작성된

'Edit <code>src/App.js</code> and save to reload.'

부분을 원하는 데로 수정해 보시고

저장하시면 npm start로 열었던 웹에서

똑같이 수정이 된 것을 확인하실 수 있습니다.

 

이렇게 되면 React와 연결이 완료되었다고 할 수 있습니다.

 

왜 JS에서 HTML을 하는지에 대한 궁금증이 있으실 텐데

다음에 다뤄보도록 하겠습니다.

 

---

 

오늘은 React를 Visual Studio Code로 생성해서

잠깐 사용해보는 것까지 해봤는데

 

React를 사용하시기 전에 중요한 점은

React는 사전에 필요한 지식들이 있습니다.

JS, 약간의 HTML, CSS를 알아두셔야 합니다.

 

만약 처음 개발을 공부하시는데 React 사용하신다면

우선 JS를 공부하시고 오시는 것을 추천드리고

 

만약 모르신다고 해도 진행하시는 데에 큰 문제는 없지만

프레임워크는 언제 다른 프레임워크로 바뀔지 모르기 때문에

JS의 지식이 있으시면 다른 프레임워크로 전환이 되었을 때도

빠르게 공부하실 수 있을 겁니다.

 

감사합니다!

 

 

HTML, CSS, JS란?