54일차
클론코딩 기획!! 7일 프로젝트!!
인스타그램을 하기로 했습니다!
추가구현까지 생각해서 erd를 만들었는데… 과연.. 다할 수 있을지가 걱정입니다.
그래도 꼭 추가로 구현하고 싶은건 채팅 기능 (메신저)와 팔로잉, 해시태그입니다.
제가 게시글을 맡아서 이번에는 저를 갈아 넣을 계획입니다..!!
현재 기획 및 게시글 작성, 조회, 수정, 삭제, 좋아요, 이미지까지 코드작성 완료!!
spring 쪽은 기본적인 user, 게시글, 댓글 완성~
대댓글, 로그아웃 등 도 완성
이제 남은 건 채팅기능, 팔로잉, 해시태그!!
오늘도 열심히 코드를 친 저에게 휴식을 주려고 합니다~
아래 사진은… erd.. 가능하겠죠…????
53일차
어제 로그아웃 에러 걸린 정확한 이유를 찾았습니다. 프론트와 연결하는 테스트를 위해 restcontroller를 controller로 바꿔서 생긴 오류였습니다.. 결국 로직에는 문제가 없었던 것!! 이제 restcontroller 안까먹을거 같군요…!
발표를 위해 아키텍쳐를 만들었습니다!
내일 새로운 조가 되는데, 어떻게 한 주가 지나갈지 걱정입니다.
카카오 로그인 연동을 위해서 카카오 서버와 http 통신을 해야할 일이 있었다.
전체적인 아키텍처 구성은 아래와 같다.
2번 과정인 react 클라이언트(localhost:3000)에서 카카오 서버(https://kauth.kakao.com/oauth/token)로 요청하는 과정에서 CORS 관련 에러가 발생했다.
평소 CORS에 대해 어느정도 개념은 가지고있었지만 상세한 프로세스 과정은 알지못했다.
이 참에 CORS 정책이 무엇인지 한번 알아보자
- CORS는 서로 다른 출처(Origin) 간에 리소스를 전달하는 방식을 제어하는 체제
- CORS는 브라우저 정책이다. CORS 정책을 위반하지 않으려면 클라이언트, 서버 둘 다 프로토콜, 도메인, 포트가 전부 일치해야 한다.
CORS 요청이 가능하려면 서버에서 특정 헤더인 Access-Control-Allow-Origin과 함께 응답할 필요가 있다.
CORS 요청은 Simple/Preflight, Credential/Non-Credential의 조합으로 4가지가 존재한다.
이 네가지의 자세한 특징은 구글링해보면 알테고... 중요한건 Preflight 이다.
브라우저는 Simple Request 조건(찾아보면 나옴)에 맞지 않으면 Preflight 방식으로 요청한다.
먼저 서버에 예비 요청(Preflight Request)를 보내고 서버는 예비 요청에 대해 응답하고, 그 다음에 본 요청(Actual Request)을 진행한다는 것이다.. 몰랐네;; 본 요청전에 검증 과정이라고 생각하면 되겠다.
서버에서 CORS 요청을 처리할 때 지정하는 헤더
- Access-Control-Allow-Origin
Access-Control-Allow-Origin 헤더의 값으로 지정된 도메인으로부터의 요청만 서버의 리소스에 접근할 수 있게 한다.
Access-Control-Allow-Origin: <origin> | *
클라이언트가 서버에 CORS 요청을 보낼 때 사용하는 헤더로, 브라우저가 자동으로 지정하며, XMLHttpRequest를 사용하는 프로그래머가 직접 지정해 줄 필요 없다.
- Access-Control-Request-Headers
예비 요청을 보낼 때 포함되어, 본 요청에서 어떤 HTTP Header를 사용할 지 서버에게 알려준다.
Access-Control-Request-Headers: <field-name>[, <field-name>]*CORS가 브라우저 정책이다보니 서버와 서버간에 통신에서는 해당되지 않는다. 그래서 프록시 서버를 이용해서 CORS를 해결하는 방법이 되게 인상깊었다. 역시 능력자들은 다 계획이 있구나 음..
- CORS를 쓰면 브라우저에서 비동기 통신으로도 Same Origin Policy의 제약을 넘어 다른 도메인의 자원을 사용할 수 있다.
- CORS를 사용하려면
52일차
로그아웃 오류는 시큐리티 로그아웃으로 적용했기 때문에 컨트롤러로 만들어둔건 삭제하는 것이 좋다는 글을 보았다… 근데 그래도 포스트맨으로 돌리는거 궁금해서 해봤는데 아직도 잘 안되었는데 드디어 성공했습니다!
시큐리티 로그아웃!
// 로그아웃
http.logout()//.permitAll() // 로그아웃 기능 작동함
.logoutUrl("Logout") // 로그아웃 처리 URL, default: /logout, 원칙적으로 post 방식만 지원
.logoutSuccessUrl("/api/user/login") // 로그아웃 성공 후 이동페이지
.deleteCookies("JSESSIONID", "remember-me"); // 로그아웃 후 쿠키 삭제
.addLogoutHandler(logoutHandler()) // 로그아웃 핸들러 익명의 객체 넣기
.logoutSuccessHandler(logoutSuccessHandler()); // 로그아웃 성공 후 핸들러
@RequestMapping(value = "/logout", method = {RequestMethod.GET,RequestMethod.POST})
@ResponseBody
public String logoutPage(HttpServletRequest request, HttpServletResponse response) throws IOException {
Authentication auth = SecurityContextHolder.getContext().getAuthentication();
if (auth != null) {
new SecurityContextLogoutHandler().logout(request, response, auth);
}
return "로그아웃 성공";
카카오 로그인은 제가 넣은 주소랑 보내는 것이 달라서 생긴 오류로 추측! 다시 리엑트 분들과 시도 해볼려고 합니다!
오늘도 화이팅!