리액트(React)설치 및 개발환경 세팅하기

글을 읽으시기전 필자는 아직 코딩을 공부하고 있는 학생입니다.
여러 책과 블로그 글, 수업을 바탕으로 정리한 내용이니 부족한 부분있다면 댓글로 남겨주시기 바랍니다.

 

안녕하세요! 오늘은 리액트를 설치해보고 리액트를 사용하기 전 개발환경을 세팅해 보겠습니다!

Node.js(노드) 다운로드하기

우선 리액트를 다운로드하는데 왜 노드를 다운로드하나 싶을 것입니다.

우선 Node.js란

크롬의 v8엔진 자바스크립트 엔진으로 빌드한 자바스크립트 런타임입니다!

사실 리액트를 사용함으로써 직접적인 연관은 없지만 Node.js를 다운로드하음으로써 다양한 도구들이 Node.js를 사용하기 때문에 Node.js를 다운로드한다고 생각하시면 됩니다.

Node.js다운로드 주소

https://nodejs.org/ko/download/

다운로드 | Node.js

빨간색 네모 안에 들어가 있는 부분에서 사용자의 운영체재가 윈도우라면 윈도우 맥이라면 맥 인스트롤러를 선택하셔서 다운받으시면 됩니다!

 

다운로드를 완료하고 다운로드가 잘 되었는지 확인하기 위해 명령 프롬프트 창으로 들어가서

node -v를 입력해 줍니다. 사진을 보시면 16.16.0이 잘 설치되어 있는 것을 확인하실 수 있을 겁니다.

본격적으로 VisualStudioCode 들어가서 리액트 실행해보기

자 이제 리액트 파일을 생성하기 위해서 vsCode

vsCode를 실행시켰다면 터미널을 눌러 새 터미널을 생성해 줍니다.

그리고 저는 REACTSTART라는 폴더를 비주얼 스튜디오에 넣어줄 것입니다.

자! 그럼 이제 본격적으로 터미널 명령어를 사용하여 리액트 폴더를 REACTSTART폴더에 넣어보죠!

우선 cd라는 명령어를 사용해서 파일의 경로를 맞추어 줘야 합니다.

우선 PS C:\Users\moonn\Desktop\ReactStart>

이 부분은 파일의 경로를 나타냅니다. 따라서 리액트 파일을 제가 원하는 폴더에 넣어주려면 경로를 맞추어 줘야겠죠

여기서 사용되는 명령어가 cd라는 명령어입니다.

cd..=> 뒤로 가기 하고 똑같습니다 파일의 경로 이전의 폴더로 갑니다.

cd 파일명 => 파일명에 해당하는 경로로 들어갑니다.

이렇게 경로를 모두 맞추어 제가 원하는 ReactStart라는 폴더에 경로를 맞춰놨다면 

npx create-react-app 사용자가 원하는 폴더 이름

저는 npx create-react-app start 

start라는  폴더명으로 리액트를 만들어 보았습니다.

자 경로도 잘 설치가 됐고 리액트 명령어도 잘 입력을 하였다면 뭐가 막 움직이면서 로딩이 되는 게 보일 것입니다.

이제한 번 기다려보죠!!

자 이렇게 파란 색깔 글씨와 HappyHacking!이라고 떴으면 성공적으로 리액트 파일을 생성한 것입니다.

그리고 이제 마지막으로 저희가 생성한 리액트 파일로 경로를 다시 설정해주시고 npm start를 작성하시면 리액트 파일이 실행이 됩니다!

리액트파일로 경로 설정 및 npm start명령어로 리액트파일 실행

이러한 창이 뜨면 성공적으로 리액트 프로젝트 생성 및 실행을 완료한 것입니다!

리액트 프로젝트 실행 결과창

자! 그러면 오늘도 리액트 설치 및 세팅, 실행까지 알아봤습니다! 이상으로 포스팅 마치겠습니다!!