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. Virtual DOM이란?Virtual DOM(가상 DOM)은 실제 DOM을 직접 조작하는 대신, 메모리에 가상의 DOM을 생성하여 최소한의 변경만 실제 DOM에 적용하는 기술입니다.✅ 쉽게 말해?"DOM 변경을 최소화하여 웹 성능을 최적화하는 방법!""리액트(React)가 빠르게 동작하는 핵심 기술!"2. Virtual DOM의 동작 원리 🔥Virtual DOM은 3단계 과정을 거쳐 최적화된 업데이트를 수행합니다.📌 1) Virtual DOM 생성JSX를 사용하여 UI를 구성하면, 가상 DOM 트리가 생성됨📌 2) 변경 감지 (Diffing Algorithm)새로운 Virtual DOM과 이전 Virtual DOM을 비교하여 변경된 부분을 찾음📌 3) 최소 업데이트 (Reconciliati..

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. 프로토타입 상속이란?자바스크립트는 프로토타입 기반 언어(prototype-based language)로, 프로토타입을 이용해 객체가 다른 객체의 속성과 메서드를 상속받을 수 있도록 합니다.✅ 쉽게 말해?"객체가 다른 객체로부터 필요한 기능을 빌려 쓰는 방식!""프로토타입 체인을 통해 객체가 연결되고 상속이 이루어진다!"2. 프로토타입과 프로토타입 체인📌 프로토타입(prototype)자바스크립트에서는 모든 객체가 숨겨진 프로토타입(__proto__)을 가지며, 이 프로토타입은 해당 객체의 부모 역할을 합니다.const animal = { eats: true };const rabbit = { jumps: true };rabbit.__proto__ = animal; // rabbit이 animal을 상..

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. TDD란?TDD(Test-Driven Development, 테스트 주도 개발)는 테스트 코드를 먼저 작성하고, 해당 테스트를 통과하는 최소한의 기능을 구현한 후 리팩토링하는 개발 방법론입니다. 일반적인 개발 방식과 달리, 개발보다 테스트를 먼저 작성하는 것이 특징입니다.✅ 쉽게 말해?테스트를 먼저 작성한다!테스트를 통과하는 최소한의 코드만 작성한다!코드 품질을 유지하면서 지속적으로 리팩토링한다!2. TDD의 3단계 (Red-Green-Refactor)TDD는 Red-Green-Refactor라는 3단계를 반복하는 방식으로 진행됩니다.1️⃣ Red(실패): 실패하는 테스트 코드를 먼저 작성한다.2️⃣ Green(성공): 테스트를 통과하는 최소한의 코드를 작성한다.3️⃣ Refactor(리팩토링): ..