저번 시간에는 프로젝트 경로를 생성하고 개발에 필요한 모듈들을 설치해 보았습니다. 설치하는 과정에서 의존성에 대해서도 잠시 알아보았습니다. 이번에는 VSCode에 프로젝트를 반입해서 프로젝트 구조 및 보일러 플레이트 코드를 작성한 후 간단하게 "Hello World"를 출력해보겠습니다.
VSCode로 프로젝트 열기
먼저 빈 VSCode 창을 하나 열고 [폴더 열기] 버튼을 클릭합니다.
만들어 둔 searchNaverApi 폴더를 선택하여 엽니다.
해당 폴더를 선택하면 VSCode에 프로젝트가 아래와 같이 반입됩니다.
프로젝트 구조 생성
프로젝트 하위에 폴더를 두 개 만들어 보겠습니다.
[./public]
public 이라는 폴더에는 html, css, image 등 정적인 Resources를 관리합니다.
[./src]
src 라는 폴더에는 React 기반으로 개발하는 JavaScript 소스 코드를 관리합니다.
먼저 public 폴더를 생성하고 하위에 index.html 파일을 생성하고 아래와 같이 작성합니다. html 파일에는 별 내용은 없으며 React 모듈을 초기화 할 main.js 파일을 포함하는 부분과 React 애플리케이션을 Rendering 할 "app"라는 아이디를 가진 div를 하나 선언합니다.
<!DOCTYPE html>
<html>
<head>
<title>Search Naver API</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
</head>
<body>
<div id="app"></div>
<script type="text/javascript" src="main.js"></script>
</body>
</html>그 다음에는 index.html 파일에 사용할 main.js 파일을 ./src 경로 하위에 생성하고 아래와 같이 작성합니다.
import ReactDOM from 'react-dom';
ReactDOM.render('Hello World', document.getElementById('app'));현재까지 작성한 경로 및 파일들의 구조는 아래와 같습니다.
애플리케이션 실행
이제 이 상태에서 "Hello World"를 출력해보기 위해 터미널에서 프로젝트 루트 경로로 이동하여 아래 명령어를 입력합니다.
yarn startpackage.json 파일에 설정한 start command를 읽어서 프로그램을 기동하는 명령어 입니다. 우리는 아직 package.json에 start command를 선언하지 않았으므로 터미널에 아래와 같은 오류가 발생합니다.
yarn run v1.22.17
error Command "start" not found.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.package.json 파일에 start command를 설정해 보겠습니다. package.json 파일을 열어 가장 아래 부분에 start command를 아래와 같이 추가합니다.
"scripts": {
"start": "NODE_ENV=development webpack-dev-server"
}
그리고 애플리케이션 실행을 위해서 webpack-dev-server를 사용해야 하므로 webpack 설정 파일을 프로젝트 root에 하나 생성합니다. 아래와 같은 내용으로 webpack.config.js 파일을 생성합니다.
'use strict'
const path = require('path');
module.exports = {
entry: {
main: ['./src/main.js']
},
devServer: {
static: './public',
host: 'localhost',
port: 8080
}
};간단한 설정만 일단 추가합니다. entry point를 main.js로 설정하고 개발 서버 루트를 ./public 경로 하위로 설정합니다.
다시 애플리케이션을 실행해 보겠습니다. 다시 프로젝트 루트 경로에서 터미널로 아래 명령어를 입력합니다.
yarn startwebpack.config.js 파일에 devServer port를 8080으로 설정했으므로 개발 서버는 8080 포트로 기동됩니다. 브라우저에서는 아래 경로로 접근하면 됩니다.
http://localhost:8080모든 작업이 정상적으로 이루어졌다면 화면에 아래와 같이 "Hello World"가 표시됩니다. index.html에 작성한 코드에서 <div id="app" /> 영역에 "Hello World"가 표시되었습니다.
다음 편에서는 목록을 표시하는 부분인 목록 Component를 만들어 보겠습니다.
'React > React 기초 (List)' 카테고리의 다른 글
| React 기초 (목록 만들기) 06 - Tab 버튼 구현 (0) | 2022.07.03 |
|---|---|
| React 기초 (목록 만들기) 05 - ListView UI 구성 (0) | 2022.07.01 |
| React 기초 (목록 만들기) 04 - API 호출 (0) | 2022.06.28 |
| React 기초 (목록 만들기) 02 - 프로젝트 생성 (0) | 2022.06.24 |
| React 기초 (목록 만들기) 01 - Concept (0) | 2022.06.23 |