CORS는 간단히 얘기하자면, 다른 출처 간 자원 공유가 이뤄질 수 없다는 것이다. 여기서 얘기하는 출처란 scheme, 도메인, 포트 모든 것을 포함한다.

만약 클라이언트를 3000번, 서버를 5000번 포트에 띄웠다면 클라이언트에서 서버를 호출할 수 없는 문제가 발생한다.

따라서, 서버에서 CORS를 허용하는 작업을 따로 해주어야한다.

flask의 경우 flask-cors 라이브러리를 이용하여 해결할 수 있다.

import flask
from flask-cors import CORS

app = Flask(__name__)
CORS(app)

초 심플!

하지만 cookie에 유저 정보를 저장하고 이를 클라이언트 - 서버 간에 주고 받아야 한다면 일이 살짝 복잡해진다.

cross-origin request 경우에 user credentials(cookie 등)의 전송이 제한되어 있기 때문이다. (same-origin의 경우에는 기본적으로 허용되어 있다.)

따라서 user credentials를 전송하겠노라고 별도로 명시해줘야한다.

1. 클라이언트(javascript, axios)

import axios from "axios";

const client = axios.create({
    baseURL: "localhost:5000",
    withCredentials: true,
});

2. 서버(python, flask)

import flask
from flask-cors import CORS

app = Flask(__name__)
CORS(app, supports_credentials=True)

_credentials 관련 항목을 모두 true로 설정_해주었다.

끝난줄 알았지?

이 상태에서 요청을 보낼 경우 아래와 같은 에러가 발생한다.

Header in the response must not be the wildcard '*' when the request's credentials mode is 'include'

간단히 말하면 credential이 포함된 데이터를 주고받을 때는 'access-control-allow-origin'을 와일드카드(\*)로 설정할 수 없다는 것이다.
access-control-allow-origin이 "\*"인 경우 서버는 다른 어떤 크로스 도메인으로부터의 요청도 수용한다.

보통의 경우라면 괜찮지만, credentials의 전송을 허용하는 경우에는 임의의 도메인으로부터 요청을 받으면 보안에 취약해질 수 있다.

따라서 요청을 받을 도메인을 한정해야 한다.

실제로 [flask-cors docs](https://flask-cors.readthedocs.io/en/latest/api.html#flask_cors.CORS)에도 supports_credentials=True로 설정하기 위해서는 origin이 "\*"면 안된다고 나와있다.

아래와 같이 할 수 있다.

import flask from flask-cors import CORS

app = Flask(name) CORS(app, supports_credentials=True, origins="localhost:3000")

```

origins에는 string뿐만 아니라 list가 들어갈 수있다.

#cors #credentials

업무 중에 알게 된 사실을 빠르게 적어내느라 일부 내용이 빠져있다. 추후 추가할 내용

• preflight request
• jwt 및 jwt 옵션

주요 명령어:

pyenv install -l : 설치 가능한 버전 목록을 확인 pyenv install <version>: 특정 버전을 설치 pyenv versions: 설치되어 있는 버전을 확인 pyenv shell <version>: 특정 버전 shell 실행

• 버전은 python, anaconda, miniconda 등으로 나뉜다.

virtualenv

두 개 버전은 호환이 되지 않는다.

즉, A 프로젝트에서 2.0버전을 사용할 수 없다.

이런 경우 virtualenv를 사용해 문제를 간단히 해결할 수 있다.

pyenv+virtualenv

주요 명령어:

pyenv virtualenv <version> <env_name>: 특정 버전의 가상환경을 생성한다. pyenv local <env_name>: 특정 디렉터리의 가상환경을 설정한다.

REST API를 위한 API description format으로, YAML이나 JSON 형식으로 쓰인다.

OpenAPI Specification: https://swagger.io/docs/specification/about/

잘 정리된 API 명세는 API 개발자 본인과 API를 사용하는 모든 사람에게 도움이 된다.

Swagger

사용자가 REST API를 쉽게 설계하고, 만들고, 문서화하고, 또 사용하도록 도와주는 오픈소스 소프트웨어 프레임워크다.

Swagger tool 중 하나인 Swagger Editor를 이용해 OpenAPI 기반 API 명세를 작성해 볼 수 있다.

https://swagger.io/tools/swagger-editor/

브라우저 기반 에디터로, 변경한 내용이 바로 화면에 반영된다.

ReDoc

https://github.com/Redocly/redoc

위에서 Swagger Editor로 작성한 YAML, JSON 파일을 더 깔끔하고 가독성 좋은 페이지로 렌더링 해준다.

redoc-cli를 이용하여 html 파일을 만들 수 있다.

redoc-cli 설치

npm install -g redoc-cli

html 파일 생성

redoc-cli bundle -o [output filename] [source filename]

참고

• redoc-cli를 설치하기 위해서는 일정 버전 이상의 node와 npm이 설치되어 있어야 한다. node 및 npm 버전 업데이트는 이 글을 참고했다.

• remote server에서 html 파일 실행

  # python2
  python -m SimpleHTTPServer [port]
  

python3

python -m http.server [port] ```

웹 상에서 바로 적용해볼 수 있는 좋은 사이트를 찾았다.

프로그래밍용 폰트로 유명한 폰트는 거의 다 있는 듯 싶다.

https://app.programmingfonts.org

폰트를 적용하고 콘솔 및 vscode 에디터에서 어떤 느낌인지 확인하기를 여러 번..

근데 한 가지 이상한 점을 발견했다.

동일한 폰트 및 굵기임에도 불구하고 콘솔에서보다 vscode에서 훨씬 굵어보이는 것..!

갓구글 선생님의 도움으로 해결 방법을 알아 낼 수 있었다.

혹시 나처럼 예민보스인 사람들에게 도움이 될까 싶어 내가 어떻게 해결했는지 기록해둔다.
시스템 환경설정 > 일반 > 제일 아래 사용 가능할 때 부드러운 서체 사용(Use font smoothing when availabe을 체크 해제
해당 옵션을 체크해놓은 기억이 없는걸 보면 기본 설정인 듯 싶다.

따라서 메모리 누수(memory leak)의 위험이 곳곳에 도사리고 있다.
실수로 메모리 해제 코드를 작성하지 않을 수도 있고,

작성했다고 하더라도 exception 발생으로 코드가 끝까지 실행되지 않아 메모리 해제에 실패할 수도 있다.
메모리 누수로 인해 메모리 사용량이 계속 증가하다보면 메모리 부족으로 프로그램이 crash 될 수 있다.

이를 방지하고자 C++ 창시자인 Bjarne Stroustrup는 RAII(Resource Acquisition is Initialization) 디자인 패턴을 제안했다.
RAII란 객체의 생성과 동시에 자원을 할당하고 객체가 파괴될 때 자원을 해제하는 방법이다.
예외가 발생해서 예상치 못하게 함수를 빠져 나가더라도 함수 stack 내에서 선언된 모든 객체는 그 소멸자가 호출된다. (stack unwinding)

이 점을 이용하여 소멸자 안에 자원을 해제하는 코드를 작성하면 메모리 누수의 위험으로부터 해방될 수 있다.