프리 프로젝트 로직 흐름[작성 중]

> 프리 프로젝트 순서 

1. 메인 화면 ( 비로그인) 

2. 로그인 

3. 메인 화면(로그인)

 

04-A 질문 목록 클릭 

- a : 상세 페이지로 이동

- b :  답변 수정 기능 작동 -> 저장 

- c : 댓글 수정 기능 작동 -> 저장

- d :  댓글 작성 기능 작동 -> 저장 

 

 

04-A 질문 작성 클릭 

- a : 질문 작성 페이지로 이동 

- b : 질문 작성 후  저장 -> 목록에 추가 

 

 

5.  유저 아이콘 클릭 

 - a : [EditProfile] / [Setting] 클릭 시 유저 정보 수정 화면 

         - [1] : 정보 수정 후 저장 시 유저 정보 업데이트 

- b : [Activity] 클릭 시 유저가 작성한 데이터들 목록 화면 

         - [1] : 로그인 한 유저가 댓글, 질문 작성 시 목록에 출력. 

 

---

CORS - 한 사이트에서 주소(URL)이 다른 사이트에서 API로 정보를 받아오기 위해 '프론트 ' 에서 HTTP요청을 보냈을 때, 미리 어떤 설정을 해주지 않으면 CORS 문제로 막히게 됩니다.

 - 근데 테스트(포스트맨) 할 때는 문제가 없지만 정작 웹사이트에서 보내려고 하면 안됩니다. 

 - 웹사이트에서  AJAX  요청을 보낼 때 이 웹 브라우저 에서 일어나는 " 프론트 단"에서의 문제입니다. 

내가 갭발하고 있는 이 사이트를 못 믿어서 받아올 사이트에 요청을 못 보내게 웹 브라우저(크롬)에서 막는겁니다. 

이유 : 크롬은 내가 방문한 다른 사이트를 못 믿는 거야. 남이 만든 사이트가 내 크롬을 도는 거니까. 

 

내 브라우저에 토큰 등의 정보가 "쿠키"로 저장 되어서 애네가 로그인 했던 사이트에 접속할 때 요청에다 실어보내면 

해당 사이트에서는 " 쿠키를 " 보고 내가 로그인 되어 있는 상태인지 아닌지 확인 할 수 있습니다. (인증 정보가 크롬에 저장되어 있는 이야기 입니다. ) 그런데 이 개인 정보들을 노리는 악용 사이트들의 시도로 브라우저간의 리소스 공유를 방지하기 위해   CORS : 어떤 기준을 충족시키면 리소스 공유가 되도록 만들어진 메커니즘이 탄생? 합니다. 

 

 

출처가 다른 요청을 주고받는게 불가한 것이 " 기본 값 " 입니다. 하지만 " CORS 설정 "으로 " 가능 " 해지는 것 입니다. 

 - 백엔드 쪽에서 교차 출처를 검증할 조건을 미리 명시(or 주소 미리 지정)해두면 됩니다. 스프링이나 장고와 같은 프레임워크에서는 쉽게 CORS 옵션을 넣는 방법들이 쉽게 설정되어 있습니다.  

- 다른 출처로의 요청을 할 때 Origin이라는   Header를 넣습니다. [ corss-origin ] 

- 요청을 받은 사이트는 답장 헤더에  지정된 " Access-Control-Allow-Origin " 정보<등록된 url도 보내겠죠.>를 실어서 보냅니다. 

 

const CLIENT_ID = process.env.REACT_APP_CLIENT_ID; 
const CLIENT_SECRET = process.env.REACT_APP_CLIENT_SECRET;

export const headers = {
	'Content-Type': 'application/json',
    'X-Naver-Client-Id': `${CLIENT_ID}`,
    'X-Naver-Client-Secret': `${CLIENT_SECRET}`,
};

토큰/ 사용자 식별 정보를 요청할 때는 더욱 엄격합니다. 

# Simple Reqeust(GET / POST )와 같은 일정 조건의 요청들의 경우,,

 

- 프론트 : credentials : true 세팅

- 백 : 보내는 쪽의 출처(웹 페이지의 주소를 ) 정확히 명시한 후 Access-Control-Allow-Crendentials항목을 true로 맞춰주어야 합니다. 

 

# PUT / DELET와 같은 요청의 경우,

  " Preflight " 요청을 먼저 보내서 요청이 안전한지 확인해야 하고 " 허락 " 이 떨어져야 요청을 보낼 수 있습니다. 

이유 : 요청에 의해서 서버 데이터가 변경될 수 있기 때문이니다. 

 

> Chapter 01  : 비회원 상태에서 로그인을 통해 로그인 된 상태로 메인에 접속하는 흐름