전체 글

[Next.js] HTTP 요청 구현하기 : fetch vs axios

기본적인 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

소개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 가이드

소개크롬 확장프로그램 개발을 시작하기 위한 첫 걸음은 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", ..

Windows에서 Linux로 MongoDB 마이그레이션 하기

소개MongoDB를 Windows에서 Linux 환경으로 마이그레이션하는 전체 과정을 상세히 알아보겠습니다. MongoDB 8.0.3 버전을 기준으로 설명하겠습니다.Linux에 MongoDB 설치하기Ubuntu/Debian 환경# 1. MongoDB GPG 키 가져오기sudo apt-get updatesudo apt-get install gnupg curlcurl -fsSL https://pgp.mongodb.com/server-8.0.asc | \ sudo gpg -o /usr/share/keyrings/mongodb-server-8.0.gpg \ --dearmor# 2. MongoDB 리포지토리 추가echo "deb [ arch=amd64,arm64 signed-by=/usr/share/key..

requests vs aiohttp - HTTP 요청의 모든 것

소개Python에서 HTTP 요청을 처리할 때 가장 많이 사용되는 두 라이브러리인 requests와 aiohttp의 매개변수와 사용법을 자세히 비교해보겠습니다.설치 방법# requests 설치pip install requests# aiohttp 설치pip install aiohttprequests 라이브러리의 주요 매개변수GET 요청import requestsresponse = requests.get( url="https://api.example.com/data", params={'key': 'value'}, # URL 쿼리 파라미터 headers={'Authorization': 'Bearer token'}, # 요청 헤더 cookies={'session':..

[Pydantic] Field로 데이터 유효성 검사 마스터하기

소개FastAPI와 함께 자주 사용되는 Pydantic의 Field를 통해 데이터 유효성 검사를 구현하는 방법을 알아보겠습니다.설치 방법# pip 사용pip install pydantic# poetry 사용poetry add pydantic# pipenv 사용pipenv install pydantic기본 사용법간단한 모델 정의from pydantic import BaseModel, Fieldclass User(BaseModel): name: str = Field(..., min_length=2, max_length=50) age: int = Field(gt=0, lt=150) email: str = Field(..., pattern=r"^[a-zA-Z0-9_.+-]+@[a-zA-Z0-9-..

next.config.js 커스터마이징

소개Next.js 애플리케이션의 동작을 세부적으로 제어하고 싶으신가요? next.config.js 파일을 통해 애플리케이션을 원하는 대로 커스터마이징하는 방법을 알아보겠습니다.next.config.js 기본 구조// next.config.js/** @type {import('next').NextConfig} */const nextConfig = { // 기본 설정 reactStrictMode: true, // 여기에 추가 설정}module.exports = nextConfig런타임 구성 설정하기런타임 구성에는 두 가지 유형이 있습니다:서버 런타임 구성const nextConfig = { serverRuntimeConfig: { userEndpoint: 'https://api.example.c..