2023년 5월 1주차 WIL

이번주에 알게 된 점

날짜	주요 내용	TIL 링크
2023.05.01	DTO와 VO	https://seulki1105.tistory.com/47 https://seulki1105.tistory.com/48
2023.05.02	알고리즘 문제 풀이	https://seulki1105.tistory.com/49
2023.05.03	알고리즘 문제 풀이	https://seulki1105.tistory.com/50
2023.05.04	과제 리펙토링	https://seulki1105.tistory.com/51
2023.05.05	미니프로젝트 시작	https://seulki1105.tistory.com/52
2023.05.06	미니프로젝트	https://seulki1105.tistory.com/53

• 6일에는 Spring-React 협업 세션을 들었다. REST API, CORS(Cross Origin Resource Sharing)등에 대해 설명해주셨다. Origin은 프로토콜, 도메인, 포트번호를 모두 합친 부분을 의미한다. CORS는 브라우저 보안 관련 정책으로 교차 출처 자원 공유라고 해석한다. SOP(Same Origin Policy)는 동일 출처 정책으로 다른 Origin으로 요청을 보낼 수 없도록 하는 브라우저의 보안 정책이다. 기술이 발달하면서 서로 다른 Origin끼리 데이터를 주고받아야 하는 일이 많아졌고, 이로 인해, 몇 가지 예외 상황에 대해 다른 Origin으로 요청을 보낼 수 있게 하였다. CORS는 다른 Origin으로 요청을 보내기 위해 지켜야 하는 정책이다. 서버는 평소처럼 요청이 오면 응답을 해주고, 브라우저가 자신이 보낸 요청 및 서버로부터 받은 응답 데이터가 CORS 정책을 지키는지 검사하여 안전한 요청인지 검사하는 것이다. 서버간 통신에서는 이런 정책이 전혀 적용되지 않는다.

CORS 동작 원리

 

브라우저는 다른 Origin으로 요청을 보낼 때 헤더에 자신의 Origin을 설정하고, 서버로부터 응답을 받으면 응답의 Access-Control-Allow-Origin 헤더에 설정된 Origin 목록에 요청의 Origin 헤더 값이 포함되는지 검사한다. CORS 요청을 위해서는 서버의 응답 Access-Control-Allow-Origin 헤더에 허용되는 Origin 목록 혹은 와일드카드(*)를 설정해주면 된다.

 

1. 단순 요청(Simple Request)

단순요청은 안전한 요청으로 취급되어 단 한 번의 요청만 전송한다.

CORS의 기본적인 동작 원리를 그대로 따른다. 방식은 아래와 같다.

출처 : [Web] CORS (Cross Origin Resource Sharing) 이해하기 (tistory.com)

 

2. 프리플라이트 요청(Preflight Request)

단순 요청의 조건에 벗어나는 요청의 경우, 서버에 실제 요청을 보내기 전에 프리플라이트 요청을 먼저 보내 안전한지 확인한다. 안전하면 그때 실제 요청을 보낸다. 즉, 두 번의 요청을 전송한다. 방식은 아래와 같다.

출처 : [Web] CORS (Cross Origin Resource Sharing) 이해하기 (tistory.com)

 

3. 인증 정보를 포함한 요청(Credentialed Request)

쿠키, 토큰 등 인증정보를 함께 보내야 하는 요청이라면 별도로 따라야 하는 CORS 정책이 존재한다.

클라이언트 단에서 요청 시 별도 설정이 필요하다. XMLHttpRequest, jQuery의 ajax, 또는 axios를 사용한다면 withCredentials 옵션을 true로 설정해줘야 한다. 반면, fetch API를 사용한다면 credentials 옵션을 include로 설정해줘야 한다. 이러한 별도의 설정을 해주지 않으면 쿠키 등의 인증 정보는 절대로 자동으로 서버에게 전송되지 않는다.

출처 : [Web] CORS (Cross Origin Resource Sharing) 이해하기 (tistory.com)

 

이번주 목표 - 달성 여부

• 나만의 블로그(과제였던)에 파일 올리기, 대댓글, 게시글 카테고리 분류 저장, 로그아웃 기능 추가하기
• -> 사진 올리기만 함
• Swagger controller단 수정, jwt 토큰 추가하는 부분 적용
• -> 아직 시도하지 못함. 미니프로젝트 이후로 미뤄질 듯
• 미니프로젝트 주차 시작하기
• 하루에 알고리즘 문제 1~3개씩 풀기
• -> 잘 해왔는데, 미니프로젝트 시작하고 기능 구현하느라 6일에는 못풀었다...
• java 문법 5주차 강의 다 듣기
• java의 정석 챕터3, 4 정독하기
• 밀린 이론 공부하고 블로그에 정리하기
• -> DTO, VO밖에 못함
• Github에 잔디 매일 심기
• TIL 매일 작성하기

느낀 점 / 아쉬운 점

• 과제에서 더 나아가는 작업을 하고, 예외처리 하는 부분을 하루종일 들여다보느라 다른 공부를 못했다. 그렇지만 함께 하는 분들과 같이 고민하며 왜 이렇게 동작하는지, 왜 안되는지 탐구하는 과정이 흥미로웠다. 챌린지가 재미있을 수도 있겠다는 생각이 처음으로 들게되는 소중한 시간이었다. 좋은 분들이라 그런 생각을 했을지도? 나도 누군가에게 좋은 사람이고 싶다.
• 집중하다보면 시간이 얼마가 흘렀는지도 모르게 앉아만 있어 거북목이 되는 느낌이 매 순간 들고, 허리도 아프다. 그럼에도 운동하겠다는 다짐을 지키기가 더욱 어려워진다. 이 점은 정말정말 아쉽다. 아직은 아니지만, 일에 집중하면 밥도 안먹고 일하던 버릇 다시 나올지도 모르겠다. 멀리 가기 위해선 적당한 선을 지키면서 하자!

다음주 목표

• 미니프로젝트 완성하기
• 미니프로젝트 관련 트러블슈팅 블로그, 팀노션에 정리하기
• 프론트/백앤드 협업하며 느낀 점 잘 기록해두기
• 깃 컨벤션, 깃 플로우 지키면서 협업하기
• 하루에 알고리즘 문제 최소 1개씩 풀기
• Github에 잔디 매일 심기
• TIL 매일 작성하기

 

   [ 다음주가 아니라도 짬 날 때 할 것 ]

• Swagger controller단 수정, jwt 토큰 추가하는 부분 적용
• java의 정석 챕터3, 4 정독하기
• 밀린 이론 공부하고 블로그에 정리하기

 

 

참고

[Web] CORS (Cross Origin Resource Sharing) 이해하기 (tistory.com)