{"id":1498,"date":"2020-11-29T15:38:46","date_gmt":"2020-11-29T06:38:46","guid":{"rendered":"https:\/\/www.skyer9.pe.kr\/wordpress\/?p=1498"},"modified":"2025-05-29T14:02:11","modified_gmt":"2025-05-29T05:02:11","slug":"spring-boot-with-react-js","status":"publish","type":"post","link":"https:\/\/www.skyer9.pe.kr\/wordpress\/?p=1498","title":{"rendered":"Spring Boot with React.JS"},"content":{"rendered":"

Spring Boot with React.JS<\/h1>\n

\ubaa9\ud45c<\/h2>\n

\uc124\uc815\uc774 \ub05d\ub098\uba74 \ud504\ub85c\uc81d\ud2b8 \ub8e8\ud2b8\uc5d0\uc11c \uc544\ub798 \uba85\ub839\uc744 \uc2e4\ud589\ud558\uba74 JSX \uac00 \uc790\ub3d9\uc73c\ub85c JS \ub85c \ubcc0\ud658\ub418\uace0, \ud558\ub098\uc758 \ud328\ud0a4\uc9c0 \ud30c\uc77c\ub85c \ud569\uccd0\uc9c4\ub2e4.<\/p>\n

node_modules\\.bin\\webpack --progress --config webpack.config.js --watch<\/code><\/pre>\n
npm init \ud558\uae30<\/h2>\n
\ud504\ub85c\uc81d\ud2b8 \ub8e8\ud2b8\ub85c \uc774\ub3d9\ud55c\ub2e4.<\/p>\n
\ud328\ud0a4\uc9c0\ub97c \ucd08\uae30\ud654\ud55c\ub2e4.<\/p>\n
npm init<\/code><\/pre>\n
pakage.json<\/code> \uc774 \uc0dd\uc131\ub41c\ub2e4.<\/p>\n
\uc758\uc874 \ub77c\uc774\ube0c\ub7ec\ub9ac \ucd94\uac00<\/h2>\n
-D<\/code> \uc635\uc158\uc740 \uac1c\ubc1c\uc2dc\uc5d0\ub9cc \uc0ac\uc6a9\ud55c\ub2e4\ub294 \uc758\ubbf8\uc774\ub2e4.<\/p>\n
webpack<\/code> \uc740 \ubaa8\ub4c8 \ubc88\ub4e4\ub7ec\uc774\ub2e4. \uc5ec\ub7ec\uac1c\uc758 \ud30c\uc77c\ub85c \ub098\ub220\uc838 \uac1c\ubc1c\ub418\ub294 \ud30c\uc77c\ub4e4\uc744 \ud558\ub098\uc758 \ud30c\uc77c\ub85c \ud569\uccd0\uc11c \ub124\ud2b8\uc6cc\ud06c \ub9ac\uc18c\uc2a4\ub97c \uc904\uc5ec\uc900\ub2e4.<\/p>\n
babel<\/code> \uc740 ES6<\/code> \ub85c \uc791\uc131\ub418\ub294 React JS<\/code> \uc18c\uc2a4\ub97c ES5<\/code> \ub85c \ubcc0\ud658\ud574 \uc900\ub2e4.<\/p>\n
# html \uc5d0\uc11c \uc0ac\uc6a9\ud560 \ub9ac\uc561\ud2b8 \ubc84\uc804\uacfc \ub3d9\uc77c\ud558\uac8c \ub9de\ucdb0\uc8fc\uc5b4\uc57c \ud55c\ub2e4.\nnpm i react@18 react-dom@18\n# npm i react react-dom\nnpm i @types\/react-dom -D\n\nnpm i @babel\/core @babel\/preset-env @babel\/preset-react babel-loader -D\nnpm i css-loader style-loader -D\nnpm i webpack webpack-cli -D\n\nnpm install process<\/code><\/pre>\n
webpack \uc124\uc815<\/h2>\n
\ud504\ub85c\uc81d\ud2b8 \ub8e8\ud2b8\uc5d0 webpack.config.js<\/code> \ub97c \uc0dd\uc131\ud558\uace0 \uc544\ub798 \ub0b4\uc6a9\uc744 \uc785\ub825\ud55c\ub2e4.<\/p>\n
const webpack = require('webpack')\n\nvar path = require('path');\nvar isProd = false;\n\nmodule.exports = {\n    context: path.resolve(__dirname, 'src\/main\/jsx'),\n    \/\/ HTML React \uc0ac\uc6a9\n    externals: {\n        'react': 'React',\n        'react-dom': 'ReactDOM'\n    },\n    entry: {\n        \/\/  webpack \uc774 \uc0dd\uc131\ud558\ub294  react  \ubc84\uc804\uacfc  HTML \uc5d0 \uc788\ub294 react \ubc84\uc804\uc774 \uc77c\uce58\ud574\uc57c \ud55c\ub2e4.\n        \/\/ \uc0dd\uc131\ub41c \ubc88\ub4e4\ud30c\uc77c \ud655\uc778\ud574 \ubcfc\uac83!!! (exports.version)\n        test: '.\/test.js'\n    },\n    devtool: isProd ? false : 'source-map',\n    cache: true,\n    output: {\n        path: __dirname,\n        filename: '.\/src\/main\/resources\/static\/js\/react\/[name].bundle.js'\n    },\n    mode: 'none',\n    watch: true,\n    module: {\n        rules: [ {\n            test: \/\\.jsx?$\/,\n            exclude: \/(node_modules)\/,\n            use: {\n                loader: 'babel-loader',\n                options: {\n                    presets: [ '@babel\/preset-env', '@babel\/preset-react' ]\n                }\n            }\n        }, {\n            test: \/\\.css$\/,\n            use: [ 'style-loader', 'css-loader' ]\n        } ]\n    },\n    plugins: [\n        \/\/ fix "process is not defined" error:\n        \/\/ (do "npm install process" before running the build)\n        new webpack.ProvidePlugin({\n            process: 'process\/browser',\n        }),\n    ]\n};<\/code><\/pre>\n
js \ud30c\uc77c \uc0dd\uc131<\/h2>\n
src\/main\/jsx\/test.js<\/code> \ud30c\uc77c\uc744 \uc0dd\uc131\ud55c\ub2e4.<\/p>\n
import React from 'react';\nimport { createRoot } from 'react-dom\/client';\n\nfunction HelloMessage({ name }) {\n    return <div>Hello {name}<\/div>;\n}\n\nconst container = document.getElementById('container2');\nconst root = createRoot(container);\nroot.render(<HelloMessage name="Taylor" \/>);<\/code><\/pre>\n
HTML \ud30c\uc77c \uc0dd\uc131<\/h2>\n
<!DOCTYPE html>\n<html lang="ko">\n<head>\n    <meta charset="UTF-8">\n    <meta name="viewport" content="width=device-width, initial-scale=1.0">\n    <title>React Components<\/title>\n<\/head>\n<body>\n    <div class="component-section">\n        <h2>Hello Message Component<\/h2>\n        <div class="container">\n            <div id="container2"><\/div>\n        <\/div>\n    <\/div>\n\n    <!-- React\uc640 ReactDOM CDN -->\n    <script crossorigin src="https:\/\/unpkg.com\/react@18\/umd\/react.development.js"><\/script>\n    <script crossorigin src="https:\/\/unpkg.com\/react-dom@18\/umd\/react-dom.development.js"><\/script>\n\n    <script src=".\/js\/react\/test.bundle.js"><\/script>\n<\/body>\n<\/html><\/code><\/pre>\n
webpack \uc2e4\ud589<\/h2>\n
\uc544\ub798 \uba85\ub839\uc73c\ub85c js \ud30c\uc77c\uc744 \uc218\uc815\ud558\uba74 \ubc88\ub4e4\uc774 \uc790\ub3d9\uc0dd\uc131\ub41c\ub2e4.<\/p>\n
node_modules\\.bin\\webpack --progress --config webpack.config.js --watch<\/code><\/pre>\n
\uc2e4\ud589\ud655\uc778\ud558\uae30<\/h2>\n
http:\/\/localhost:8080\/test.html<\/code> \uc5d0 \uc811\uc18d\ud558\uba74 \uc2e4\ud589\ub418\ub294 \uac83\uc744 \ud655\uc778\ud560 \uc218 \uc788\ub2e4.<\/p>\n
\ud2b8\ub7ec\ube14 \uc288\ud305<\/h2>\n
ERROR in ..\/..\/..\/node_modules\/@tanstack\/table-core\/build\/lib\/index.mjs 153:9-16\nModule not found: Error: Can't resolve 'process\/browser' in 'D:\\gitrepo\\tinyWMS\\node_modules\\@tanstack\\table-core\\build\\lib'\nDid you mean 'browser.js'?\nBREAKING CHANGE: The request 'process\/browser' failed to resolve only because it was resolved as fully specified\n(probably because the origin is strict EcmaScript Module, e. g. a module with javascript mimetype, a '*.mjs' file, or a '*.js' file where the package.json contains '"type": "module"').\nThe extension in the request is mandatory for it to be fully specified.<\/code><\/pre>\n
process\/browser \ub97c \uc778\uc2dd\ud558\uc9c0 \ubabb\ud558\ub294 \uc624\ub958\uac00 \ubc1c\uc0dd\ud560 \uacbd\uc6b0\uac00 \uc788\ub2e4.<\/p>\n
\uc544\ub798\uc640 \uac19\uc774 fallback \uc744 \ucd94\uac00\ud574 \uc8fc\uba74 \uc624\ub958\uac00 \ud574\uacb0\ub41c\ub2e4.<\/p>\n
webpack.config.js<\/p>\n
    watch: true,\n    resolve: {\n        fallback: { 'process\/browser': require.resolve('process\/browser'), }\n    },<\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"
Spring Boot with React.JS \ubaa9\ud45c \uc124\uc815\uc774 \ub05d\ub098\uba74 \ud504\ub85c\uc81d\ud2b8 \ub8e8\ud2b8\uc5d0\uc11c \uc544\ub798 \uba85\ub839\uc744 \uc2e4\ud589\ud558\uba74 JSX \uac00 \uc790\ub3d9\uc73c\ub85c JS \ub85c \ubcc0\ud658\ub418\uace0, \ud558\ub098\uc758 \ud328\ud0a4\uc9c0 \ud30c\uc77c\ub85c \ud569\uccd0\uc9c4\ub2e4. node_modules\\.bin\\webpack –progress –config webpack.config.js –watch npm init \ud558\uae30 \ud504\ub85c\uc81d\ud2b8 \ub8e8\ud2b8\ub85c \uc774\ub3d9\ud55c\ub2e4. \ud328\ud0a4\uc9c0\ub97c \ucd08\uae30\ud654\ud55c\ub2e4. npm init pakage.json \uc774 \uc0dd\uc131\ub41c\ub2e4. \uc758\uc874 \ub77c\uc774\ube0c\ub7ec\ub9ac \ucd94\uac00 -D \uc635\uc158\uc740 \uac1c\ubc1c\uc2dc\uc5d0\ub9cc \uc0ac\uc6a9\ud55c\ub2e4\ub294 \uc758\ubbf8\uc774\ub2e4. webpack \uc740 \ubaa8\ub4c8 \ubc88\ub4e4\ub7ec\uc774\ub2e4. \uc5ec\ub7ec\uac1c\uc758 \ud30c\uc77c\ub85c \ub098\ub220\uc838\u2026 Read More »<\/a><\/span><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[19],"tags":[],"class_list":["post-1498","post","type-post","status-publish","format-standard","hentry","category-javascript"],"_links":{"self":[{"href":"https:\/\/www.skyer9.pe.kr\/wordpress\/index.php?rest_route=\/wp\/v2\/posts\/1498","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.skyer9.pe.kr\/wordpress\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.skyer9.pe.kr\/wordpress\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.skyer9.pe.kr\/wordpress\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.skyer9.pe.kr\/wordpress\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=1498"}],"version-history":[{"count":23,"href":"https:\/\/www.skyer9.pe.kr\/wordpress\/index.php?rest_route=\/wp\/v2\/posts\/1498\/revisions"}],"predecessor-version":[{"id":10406,"href":"https:\/\/www.skyer9.pe.kr\/wordpress\/index.php?rest_route=\/wp\/v2\/posts\/1498\/revisions\/10406"}],"wp:attachment":[{"href":"https:\/\/www.skyer9.pe.kr\/wordpress\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=1498"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.skyer9.pe.kr\/wordpress\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=1498"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.skyer9.pe.kr\/wordpress\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=1498"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}