입문 #04 - 프로젝트 구조 생성

환경설정까지 완료했으니 프로젝트 구조를 잡은 후 "Hello World"를 화면에 출력해보도록 하겠습니다.

public 경로 생성

먼저 html, css, image 등 static한 resource를 보관하고 context root가 될 경로를 생성하겠습니다. 최상위 경로 바로 아래 public이라는 디렉토리를 하나 생성합니다.

public 아래에는 image, css 디렉토리를 각각 하나씩 생성합니다. 생성한 후의 프로젝트 구조는 아래 그림과 같습니다.

초기 페이지 생성

아래와 같이 public/index.html 파일을 생성합니다. 별 내용은 없습니다.

<!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">
        <link rel="stylesheet" href="./css/main.css" />
    </head>
    <body>
        <div id="app"></div>
        <script type="text/javascript" src="main.js"></script>
    </body>
</html>

css 경로 하위의 -아직은 없지만- main.css 파일과, 역시 아직은 없지만 src 경로 하위의 main.js 파일을 import 합니다.
그리고 DOM을 Rendering 할 영역으로 app 영역을 하나 만들어 줍니다.

초기 CSS 생성

/public/css/ 하위에 main.css 파일을 하나 생성하고 아래 내용을 추가합니다.

html{font-size:10px;}
html, body, div, span, ul, li, h1, h2, h3, table{margin:0;padding:0;}
body, button, input {font-family:'나눔고딕', 'NanumGothic', 'Dotum', '돋움', 'gulim', '굴림', Helvetica, sans-serif;color:#000;font-size:1.4rem;font-weight:400;}
li {list-style:none;}
a:link, a:hover{text-decoration:none;}

문서에서 사용할 기본적인 stylesheet 설정(문서의 font, margin, padding 등)을 선언합니다.

이제 실제 React로 개발할 source 경로를 하나 만들겠습니다. 프로젝트 root 하위에 /src 디렉토리를 하나 생성하고 하위에 main.js를 하나 생성하겠습니다.

초기 JS 생성

main.js는 아래와 같은 코드로 개발합니다.

import React from 'react';
import ReactDOM from 'react-dom';

ReactDOM.render('Hello World', document.getElementById('app'));

현재까지 작성한 경로 및 파일들을 보면 아래와 같은 구조로 구성됩니다.

애플리케이션 실행

이제 이 상태에서 Hello World를 출력해보기 위해 Terminal에서 프로젝트 root 경로로 이동하여 yarn start를 입력해 봅니다.

yarn start

package.json에 설정한 start command를 읽어서 프로그램을 기동하는 명령어 입니다. 우리는 아직 package.json에 start command를 선언하지 않았으므로 Terminal에 아래와 같은 오류가 발생합니다.

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']
    },
    output: {
        path: path.resolve(__dirname, './build'),
        filename: '[name].js'
    },
    module: {
        rules: [{
            test: /\.css$/,
            use: [
                'style-loader',
                'css-loader'
            ]
        }, {
            test: /\.s[a|c]ss$/,
            use: [
                'sass-loader',
                'style-loader',
                'css-loader'
            ]
        }, {
            test: /\.(jpg|png|gif|jpeg|woff|woff2|eot|ttf|svg)$/,
            use: 'url-loader?limit=100000'
        }, {
            test: /\.jsx?$/,
            use: {
                loader: 'babel-loader'
            }
        }]
    },
    plugins: [],
    devServer: {
        static: './public',
        host: 'localhost',
        port: 8080
    }
};

이제는 다시 애플리케이션을 실행해 보겠습니다. Terminal로 프로젝트 root 경로로 이동하여 아래의 명령어를 입력합니다.

yarn start

webpack.config.js에 devServer port를 8080으로 설정했으므로 브라우저에서 아래 URL로 접근합니다.

http://localhost:8080

모든 작업이 정상적으로 이루어 졌다면 화면에 아래와 같이 Hello World가 표시됩니다.

현재까지 작업한 프로젝트 구조는 아래와 같습니다.

수고하셨습니다~!

Author And Source

이 문제에 관하여(입문 #04 - 프로젝트 구조 생성), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@redballs/React-입문-04-프로젝트-구조-생성

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)