(React 공부) 개발환경을 셋팅하고 React를 실행시켜보자!

in SteemCoinPan •  2 years ago 

안녕하세요! @gijoona입니다.

이번에 React 초급을 배우면서 내용을 간략하게 정리해두고자 합니다 :-)

오늘 내용의 목표는 facebook에서 제공하는 create-react-app을 이용하여 기본화면을 브라우져에 띄워보는 것 입니다. 매우 간단하므로 바로 시!작!

우선 기본화면. 오늘의 목표 입니다.


개발환경

  • Visual Studio Code
  • Nodejs/NPM

기본적으로 저는 Visual Studio Code(이하 vscode)와 Nodejs가 다 설치되어있습니다만!

설치하셔야한다면 아래의 링크를 참고하시기 바랍니다.

 - vscode : https://code.visualstudio.com/

 - Nodejs: https://nodejs.org/ko/


설치가 완료되었다면 오늘의 시작이자 끝인 create-react-app를 이용하여 React 실행에 필요한 환경설정 전반을 해결하실 수 있습니다.

더 내려가다보면 아시겠지만 저는 my-app-name을 react-exam으로 하였습니다.

뙇! 완료!!

표시된 내용을 대략적으로 보자면 yarn을 이용하여 start, build, test, eject를 할 수 있다고 되어있군요.

그리고 react-exam 폴더로 이동해서 yarn start를 해보라는 듯... 하지만 저는 npm을 사용할 겁니다.

이유는 없습니다. ㅋ


일단 시키는 대로 react-exam 폴더로 이동합니다. 그리고 npm run start를 입력하면 아래와 같이 localhost로 접속할 수 있는 URL이 표시됩니다.

별도의 설정을 하지 않는다면 기본적으로 3000 포트를 사용합니다.

그리고 이제 브라우져를 켜시고 http://localhost:3000을 주소창에 입력하시면... 결과는 포스팅 위쪽에 캡쳐한 목표 이미지와 같이 나오는 것을 볼 수 있습니다.


... 잘 나오셨...겠죠? :-D


그럼 오늘의 포스팅은 여기까지 하겠습니다.

다들 즐거운 밤 되세요.

Authors get paid when people like you upvote their post.
If you enjoyed what you read here, create your account today and start earning FREE STEEM!