[react/window] 개발환경 설정하기

react 뿐만이 아니라 프로그래밍언어를 사용하기 위해선 개발환경 설정을 먼저 진행해주어야합니다.

오늘은 react 개발환경 설정을 진행해 볼 거예요!

 

설치

- Node.js(설치 시 npm 자동 설치)

- VSCode 

 

 

 

Node.js

https://nodejs.org/ko 

Node.js — 어디서든 JavaScript를 실행하세요

 

설치는 여기서 진행해주시면 되는데요, 위에 언급했듯 nodejs 를 설치하면 npm이 자동으로 설치가 됩니다.

설치는 어려운 거 없고 그냥 본인 버전에 맞는 거로 설치해주시면 되는데요

제가 학부 때 저희 교수님께서 말씀하시길 

가장 최신 버전보다는 가장 많이 안전한 버전으로 설치해라

라고 말씀을 주신 기억이 있어서 저는 페이지에 보이는 LTS(Long-Term Support) 버전으로 설치했습니다.

오랜만에 들어가니 UI가 많이 바뀌었더군요 ㅎㅎ 

그냥 이거 다운받았습니다. 

실행파일 다운로드가 완료되면 실행파일 실행하시고, 따로 설정하실 필요 없이 next 누르시면 됩니다.

프로그램 경로는 따로 안 바꿨어요.

 

다운로드를 마쳤으면 확인을 해봐야겠죠?

powershell 을 열고 아래 명령들을 순차적으로 입력해주세요

node -v
npm -v

 

 

잘 됐네요 ㅎㅎ!

혹시 npm 버전 확인이 어렵다면?

https://jap-boss.tistory.com/97

[Node.js/Window Powershell] npm 설치 안 됨, 파워쉘 PSSecurityException 보안 오류

 

VSCode

vsc(줄여서 부릅니다)는 다양한 언어를 지원하여 통합 개발 환경의 기능을 제공하기 때문에 사용이 굉장히 편리합니다.

설치는 nodejs와 마찬가지로 간단해요!

 

구글에 vsc 다운로드라고만 검색하셔도 금방 다운로드 받을 수 있습니다.

https://code.visualstudio.com/download

Download Visual Studio Code - Mac, Linux, Windows

저는 그냥 Windows라고 대문짝만하게 써져있는 링크 통해서 다운로드 받았습니다. 

후후 귀엽지 않나요

테마는 그냥 제가 찾아서 넣었습니다

네 이건 자랑이 맞습니다.

 

React 간단 실습

이만큼 설치했는데 뭐 하나라도 띄워보는 게 좋겠죠?

vsc에서 터미널을 열어서, 아래 명령어를 입력해주면 됩니다

npx create-react-app <프로젝트명>

성공적으로 설치가 되면  Success!와 함께 사진처럼 사용 방법이 나와요

만약 에러가 나시는 분들은 

- create-react 앱 경로 확인(한 단계 위에 뎁스에서 실행해서 오류나는 경우를 종종 봤습니다)

이래도 안되면 구글링 통해 오류를 한 번 해결해보시는 연습 하는 것도 좋을 거 같아요!

 

설치를 마쳤으면 한 번 띄워봐야겠죠?

npm start

이렇게 나오면 성공!

 

주소창에 따로 localhost:3000을 치지 않아도 이 친구가 나온답니다!

이제 시작입니다 파잇팅❣️