Programming17 Flask : Python으로 웹서버를 만들기 위한 마이크로 프레임워크 Flask는 Python으로 웹 서버를 만들기 위한 마이크로 프레임워크입니다.- 관련글 -> 마이크로 프레임워크 Vs 풀스택 프레임워크 1. from flask import Flask, request, jsonifyFlask: 웹 애플리케이션을 생성하는 핵심 클래스request: 클라이언트(예: 브라우저)가 보낸 요청 데이터를 읽는 객체jsonify: Python 딕셔너리를 JSON 형식으로 변환해 응답하는 함수2. 기본 코드 구조from flask import Flask, request, jsonifyapp = Flask(__name__) # Flask 앱 생성@app.route('/api/data', methods=['POST'])def handle_data(): # 1. 클라이언트의 JSON.. 2025. 2. 18. 풀스택 프레임워크 Vs 마이크로 프레임워크 비교 마이크로 프레임워크(Microframework)는 최소한의 기능만 제공하는 경량 웹 프레임워크입니다."마이크로"라는 이름처럼, 핵심 기능만 담아 작고 빠르며 유연하게 설계되었습니다.1. 마이크로 프레임워크의 핵심 특징(1) 최소주의 철학 (Minimalism)필수 기능만 포함: 라우팅(Routing), 요청 처리, 기본 템플릿 엔진확장성: 데이터베이스 연동, 인증 등 추가 기능은 플러그인 방식으로 선택예시: Flask, Express.js (Node.js), Bottle (Python)(2) 풀스택 프레임워크 vs 마이크로 프레임워크 풀스택 프레임워크마이크로 프레임워크예시Django (Python), Ruby on RailsFlask (Python), Express.js특징모든 기능 내장 (ORM, 인증.. 2025. 2. 17. 쇼핑몰 관리자 페이지에 쓰이는 코드 모음 관리자 페이지를 구현하기 위한 전체 코드(프론트엔드, 백엔드, API-재고 관리 시스템을 기반으로)관리자는 상품 추가/수정/삭제와 주문 내역 확인이 가능해야 함.1. 시스템 아키텍처[React Admin Frontend] ← HTTP → [Flask Backend API] ←→ [메모리 DB]2. 백엔드 (Python Flask)(1) server.py 확장 (관리자 API 추가)from flask import Flask, request, jsonifyfrom flask_cors import CORSapp = Flask(__name__)CORS(app)# 임시 DB (상품 & 주문 데이터)products = { "A": { "id": "A", "name": "상품 A", "price": 10000,.. 2025. 2. 16. 쇼핑몰 재고관리에 쓰이는 코드 모음 쇼핑몰 재고 관리 시스템을 프론트엔드(React) + 백엔드(Python Flask) + API로 구현하는 전체 코드를 단계별로 설명해 보자. 1. 시스템 아키텍처[React 프론트엔드] ← HTTP → [Flask 백엔드 API] ←→ [메모리 DB]2. 백엔드 (Python Flask)(1) 설치pip install flask flask-cors(2) server.pyfrom flask import Flask, request, jsonifyfrom flask_cors import CORSapp = Flask(__name__)CORS(app) # CORS 허용 (프론트-백엔드 통신)# 임시 데이터베이스 (메모리 저장)inventory = { "A": { "id": "A", "name": "상품 .. 2025. 2. 15. API(Application Programming Interface)의 원리 🍔 햄버거 가게에 비유해서 API의 원리를 쉽게 설명해보자.React(프론트엔드)와 Python(백엔드)가 소통하는 방법을 이해해봅시다.1. API(Application Programming Interface) 란?"손님과 주방을 연결하는 웨이터"예시:손님(프론트엔드): "햄버거 주세요!"웨이터(API): 주방(백엔드)에 주문 전달 → 완성된 햄버거를 손님에게 전달주방(백엔드): 재료를 조리해 햄버거 생성👉 "API는 프론트엔드와 백엔드가 대화할 수 있게 하는 중간 다리입니다!"2. 프론트엔드(React)와 백엔드(Python) 역할구분설명예시프론트엔드사용자가 보는 화면버튼, 폼, 애니메이션백엔드데이터 처리 & 저장회원가입 로직, DB 연동3. API 통신 원리 (햄버거 주문 과정)손님(React)이.. 2025. 2. 14. React 자주 쓰이는 문법 핵심 정리 React는 컴포넌트 기반의 UI 라이브러리임. 컴포넌트 기반의 UI 라이브러리 -> 설명글 1. 컴포넌트 (Component)// 함수형 컴포넌트 (권장 방식)function Welcome(props) { return Hello, {props.name};}// 화살표 함수 + JSXconst Button = ({ onClick, children }) => ( {children});2. JSX 문법HTML과 유사하지만 JavaScript 확장 문법const element = Hello!;중괄호 {} 안에 JavaScript 표현식 사용const name = "Alice";const greeting = {name}님, 환영합니다!;3. 상태 관리 (useState)import { useState } .. 2025. 2. 14. 컴포넌트(Component) 기반의 UI 인터페이스란? 마치 장난감 블록을 조립하는 것처럼 생각하면 된다!1. UI (유저 인터페이스) 란?"우리가 눈으로 보고 만질 수 있는 모든 것"예) 스마트폰 화면, TV 리모컨 버튼, 컴퓨터 마우스예시:📱 핸드폰 앱의 "좋아요" 버튼🖥️ 컴퓨터의 "파일 저장" 메뉴2. 컴포넌트 (Component) 란?"레고 블록처럼 조립하는 부품"예) 레고 집을 만들 때 문, 창문, 지붕은 각각 다른 블록예시:🧩 웹사이트의 "로그인 버튼"🧩 인스타그램의 "댓글 입력창"👉 컴포넌트 = 작은 부품을 모아 큰 것을 만드는 것3. UI 라이브러리 (UI Library) 란?"레고 블록을 사는 가게"예) 레고 가게에 가면 미리 만들어진 블록을 골라 살 수 있듯이,개발자도 미리 만들어진 UI 부품(컴포넌트)을 가져다 쓸 수 있어요!예.. 2025. 2. 12. JavaScript 문법 정리 JavaScript는 웹 페이지에 동적인 기능을 추가하는 프로그래밍 언어임 1. 변수 선언let name = "Alice"; // 재할당 가능const PI = 3.14; // 재할당 불가 (상수)var age = 30; // 옛날 방식 (사용 비권장)2. 데이터 타입원시 타입(Primitive)let str = "Hello"; // 문자열let num = 42; // 숫자let bool = true; // 불리언let nullVal = null; // 의도적 빈 값let undefinedVal; // 정의되지 않음let symbol = Symbol(); // 고유 식별자 (ES6+)객체 타입(Object)l.. 2025. 2. 12. CSS 문법 정리 CSS(Cascading Style Sheets)는 HTML 요소의 스타일을 지정하는 언어임.태그 안에 한칸 띄우고 넣는 거구조와 디자인을 분리하여 웹 페이지의 레이아웃, 색상, 폰트 등을 제어함 1. 기본 문법 구조선택자 { 속성: 값; 속성: 값;}예시:h1 { color: blue; font-size: 24px;}2. 선택자(Selector) 종류(1) 기본 선택자태그 선택자: 태그명 (예: div, p)클래스 선택자: .클래스명 (예: .menu)ID 선택자: #아이디명 (예: #header)전체 선택자: *(2) 조합 선택자자식 선택자: 부모 > 자식 (예: div > p)후손 선택자: 조상 후손 (예: div p)그룹 선택자: 선택자1, 선택자2 (예: h1, h2)(3) 가상 클래스/.. 2025. 2. 12. 이전 1 2 다음
