change directory name

react+springboot/react-practice/.eslintcache

@@ -0,0 +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\\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",[]]

react+springboot/react-practice/.gitignore

@@ -0,0 +1,23 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# production
+/build
+
+# misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*

react+springboot/react-practice/.prettierrc

@@ -0,0 +1,7 @@
+{
+  "singleQuote": true,
+  "semi": true,
+  "tabWidth": 2,
+  "trailingComma": "all",
+  "printWidth": 80
+}

react+springboot/react-practice/package.json

@@ -0,0 +1,46 @@
+{
+  "name": "my-app",
+  "version": "0.1.0",
+  "private": true,
+  "dependencies": {
+    "@testing-library/jest-dom": "^5.11.9",
+    "@testing-library/react": "^11.2.5",
+    "@testing-library/user-event": "^12.6.3",
+    "bootstrap": "^4.6.0",
+    "jquery": "^3.5.1",
+    "popper.js": "^1.16.1",
+    "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"
+  },
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "test": "react-scripts test",
+    "eject": "react-scripts eject"
+  },
+  "eslintConfig": {
+    "extends": [
+      "react-app",
+      "react-app/jest"
+    ]
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  }
+}

react+springboot/react-practice/practice/01/App.css

@@ -0,0 +1,3 @@
+.box-style {
+  color: blue;
+}

react+springboot/react-practice/practice/01/App.js

@@ -0,0 +1,19 @@
+import { Route } from 'react-router-dom';
+import './App.css';
+import Footer from './components/Footer';
+import Header from './components/Header';
+import HomePage from './pages/HomePage';
+import LoginPage from './pages/LoginPage';
+
+function App() {
+  return (
+    <>
+      <Header />
+      <Route path="/" exact={true} component={HomePage} />
+      <Route path="/login/:id" exact={true} component={LoginPage} />
+      <Footer />
+    </>
+  );
+}
+
+export default App;

react+springboot/react-practice/practice/01/Style.js

@@ -0,0 +1,9 @@
+import styled from 'styled-components';
+
+const Title = styled.h1`
+  font-size: 1.5em;
+  text-align: center;
+  color: palevioletred;
+`;
+
+export { Title };

react+springboot/react-practice/practice/01/Sub.js

@@ -0,0 +1,15 @@
+import React from 'react';
+
+let num = 10;
+
+const Sub = () => {
+  console.log('sub');
+  return (
+    <div>
+      <h1>Sub</h1>
+    </div>
+  );
+};
+
+export { num };
+export default Sub;

react+springboot/react-practice/practice/01/components/Footer.js

@@ -0,0 +1,22 @@
+import React from 'react';
+import styled from 'styled-components';
+
+// 하나의 컴포넌트 생성 (재사용)
+// 하나의 컴포넌트에 js css를 파일 하나로 관리
+const StyledFooterDiv = styled.div`
+  border: 1px solid black;
+  height: 300px;
+`;
+
+const Footer = () => {
+  return (
+    <StyledFooterDiv>
+      <ul>
+        <li>오시는길 : 서울</li>
+        <li>전화번호 : 021321231</li>
+      </ul>
+    </StyledFooterDiv>
+  );
+};
+
+export default Footer;

react+springboot/react-practice/practice/01/components/Header.js

@@ -0,0 +1,52 @@
+import React from 'react';
+import { Link } from 'react-router-dom';
+import styled from 'styled-components';
+import { Navbar, Nav, Form, FormControl, Button } from 'react-bootstrap';
+
+// 하나의 컴포넌트 생성 (재사용)
+// 하나의 컴포넌트에 js css를 파일 하나로 관리
+const StyledHeaderDiv = styled.div`
+  border: 1px solid black;
+  height: 300px;
+  background-color: ${(props) => props.backgroundColor};
+`;
+
+const StyledHeaderLink = styled(Link)`
+  color: red;
+`;
+
+const Header = () => {
+  return (
+    <>
+      <StyledHeaderDiv backgroundColor="blue">
+        <ul>
+          <li>
+            <StyledHeaderLink to="/">홈</StyledHeaderLink>
+          </li>
+          <li>
+            <StyledHeaderLink to="/login/10">로그인</StyledHeaderLink>
+          </li>
+        </ul>
+      </StyledHeaderDiv>
+      <>
+        <Navbar bg="dark" variant="dark">
+          <Navbar.Brand href="#home">Navbar</Navbar.Brand>
+          <Nav className="mr-auto">
+            <Link to="/" className="nav-link">
+              Home
+            </Link>
+            <Link to="/login" className="nav-link">
+              Login
+            </Link>
+          </Nav>
+          <Form inline>
+            <FormControl type="text" placeholder="Search" className="mr-sm-2" />
+            <Button variant="outline-info">Search</Button>
+          </Form>
+        </Navbar>
+      </>
+    </>
+  );
+};
+
+export default Header;

