<div id="readability-page-1" class="page"><div><p><a href="https://velog.io/@eunjeong/CentOS%EC%97%90-%EC%9B%B9%EC%84%9C%EB%B2%84-%EA%B5%AC%EC%B6%95%ED%95%98%EA%B8%B0">구축한 웹서버</a>에 React를 설치하겠습니다.</p>
<h2 id="패키지-버전확인-및-설치">패키지 버전확인 및 설치</h2>
<p>먼저 패키지의 버전 확인 명령어를 이용해서 패키지가 설치되어 있는지 확인합니다.<br>
<img src="https://media.vlpt.us/images/eunjeong/post/d887e4ad-2598-407b-84fe-c3c16bfeb0ea/image.png"><br>
모든 패키지가 설치되어 있지 않은것을 확인했습니다.<br>
설치를 위해서 root계정으로 접속해야 합니다.</p>
<h4 id="nodejs-설치">node.js 설치</h4>
<pre><code># yum install nodejs
//설치 후 버전확인
# node -v
# npm -v</code></pre>
<h4 id="yarn-설치">yarn 설치</h4>
<pre><code># npm install -g yarn
//설치 후 버전확인
# yarn -v</code></pre>
<h4 id="create-react-app-설치">create-react-app 설치</h4>
<pre><code># npm install -g create-react-app
//설치 후 버전확인
# create-react-app --version </code></pre>
<h2 id="react-app-설치-및-환경구성">React App 설치 및 환경구성</h2>
<p>패키지의 설치가 끝나면 React App을 설치합니다.<br>
저는 <strong>webserver</strong> 라는 이름의 React App을 설치했습니다.</p>
<pre><code># create-react-app webserver</code></pre>
<p>설치가 완료되면 React 서비스를 시작합니다.</p>
<pre><code>// 프로젝트로 이동
# cd webserver
// 서비스 시작
# yarn start</code></pre>
<p><img src="https://media.vlpt.us/images/eunjeong/post/cc016102-c432-406a-98df-3a656048d08d/image.png"><br>
기본으로 지정하는 3000 포트로 접속해서 설치를 확인합니다.<br>
<img src="https://media.vlpt.us/images/eunjeong/post/7e3efaf1-3931-4192-be29-9afbdd8c2c00/image.png"><br>
정상적으로 설치되었습니다.</p>
<h2 id="react-페이지-수정하기">React 페이지 수정하기</h2>
<p>설치가 완료된 react의 페이지를 수정하겠습니다.</p>
<p>페이지의 내용을 수정하기 위해서는 프로젝트의 위치를 알아야합니다. React프로젝트의 위치는 /home/사용자/react 프로젝트명 입니다.</p>
<p>메인페이지의 경로는 <strong>/react프로젝트명/src/App.js</strong> 입니다. 이 파일을 수정하고 localhost:3000 페이지를 새로고침하면 정상적으로 반영된걸 확인 할 수 있습니다.<br>
<img src="https://media.vlpt.us/images/eunjeong/post/26b0f887-a19b-48d8-8183-b09bb1bd9a10/image.png"></p>
<hr>
<h4 id="참고">참고</h4>
<ul>
<li><a href="https://jackerlab.com/react-setting-in-centos8/">https://jackerlab.com/react-setting-in-centos8/</a></li>
<li><a href="https://ko.reactjs.org/docs/add-react-to-a-website.html#add-react-in-one-minute">웹사이트에 React 추가</a></li>
</ul></div></div>

eunjeong.log

구축한 웹서버에 React를 설치하겠습니다.
패키지 버전확인 및 설치
먼저 패키지의 버전 확인 명령어를 이용해서 패키지가 설치되어 있는지 확인합니다.
모든 패키지가 설치되어 있지 않은것을 확인했습니다.
설치를 위해서 root계정으로 접속해야 합니다.
node.js 설치
# yum install nodejs
//설치 후 버전확인
# node -v
# npm -v
yarn 설치
# npm install -g yarn
//설치 후 버전확인
# yarn -v
create-react-app 설치
# npm install -g create-react-app
//설치 후 버전확인
# create-react-app --version 
React App 설치 및 환경구성
패키지의 설치가 끝나면 React App을 설치합니다.
저는 webserver 라는 이름의 React App을 설치했습니다.
# create-react-app webserver
설치가 완료되면 React 서비스를 시작합니다.
// 프로젝트로 이동
# cd webserver
// 서비스 시작
# yarn start
기본으로 지정하는 3000 포트로 접속해서 설치를 확인합니다.
정상적으로 설치되었습니다.
React 페이지 수정하기
설치가 완료된 react의 페이지를 수정하겠습니다.
페이지의 내용을 수정하기 위해서는 프로젝트의 위치를 알아야합니다. React프로젝트의 위치는 /home/사용자/react 프로젝트명 입니다.
메인페이지의 경로는 /react프로젝트명/src/App.js 입니다. 이 파일을 수정하고 localhost:3000 페이지를 새로고침하면 정상적으로 반영된걸 확인 할 수 있습니다.
참고
https://jackerlab.com/react-setting-in-centos8/
웹사이트에 React 추가

CentOS에 React 설치하기

댓글