write31991 님의 블로그

FastAPI 2일차

⚡ FastAPI & Pydantic 데이터 검증과 실전 CRUD 완벽 정리 노트Python 백엔드의 심장 **타입 힌트(Type Hints)**부터 Request Body와 직렬화/역직렬화 메커니즘, Pydantic의 핵심 동작 원리(BaseModel, Field, model_dump), Response Model의 3대 가치(검증, 민감정보 필터링, 문서화), HTTP 상태 코드(201, 200, 204, 404, 422) 설계 표준, 그리고 HTTPException 에러 핸들링과 완벽한 CRUD(Create, Read, Update, Delete) 풀 구현까지 총정리한 실전 가이드📑 목차Type Hints (타입 힌트)의 본질과 모던 문법1-1. Type Hints를 쓰는 4대 이유 (왜 Fast..

FastAPI 1일차

⚡ FastAPI 기초 & AI 모델 서빙 완벽 정리 노트Python 기반 고성능 웹 프레임워크 FastAPI의 핵심 철학과 아키텍처부터 가상환경 격리(.venv), 네트워크 통신 원리(외부 통신 vs localhost 내부 루프백), Python 객체의 JSON 자동 직렬화, 데코레이터(@app.get)의 역할, 대화형 API 문서(Swagger UI & ReDoc), Path Parameter vs Query Parameter의 명확한 구분과 유효성 검증(Path, Query), 그리고 라우팅 충돌 방지 원칙과 종합 이커머스 API 실전 구현까지 총정리한 실무 가이드📑 목차FastAPI란 무엇인가? (고성능 웹 API 프레임워크)1-1. 'Fast'의 2가지 본질 (처리 속도 & 개발 속도)1-2...

HTML/CSS & Javascript 8일차

🌐 JavaScript Web API 완벽 정리 노트: Timer, Storage & Fetch API브라우저가 제공하는 강력한 도구 상자 **Web API의 핵심 3대장(Timer API, Web Storage API, Fetch API)**을 총정리한 실전 가이드입니다.setInterval과 timerId를 활용한 카운트다운 타이머, LocalStorage vs SessionStorage의 수명·보안·객체 직렬화, 비동기(Asynchronous) 통신의 원리와 .then() 체이닝의 진실, GET/POST 통신과 얼리 리턴(Early Return) 최적화, 그리고 클라이언트 캐싱과 모던 프레임워크 상태 관리까지 한 번에 정리합니다.📑 목차Timer API: 주기적 실행과 제어 (setInterva..

🌐 JavaScript DOM 조작, 이벤트 & Web API 완벽 정리 노트브라우저 화면을 동적으로 제어하는 **함수의 반환값 규칙(return 생략 시 undefined)**부터 DOM의 본질과 트리 구조, HTML vs JS의 명확한 역할 분담, DOM 선택 & 스타일·속성 조작, 이벤트 리스너 & 화살표 함수, 얼리 리턴(Early-Return) 패턴, 그리고 브라우저가 제공하는 **Web API 5대 분류와 Timer API(카운트다운 실습)**까지 총정리한 실전 가이드📑 목차함수의 반환 규칙: return을 생략하면 무슨 일이 일어날까?1-1. 모든 함수는 "반드시" 값을 반환한다1-2. return 생략과 undefined (JavaScript vs Python 비교)JavaScript는..

⚡ JavaScript 핵심 기초 문법 완벽 정리 노트웹의 심장 **JavaScript의 정의와 4가지 실행 방법(Node.js 포함)**부터 변수(let vs const), 5대 기본 자료형과 Falsy 6대장, 엄격한 비교(===), 조건문 & 논리 연산 실전 과제, 그리고 **반복문과 배열 순회(for...of)**까지 총정리한 실전 가이드📑 목차JavaScript란 무엇인가?1-1. 웹의 3대 요소 (HTML, CSS, JS의 역할)1-2. JavaScript 실행 방법 4가지1-3. Node.js란? & 터미널 환경의 4대 장점변수 (Variable)와 메모리: let vs const2-1. 변수의 본질과 값 저장2-2. let vs const 핵심 비교2-3. 변수 선언 방식 비교 (Java..

🍱 CSS Grid & 부트스트랩(Bootstrap) UI 프레임워크 완벽 정리 노트2차원 바둑판 레이아웃 **CSS Grid(fr 단위·grid-template-areas·호버 효과)**부터 트위터의 오픈소스 UI 프레임워크 부트스트랩 5(12칸 그리드·반응형 Navbar·모달 팝업), 그리고 실무 한계점과 VS Code 팁까지 총정리한 실전 가이드📑 목차CSS Grid 레이아웃: 2차원 구조 설계1-1. Grid의 정의와 레이아웃 기술별 비교1-2. Grid Container (부모)와 Grid Item (자식)Grid 핵심 문법 & 단위 정복2-1. 열(Column) 만들기: repeat()과 fr 단위2-2. 행(Row) 만들기 & gap 간격 설정2-3. [추천] Grid 실전 연습 게임: ..

📐 CSS 레이아웃 & 반응형 웹 마스터: Position, Flexbox & Media Query 완벽 정리 노트Normal Flow의 한계 극복부터 Position 4대 속성(static/relative/absolute/fixed), Flexbox 1차원 레이아웃(주축·교차축·flex: 1), Media Query 반응형 디자인, 그리고 실전 반응형 네비게이션 바(Navbar) 구현까지 총정리한 실전 가이드📑 목차Normal Flow (기본 문서 흐름)와 레이아웃의 필요성1-1. Normal Flow란?1-2. Normal Flow의 배치 규칙과 한계점CSS position 속성: 자유로운 위치 제어2-1. position 속성의 개념과 오프셋 4대장2-2. static (기본값)2-3. rela..

🎨 CSS 핵심 마스터: 선택자(Selector), 우선순위, 박스 모델 & 디스플레이 완벽 정리 노트CSS 적용 방식(Internal vs External)부터 모든 종류의 선택자(기본·결합·속성·가상 클래스), 선택자 우선순위 점수표, 박스 모델(Box Model)과 box-sizing 계산 공식, 그리고 Inline vs Block vs Inline-Block 디스플레이 성질까지 완벽 가이드📑 목차CSS 적용 3가지 방식 (적용 위치에 따른 분류)1-1. Inline Style (인라인 스타일)1-2. Internal CSS (내부 스타일 시트)1-3. External CSS (외부 스타일 시트)CSS 선택자 (Selectors) 완전 정복2-1. 기본 선택자 4종 (전체, 태그, 클래스, ID..

🎨 HTML & CSS 기초 심화: DOM, 속성, 폼과 스타일링 완벽 정리 노트HTML의 문서 골격과 브라우저의 DOM 생성 원리, id vs class 속성, 주요 태그(List, Table, Img, Form), 그리고 CSS의 Cascading과 스타일링 기초까지 한 번에 정리하는 실전 가이드📑 목차HTML 문서 골격 & 브라우저 렌더링 과정1-1. HTML 기본 구조 복습1-2. 브라우저가 화면을 그리는 5단계 흐름1-3. DOM (Document Object Model)이란?HTML 속성(Attribute)과 식별자: id vs class2-1. HTML 속성의 기본 규칙2-2. id 속성: 단 하나뿐인 고유 식별자2-3. class 속성: 공통 그룹 묶기2-4. [보너스] 정규표현식(Re..

🌐 HTML 기초: 웹의 뼈대와 기본 구조 완벽 정리 노트웹 페이지의 구조와 뼈대를 정의하는 **HTML(HyperText Markup Language)**의 기본 원리, 브라우저 렌더링 흐름, 그리고 필수 골격 태그 완벽 가이드 📑 목차HTML(HyperText Markup Language)이란?태그(Tag)와 요소(Element)의 원리중첩(Nesting)과 부모-자식 계층 구조HTML 문서의 필수 5대 골격 구조💡 표준 HTML5 기본 골격 템플릿 & 요약 1. HTML(HyperText Markup Language)이란?1-1. HTML의 정의와 핵심 역할HTML = HyperText Markup LanguageHyperText: 단순 텍스트를 넘어 클릭을 통해 다른 페이지나 문서로 자유롭게..