Feat: set URL env

.gitignore

@@ -39,4 +39,6 @@ frontend/build
 !.vscode/extensions.json
 
 *.env
-*.local.env
\ No newline at end of file
+*.local.env
+*.env.development
+*.env.production
\ No newline at end of file

frontend/package-lock.json

@@ -14,6 +14,7 @@
         "@testing-library/user-event": "^13.5.0",
         "axios": "^1.6.1",
         "base-64": "^1.0.0",
+        "cross-env": "^7.0.3",
         "express": "^4.18.2",
         "http-proxy-middleware": "^2.0.6",
         "jwt-decode": "^4.0.0",
@@ -6767,11 +6768,27 @@
         "node": ">=10"
       }
     },
+    "node_modules/cross-env": {
+      "version": "7.0.3",
+      "resolved": "https://registry.npmjs.org/cross-env/-/cross-env-7.0.3.tgz",
+      "integrity": "sha512-+/HKd6EgcQCJGh2PSjZuUitQBQynKor4wrFbRg4DtAgS1aWO+gU52xpH7M9ScGgXSYmAVS9bIJ8EzuaGw0oNAw==",
+      "dependencies": {
+        "cross-spawn": "^7.0.1"
+      },
+      "bin": {
+        "cross-env": "src/bin/cross-env.js",
+        "cross-env-shell": "src/bin/cross-env-shell.js"
+      },
+      "engines": {
+        "node": ">=10.14",
+        "npm": ">=6",
+        "yarn": ">=1"
+      }
+    },
     "node_modules/cross-spawn": {
       "version": "7.0.3",
       "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz",
       "integrity": "sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==",
-      "dev": true,
       "dependencies": {
         "path-key": "^3.1.0",
         "shebang-command": "^2.0.0",
@@ -10516,8 +10533,7 @@
     "node_modules/isexe": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/isexe/-/isexe-2.0.0.tgz",
-      "integrity": "sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==",
-      "dev": true
+      "integrity": "sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw=="
     },
     "node_modules/istanbul-lib-coverage": {
       "version": "3.2.2",
@@ -14003,7 +14019,6 @@
       "version": "3.1.1",
       "resolved": "https://registry.npmjs.org/path-key/-/path-key-3.1.1.tgz",
       "integrity": "sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==",
-      "dev": true,
       "engines": {
         "node": ">=8"
       }
@@ -16884,7 +16899,6 @@
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
       "integrity": "sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==",
-      "dev": true,
       "dependencies": {
         "shebang-regex": "^3.0.0"
       },
@@ -16896,7 +16910,6 @@
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/shebang-regex/-/shebang-regex-3.0.0.tgz",
       "integrity": "sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==",
-      "dev": true,
       "engines": {
         "node": ">=8"
       }
@@ -18835,7 +18848,6 @@
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
       "integrity": "sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==",
-      "dev": true,
       "dependencies": {
         "isexe": "^2.0.0"
       },

frontend/package.json

@@ -9,6 +9,7 @@
     "@testing-library/user-event": "^13.5.0",
     "axios": "^1.6.1",
     "base-64": "^1.0.0",
+    "cross-env": "^7.0.3",
     "express": "^4.18.2",
     "http-proxy-middleware": "^2.0.6",
     "jwt-decode": "^4.0.0",

frontend/src/App.js

@@ -82,7 +82,7 @@ function App() {
 
 async function requestLogout() {
   const response = await axios({
-    url: 'http://localhost:3000/auth/logout', // 통신할 웹문서
+    url: `${process.env.REACT_APP_BACKEND_URL}/auth/logout`, // 통신할 웹문서
     method: 'get', // 통신할 방식
   });
   return response;
@@ -90,7 +90,7 @@ async function requestLogout() {
 
 async function requestCheckSession() {
   const response = await axios({
-    url: 'http://localhost:3000/auth/session', // 통신할 웹문서
+    url: `${process.env.REACT_APP_BACKEND_URL}/auth/session`, // 통신할 웹문서
     method: 'get', // 통신할 방식
   });
   return response;

frontend/src/components/Article.js

@@ -20,8 +20,8 @@ function Article({ data }) {
     // http://localhost:3000/uploads/21701487062905.png
     return (
       <img
-        src={`http://localhost:3000/${el.replaceAll("\\", "/").substring(7)}`}
-        alt={`http://localhost:3000/${el.replaceAll("\\", "/").substring(7)}`}
+        src={`${process.env.REACT_APP_BACKEND_URL}/${el.replaceAll("\\", "/").substring(7)}`}
+        alt={`${process.env.REACT_APP_BACKEND_URL}/${el.replaceAll("\\", "/").substring(7)}`}
         style={{ width: "100px", height: "100px" }} />
     )
   });

frontend/src/components/Comment.js

@@ -24,7 +24,7 @@ function Comments({ data }) {
   function DeleteComment(e) {
     const data = { id: _id }
     axios
-      .delete(`http://localhost:3000/article/${params.id}/comment/${_id}`, data,
+      .delete(`${process.env.REACT_APP_BACKEND_URL}/article/${params.id}/comment/${_id}`, data,
         {
           headers: { "Content-Type": 'application/json' }
         })

frontend/src/components/GoogleLoginButton.js

@@ -68,7 +68,7 @@ function b64DecodeUnicode(str) {
 
 async function requestLogin(payloadObj) {
   const response = await axios({
-    url: 'http://localhost:3000/auth/login', // 통신할 웹문서
+    url: `${process.env.REACT_APP_BACKEND_URL}/auth/login`, // 통신할 웹문서
     method: 'post', // 통신할 방식
     data: payloadObj
   });

frontend/src/pages/Main.js

@@ -63,7 +63,7 @@ function Main() {
 
 async function requestSortArticle(crit) {
   const response = await axios({
-    url: `http://localhost:3000/article/?criteria=${crit}`, // 통신할 웹문서
+    url: `${process.env.REACT_APP_BACKEND_URL}/article/?criteria=${crit}`, // 통신할 웹문서
     method: 'get', // 통신할 방식
   });
   return response;

frontend/src/pages/MyPage.js

@@ -43,7 +43,7 @@ function MyPage() {
 
 async function requestArticles(id) {
   const response = await axios({
-    url: `http://localhost:3000/article/user/${id}`, // 통신할 웹문서
+    url: `${process.env.REACT_APP_BACKEND_URL}/article/user/${id}`, // 통신할 웹문서
     method: 'get', // 통신할 방식
   });
   return response;

frontend/src/pages/PostRead.js

@@ -45,7 +45,7 @@ function PostRead() {
   }, []);
 
   function SetLike() {
-    axios.put(`http://localhost:3000/article/${params.id}/like`)
+    axios.put(`${process.env.REACT_APP_BACKEND_URL}/article/${params.id}/like`)
       .then(res => {
         return requestLoadArticleById(params.id)
       })
@@ -69,7 +69,7 @@ function PostRead() {
       return
     }
     const data = { content: inputComment }
-    axios.post(`http://localhost:3000/article/${params.id}/comment`, data,
+    axios.post(`${process.env.REACT_APP_BACKEND_URL}/article/${params.id}/comment`, data,
       {
         headers: { "Content-Type": 'application/json' }
       })
@@ -146,7 +146,7 @@ function PostRead() {
 
 async function requestLoadArticleById(id) {
   const response = await axios({
-    url: `http://localhost:3000/article/${id}`, // 통신할 웹문서
+    url: `${process.env.REACT_APP_BACKEND_URL}/article/${id}`, // 통신할 웹문서
     method: 'get', // 통신할 방식
   });
   return response;
@@ -154,7 +154,7 @@ async function requestLoadArticleById(id) {
 
 async function requestDeleteArticleById(id) {
   const response = await axios({
-    url: `http://localhost:3000/article/${id}`, // 통신할 웹문서
+    url: `${process.env.REACT_APP_BACKEND_URL}/article/${id}`, // 통신할 웹문서
     method: 'delete', // 통신할 방식
   });
   return response;

frontend/src/pages/PostWrite.js

@@ -114,7 +114,7 @@ function PostWrite() {
     formData.append("latitude", location.center.lat);
     formData.append("longitude", location.center.lng);
     axios
-      .post("http://localhost:3000/article", formData,
+      .post(`${process.env.REACT_APP_BACKEND_URL}/article`, formData,
         {
           headers: { "Content-Type": "multipart/form-data" }
         })

frontend/src/pages/Search.js

@@ -87,7 +87,7 @@ function Search(props) {
 
 async function requestLoadArticleByKeyword(keyword) {
   const response = await axios({
-    url: `http://localhost:3000/article/?keyword=${keyword}`, // 통신할 웹문서
+    url: `${process.env.REACT_APP_BACKEND_URL}/article/?keyword=${keyword}`, // 통신할 웹문서
     method: 'get', // 통신할 방식
   });
   return response;