전체 글33 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. 선언적 UI (Declarative UI) 와 가상 DOM (Virtual DOM) 🧩 레고 블록에 비유해서 쉽게 설명해드릴게요.1. 선언적 UI (Declarative UI) 란?"내가 원하는 결과만 말하면, 컴퓨터가 알아서 만들어주는 마법!"📖 예시로 이해하기명령형 (옛날 방식):"레고 집을 지어줘! 1. 파란 블록을 3개 쌓아 → 2. 빨간 블록을 옆에 붙여 → 3. 노란 블록을 지붕에 올려"→ 개발자가 모든 단계를 직접 지시해야 함 (힘들어요 😫)선언형 (React 방식):"레고 집을 지어줘! 최종 모습은 이 사진처럼"→ 개발자는 최종 결과만 설명하면, React가 알아서 조립 (편리해요 😎)💡 핵심:"어떻게(How)"가 아니라 "무엇(What)"을 정의합니다.상태(State)가 변하면 UI가 자동으로 업데이트됩니다.2. 가상 DOM (Virtual DOM) 이란?"진짜.. 2025. 2. 13. 내가 그렸던 그림 몰아보기 그림을 배우기 전, 아이패드를 가지고 그림을 그리고 싶었던 나는아이패드 드로잉 튜토리얼 책을 구입하게 되는데... 그 튜토리얼들을 따라 끄적끄적 열심히 그렸더랬다 그 그림들을 빼고 내가 진짜로 상상해서 그린 그림들만 가져왔음이건 내가 집에 가다가 고양이 장난감 파는 곳을 발견해서마음에 드는 낚싯대를 구해서 집에 빨리 가고싶어서 킥보드를 타고 가는 그림이다이거 그림 그릴 때 내가 상상한 나의 모습을 그려야 하는데 또 인체 삐꾸나는 건 싫어서 밑그림으로 해골을 그려서 어디부터 어디까지 팔이고.. 하면서 그렸던 것 같다레이어 구분도 할 줄 모르고 한군데다 그렸던 이시절의 나... 이거는 트위터에서 누가 MBTI 캐릭터를 그리고 계셨는데 너무 신선해서 나도 해봄. 이건 INFP다. 지금 봐도? 약간? 재능이? .. 2025. 2. 13. 그리고 싶은 그림체 정리 3트 데포르메를 졸업한 기념으로 그리고 싶은 그림체를 정리해 보았다 ㅎㅎ과연 나는 어떤 그림체를 갖게 될까? 2025. 2. 13. 이전 1 2 3 4 다음
