React JSX 기초 문법 정리1. useState로 상태 관리하기useState()는 React 함수형 컴포넌트에서 상태(state)를 선언하고 관리할 수 있게 해주는 Hook입니다.import { useState } from 'react';function App() { const [count, setCount] = useState(0); return ( 카운터 예제 현재 값: {count} setCount(count + 1)}>+1 증가 );}※ const [변수이름, 변경함수] = useState(초기값) 형식은 구조 분해 할당을 통해 상태(state) 값을 선언하는 방법입니다.※ [count, setCount]는 구조 분해 할당이며, count는 ..

React 앱 생성부터 상태 관리1. Vite로 React 프로젝트 만들기npm create vite my-app✔ Select a framework: › React✔ Select a variant: › JavaScriptcd my-appnpm installnpm run dev※ http://localhost:5173에서 브라우저로 바로 확인 가능2. Vite 프로젝트 구조 요약my-app/├── index.html├── package.json├── vite.config.js├── public/├── src/│ ├── App.jsx│ └── main.jsx※ React 컴포넌트는 src 폴더에서 작성됨3. 함수형 컴포넌트와 useStatefunction MyButton() { const [i..

Array 메서드(map, filter, reduce)const numbers = [1, 2, 3, 4, 5];1) map()// 배열의 각 요소를 변형하여 새 배열 생성const doubled = numbers.map(num => num * 2);console.log(doubled); // [2, 4, 6, 8, 10]※ 기존 배열의 요소를 가공하여 **같은 길이의 새 배열** 생성2) filter()// 조건에 맞는 요소만 추출const even = numbers.filter(num => num % 2 === 0);console.log(even); // [2, 4]※ 조건을 만족하는 요소만 모아 **새 배열** 생성3) reduce()// 배열을 순회하며 누적값 계산const sum = numbers..

자바스크립트 함수 정의 방식 & 배열/객체 처리 기초 정리1. 함수 정의 방법① 함수 선언문function add(x, y) { return x + y;}const result = add(10, 20);console.log(result); // 30② 함수 표현식let add = function (x, y) { return x + y; };let sum = add;console.log(add(10, 20)); // 30console.log(sum(10, 20)); // 30③ 기명 함수 표현식let sum1 = function add1(x, y) { return x + y; };let sum2 = sum1;console.log(sum1(10, 20)); // 30console.log(su..

FastAPI + SQLModel 기반 SQLite 데이터베이스 설정데이터베이스 설정FastAPI에서 SQLite를 기반으로 SQLModel을 사용한 데이터베이스 설정 방법을 정리한다. planner.db 파일이 프로젝트 루트에 생성되며, 앱 실행 시 자동으로 테이블이 생성되고 DB 세션이 관리된다.# database/connection.pyfrom sqlmodel import SQLModel, create_engine, Session# SQLite 데이터베이스 파일 경로 지정database_file = "planner.db"database_connection_string = f"sqlite:///{database_file}"connect_args = {"check_same_thread": False}#..

FastAPI 이벤트 CRUD 예제# routes/events.pyfrom typing import Listfrom fastapi import APIRouter, Body, HTTPException, Path, statusfrom models.events import Event, UpdateEventevent_router = APIRouter(tags=["Event"])events = []# 이벤트 전체 조회 /events/@event_router.get("/", response_model=List[Event])async def retrive_all_events() -> List[Event]: return events# 이벤트 상세 조회 /events/{event_id}@event_router...