Merge commit '018a1df64ba3f9ee355c4b83a6adf56449fa98b9'

nuyh99 · Apr 28, 2022 · 9bee3a5 · 9bee3a5
2 parents bb8deaa + 018a1df
commit 9bee3a5
Show file tree

Hide file tree

Showing 7 changed files with 45 additions and 30 deletions.
diff --git a/frontend/README.md b/frontend/README.md
@@ -2,8 +2,6 @@
 
 <br>
 
-
-
 ## 휴대폰 대리점 고객 전화번호 목록 조회
 
 <hr>
@@ -22,17 +20,34 @@ Project creator : Frontend - 신재윤 / Backend - 황재현
 
 Use skills
 
-- Frontend : HTML, SCSS, Javascript, React, react-router-dom
-- Backend : Java, SpringBoot, MySQL, AWS
-(단, 호스팅 환경은 AWS에서 Vultur로 변경 예정)
+- Frontend : HTML, SCSS, Javascript, React, react-router-dom
+- Backend : Java, SpringBoot, MySQL, Vultr
 
 <br>
 
 API
-- axios 통신
-- Session 쿠키 인증 방식 (미해결)
-- 현재, 쿠키가 Response Cookie 단에서는 보이지만, 크롬 개발자 도구 Application Cookie에서 보이지 않는 문제가 발생. HttpOnly 옵션을 해제해도 지속적
-- React 포트번호 3000, Spring Boot 포트번호 8080에서 오는 오류로 파악중. CORS오류를 해결했다고 생각했으나, 완전히 해결되지 않은 것으로 추정
+
+- axios 통신
+
+<br>
+
+Security
+
+- Session 쿠키 인증 방식 (해결, 로컬 환경에서는 withCredentials:true를 프론트단 백단 모두 적용, 배포 후는 다시 제거)
+- 현재, 쿠키가 Response Cookie 단에서는 보이지만, 크롬 개발자 도구 Application Cookie에서 보이지 않는 문제가 발생. HttpOnly 옵션을 해제해도 지속적
+- React 포트번호 3000, Spring Boot 포트번호 8080에서 오는 오류로 파악중. CORS오류를 해결했다고 생각했으나, 완전히 해결되지 않은 것으로 추정
+- 위의 오류들 모두 해결, 이는 프론트는 로컬 환경에서, 백은 aws에 배포 후 환경에서 서로 통신을 시도 했기 때문에 어떤 옵션을 줘도 되지 않았음.
+- 그래서, 백단을 배포 환경이 아닌 로컬 환경으로 옮기고 cors와 withCredentials 옵션을 주니 해결되었음.
+- 서버 배포 시 api 주소도 로컬환경에서 api로 바꿨음
+
+<br>
+
+해결하고 싶은 과제
+
+- nginx를 통한 서버 배포
+- 리액트 라우팅 이후 새로고침 혹은 뒤로 가기 시에 404 에러 발생
+- 이는 SPA의 특징적인 것으로 해결 방법 3가지가 있어서 우선에는 그 중 하나인 HashRouter 방식 채택
+- 남은 두 가지 방식이 nginx 방식과 스프링부트에서 에러 컨트롤러를 작성하는 방식임.
 
 <hr>
 

diff --git a/frontend/project/build/asset-manifest.json b/frontend/project/build/asset-manifest.json
@@ -1,17 +1,17 @@
 {
  "files": {
  "main.css": "/static/css/main.a72b72c5.css",
- "main.js": "/static/js/main.04034f8c.js",
+ "main.js": "/static/js/main.72cc9043.js",
  "static/js/787.ec704a7a.chunk.js": "/static/js/787.ec704a7a.chunk.js",
  "static/media/author.png": "/static/media/author.8e5f8a624afd65055842.png",
  "static/media/lion.png": "/static/media/lion.98ec9e35a835021d2037.png",
  "index.html": "/index.html",
  "main.a72b72c5.css.map": "/static/css/main.a72b72c5.css.map",
- "main.04034f8c.js.map": "/static/js/main.04034f8c.js.map",
+ "main.72cc9043.js.map": "/static/js/main.72cc9043.js.map",
  "787.ec704a7a.chunk.js.map": "/static/js/787.ec704a7a.chunk.js.map"
  },
  "entrypoints": [
  "static/css/main.a72b72c5.css",
- "static/js/main.04034f8c.js"
+ "static/js/main.72cc9043.js"
  ]
 }