react+springboot/react-practice/practice/01/components/home/Home.js

@@ -0,0 +1,58 @@
+import React from 'react';
+import { Button } from 'react-bootstrap';
+import styled from 'styled-components';
+
+const StyledDeleteButton = styled.button`
+  color: ${(props) => (props.user.username === 'kim' ? 'blue' : 'red')};
+`;
+
+const StyleAddButton = styled(StyledDeleteButton)`
+  background-color: green;
+`;
+
+const Home = (props) => {
+  // 구조분할 할당
+  const { board, setBoard, user } = props;
+
+  return (
+    <>
+      <h1>홈</h1>
+      <Button variant="primary">Primary</Button>{' '}
+      <StyleAddButton user={user}>더하기</StyleAddButton>
+      <StyledDeleteButton user={user} onClick={() => setBoard([])}>
+        전체삭제
+      </StyledDeleteButton>
+      {board.map((p) => (
+        <h3 key={board.id}>
+          제목: {p.title} 내용: {p.content}
+        </h3>
+      ))}
+    </>
+  );
+};
+
+export default Home;
+
+// props
+// const Home = (props) => {
+//   // const board = props.board;
+//   // const id = props.id;
+
+//   // 구조분할 할당
+//   const { board, setBoard, number, setNumber } = props;
+
+//   return (
+//     <div>
+//       <h1>홈 : {number} </h1>
+//       <button onClick={() => setNumber(number + 1)}>번호증가</button>
+//       <button onClick={() => setBoard([])}>전체삭제</button>
+//       {board.map((p) => (
+//         <h3>
+//           제목: {p.title} 내용: {p.content}
+//         </h3>
+//       ))}
+//     </div>
+//   );
+// };
+
+// export default Home;

react+springboot/react-practice/practice/01/components/login/Login.js

@@ -0,0 +1,16 @@
+import React from 'react';
+import styled from 'styled-components';
+
+const StyledLoginDiv = styled.div`
+  padding: 30px;
+`;
+
+const Login = () => {
+  return (
+    <StyledLoginDiv>
+      <h1>로그인 페이지 입니다.</h1>
+    </StyledLoginDiv>
+  );
+};
+
+export default Login;

react+springboot/react-practice/practice/01/index.css

@@ -0,0 +1,13 @@
+body {
+  margin: 0;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
+    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
+    sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+code {
+  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
+    monospace;
+}

react+springboot/react-practice/practice/01/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(
+  <React.StrictMode>
+    <BrowserRouter>
+      <App />
+    </BrowserRouter>
+  </React.StrictMode>,
+  document.getElementById('root'),
+);

react+springboot/react-practice/practice/01/pages/HomePage.js

@@ -0,0 +1,63 @@
+import React, { useEffect, useState } from 'react';
+import Home from '../components/home/Home';
+
+const HomePage = () => {
+  // Http 요청 (fetch, axios)
+  const [board, setBoard] = useState([]);
+  const [user, setUser] = useState({});
+
+  useEffect(() => {
+    // 데이터를 받았다고 가정
+    // fetch(), axios()
+    let data = [
+      { id: 1, title: '제목1', content: '내용1' },
+      { id: 2, title: '제목2', content: '내용2' },
+      { id: 3, title: '제목3', content: '내용3' },
+    ];
+
+    setBoard([...data]);
+    setUser({ id: 1, username: 'lee' });
+  }, []);
+
+  return (
+    <div>
+      <Home board={board} setBoard={setBoard} user={user} />
+    </div>
+  );
+};
+
+export default HomePage;
+
+// props
+// const HomePage = () => {
+//   // Http 요청 (fetch, axios)
+//   const [board, setBoard] = useState([]);
+//   const [number, setNumber] = useState(0);
+
+//   useEffect(() => {
+//     // 데이터를 받았다고 가정
+//     // fetch(), axios()
+//     let data = [
+//       { id: 1, title: '제목1', content: '내용1' },
+//       { id: 2, title: '제목2', content: '내용2' },
+//       { id: 3, title: '제목3', content: '내용3' },
+//     ];
+
+//     setBoard([...data]);
+//   }, []);
+
+//   return (
+//     <div>
+//       <Header />
+//       <Home
+//         number={number}
+//         board={board}
+//         setBoard={setBoard}
+//         setNumber={setNumber}
+//       />
+//       <Footer />
+//     </div>
+//   );
+// };
+
+// export default HomePage;

react+springboot/react-practice/practice/01/pages/LoginPage.js

@@ -0,0 +1,16 @@
+import React from 'react';
+
+import Login from '../components/Login';
+
+const LoginPage = (props) => {
+  console.log(props);
+  console.log(props.match.params.id);
+  return (
+    <div>
+      <button onClick={() => props.history.goBack()}>뒤로가기</button>
+      <Login />
+    </div>
+  );
+};
+
+export default LoginPage;

react+springboot/react-practice/practice/02 Route, Link/App.css

@@ -0,0 +1,3 @@
+.box-style {
+  color: blue;
+}

react+springboot/react-practice/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 (
+    <div>
+      <Navigation />
+      <ListPage />
+
+      {/* <Route path="/" exact={true} component={ListPage}></Route>
+      <Route path="/write" exact={true} component={WritePage}></Route> */}
+    </div>
+  );
+}
+
+export default App;

