React 설치하고 실행하기 - 페이스북, 인스타그램 만들기

오늘은 페이스북에서 개발한, 그리고 페이스북에서 사용되고 인스타그램에서도 사용되는

리액트를 설치하고 실행하는 방법에 대해서 알아보겠습니다

React는 유저 인터페이스를 만들 때 사용되는 오픈 소스 자바스크립트 라이브러리입니다

프런트엔드 개발자 사이에서 굉장히 많은 인기를 얻고 있어요

실제로 npm 패키지 다운로드 수는 react가 자바스크립트 라이브러리 중 1등입니다

그러면 이제 리액트를 설치해 볼까요?

https://nodejs.org/ko/

Node.js

node.js 기반으로 실행되기 때문에 먼저 다운 받아 주세요

node.js 는 보통 서버 구축을 위해서 많이 사용되는데

자바스크립트 코드가 브라우저 밖에서도 실행되게끔 해줍니다

 

설치가 끝나셨으면 터미널에 node -v 명령어를 쳐보시면

node.js 버전을 보실 수 있어요

vscode 가 터미널도 있고 참 편한 것 같아요 ㅎㅎ

 

만약 이런식으로 node 용어가 cmdlet, 함수, 스크립트 파일

이런식으로 프로그램 이름으로 인식되지 않습니다

나올 경우 node js를 환경변수에 다시 등록해주거나

vscode 프로그램을 재시작해보시면 됩니다 

 

아래 사이트는 리액트 공식 사이트라서 사용하시기 전에 한번 읽어보시는 게 좋아요

https://ko.reactjs.org/

React – 사용자 인터페이스를 만들기 위한 JavaScript 라이브러리

빠르게 실행할 수 있는 방법입니다

명령어를 터미널에서 입력해 주세요

npx create-react-app my-app
npx로 리액트 앱을 만듭니다 my-app은 프로젝트 이름입니다

그러면 이렇게 패키지들이 쭈우욱 설치가 됩니다

PC 환경에 따라서 꽤 오래 걸릴 수도 있어요

패키지를 다운로드 받으셨으면

cd my-app
만든 프로젝트 디렉터리로 이동해 주세요

npm start
해당 app을 실행해 주세요

그러면 오른쪽 그림처럼 페이지가 뜨게 되면 최초 app 실행 성공입니다

꼭 리액트 프로젝트 폴더로 이동해준다음 npm start를 해주세요

안되시는 것 있으면 댓글 남겨주시고

좋아요도 부탁드릴게요 😁