<![CDATA[
<p><span style="color: #333333;" data-ke-size="size18">기본적으로 자동으로 생성하면 편하고 원하면 수동으로 프로젝트를 설정도 가능 </span></p><p> </p><p><b><span style="color: #333333;" data-ke-size="size18">1. 프로젝트 초기화</span></b></p><p><span style="color: #333333;" data-ke-size="size18">- <span style="background-color: #ffffff;">프로젝트 폴더에서 다음 명령어를 사용하여 React 및 ReactDOM을 설치합니다.</span> </span></p><p><span style="color: #333333;" data-ke-size="size18">- 프로젝트 초기화 : <b>npm init</b></span></p><p><span style="color: #333333;" data-ke-size="size18">- 모듈 설치 : <b>npm install react react-dom react-scripts</b></span></p><p><span style="color: #333333;" data-ke-size="size18">- package.json </span></p><p><span style="color: #333333;" data-ke-size="size18">"scripts": { <br>    <b>"start": "react-scripts start",</b> <br>},</span></p><p> </p><p><b><span style="color: #333333;" data-ke-size="size18">2. App 컴포넌트 작성</span></b></p><p><span style="color: #333333;" data-ke-size="size18">// React 모듈 import</span></p><p><span style="color: #333333;" data-ke-size="size18">import React from 'react';</span></p><p> </p><p><span style="color: #333333;" data-ke-size="size18">// 컴포넌트 정의</span></p><p><span style="color: #333333;" data-ke-size="size18">const App = () => {</span></p><p><span style="color: #333333;" data-ke-size="size18">    return (</span></p><p><span style="color: #333333;" data-ke-size="size18">        <div></span></p><p><span style="color: #333333;" data-ke-size="size18">            <h1>리엑트, React</h1></span></p><p><span style="color: #333333;" data-ke-size="size18">            <p>React Study 시작하기</p></span></p><p><span style="color: #333333;" data-ke-size="size18">        </div></span></p><p><span style="color: #333333;" data-ke-size="size18">    )</span></p><p><span style="color: #333333;" data-ke-size="size18">}</span></p><p> </p><p><span style="color: #333333;" data-ke-size="size18">// 모듈 export</span></p><p><span style="color: #333333;" data-ke-size="size18">export default App;</span></p><p> </p><p><b><span style="color: #333333;" data-ke-size="size18">3. 메인 화면 구현</span></b></p><p><span style="color: #333333;" data-ke-size="size18">import React from 'react';</span></p><p><span style="color: #333333;" data-ke-size="size18">import ReactDOM from 'react-dom/client';</span></p><p> </p><p><span style="color: #333333;" data-ke-size="size18">// 컴포넌트 import</span></p><p><span style="color: #333333;" data-ke-size="size18">import App from "./App";</span></p><p> </p><p><span style="color: #333333;" data-ke-size="size18">// 메인 화면에서 App 컴포넌트를 렌더링</span></p><p><span style="color: #333333;" data-ke-size="size18">const root = ReactDOM.createRoot(document.getElementById('root'));</span></p><p><span style="color: #333333;" data-ke-size="size18">root.render(<App />);</span></p><p> </p><p><b><span style="color: #333333;" data-ke-size="size18">4. HTML 파일 작성</span></b></p><p><span style="color: #333333;" data-ke-size="size18"><!-- 파일: index.html --></span></p><p><span style="color: #333333;" data-ke-size="size18"><!DOCTYPE html></span></p><p><span style="color: #333333;" data-ke-size="size18"><html lang="en"></span></p><p><span style="color: #333333;" data-ke-size="size18"><head></span></p><p><span style="color: #333333;" data-ke-size="size18">  <meta charset="UTF-8"></span></p><p><span style="color: #333333;" data-ke-size="size18">  <meta name="viewport" content="width=device-width, initial-scale=1.0"></span></p><p><span style="color: #333333;" data-ke-size="size18">  <title>React App</title></span></p><p><span style="color: #333333;" data-ke-size="size18"></head></span></p><p><span style="color: #333333;" data-ke-size="size18"><body></span></p><p><span style="color: #333333;" data-ke-size="size18">  <!-- React 앱을 표시할 컨테이너 --></span></p><p><span style="color: #333333;" data-ke-size="size18">  <div id="root"></div></span></p><p><span style="color: #333333;" data-ke-size="size18"></body></span></p><p><span style="color: #333333;" data-ke-size="size18"></html></span></p><p> </p><p><b><span style="color: #333333;" data-ke-size="size18">5. 프로젝트 실행</span></b></p><p><span style="color: #333333;" data-ke-size="size18">- npm start</span></p><p> </p><div class="figure-img" data-ke-type="image" data-ke-style="alignCenter" data-ke-mobilestyle="widthOrigin"><img src="https://t1.daumcdn.net/cafeattach/1PqNJ/3b8df0af1df9ce8fe4c0d25fece1d336ba9dc351" class="txc-image" data-img-src="https://t1.daumcdn.net/cafeattach/1PqNJ/3b8df0af1df9ce8fe4c0d25fece1d336ba9dc351" data-origin-width="279" data-origin-height="127"></div>
<!-- -->
]]>
카페 게시글
React
기본
수동으로 프로젝트 시작하기
주인장
추천 0
조회 5
25.02.15 11:28
댓글 0
다음검색
