alpeca's world alpeca's world

1. JWT(Json Web Token)란?JWT(Json Web Token)은 JSON 기반의 토큰을 사용하여 사용자 인증 및 정보 교환을 수행하는 방식입니다.✅ 쉽게 말해?"서버가 사용자를 인증하면, 토큰을 발급하여 클라이언트가 이후 요청 시 인증할 수 있도록 하는 방식!""세션을 저장하지 않고, 자체적으로 정보를 포함하는 토큰!" 📌 JWT 사용 예제:사용자가 로그인하면 서버가 JWT를 생성하여 클라이언트에게 전달 🎟️클라이언트는 이후 요청마다 JWT를 포함하여 서버에 전송 🚀서버는 JWT의 유효성을 확인하고 요청을 처리 🔒2. JWT의 구조 🏗️JWT는 헤더(Header), 페이로드(Payload), 서명(Signature) 3가지 파트로 구성됩니다.Header.Payload.Signat..

1. CSRF란?CSRF(Cross-Site Request Forgery, 사이트 간 요청 위조)는 공격자가 사용자를 속여 원하지 않는 요청을 특정 웹사이트에 실행하도록 유도하는 공격 기법입니다.✅ 쉽게 말해?사용자가 로그인된 상태에서, 공격자가 악의적인 요청을 사용자 모르게 실행하도록 유도보통 인증된 세션(cookie, 토큰 등)을 이용해 공격결과적으로 사용자의 개인정보 탈취, 계좌 이체, 비밀번호 변경 등의 피해 발생 가능2. CSRF 공격 방식 🔥CSRF 공격은 보통 피싱, 악성 링크, 자동 스크립트 실행 등을 통해 수행됩니다.📌 CSRF 공격 시나리오 예제1️⃣ 사용자가 A 은행 사이트에 로그인하고 세션이 유지된 상태 🔐 2️⃣ 공격자는 피싱 이메일이나 악성 웹사이트를 통해 사용자가 특정 U..

1. SOP(Same-Origin Policy)란?웹 브라우저는 SOP(Same-Origin Policy, 동일 출처 정책)을 적용하여 한 출처에서 로드된 웹 페이지가 다른 출처의 리소스에 접근하지 못하도록 제한합니다.✅ 쉽게 말해?웹 보안 정책으로, 다른 도메인의 데이터에 직접 접근하지 못하도록 방지CORS(Cross-Origin Resource Sharing)를 통해 예외적으로 허용 가능 그러나 CORS 설정 없이 외부 서버와 통신해야 하는 경우가 발생할 수 있습니다. 이럴 때 SOP를 우회할 수 있는 합법적인 방법을 알아보겠습니다! 🚀2. CORS 없이 SOP를 우회하는 방법 🔥📌 1) 프록시 서버 활용 (Recommended ✅)서버 측에서 프록시를 두어 클라이언트 대신 요청을 보내는 방법입..

1. 이미지 포맷이란?이미지 파일은 다양한 포맷으로 저장될 수 있으며, 사용 목적에 따라 적절한 포맷을 선택하는 것이 중요합니다. 각 이미지 포맷은 용량, 품질, 투명도 지원, 압축 방식 등에서 차이가 있습니다.👉 이번 포스팅에서는 JPG, PNG, GIF, WebP, AVIF, SVG 등 인기 있는 이미지 포맷과 각각의 특징을 정리해 보겠습니다.2. 주요 이미지 포맷과 특징📌 1) JPG (JPEG)✅ 웹에서 가장 많이 사용되는 이미지 포맷!손실 압축 (Lossy Compression) 방식 → 용량이 작고 로딩 속도 빠름사진(사진 이미지)에 적합 (컬러 표현력이 뛰어남)투명도 지원 ❌, 애니메이션 ❌✅ 사용 추천: 웹사이트 사진, 블로그 이미지, SNS 프로필 사진🔻 예제📌 2) PNG✅ 투명..

1. 함수형 프로그래밍이란?함수형 프로그래밍(Functional Programming, FP)은 함수를 일급 시민(First-Class Citizen)으로 취급하고, 불변성(Immutability)과 순수 함수(Pure Function)를 중심으로 개발하는 프로그래밍 패러다임입니다.✅ 쉽게 말해?"데이터를 변경하지 않고, 함수들을 조합하여 프로그래밍한다!""부작용(Side Effect)을 최소화하고, 유지보수와 테스트가 쉬운 코드를 만든다!"2. 함수형 프로그래밍의 핵심 원칙 🚀📌 1) 순수 함수(Pure Function)같은 입력값에 대해 항상 같은 출력값을 반환하는 함수외부 상태를 변경하지 않음// 순수 함수 예제const add = (a, b) => a + b;console.log(add(2, ..

1. useRef란?useRef는 리액트의 내장 훅(Hook) 중 하나로, 컴포넌트의 렌더링과 무관한 값을 저장하거나 DOM 요소에 직접 접근할 때 사용하는 훅입니다.✅ 쉽게 말해?상태(useState)와 달리 렌더링 없이 값이 유지됨!DOM 요소를 직접 조작 가능!이전 렌더링 값을 저장할 때 유용함!import { useRef } from "react";✅ useRef는 기본적으로 { current: 값 } 형태의 객체를 반환합니다.2. useRef를 사용하는 3가지 주요 사례📌 1) DOM 요소에 직접 접근할 때리액트에서 DOM을 직접 조작할 때 useRef를 사용하면 매우 편리합니다. 예를 들어, 버튼 클릭 시 자동으로 입력창에 포커스를 주고 싶을 때 사용 가능합니다.✅ 예제: 입력 필드 자동 포..

1. HTML Doctype이란?Doctype(문서 유형 선언, Document Type Declaration)은 HTML 문서의 맨 처음에 위치하며, 브라우저가 해당 HTML 문서를 어떻게 해석할지 결정하는 역할을 합니다.✅ 간단히 말해?Doctype은 브라우저에게 문서의 HTML 버전을 알려주는 선언문입니다.HTML을 올바르게 렌더링하기 위해 필수적으로 사용됩니다.2. HTML Doctype 선언 방법HTML 문서를 작성할 때 가장 위에 아래와 같이 Doctype을 선언해야 합니다. 이것이 HTML5 Doctype! ✅ 은 HTML5 문서를 의미하며, 최신 표준을 따르겠다는 선언입니다.3. HTML Doctype의 역할✅ 1) 표준 모드(Standards Mode)와 호환 모드(Quirks Mo..

1. CDN이란?CDN(Content Delivery Network, 콘텐츠 전송 네트워크)은 웹사이트의 콘텐츠를 빠르게 제공하기 위해 전 세계에 분산된 서버 네트워크입니다. 사용자가 웹사이트를 방문하면, CDN은 가장 가까운 서버에서 데이터를 제공하여 로드 속도를 단축하고 트래픽 부하를 줄이는 역할을 합니다.✅ 쉽게 말해?CDN은 웹사이트 데이터를 캐싱하여 가까운 위치에서 제공하는 시스템입니다.웹사이트 로딩 속도를 빠르게 하고, 서버 부하를 줄이며, 트래픽을 최적화합니다.2. 왜 CDN이 중요한가?✅ 1) 웹사이트 로딩 속도 개선 🚀사용자의 물리적 거리에 따라 서버 응답 속도가 느려질 수 있습니다.CDN을 사용하면 가장 가까운 서버에서 데이터를 제공하여 빠른 로딩이 가능합니다.✅ 2) 서버 부하 감소..