[Add] Redux Initial Setting

김건희
Commit 065491ee8fc6a1e28e2feb175988727d68f6429c 065491ee 1 parent 5b075ca4
Showing 3 changed files with 95 additions and 22 deletions
weather_briefing/package-lock.json
weather_briefing/package.json
weather_briefing/src/component/views/RegisterPage/RegisterPage.js
--- a/weather_briefing/package-lock.json
View file @065491e
+++ b/weather_briefing/package-lock.json
View file @065491e
@@ -2340,6 +2340,15 @@
         "@types/node": "*"
       }
     },
+    "@types/hoist-non-react-statics": {
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/@types/hoist-non-react-statics/-/hoist-non-react-statics-3.3.1.tgz",
+      "integrity": "sha512-iMIqiko6ooLrTh1joXodJK5X9xeEALT1kM5G3ZLhD3hszxBdIEd5C75U834D9mLcINgD4OyZf5uQXjkuYydWvA==",
+      "requires": {
+        "@types/react": "*",
+        "hoist-non-react-statics": "^3.3.0"
+      }
+    },
     "@types/html-minifier-terser": {
       "version": "6.1.0",
       "resolved": "https://registry.npmjs.org/@types/html-minifier-terser/-/html-minifier-terser-6.1.0.tgz",
@@ -2522,6 +2531,11 @@
       "resolved": "https://registry.npmjs.org/@types/trusted-types/-/trusted-types-2.0.2.tgz",
       "integrity": "sha512-F5DIZ36YVLE+PN+Zwws4kJogq47hNgX3Nx6WyDJ3kcplxyke3XIzB8uK5n/Lpm1HBsbGzd6nmGehL8cPekP+Tg=="
     },
+    "@types/use-sync-external-store": {
+      "version": "0.0.3",
+      "resolved": "https://registry.npmjs.org/@types/use-sync-external-store/-/use-sync-external-store-0.0.3.tgz",
+      "integrity": "sha512-EwmlvuaxPNej9+T4v5AuBPJa2x2UOJVdjCtDHgcDqitUeOtjnJKJ+apYjVcAoBEMjKW1VVFGZLUb5+qqa09XFA=="
+    },
     "@types/ws": {
       "version": "8.5.3",
       "resolved": "https://registry.npmjs.org/@types/ws/-/ws-8.5.3.tgz",
@@ -6210,6 +6224,21 @@
         "@babel/runtime": "^7.7.6"
       }
     },
+    "hoist-non-react-statics": {
+      "version": "3.3.2",
+      "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz",
+      "integrity": "sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==",
+      "requires": {
+        "react-is": "^16.7.0"
+      },
+      "dependencies": {
+        "react-is": {
+          "version": "16.13.1",
+          "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
+          "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
+        }
+      }
+    },
     "hoopy": {
       "version": "0.1.4",
       "resolved": "https://registry.npmjs.org/hoopy/-/hoopy-0.1.4.tgz",
@@ -10080,6 +10109,26 @@
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
       "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w=="
     },
+    "react-redux": {
+      "version": "8.0.1",
+      "resolved": "https://registry.npmjs.org/react-redux/-/react-redux-8.0.1.tgz",
+      "integrity": "sha512-LMZMsPY4DYdZfLJgd7i79n5Kps5N9XVLCJJeWAaPYTV+Eah2zTuBjTxKtNEbjiyitbq80/eIkm55CYSLqAub3w==",
+      "requires": {
+        "@babel/runtime": "^7.12.1",
+        "@types/hoist-non-react-statics": "^3.3.1",
+        "@types/use-sync-external-store": "^0.0.3",
+        "hoist-non-react-statics": "^3.3.2",
+        "react-is": "^18.0.0",
+        "use-sync-external-store": "^1.0.0"
+      },
+      "dependencies": {
+        "react-is": {
+          "version": "18.1.0",
+          "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.1.0.tgz",
+          "integrity": "sha512-Fl7FuabXsJnV5Q1qIOQwx/sagGF18kogb4gpfcG4gjLBWO0WDiiz1ko/ExayuxE7InyQkBLkxRFG5oxY6Uu3Kg=="
+        }
+      }
+    },
     "react-refresh": {
       "version": "0.11.0",
       "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.11.0.tgz",
@@ -10296,6 +10345,20 @@
         "strip-indent": "^3.0.0"
       }
     },
+    "redux": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/redux/-/redux-4.2.0.tgz",
+      "integrity": "sha512-oSBmcKKIuIR4ME29/AeNUnl5L+hvBq7OaJWzaptTQJAntaPvxIJqfnjbaEiCzzaIz+XmVILfqAM3Ob0aXLPfjA==",
+      "requires": {
+        "@babel/runtime": "^7.9.2"
+      }
+    },
+    "redux-devtools-extension": {
+      "version": "2.13.9",
+      "resolved": "https://registry.npmjs.org/redux-devtools-extension/-/redux-devtools-extension-2.13.9.tgz",
+      "integrity": "sha512-cNJ8Q/EtjhQaZ71c8I9+BPySIBVEKssbPpskBfsXqb8HJ002A3KRVHfeRzwRo6mGPqsm7XuHTqNSNeS1Khig0A==",
+      "dev": true
+    },
     "regenerate": {
       "version": "1.4.2",
       "resolved": "https://registry.npmjs.org/regenerate/-/regenerate-1.4.2.tgz",
@@ -11927,6 +11990,11 @@
         "prepend-http": "^2.0.0"
       }
     },
