diff --git a/react-springboot/my-app/.eslintcache b/react-springboot/my-app/.eslintcache index 171f0f59..1763265c 100644 --- a/react-springboot/my-app/.eslintcache +++ b/react-springboot/my-app/.eslintcache @@ -1 +1 @@ -[{"C:\\Users\\Woojin\\Desktop\\study\\Study\\react-springboot\\my-app\\src\\index.js":"1","C:\\Users\\Woojin\\Desktop\\study\\Study\\react-springboot\\my-app\\src\\App.js":"2","C:\\Users\\Woojin\\Desktop\\study\\Study\\react-springboot\\my-app\\src\\pages\\ListPage.js":"3","C:\\Users\\Woojin\\Desktop\\study\\Study\\react-springboot\\my-app\\src\\pages\\WritePage.js":"4","C:\\Users\\Woojin\\Desktop\\study\\Study\\react-springboot\\my-app\\src\\components\\Navigation.js":"5"},{"size":360,"mtime":1612361035951,"results":"6","hashOfConfig":"7"},{"size":439,"mtime":1612369197962,"results":"8","hashOfConfig":"7"},{"size":1998,"mtime":1612373599309,"results":"9","hashOfConfig":"7"},{"size":492,"mtime":1612368959285,"results":"10","hashOfConfig":"7"},{"size":306,"mtime":1612368239201,"results":"11","hashOfConfig":"7"},{"filePath":"12","messages":"13","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"14"},"11g3wnd",{"filePath":"15","messages":"16","errorCount":0,"warningCount":2,"fixableErrorCount":0,"fixableWarningCount":0,"source":null},{"filePath":"17","messages":"18","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"19","messages":"20","errorCount":0,"warningCount":1,"fixableErrorCount":0,"fixableWarningCount":0,"source":null},{"filePath":"21","messages":"22","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"C:\\Users\\Woojin\\Desktop\\study\\Study\\react-springboot\\my-app\\src\\index.js",[],["23","24"],"C:\\Users\\Woojin\\Desktop\\study\\Study\\react-springboot\\my-app\\src\\App.js",["25","26"],"C:\\Users\\Woojin\\Desktop\\study\\Study\\react-springboot\\my-app\\src\\pages\\ListPage.js",[],"C:\\Users\\Woojin\\Desktop\\study\\Study\\react-springboot\\my-app\\src\\pages\\WritePage.js",["27"],"C:\\Users\\Woojin\\Desktop\\study\\Study\\react-springboot\\my-app\\src\\components\\Navigation.js",[],{"ruleId":"28","replacedBy":"29"},{"ruleId":"30","replacedBy":"31"},{"ruleId":"32","severity":1,"message":"33","line":1,"column":10,"nodeType":"34","messageId":"35","endLine":1,"endColumn":15},{"ruleId":"32","severity":1,"message":"36","line":4,"column":8,"nodeType":"34","messageId":"35","endLine":4,"endColumn":17},{"ruleId":"32","severity":1,"message":"37","line":6,"column":9,"nodeType":"34","messageId":"35","endLine":6,"endColumn":13},"no-native-reassign",["38"],"no-negated-in-lhs",["39"],"no-unused-vars","'Route' is defined but never used.","Identifier","unusedVar","'WritePage' is defined but never used.","'post' is assigned a value but never used.","no-global-assign","no-unsafe-negation"] \ No newline at end of file +[{"C:\\Users\\Woojin\\Desktop\\study\\Study\\react-springboot\\my-app\\src\\index.js":"1","C:\\Users\\Woojin\\Desktop\\study\\Study\\react-springboot\\my-app\\src\\App.js":"2","C:\\Users\\Woojin\\Desktop\\study\\Study\\react-springboot\\my-app\\src\\components\\Top.js":"3","C:\\Users\\Woojin\\Desktop\\study\\Study\\react-springboot\\my-app\\src\\components\\Bottom.js":"4","C:\\Users\\Woojin\\Desktop\\study\\Study\\react-springboot\\my-app\\src\\store.js":"5"},{"size":534,"mtime":1612422022110,"results":"6","hashOfConfig":"7"},{"size":261,"mtime":1612422137381,"results":"8","hashOfConfig":"7"},{"size":346,"mtime":1612423047106,"results":"9","hashOfConfig":"7"},{"size":464,"mtime":1612422810996,"results":"10","hashOfConfig":"7"},{"size":637,"mtime":1612422959111,"results":"11","hashOfConfig":"7"},{"filePath":"12","messages":"13","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"11g3wnd",{"filePath":"14","messages":"15","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"16","messages":"17","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"18","messages":"19","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"20","messages":"21","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"C:\\Users\\Woojin\\Desktop\\study\\Study\\react-springboot\\my-app\\src\\index.js",[],"C:\\Users\\Woojin\\Desktop\\study\\Study\\react-springboot\\my-app\\src\\App.js",[],"C:\\Users\\Woojin\\Desktop\\study\\Study\\react-springboot\\my-app\\src\\components\\Top.js",[],"C:\\Users\\Woojin\\Desktop\\study\\Study\\react-springboot\\my-app\\src\\components\\Bottom.js",[],"C:\\Users\\Woojin\\Desktop\\study\\Study\\react-springboot\\my-app\\src\\store.js",[]] \ No newline at end of file diff --git a/react-springboot/my-app/package-lock.json b/react-springboot/my-app/package-lock.json index f4c6ba0b..5c159f2a 100644 --- a/react-springboot/my-app/package-lock.json +++ b/react-springboot/my-app/package-lock.json @@ -12451,6 +12451,18 @@ "warning": "^4.0.3" } }, + "react-redux": { + "version": "7.2.2", + "resolved": "https://registry.npmjs.org/react-redux/-/react-redux-7.2.2.tgz", + "integrity": "sha512-8+CQ1EvIVFkYL/vu6Olo7JFLWop1qRUeb46sGtIMDCSpgwPQq8fPLpirIB0iTqFe9XYEFPHssdX8/UwN6pAkEA==", + "requires": { + "@babel/runtime": "^7.12.1", + "hoist-non-react-statics": "^3.3.2", + "loose-envify": "^1.4.0", + "prop-types": "^15.7.2", + "react-is": "^16.13.1" + } + }, "react-refresh": { "version": "0.8.3", "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.8.3.tgz", diff --git a/react-springboot/my-app/package.json b/react-springboot/my-app/package.json index 58d0df27..4b3b3001 100644 --- a/react-springboot/my-app/package.json +++ b/react-springboot/my-app/package.json @@ -12,8 +12,10 @@ "react": "^17.0.1", "react-bootstrap": "^1.4.3", "react-dom": "^17.0.1", + "react-redux": "^7.2.2", "react-router-dom": "^5.2.0", "react-scripts": "4.0.1", + "redux": "^4.0.5", "styled-components": "^5.2.1", "web-vitals": "^0.2.4" }, diff --git a/react-springboot/my-app/practice/App.css b/react-springboot/my-app/practice/01/App.css similarity index 100% rename from react-springboot/my-app/practice/App.css rename to react-springboot/my-app/practice/01/App.css diff --git a/react-springboot/my-app/practice/App.js b/react-springboot/my-app/practice/01/App.js similarity index 100% rename from react-springboot/my-app/practice/App.js rename to react-springboot/my-app/practice/01/App.js diff --git a/react-springboot/my-app/practice/Style.js b/react-springboot/my-app/practice/01/Style.js similarity index 100% rename from react-springboot/my-app/practice/Style.js rename to react-springboot/my-app/practice/01/Style.js diff --git a/react-springboot/my-app/practice/Sub.js b/react-springboot/my-app/practice/01/Sub.js similarity index 100% rename from react-springboot/my-app/practice/Sub.js rename to react-springboot/my-app/practice/01/Sub.js diff --git a/react-springboot/my-app/practice/components/Footer.js b/react-springboot/my-app/practice/01/components/Footer.js similarity index 100% rename from react-springboot/my-app/practice/components/Footer.js rename to react-springboot/my-app/practice/01/components/Footer.js diff --git a/react-springboot/my-app/practice/components/Header.js b/react-springboot/my-app/practice/01/components/Header.js similarity index 100% rename from react-springboot/my-app/practice/components/Header.js rename to react-springboot/my-app/practice/01/components/Header.js diff --git a/react-springboot/my-app/practice/components/home/Home.js b/react-springboot/my-app/practice/01/components/home/Home.js similarity index 100% rename from react-springboot/my-app/practice/components/home/Home.js rename to react-springboot/my-app/practice/01/components/home/Home.js diff --git a/react-springboot/my-app/practice/components/Login.js b/react-springboot/my-app/practice/01/components/login/Login.js similarity index 100% rename from react-springboot/my-app/practice/components/Login.js rename to react-springboot/my-app/practice/01/components/login/Login.js diff --git a/react-springboot/my-app/practice/index.css b/react-springboot/my-app/practice/01/index.css similarity index 100% rename from react-springboot/my-app/practice/index.css rename to react-springboot/my-app/practice/01/index.css diff --git a/react-springboot/my-app/practice/index.js b/react-springboot/my-app/practice/01/index.js similarity index 100% rename from react-springboot/my-app/practice/index.js rename to react-springboot/my-app/practice/01/index.js diff --git a/react-springboot/my-app/practice/pages/HomePage.js b/react-springboot/my-app/practice/01/pages/HomePage.js similarity index 100% rename from react-springboot/my-app/practice/pages/HomePage.js rename to react-springboot/my-app/practice/01/pages/HomePage.js diff --git a/react-springboot/my-app/practice/pages/LoginPage.js b/react-springboot/my-app/practice/01/pages/LoginPage.js similarity index 100% rename from react-springboot/my-app/practice/pages/LoginPage.js rename to react-springboot/my-app/practice/01/pages/LoginPage.js diff --git a/react-springboot/my-app/practice/02 Route, Link/App.css b/react-springboot/my-app/practice/02 Route, Link/App.css new file mode 100644 index 00000000..77e8e715 --- /dev/null +++ b/react-springboot/my-app/practice/02 Route, Link/App.css @@ -0,0 +1,3 @@ +.box-style { + color: blue; +} diff --git a/react-springboot/my-app/practice/02 Route, Link/App.js b/react-springboot/my-app/practice/02 Route, Link/App.js new file mode 100644 index 00000000..bf9d3101 --- /dev/null +++ b/react-springboot/my-app/practice/02 Route, Link/App.js @@ -0,0 +1,18 @@ +import { Route } from 'react-router-dom'; +import Navigation from './components/Navigation'; +import ListPage from './pages/ListPage'; +import WritePage from './pages/WritePage'; + +function App() { + return ( +
+ + + + {/* + */} +
+ ); +} + +export default App; diff --git a/react-springboot/my-app/src/components/Navigation.js b/react-springboot/my-app/practice/02 Route, Link/components/Navigation.js similarity index 100% rename from react-springboot/my-app/src/components/Navigation.js rename to react-springboot/my-app/practice/02 Route, Link/components/Navigation.js diff --git a/react-springboot/my-app/src/index.css b/react-springboot/my-app/practice/02 Route, Link/index.css similarity index 100% rename from react-springboot/my-app/src/index.css rename to react-springboot/my-app/practice/02 Route, Link/index.css diff --git a/react-springboot/my-app/practice/02 Route, Link/index.js b/react-springboot/my-app/practice/02 Route, Link/index.js new file mode 100644 index 00000000..495ff8cd --- /dev/null +++ b/react-springboot/my-app/practice/02 Route, Link/index.js @@ -0,0 +1,15 @@ +import 'bootstrap/dist/css/bootstrap.min.css'; +import React from 'react'; +import ReactDOM from 'react-dom'; +import './index.css'; +import App from './App'; +import { BrowserRouter } from 'react-router-dom'; + +ReactDOM.render( + + + + + , + document.getElementById('root'), +); diff --git a/react-springboot/my-app/src/pages/ListPage.js b/react-springboot/my-app/practice/02 Route, Link/pages/ListPage.js similarity index 100% rename from react-springboot/my-app/src/pages/ListPage.js rename to react-springboot/my-app/practice/02 Route, Link/pages/ListPage.js diff --git a/react-springboot/my-app/src/pages/WritePage.js b/react-springboot/my-app/practice/02 Route, Link/pages/WritePage.js similarity index 100% rename from react-springboot/my-app/src/pages/WritePage.js rename to react-springboot/my-app/practice/02 Route, Link/pages/WritePage.js diff --git a/react-springboot/my-app/src/App.css b/react-springboot/my-app/src/App.css index 77e8e715..3dea8852 100644 --- a/react-springboot/my-app/src/App.css +++ b/react-springboot/my-app/src/App.css @@ -1,3 +1,13 @@ -.box-style { - color: blue; +.container { + height: 700px; + border: 2px solid black; +} + +.sub_container { + height: 250px; + border: 2px solid black; +} + +div { + padding: 10px; } diff --git a/react-springboot/my-app/src/App.js b/react-springboot/my-app/src/App.js index bf9d3101..d226e0aa 100644 --- a/react-springboot/my-app/src/App.js +++ b/react-springboot/my-app/src/App.js @@ -1,16 +1,13 @@ -import { Route } from 'react-router-dom'; -import Navigation from './components/Navigation'; -import ListPage from './pages/ListPage'; -import WritePage from './pages/WritePage'; +import './App.css'; +import Top from './components/Top'; +import Bottom from './components/Bottom'; function App() { return ( -
- - - - {/* - */} +
+

최상단 화면

+ +
); } diff --git a/react-springboot/my-app/src/components/Bottom.js b/react-springboot/my-app/src/components/Bottom.js new file mode 100644 index 00000000..fdbaace9 --- /dev/null +++ b/react-springboot/my-app/src/components/Bottom.js @@ -0,0 +1,17 @@ +import React from 'react'; +import { useDispatch } from 'react-redux'; +import '../App.css'; +import { decrease, increase } from '../store'; + +const Bottom = () => { + const dispatch = useDispatch(); + return ( +
+

Bottom

+ + +
+ ); +}; + +export default Bottom; diff --git a/react-springboot/my-app/src/components/Top.js b/react-springboot/my-app/src/components/Top.js new file mode 100644 index 00000000..39fdff6a --- /dev/null +++ b/react-springboot/my-app/src/components/Top.js @@ -0,0 +1,16 @@ +import React from 'react'; +import { useSelector } from 'react-redux'; +import '../App.css'; + +const Top = () => { + const { number, username } = useSelector((store) => store); + return ( +
+

Top

+ 번호 : {number} + 이름 : {username} +
+ ); +}; + +export default Top; diff --git a/react-springboot/my-app/src/index.js b/react-springboot/my-app/src/index.js index 495ff8cd..f0c9014f 100644 --- a/react-springboot/my-app/src/index.js +++ b/react-springboot/my-app/src/index.js @@ -1,14 +1,20 @@ import 'bootstrap/dist/css/bootstrap.min.css'; import React from 'react'; import ReactDOM from 'react-dom'; -import './index.css'; import App from './App'; +import { Provider } from 'react-redux'; +import reducer from './store'; +import { createStore } from 'redux'; import { BrowserRouter } from 'react-router-dom'; +const store = createStore(reducer); + ReactDOM.render( - + + + , document.getElementById('root'), diff --git a/react-springboot/my-app/src/store.js b/react-springboot/my-app/src/store.js new file mode 100644 index 00000000..e7bdd028 --- /dev/null +++ b/react-springboot/my-app/src/store.js @@ -0,0 +1,26 @@ +// 액션 +export const increase = (username) => ({ + type: 'INCREMENT', + payload: username, +}); +export const decrease = () => ({ type: 'DECREMENT' }); + +// 상태 +const initstate = { + username: '?', + number: 1, +}; + +// 액션의 결과를 걸러냄 +const reducer = (state = initstate, action) => { + switch (action.type) { + case 'INCREMENT': + return { number: state.number + 1, username: action.payload }; // return 되는 순간 state가 변경이 되므로 ui 변경됨 + case 'DECREMENT': + return { number: state.number - 1 }; + default: + return state; + } +}; + +export default reducer; diff --git a/react-springboot/my-app/yarn.lock b/react-springboot/my-app/yarn.lock index b4a590a1..7b618b86 100644 --- a/react-springboot/my-app/yarn.lock +++ b/react-springboot/my-app/yarn.lock @@ -5542,7 +5542,7 @@ hmac-drbg@^1.0.1: minimalistic-assert "^1.0.0" minimalistic-crypto-utils "^1.0.1" -hoist-non-react-statics@^3.0.0, hoist-non-react-statics@^3.1.0: +hoist-non-react-statics@^3.0.0, hoist-non-react-statics@^3.1.0, hoist-non-react-statics@^3.3.2: version "3.3.2" resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz#ece0acaf71d62c2969c2ec59feff42a4b1a85b45" integrity sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw== @@ -9164,7 +9164,7 @@ react-error-overlay@^6.0.8: resolved "https://registry.yarnpkg.com/react-error-overlay/-/react-error-overlay-6.0.8.tgz#474ed11d04fc6bda3af643447d85e9127ed6b5de" integrity sha512-HvPuUQnLp5H7TouGq3kzBeioJmXms1wHy9EGjz2OURWBp4qZO6AfGEcnxts1D/CbwPLRAgTMPCEgYhA3sEM4vw== -react-is@^16.3.2, react-is@^16.6.0, react-is@^16.7.0, react-is@^16.8.1: +react-is@^16.13.1, react-is@^16.3.2, react-is@^16.6.0, react-is@^16.7.0, react-is@^16.8.1: version "16.13.1" resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4" integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ== @@ -9193,6 +9193,17 @@ react-overlays@^4.1.0: uncontrollable "^7.0.0" warning "^4.0.3" +react-redux@^7.2.2: + version "7.2.2" + resolved "https://registry.yarnpkg.com/react-redux/-/react-redux-7.2.2.tgz#03862e803a30b6b9ef8582dadcc810947f74b736" + integrity sha512-8+CQ1EvIVFkYL/vu6Olo7JFLWop1qRUeb46sGtIMDCSpgwPQq8fPLpirIB0iTqFe9XYEFPHssdX8/UwN6pAkEA== + dependencies: + "@babel/runtime" "^7.12.1" + hoist-non-react-statics "^3.3.2" + loose-envify "^1.4.0" + prop-types "^15.7.2" + react-is "^16.13.1" + react-refresh@^0.8.3: version "0.8.3" resolved "https://registry.yarnpkg.com/react-refresh/-/react-refresh-0.8.3.tgz#721d4657672d400c5e3c75d063c4a85fb2d5d68f" @@ -9400,6 +9411,14 @@ redent@^3.0.0: indent-string "^4.0.0" strip-indent "^3.0.0" +redux@^4.0.5: + version "4.0.5" + resolved "https://registry.yarnpkg.com/redux/-/redux-4.0.5.tgz#4db5de5816e17891de8a80c424232d06f051d93f" + integrity sha512-VSz1uMAH24DM6MF72vcojpYPtrTUu3ByVWfPL1nPfVRb5mZVTve5GnNCUV53QM/BZ66xfWrm0CTWoM+Xlz8V1w== + dependencies: + loose-envify "^1.4.0" + symbol-observable "^1.2.0" + regenerate-unicode-properties@^8.2.0: version "8.2.0" resolved "https://registry.yarnpkg.com/regenerate-unicode-properties/-/regenerate-unicode-properties-8.2.0.tgz#e5de7111d655e7ba60c057dbe9ff37c87e65cdec" @@ -10581,6 +10600,11 @@ svgo@^1.0.0, svgo@^1.2.2: unquote "~1.1.1" util.promisify "~1.0.0" +symbol-observable@^1.2.0: + version "1.2.0" + resolved "https://registry.yarnpkg.com/symbol-observable/-/symbol-observable-1.2.0.tgz#c22688aed4eab3cdc2dfeacbb561660560a00804" + integrity sha512-e900nM8RRtGhlV36KGEU9k65K3mPb1WV70OdjfxlG2EAuM1noi/E/BaW/uMhL7bPEssK8QV57vN3esixjUvcXQ== + symbol-tree@^3.2.4: version "3.2.4" resolved "https://registry.yarnpkg.com/symbol-tree/-/symbol-tree-3.2.4.tgz#430637d248ba77e078883951fb9aa0eed7c63fa2"