diff --git a/frontend/project/build/index.html b/frontend/project/build/index.html
@@ -1 +1 @@
-<!doctype html><html lang="en"><head><meta charset="utf-8"/><link rel="icon" href="/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="/logo192.png"/><link rel="manifest" href="/manifest.json"/><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous"/><title>대리점 휴대폰 번호 조회</title><script defer="defer" src="/static/js/main.04034f8c.js"></script><link href="/static/css/main.a72b72c5.css" rel="stylesheet"></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div></body></html>
+<!doctype html><html lang="en"><head><meta charset="utf-8"/><link rel="icon" href="/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="/logo192.png"/><link rel="manifest" href="/manifest.json"/><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous"/><title>대리점 휴대폰 번호 조회</title><script defer="defer" src="/static/js/main.72cc9043.js"></script><link href="/static/css/main.a72b72c5.css" rel="stylesheet"></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div></body></html>
diff --git a/.../project/build/static/js/main.04034f8c.js → .../project/build/static/js/main.72cc9043.js b/.../project/build/static/js/main.04034f8c.js → .../project/build/static/js/main.72cc9043.js
diff --git a/...ld/static/js/main.04034f8c.js.LICENSE.txt → ...ld/static/js/main.72cc9043.js.LICENSE.txt b/...ld/static/js/main.04034f8c.js.LICENSE.txt → ...ld/static/js/main.72cc9043.js.LICENSE.txt
diff --git a/...ject/build/static/js/main.04034f8c.js.map → ...ject/build/static/js/main.72cc9043.js.map b/...ject/build/static/js/main.04034f8c.js.map → ...ject/build/static/js/main.72cc9043.js.map
diff --git a/frontend/project/src/routers/PermissionPage.js b/frontend/project/src/routers/PermissionPage.js
@@ -88,9 +88,9 @@ function PermissionPage(props) {
  <h3>관리자 페이지입니다.</h3>
  <br></br>
  <p>
- 직원 관리와 고객 관리가 가능합니다.
+ 체인점 관리와 고객 관리가 가능합니다.
  <br></br>
- 직원 권한 변경, 고객 번호 추가, 삭제
+ 체인점 권한 변경, 고객 번호 추가, 삭제
  <br></br>
  작업 이후{' '}
  <strong style={{color: 'blue'}}>
@@ -118,7 +118,7 @@ function PermissionPage(props) {
  paddingRight: '40px',
  }}
  onClick={onWorkerHandler}>
- 직원 관리
+ 체인점 관리
  </Button>
  </div>
 
@@ -156,15 +156,15 @@ function WorkerState(props) {
  <div className="subcontent">
  <div className="container white-box add">
  <div className="worker">
- <h2>직원 관리</h2>
+ <h2>체인점 관리</h2>
  <div className="workerInfo" style={{overflow: 'auto'}}>
  <div>
  <Table responsive="lg">
  <thead style={{textAlign: 'center'}}>
  <tr>
  <th></th>
- <th>직원 이름</th>
- <th>직원 아이디</th>
+ <th>체인점 이름</th>
+ <th>체인점 아이디</th>
  <th>현재 권한</th>
  <th>등급 변경</th>
  </tr>
@@ -204,8 +204,8 @@ function WorkerState(props) {
  .then(
  () => {
  alert(
- '직원의 권한이 수정되었습니다.\n' +
- '갱신하려면 "직원 관리" 버튼을 다시 누르세요.'
+ '체인점의 권한이 수정되었습니다.\n' +
+ '갱신하려면 "체인점 관리" 버튼을 다시 누르세요.'
  );
  }
  )
@@ -238,8 +238,8 @@ function WorkerState(props) {
  .then(
  () => {
  alert(
- '직원의 권한이 수정되었습니다.\n' +
- '갱신하려면 "직원 관리" 버튼을 다시 누르세요.'
+ '체인점의 권한이 수정되었습니다.\n' +
+ '갱신하려면 "체인점 관리" 버튼을 다시 누르세요.'
  );
  }
  )
@@ -251,7 +251,7 @@ function WorkerState(props) {
  }
  );
  }}>
- 직원
+ 체인점
  </Dropdown.Item>
  <Dropdown.Item
  onClick={(
@@ -272,8 +272,8 @@ function WorkerState(props) {
  .then(
  () => {
  alert(
- '직원의 권한이 수정되었습니다.\n' +
- '갱신하려면 "직원 관리" 버튼을 다시 누르세요.'
+ '체인점의 권한이 수정되었습니다.\n' +
+ '갱신하려면 "체인점 관리" 버튼을 다시 누르세요.'
  );
  }
  )