1. require대신 import구문

원래 다른 파일에 있는 정보들을 가져오거나 패키지를 사용할 때 항상 require을 써서 가져왔었는데!
webpack이 깔려있는 환경에서는 import 구문을 대신 활용할 수 있다.

import -> javascript version, nodejs X
requir -> nodejs에서 처리가 됨

index.jsx 코드에 있던 require 구문들을 import 구문으로 변환해보면 다음과 같다.

const React = require('react')
const ReactDOM = require('react-dom')
const {Component} = React

import React,{Component} from 'react' 
import ReactDOM from 'react-dom'

코드가 좀 더 간결해진다.

파일을 불러올때 확장자를 빼고 불러오려면 webpack.config.js 파일에서
devtool과 entry 사이에 resolve를 넣어줍니다. 그러면 웹팩에서 확장자 없이도 파일을 불러올 수 있도록 처리해줌!

    devtool:'eval', //hidden-source-map
    
    resolve:{
        extensions:['.js','.jsx']  
    },
    entry:{
        app:['./index.jsx']
    },

2. 컴포넌트 안에 다른 컴포넌트 넣기

지난번 포스팅에서 index.jsx 파일 안에 App 컴포넌트를 만들어놨었습니다.
저는 class컴포넌트와 function컴포넌트를 각각 jsx파일을 하나씩 만들어서 생성해보겠습니다.

1) component 폴더 생성 후 ClassComp.jsx, FuncComp.jsx 파일 생성하기

2) ClassComp.jsx, FuncComp.jsx 파일 안에 컴포넌트 생성하기

• ClassComp.jsx

import React, {Component} from 'react'

class ClassComp extends Component{
    render(){
        return(
            <li className="ClassComp">
            	ClassComp
            </li>
        )
    }
}
export default ClassComp //App 컴포넌트에서 받아서 쓰기 위해서 내보내줘야함

• FuncComp.jsx

import React from 'react'

const FuncComp = () => {
    return (
        <li className="FuncComp">
            FuncComp
        </li>
    )

}

export default FuncComp //App 컴포넌트에서 받아서 쓰기 위해서 내보내줘야함

3) 기존의 index.jsx 안에 있던 App 컴포넌트를 빼서 app.jsx라는 개별파일을 만들기

• App.jsx

import React, {Component} from 'react'
import ClassComp from './component/ClassComp' // ClassComp 컴포넌트 받아오기
import FuncComp from './component/FuncComp' // FuncComp 컴포넌트 받아오기

class App extends Component{
    render(){
        return(
            <>
                <h1>Hello React!</h1>
                <ul className="Comp">
                    <ClassComp />
                    <FuncComp />
                    <ClassComp />
                    <FuncComp />
                </ul>
            </>
        )
    }
}

export default App; // node.js에서는 module.exports로 써줬었음, 리액트에서는 바벨 덕분에 module 빼고 쓸 수 있음!

💻 결과물

3. 자동 빌드를 위한 설정값

1) 빌드란❓

소스코드 파일을 실행가능한 소프트웨어 산출물로 만드는 일련의 과정을 말한다.
빌드의 단계 중 컴파일이 포함이 되어 있는데 컴파일은 빌드의 부분집합이라 할 수 있다.빌드 과정을 도와주는 도구를 빌드 툴이라 한다.

출처: https://freezboi.tistory.com/39 [코딩 공작소]

2) 컴파일이란❓

컴파일이란 개발자가 작성한 소스코드를 바이너리 코드로 변환하는 과정을 말한다. (목적파일이 생성됨)
즉, 컴퓨터가 이해할 수 있는 기계어로 변환하는 작업이다. 이러한 작업을 해주는 프로그램을 가르켜 컴파일러(Compiler)라 한다.
자바의 경우, 자바가상머신(JVM)에서 실행가능한 바이트코드 형태의 클래스파일이 생성이 된다.

출처: https://freezboi.tistory.com/39 [코딩 공작소]

3) 그렇다면 자동빌드란❓

내가 이해하기론 쉽게말하면 동기화가 바로바로 진행되는 것이였다!!
코드의 내용을 바꾸고 저장하면 서버를 다시 키지 않아도 그게 바로 화면에 출력되는 것!

❓그렇다면 자동빌드를 설정하기 위해선 어떻게 해야 하는가❓

아래 3가지 패키지들을 설치해주면 된다!

✔ npm install -D react-refresh
✔ npm install -D @pmmmwh/react-refresh-webpack-plugin --save --legacy-peer-deps
("--save --legacy-peer-deps"를 붙이지 않았더니 오류가 나서 붙여줬다)
✔ npm install -D webpack-dev-server

그리고 webpack.config.js 세팅을 바꿔줘야 한다.
먼저, 패키지를 불러서 변수에 담아 저장해준다

const webpackPlugin = require('@pmmmwh/react-refresh-webpack-plugin')
const webpack = require('webpack')

npm install -D react-refresh
=> react 에서만 사용하기 때문에 모듈안에 플러그인 공간을 따로 만들어서 셋팅

plugins:[
    'react-refresh/babel'
]

npm install -D @pmmmwh/react-refresh-webpack-plugin --save --legacy-peer-deps
=> webpack이 구동되었을때 무조건 실행되어야 되기 때문에 module과 output 사이에 plugins 새로 생성하고 값 넣어주기

plugins:[
        new webpackPlugin(),
        new webpack.LoaderOptionsPlugin({debug:true})
]

npm install -D webpack-dev-server
=> 내보낼 결과물들을 정적인 상태로 만들어줘야 하기 때문에 output 안에 publicPath:'/dist' 적어줌, output 밑에 devServer 생성

webpack.config.js 전체코드

devServer:{ 
        publicPath:'/dist',
        hot:true, //핫로드를 트루로
    }

const path = require('path')
const webpackPlugin = require('@pmmmwh/react-refresh-webpack-plugin')
const webpack = require('webpack')


module.exports = {
    name:'jihyun',
    mode:'development', //production
    devtool:'eval', //hidden-source-map
    
    resolve:{
        extensions:['.js','.jsx']
    },
    //입력받을 내용들
    entry:{
        //배열형태로 파일명을 입력
        app:['./index.jsx']
    },
    
    module:{
        rules:[{
            test:/\.jsx?$/,
            loader:'babel-loader',
            options:{
                presets:[
                    '@babel/preset-env'
                    '@babel/preset-react',

                ],
                plugins:[
                    'react-refresh/babel'
                ]
            }
        }]
    },
    
    plugins:[
        new webpackPlugin(),
        new webpack.LoaderOptionsPlugin({debug:true})
    ],
    //내보낼 내용들
    
    output:{
        path:path.join(__dirname,'dist'), //현재 디렉토리 + dist까지 /www/us
        filename:'app.js',
        publicPath:'/dist'
    },

    devServer:{ 
        publicPath:'/dist',
        hot:true, //핫로드를 트루로
    }
}

그리고 마지막으로 package.json 파일에서 scripts 안의 dev를 바꿔준다

    "dev": "webpack server --env development" 

웹팩을 웹서버로 구동할 수 있도록 해준다.
즉, 코드가 바뀔때마다 다시 파일을 읽어서 바로 빌드해주고 화면에 띄워줌

터미널에서 npm run dev를 계속 입력하지 않아도 코드가 바뀌는 것을 계속 확인할 수 있어서 너무 좋음!!!

안녕하세요!😊 국비지원으로 개발쪽 공부를 시작한 학생입니다!
혹시나 제가 잘못된 정보를 제공하고 있다면 댓글 부탁드립니다! 💚
글 읽어주셔서 정말 감사합니다🙇‍♀️