FastAPI: CORS 문제 해결

문제 상황프론트(https://aaa/bbb)에서 서버로 POST 요청을 보냈다. 그런데 아래 메시지를 받았다.🚨 Access to fetch at 'https://aaa/bbb' from origin 'https://aaa' 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.CORS는 Cross Origin Resource Sharing으로 다른 ..

• format_list_bulleted 기타 주제/웹
• · 2025. 2. 16.

SvelteKit 페이지 간 파일 전달

시나리오Upload/img에서 input 태그를 이용해 이미지 파일을 업로드한다. 이미지가 선택되면 handleFileChange를 통해 file 변수가 업데이트된다.Upload 버튼을 누르면 /img/result로 이동해 사진을 띄운다.1. URL로 전달API로부터 전달받은 이미지를 URL로 변환해 /result?image=...로 전달한다. 그럼 API는 URL의 image를 읽어 처리한다.async function uploadImage() { // 이미지를 URL로 변환 const url = URL.createObjectURL(file); goto(`/img/result?image=${encodeURIComponent(url)}`);}createObjectURL을 통해 파일을 브라우저 메모리에..

• format_list_bulleted 기타 주제/웹
• · 2025. 2. 14.

SvelteKit과 Svelte 기초

Svelte는 프론트엔드 프레임워크로, 빠른 속도와 간결한 문법으로 주목받고 있다. Svelte를 사용하는 방법은 크게 두 가지가 있다.Vite + Svelte: SPA에 적합. 기본 Svelte 기능만 활용하는 방법.SvelteKit: 웹앱에 적합. 라우터 등 다양한 기능이 추가됨.Svelte와 SvelteKit은 같은 키워드와 문법을 공유한다. 하지만 파일 구조와 지원하는 기능이 다르다.본 글은 SvelteKit에 대해 설명한다. Introduction • Docs • SvelteBefore we begin If you’re new to Svelte or SvelteKit we recommend checking out the interactive tutorial. If you get stuck, re..

• format_list_bulleted 기타 주제/웹
• · 2025. 2. 11.

FastAPI로 이미지 업로드

기존에 Flask로 POST 요청을 받는 API를 만들었다. 그런데 최근  여기저기 정보를 찾던 중 FastAPI가 종종 언급되는 것을 봤다. 도대체 왜 FastAPI에 열광하는지 궁금해서 기존 Flask 프로젝트를 FastAPI로 리팩토링 해보았다.속도: 비동기 처리를 지원해 이름처럼 빠른 실행 속도데이터 검증: 타입 힌트를 이용해 데이터를 쉽게 검증자동 문서: /docs에 자동으로 API 문서 생성쉬운 난이도: Python과 REST API에 익숙하다면 쉽게 사용할 수 있음설치 및 실행pip install fastapi[standard] pip install uvicorn[standard] pip install python-multipartFastAPI를 사용하기 위해 fastapi와 uvicorn을..

• format_list_bulleted 기타 주제/웹
• · 2025. 1. 17.

Docker에서 Flask 앱 실행

본 글은 Flask 앱을 Docker 환경에서 실행하는 예시다. Docker 환경 구축을 중심으로 설명하며, Flask에 대해 자세히 다루지 않는다.이미지와 컨테이너Dockerfile: 도커 환경 생성에 필요한 설정을 작성한다.이미지: 라이브러리 등 필요한 설정이 완료된 템플릿. 한 번 빌드하면 수정할 수 없으며, 읽기만 가능하다.컨테이너: 이미지를 실행해 만든 환경. 실제 코드가 실행되는 환경으로, 읽기/쓰기가 가능하다.본 글에서는 Dockerfile을 이용해 이미지를 빌드한다. 빌드한 이미지로부터 컨테이너를 만들고 Flask 앱을 실행한다.파일 구성본 프로젝트 구조는 다음과 같다./root |-- Dockerfile |-- app.py |-- requirements.txt |-- static ..

• format_list_bulleted 기타 주제/웹
• · 2025. 1. 16.

Golang HTTP 서버

멀티플렉서ServeMux는 멀티플렉서로 HTTP 요청 라우팅을 처리한다. 여러 URL을 적절한 동작으로 연결해 주는 역할이다.func ListenAndServe(addr string, handler Handler) errorListenAndServe는 서버를 실행하고 요청을 기다린다. 첫번째 인자로 포트를, 두 번째 인자로 Handler를 받는다.func main() { // http://127.0.0.1:8080/ http.ListenAndServe(":8080", nil)}Handler를 nil로 작성하면 DefaultServeMux를 사용한다. 이 경우 Handler 함수를 등록할 때 바로 http에 등록한다. (자세한 건 아래에서)func main() { mux := http.NewServeMux..

• format_list_bulleted 기타 주제/웹
• · 2024. 5. 10.