[React.Js/JavaScript]
간단 리엑트 소개와 실행하기
React 소개
React는 사용자 인터페이스를 조금 더 쉽게 작성하기 위한 JavaScript 라이브러리 입니다.
페이스북에서 개발하여 현재는 인스타그램, 넷플릭스 등... 여러 유명 서비스에서 사용되고 있는 라이브러리 입니다.
React의 컴포넌트 기반의 방식이고 이 컴포넌트 로직은 JavaScript 로 작성하여 React 프로그램을 만들경우 DOM을 이용하여 데이터를 쉽게 전달이 가능하게 합니다.
DOM 이란 Document Object Model의 약자로 HTML, XML 문서의 프로그래밍 인터페이스 입니다. 문서의 구조화된 표현을 제공하며 프로그램밍 언어가 DOM 구조에 접근할 수 있는 방법을 제공하여 쉽게 변경할 수 있게 도와줍니다.
React 홈페이지에서는 한 번 배우면 어디서나 쓸 수 있다고 합니다. ㅎㅎㅎ
그러므로 우리도 한 번 배워서 어디서나 사용하도록 합시다.
React 실행하기
React는 페이스북에서 개발하였고 페이스북에서 React 앱을 빠르게 만들어주기 위한 코드도 공개하였습니다.
바로 create-react-app 이라는 깃허브에 올라와 있는 프로젝트 입니다.
(주소 : https://github.com/facebook/create-react-app)
이제 create-react-app 으로 React 앱을 만들어보도록 하겠습니다.
우선 NodeJs 를 버전 6 이상으로 준비해야합니다.
낡은 버전은 이제 업그레이드 하도록합시다.
그럼 Node를 설치하며 딸려온 npx을 이용하여 다운로드를 받도록합니다.
이는 npm 5.2 버전 이상이면 가능합니다.
프롬프트를 이용하여 프로젝트를 만들 적절한 폴더로 이동하여 아래와 같은 명령어를 입력합니다.
혹은 VSC를 이용하여 이동하셔도 됩니다.
2018/07/21 - [리뷰 & 팁/팁] - [팁] 텍스트 에디터 추천! Visual Studio Code (비주얼 스튜디오 코드) 추천합니다.
npx
npx create-react-app 만들 앱 이름 ex) my-app
또한 엄청난 패키지 관리자인 Yarn을 이용하신다면 Yarn을 통해서도 앱을 만들 수 있습니다.
Yarn
yarn create react-app my-app
막 페키지 이름 뭐로할꺼냐 디스크립션 쓰는 것이 나온다면 그냥 입력할 사람은 입력하고 귀찮다 싶으면 엔터를 연타합니다.
설치가 진행되고 난 후 아래와 같은 폴더구조의 앱이 생성됩니다.
my-app ├── README.md ├── node_modules ├── package.json ├── .gitignore ├── public │ ├── favicon.ico │ ├── index.html │ └── manifest.json └── src ├── App.css ├── App.js ├── App.test.js ├── index.css ├── index.js ├── logo.svg └── registerServiceWorker.js
성공적으로 앱을 만들었다면 아래와 같은 화면을 볼 수 있습니다.
제 컴퓨터에는 yarn이 설치되어있어 혹시 다른 화면을 본다면 부디 댓글로 알려주세요
화면에서 cd my-app 으로 이동한 뒤 yarn start 를 하라고 합니다.
하지만 저는 말을 안듣습니다.
cd my-app 명령어를 통해 이동하여 code 명령어로 해당 폴더 구조와 파일을 보도록 하겠습니다.
App.js 를 열게되면 코드를 통해 Componet 기반이라는 것을 다시한번 확인하게 됩니다.
또한 import 하는 방법과 export 방법도 확인 할 수 있고
render() 함수를 이용하여 Welcome to React 를 만드는 것을 확인 할 수 있습니다.
이제는 index.js 를 보도록 하겠습니다.
index.js 를 통해서 React는 ReactDOM을 이용하는것도 확인하게 되었습니다.
이제 시작을 해보도록 합시다
React 시작
package.json 파일을 보고 스크립트를 확인 합시다
Scripts 를 확인해 보니 start, build, test, eject 명령어를 이용하여 실행 할 경우 어떤 명령어로 실행되는지 확인 할 수 있습니다.
우리는 시작위하여 start 명령어를 입력합시다.
yarn start
명령어를 입력하였다면 3000번 포트를 이용하여 접속이 가능합니다
또한 동시에 웹 브라우저가 실행됩니다.
웹 브라우저에 위와 같은 화면이 보여진다면 축하합니다!
실행에 성공하였습니다!
다음 포스팅에는 실행에 성공하였으니 React를 조금 만지막 만지작하도록 하겠습니다.
***추가로 크롬 웹스토에서 React 개발자를 위한 툴 추가하여 사용하시면
아래와 같이 React 를 위한 툴이 제공됩니다.
이상으로 간단 리엑트 소개와 앱 실행하기(create-react-app)
포스팅을 마치겠습니다.
광고를 클릭해 주시면 제 젤리값에 큰 힘이 됩니다.
