Jest 맛보기, CORS - 항해99 5주차 회고

싱클베어·2022년 2월 13일

회고록

항해99 회고록

목록 보기

5/13

그동안의 이야기

다섯번째 회고록을 작성하게 되었다. 벌써 한달이 넘어갔다니.. 시간이 나이를 먹을수록 빨리 지나간다고 하지만 여태까지 경험한 시간 속도중 제일 빠른 기분이다.

테스트 코드
내가 한 주 동안 배운 것 - CORS
느낀 것
내게 아쉬웠던 것

테스트 코드

jest를 이용해, TDD(테스트 주도 개발) 방식으로 개발을 진행해보았다. 사전 작성된 테스트 코드를 제공받고, 그에 맞는 클래스 구조와 메서드를 작성하는 방식으로 개발하였다.

다소 익숙하지 않은 개발 방식에, 클래스를 어떻게 사용하는지 처음 접해서 다소 좀 헤맸다. 특히 A, B 클래스가 있을때 A 클래스의 메서드에서 B 클래스의 값을 조작할 수 있는 점을 알기까지 오래걸렸다.

매운맛 과제에서는 setTimeout, setInterval 등을 활용해, IoT 센서가 켜진 이후 서버와 통신하는 과정을 가상으로 구현해보는 과제여서 신선했다. 튜터님의 실제 적용사례가 반영된 케이스라고 할 수 있겠다.

이번 미니 팀 프로젝트에 적용을 해볼까 하고 다들 생각은 하고있지만, 막상 적용하려고 하니 데이터베이스 까지 실제로 통신하는 부분이 있는 등 의외로 구현이 어려울 수 있는 부분이 있어 관련 내용을 주중에 계속 리서치하여 적용해보려고 한다.

내가 한 주 동안 배운 것

CORS란?

교차 출처 리소스 공유(Cross-Origin Resource Sharing, CORS)는 추가 HTTP 헤더를 사용하여, 한 출처에서 실행 중인 웹 애플리케이션이 다른 출처의 선택한 자원에 접근할 수 있는 권한을 부여하도록 브라우저에 알려주는 체제이다. 교차 출처라는 말이 다소 와닿지 않았는데, 다른 출처 로 이해하면 좀 더 이해가 빨랐다.

출처(Origin)란, scheme(protocol), host(domain), port 로 구성된다.
https://www.google.com/search?q=cors 라는 주소가 있다고하면

protocol : https://
host : www.google.com
path : /search
query string: ?q=cors
port : :443 (https 에서 생략됨)

이며, 동일 출처(Same Origin)란 scheme, host, port가 모두 같을때를 의미한다. Same-Origin Policy란, 같은 출처에서만 리소스를 공유할 수 있다는 규칙이다. 브라우저에서 다른 서버를 요청할 경우는 가능하지만, 브라우저를 거치지 않고 서버 간 통신시에는 이 정책이 적용되지 않는다.

이와 같은 정책이 존재하는 이유는, 다른 출처의 어플리케이션이 서로 통신할 때 제약사항을 걸어두지 않는 경우, 악의를 가진 사용자가 서버의 소스 코드를 보고 XSS(Cross-Site Scripting), CSRF(Cross-Site Request Forgery) 등의 공격을 하여 사용자의 정보를 탈취할 수도 있기 떄문이다.

CORS는 다른 출처의 리소스가 필요한 경우, SOP를 우회하기 위한 방법 중 가장 권장되는 방법이라고 한다.

현재 미니 프로젝트를 진행하면서, 백엔드와 프론트엔드를 분리하지 않고 같은 서버에 두는 케이스만 경험해보았다. 하지만 프론트엔드 쪽에서 EC2 백엔드 API 서버에 접근하려고 하면, 아래와 같은 메시지가 발생한다.

Access to fetch at ‘https://31.12.23.13/api/users/signup’ from origin ‘http://localhost:3000’ 
has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’header is
present on the requested resource. If an opaque response serves your needs,
set the request’s mode to ‘no-cors’ to fetch the resource with CORS disabled.

http://localhost:3000 에서 https://31.12.23.13/api/users/signup 에 접근 시도했을 시 발생하는 메시지이다. CORS 정책을 위반했다고 보내는 것이다.

느낀 것

이번 주의 과제는 순한맛과 매운맛 두가지로 제시되었는데, 둘 다 도전하고 성공하였다. 같이 구성된 조원들과 각자 작성했던 코드에 대해 서로 리뷰하고, 구현 아이디어에 대해 공유할 수 있어서 도움이 많이 되었다. 이후는 이전 4주차에서 진행했던 블로그 미니 프로젝트에 대해 다시 찬찬히 돌아보며 주석을 추가하고, 테스트를 위해 작성했던 코드들을 정리하는 시간을 가졌다.

내게 아쉬웠던 것

2번째 팀장을 맡았는데, 처음으로 같이 진행했던 팀원중에 한 분이 이탈하는 일이 있었다. 이탈하시고 난 후 다른 분들의 이야기를 들어보니, 그 전부터 다소 질문을 하는 것에 부담을 느끼는 것도 있었고 강의 내용을 따라가는 것을 굉장히 어려워하셨다고 한다. 좀 더 같이 공부하는 내용들을 공유하는 시간을 가졌다면 결과가 달라질 수 있었을까 좀 생각이 들기도 했다.