+    "use-sync-external-store": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.1.0.tgz",
+      "integrity": "sha512-SEnieB2FPKEVne66NpXPd1Np4R1lTNKfjuy3XdIoPQKYBAFdzbzSZlSn1KJZUiihQLQC5Znot4SBz1EOTBwQAQ=="
+    },
     "util-deprecate": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
--- a/weather_briefing/package.json
View file @065491e
+++ b/weather_briefing/package.json
View file @065491e
@@ -13,8 +13,10 @@
     "nodemon": "^2.0.16",
     "react": "^18.1.0",
     "react-dom": "^18.1.0",
+    "react-redux": "^8.0.1",
     "react-router-dom": "^6.3.0",
     "react-scripts": "5.0.1",
+    "redux": "^4.2.0",
     "web-vitals": "^2.1.4"
   },
   "scripts": {
@@ -40,5 +42,8 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
+  },
+  "devDependencies": {
+    "redux-devtools-extension": "^2.13.9"
   }
 }
--- a/weather_briefing/src/component/views/RegisterPage/RegisterPage.js
View file @065491e
+++ b/weather_briefing/src/component/views/RegisterPage/RegisterPage.js
View file @065491e
@@ -2,7 +2,7 @@ import React, { useCallback, useState } from "react";
 import "../style/RegisterPage.scss"
 function RegisterPage(props) {
-  
+
   const [Name, setName] = useState("");
   const [Sex, setSex] = useState("");
   const [Id, setId] = useState("");
@@ -65,7 +65,7 @@ function RegisterPage(props) {
     //비밀번호를 입력할때마다 password 를 검증하는 함수
     setPasswordError(event.currentTarget.value !== Password);
     setPasswordCheck(event.currentTarget.value);
-  },[PasswordError]);
+  }, [PasswordError]);
   const onSubmitHandler = useCallback((event) => {
     event.preventDefault();
@@ -90,7 +90,7 @@ function RegisterPage(props) {
     }
     if (!checkRegisterError) {
-      const userdata = {
+      const UserData = {
         name: Name,
         id: Id,
         password: Password,
@@ -101,11 +101,11 @@ function RegisterPage(props) {
   }, [checkIdError, checkNameError, checkPasswordError, checkRegisterError, checkSexError, Password, PasswordCheck, Sex]);
   return (
-    <div id = "body">
+    <div id="body">
       <div className="register-box">
         <h2>회원가입</h2>
         <div className="input-area">
-          <input 
+          <input
             placeholder="이름"
             type="text"
             value={Name}
@@ -113,10 +113,10 @@ function RegisterPage(props) {
           />
         </div>
         <div className="check-variable">
-          {checkNameError && <div style={{color : 'red'}}>이름을 두글자 이상 입력해 주세요.</div>}
+          {checkNameError && <div style={{ color: 'red' }}>이름을 두글자 이상 입력해 주세요.</div>}
         </div>
         <div className="input-area">
-          <input 
+          <input
             placeholder="아이디"
             type="text"
             value={Id}
@@ -124,10 +124,10 @@ function RegisterPage(props) {
           />
         </div>
         <div className="check-variable">
-          {checkIdError && <div style={{color : 'red'}}>아이디는 6자리 이상 14자리 이하 소문자와 숫자로 입력해주세요.</div>}
+          {checkIdError && <div style={{ color: 'red' }}>아이디는 6자리 이상 14자리 이하 소문자와 숫자로 입력해주세요.</div>}
         </div>
         <div className="input-area">
-          <input 
+          <input
             placeholder="비밀번호"
             type="text"
             value={Password}
@@ -135,10 +135,10 @@ function RegisterPage(props) {
           />
         </div>
         <div className="check-variable">
-          {checkPasswordError && <div style={{color : 'red'}}>알파벳과 숫자, 특수문자를 포함하여 8자리 이상 입력해주세요.</div>}
+          {checkPasswordError && <div style={{ color: 'red' }}>알파벳과 숫자, 특수문자를 포함하여 8자리 이상 입력해주세요.</div>}
         </div>
         <div className="input-area">
-          <input 
+          <input
             placeholder="비밀번호 재입력"
             type="text"
             value={PasswordCheck}
@@ -146,31 +146,31 @@ function RegisterPage(props) {
           />
         </div>
         <div className="check-variable">
-          {PasswordError && <div style={{color : 'red'}}>비밀번호가 일치하지 않습니다.</div>}
+          {PasswordError && <div style={{ color: 'red' }}>비밀번호가 일치하지 않습니다.</div>}
         </div>
         <div className="input-area">
-          <input 
+          <input
-            type="radio" 
+            type="radio"
-            value = "0"
+            value="0"
-            checked = {Sex === "0"}
+            checked={Sex === "0"}
             onChange={onSexHandler}
           />남
-          <input 
+          <input
-            type="radio" 
+            type="radio"
-            value = "1"
+            value="1"
-            checked = {Sex === "1"}
+            checked={Sex === "1"}
             onChange={onSexHandler}
           />여
         </div>
         <div className="btn-area" onClick={onSubmitHandler}>
-          <button 
+          <button
             className="register-btn"
           >
             가입하기
           </button>
         </div>
         <div className="check-variable">
-          {checkRegisterError && <div style={{color : 'red'}}>정보를 제대로 입력해주세요.</div>}
+          {checkRegisterError && <div style={{ color: 'red' }}>정보를 제대로 입력해주세요.</div>}
         </div>
       </div>
     </div>