[FastAPI] add_api_route로 동적 라우팅 구현
·
파이썬/Fast API
FastAPI를 사용하면서 동적으로 라우트를 추가해야 하는 경우가 종종 있습니다. 이럴 때 사용할 수 있는 것이 바로 add_api_route 메서드입니다. 일반적으로 데코레이터를 사용하는 방식과는 다르게, 프로그래밍 방식으로 라우트를 추가할 수 있어 유연한 API 설계가 가능합니다.add_api_route 기본 사용법가장 기본적인 사용법부터 살펴보겠습니다. 데코레이터 방식과 비교하면 다음과 같습니다.from fastapi import FastAPIapp = FastAPI()# 데코레이터 방식@app.get("/users/{user_id}")async def get_user(user_id: int): return {"id": user_id}# add_api_route 방식async def get_u..
Pydantic 상속과 타입 어노테이션 활용
·
파이썬/Fast API
소개Pydantic은 Python의 타입 어노테이션을 활용하여 데이터 검증을 제공하는 강력한 라이브러리입니다. 이번 글에서는 Pydantic의 다양한 기능과 실전 활용법을 자세히 알아보겠습니다.기본 모델 구조BaseModel 상속과 기본 필드 정의from typing import Annotatedfrom pydantic import BaseModel, Fieldfrom datetime import datetimefrom bson import ObjectIdclass BaseItem(BaseModel): """ 모든 모델의 기본이 되는 베이스 클래스입니다. 모든 모델에 공통적으로 필요한 필드를 정의합니다. """ id: Annotated[ObjectId, Field(descrip..
[HTTP Header 다루기] fetch API의 Headers 인터페이스
·
TypeScript
소개HTTP 요청 시 헤더를 다루는 두 가지 주요 방법 - 직접 객체로 전달하는 방법과 Headers 인터페이스를 사용하는 방법에 대해 자세히 알아보겠습니다.1. 기본적인 헤더 설정// 단순 객체로 헤더 전달const fetchData = async (url: string) => { try { const response = await fetch(url, { method: 'GET', headers: { 'Content-Type': 'application/json', 'Accept': 'application/json', } }); return await response.json(); } catch (error) { console...
[JavaScript] 문자열 검색과 비교
·
TypeScript
소개JavaScript에서 문자열을 다루는 다양한 메서드들, 특히 문자열 검색과 비교에 사용되는 메서드들을 자세히 알아보고, 각 메서드의 사용법과 차이점을 살펴보겠습니다.기본 문자열 검색 메서드1. indexOf문자열 내에서 특정 문자열의 첫 번째 등장 위치를 찾습니다.const text = "Hello, World!";console.log(text.indexOf("World")); // 7console.log(text.indexOf("world")); // -1 (대소문자 구분)console.log(text.indexOf("o")); // 4console.log(text.indexOf("o", 5)); // 7 (시작 위치 지정)// 실전 활용const hasWor..
[Next.js] HTTP 요청 구현하기 : fetch vs axios
·
TypeScript
기본적인 fetch 사용법브라우저 내장 fetch API는 별도의 설치 없이 HTTP 요청을 처리할 수 있는 가장 기본적인 방법입니다. Next.js 13 이상에서는 서버 컴포넌트에서도 fetch를 기본적으로 지원합니다.// 기본적인 GET 요청async function fetchUsers() { const response = await fetch('https://api.example.com/users'); const data = await response.json(); return data;}// POST 요청 예제async function createUser(userData) { const response = await fetch('https://api.example.com/users', { ..
[Web API] URL 파라미터 데이터 전송
·
파이썬
소개웹 개발에서 클라이언트와 서버 간의 데이터 전송 방식 중 하나인 URL 파라미터 방식에 대해 자세히 알아보겠습니다. 이 방식의 장단점, 보안 고려사항, 그리고 프론트엔드에서의 구현 방법까지 상세히 다루겠습니다.URL 파라미터의 종류Path Parameters/api/users/{user_id}/posts/{post_id}리소스를 식별하는 데 사용URL 경로의 일부로 포함필수 값으로 처리됨Query Parameters/api/users?role=admin&status=active필터링, 정렬, 페이지네이션에 사용? 뒤에 key=value 형태로 추가선택적 값으로 처리됨프론트엔드 구현fetch API 사용// Path Parameters 사용const getUserDetails = async (userI..
[HTTP] 프론트엔드와 백엔드의 데이터 통신 Content-Type
·
파이썬/Fast API
소개HTTP 통신에서 Content-Type은 서버와 클라이언트 간에 주고받는 데이터의 형식을 지정하는 중요한 헤더입니다. 이번 글에서는 Content-Type의 모든 것을 상세히 알아보겠습니다.Content-Type이란?Content-Type은 HTTP 헤더의 일부로, MIME(Multipurpose Internet Mail Extensions) 타입을 사용하여 데이터의 형식을 지정합니다.주요 Content-Type 형식텍스트 형식// 일반 텍스트Content-Type: text/plain// HTMLContent-Type: text/html// CSSContent-Type: text/css// JavaScriptContent-Type: text/javascript애플리케이션 데이터// JSONCont..
[Chrome Extension] Manifest V3 가이드
·
TypeScript
소개크롬 확장프로그램 개발을 시작하기 위한 첫 걸음은 manifest.json 파일을 이해하는 것입니다. Manifest V3의 모든 설정과 사용법을 자세히 알아보겠습니다.manifest.json 기본 구조{ "manifest_version": 3, "name": "My Extension", "description": "A simple Chrome extension", "version": "1.0.0", "permissions": [], "action": {}, "background": {}, "content_scripts": []}필수 필드 설명기본 정보{ "manifest_version": 3, // Manifest 버전 (V3 필수) "name": "My Extension", ..