react+springboot/react-practice/practice/02 Route, Link/components/Navigation.js

@@ -0,0 +1,17 @@
+import React from 'react';
+import { Link } from 'react-router-dom';
+
+const Navigation = () => {
+  return (
+    <ul>
+      <li>
+        <Link to="/">리스트</Link>
+      </li>
+      <li>
+        <Link to="/write">글쓰기</Link>
+      </li>
+    </ul>
+  );
+};
+
+export default Navigation;

react+springboot/react-practice/practice/02 Route, Link/index.css

@@ -0,0 +1,13 @@
+body {
+  margin: 0;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
+    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
+    sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+code {
+  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
+    monospace;
+}

react+springboot/react-practice/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(
+  <React.StrictMode>
+    <BrowserRouter>
+      <App />
+    </BrowserRouter>
+  </React.StrictMode>,
+  document.getElementById('root'),
+);

react+springboot/react-practice/practice/02 Route, Link/pages/ListPage.js

@@ -0,0 +1,77 @@
+import React from 'react';
+import { useState } from 'react';
+import styled from 'styled-components';
+
+const StyledItemBoxDiv = styled.div`
+  display: flex;
+  justify-content: space-between;
+  border: 1px solid black;
+  padding: 10px;
+  height: 100px;
+  margin: 20px;
+  align-items: center;
+`;
+
+const ListPage = () => {
+  const [post, setPost] = useState({
+    id: 0,
+    title: '',
+    content: '',
+  });
+
+  const [posts, setPosts] = useState([
+    { id: 1, title: '제목1', content: '내용1' },
+    { id: 2, title: '제목2', content: '내용2' },
+    { id: 3, title: '제목3', content: '내용3' },
+    { id: 4, title: '제목4', content: '내용4' },
+    { id: 5, title: '제목5', content: '내용5' },
+  ]);
+
+  const handleWrite = (e) => {
+    // ListPage의 setPosts
+    e.preventDefault();
+    setPosts([...posts, post]);
+  };
+
+  const handleForm = (e) => {
+    // computed property names 문법 (키값 동적 할당)
+    setPost({ ...post, [e.target.name]: e.target.value });
+  };
+
+  const handleDelete = (props) => {
+    setPosts(posts.filter((v) => v.id !== props));
+  };
+
+  return (
+    <div>
+      <h1>글목록 페이지</h1>
+      <form onSubmit={handleWrite}>
+        <input
+          type="text"
+          placeholder="제목을 입력하세요"
+          value={post.title}
+          onChange={handleForm}
+          name="title"
+        />
+        <input
+          type="text"
+          placeholder="내용을 입력하세요"
+          value={post.content}
+          onChange={handleForm}
+          name="content"
+        />
+        <button>글쓰기</button>
+      </form>
+      {posts.map((post) => (
+        <StyledItemBoxDiv>
+          <div>
+            번호 : {post.id} / 제목 : {post.title} / 내용 : {post.content}
+          </div>
+          <button onClick={() => handleDelete(post.id)}>삭제</button>
+        </StyledItemBoxDiv>
+      ))}
+    </div>
+  );
+};
+
+export default ListPage;

react+springboot/react-practice/practice/02 Route, Link/pages/WritePage.js

@@ -0,0 +1,23 @@
+import React from 'react';
+
+const WritePage = () => {
+  const handleWrite = () => {
+    // ListPage의 setPosts
+    let post = { id: 6, title: 'input value' };
+  };
+
+  return (
+    <div>
+      <h1>글쓰기 페이지</h1>
+      <hr />
+      <form>
+        <input type="text" placeholder="제목을 입력하세요" />
+        <button type="button" onClick={handleWrite}>
+          글쓰기
+        </button>
+      </form>
+    </div>
+  );
+};
+
+export default WritePage;

react+springboot/react-practice/public/index.html

@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="theme-color" content="#000000" />
+    <meta
+      name="description"
+      content="Web site created using create-react-app"
+    />
+    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
+    <!--
+      manifest.json provides metadata used when your web app is installed on a
+      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
+    -->
+    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+    <!--
+      Notice the use of %PUBLIC_URL% in the tags above.
+      It will be replaced with the URL of the `public` folder during the build.
+      Only files inside the `public` folder can be referenced from the HTML.
+
+      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
+      work correctly both with client-side routing and a non-root public URL.
+      Learn how to configure a non-root public URL by running `npm run build`.
+    -->
+
+    <title>React App</title>
+  </head>
+  <body>
+    <noscript>You need to enable JavaScript to run this app.</noscript>
+    <div id="root"></div>
+    <!--
+      This HTML file is a template.
+      If you open it directly in the browser, you will see an empty page.
+
+      You can add webfonts, meta tags, or analytics to this file.
+      The build step will place the bundled scripts into the <body> tag.
+
+      To begin the development, run `npm start` or `yarn start`.
+      To create a production bundle, use `npm run build` or `yarn build`.
+    -->
+  </body>
+</html>

react+springboot/react-practice/public/manifest.json

@@ -0,0 +1,25 @@
+{
+  "short_name": "React App",
+  "name": "Create React App Sample",
+  "icons": [
+    {
+      "src": "favicon.ico",
+      "sizes": "64x64 32x32 24x24 16x16",
+      "type": "image/x-icon"
+    },
+    {
+      "src": "logo192.png",
+      "type": "image/png",
+      "sizes": "192x192"
+    },
+    {
+      "src": "logo512.png",
+      "type": "image/png",
+      "sizes": "512x512"
+    }
+  ],
+  "start_url": ".",
+  "display": "standalone",
+  "theme_color": "#000000",
+  "background_color": "#ffffff"
+}

react+springboot/react-practice/public/robots.txt

@@ -0,0 +1,3 @@
+# https://www.robotstxt.org/robotstxt.html
+User-agent: *
+Disallow:

react+springboot/react-practice/src/App.css

@@ -0,0 +1,13 @@
+.container {
+  height: 700px;
+  border: 2px solid black;
+}
+
+.sub_container {
+  height: 250px;
+  border: 2px solid black;
+}
+
+div {
+  padding: 10px;
+}

react+springboot/react-practice/src/App.js

@@ -0,0 +1,15 @@
+import './App.css';
+import Top from './components/Top';
+import Bottom from './components/Bottom';
+
+function App() {
+  return (
+    <div className="container">
+      <h1>최상단 화면</h1>
+      <Top />
+      <Bottom />
+    </div>
+  );
+}
+
+export default App;

react+springboot/react-practice/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 (
+    <div className="sub_container">
+      <h1>Bottom</h1>
+      <button onClick={() => dispatch(increase('kim'))}>증가</button>
+      <button onClick={() => dispatch(decrease())}>감소</button>
+    </div>
+  );
+};
+
+export default Bottom;

react+springboot/react-practice/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 (
+    <div className="sub_container">
+      <h1>Top</h1>
+      번호 : {number}
+      이름 : {username}
+    </div>
+  );
+};
+
+export default Top;

react+springboot/react-practice/src/index.js

@@ -0,0 +1,21 @@
+import 'bootstrap/dist/css/bootstrap.min.css';
+import React from 'react';
+import ReactDOM from 'react-dom';
+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(
+  <React.StrictMode>
+    <BrowserRouter>
+      <Provider store={store}>
+        <App />
+      </Provider>
+    </BrowserRouter>
+  </React.StrictMode>,
+  document.getElementById('root'),
+);

react+springboot/react-practice/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;