TIL

"scripts": { "dev": "next dev --experimental-https"}package.json 에 dev부분 수정 후 npm run dev 로 다시 실행하면 http가 아닌 https localhost 환경에서 실행됨 안된다면 , 다음과같이 설치 후 실행npm i next@latest react@latest react-dom@latest eslint-config-next@latest 진짜 너무 편하다

Props는 React에서 컴포넌트 간에 데이터를 전달하는 방법입니다. Props는 "properties"의 줄임말로, 부모 컴포넌트로부터 자식 컴포넌트로 데이터를 전달할 때 사용됩니다. Props는 읽기 전용이며, 컴포넌트 내부에서는 변경할 수 없습니다. 이는 컴포넌트가 순수 함수처럼 동작하도록 하여, 예측 가능한 동작을 보장합니다.Props 사용 방법Props를 사용하는 기본적인 방법은 다음과 같습니다:Props 전달하기: 부모 컴포넌트에서 자식 컴포넌트로 props를 전달할 때는, 자식 컴포넌트 태그의 속성으로 추가합니다.jsx// 부모 컴포넌트function ParentComponent() { return ;}Props 사용하기: 자식 컴포넌트에서는 함수의 매개변수로 props를 받아 사용할 수..

타입스크립트(Typescript)에서 인터페이스(interface)는 객체의 타입을 정의하는 방법 중 하나입니다. 인터페이스를 사용하면 객체가 특정 구조를 가지고 있음을 명시할 수 있으며, 이를 통해 코드의 안정성을 높이고 에러를 줄일 수 있습니다. 인터페이스는 클래스, 함수, 배열 등 다양한 곳에서 사용할 수 있으며, 코드의 가독성과 재사용성을 높이는 데 도움이 됩니다.인터페이스 정의 방법인터페이스는 interface 키워드를 사용하여 정의합니다. 그리고 그 안에 해당 객체가 가져야 할 속성과 그 타입을 명시합니다.typescriptinterface Person { name: string; age: number;}위 예시에서 Person 인터페이스는 name과 age 두 가지 속성을 가지고 있으며,..

웹팩(Webpack)은 자바스크립트(JS) 애플리케이션을 위한 정적 모듈 번들러입니다. 웹 애플리케이션을 구성하는 자원(HTML, CSS, 이미지, JS 파일 등)을 모두 모듈로 보고, 이러한 모듈들을 의존성 그래프로 만들어 하나 또는 여러 개의 번들로 결합하는 도구입니다. 웹팩을 사용함으로써 개발자는 애플리케이션을 모듈 방식으로 구성할 수 있고, 최종적으로 브라우저에서 사용할 수 있는 형태로 자원들을 번들링할 수 있습니다. 웹팩의 주요 기능은 다음과 같습니다: 로더(Loaders): 웹팩은 오직 자바스크립트와 JSON 파일만 이해할 수 있습니다. 로더를 사용하면 웹팩이 다른 타입의 파일들을 처리하여 모듈로 변환할 수 있게 합니다. 예를 들어, CSS, 이미지, HTML 파일들을 자바스크립트 모듈로 변환..

schema.py 에 Pydantic 모델을 사용하여 요청 및 응답 스키마를 정의 예시: from pydantic import BaseModel from typing import Optional class JapaneseBase(BaseModel): type: Optional[str] = None letter: str pronounciation: str audio: Optional[str] = None lesson: Optional[int] = None img: Optional[str] = None # 선택적 필드 vid: Optional[str] = None # 선택적 필드 class JapaneseCreate(JapaneseBase): pass 다시 routers/ 폴더의 해당 파일로가서, 라우터에 ..

FastAPI의 "Dependency Injection"은 FastAPI 프레임워크에서 제공하는 핵심 기능 중 하나입니다. Dependency Injection은 의존성 주입이라고도 하며, 이는 코드의 결합도를 낮추고, 유지보수와 테스트가 용이하도록 도와주는 설계 패턴입니다. FastAPI에서는 이를 통해 더욱 깔끔하고 효율적으로 API를 개발할 수 있습니다.(재사용성, 효율성 증가의 효과) Dependency Injection의 기본 원리 FastAPI에서 Dependency Injection을 사용하면, 함수나 클래스의 인스턴스를 직접 생성하지 않고, FastAPI가 실행 시간(runtime)에 의존성을 주입해줍니다. 이로써, 필요한 객체나 설정, 데이터베이스 연결 등을 효율적으로 관리하고 재사용할 ..

예제에서 본 방식(alemdic 사용) https://github.com/tiangolo/full-stack-fastapi-template/tree/master/backend/app router = APIRouter( prefix="/", ) @router.get("/list")# /list 경로로 GET 요청이 들어오면 question_list 함수가 호출됩니다. def question_list(): db = SessionLocal() _question_list = db.query(Question).order_by(Question.create_date.desc()).all() db.close() return _question_list 단점 : 실제 애플리케이션에서는 데이터베이스 세션을 관리하는 방법에 ..

SQLAlchemy + pydamic 보다는 SQLAlchemy+ alembic를 사용하는 것이 추세. 데이터베이스 구조 변경이 더 쉽기 때문입니다. Alembic을 사용하여 데이터베이스 마이그레이션을 수행하는 과정은 기본적으로 몇 단계로 나뉩니다. 여기에는 초기 설정, 마이그레이션 스크립트의 생성, 그리고 마이그레이션의 적용이 포함됩니다. SQLAlchemy 모델을 기반으로 한 마이그레이션을 만들기 위해, 먼저 Alembic 설정을 완료해야 합니다. 그 후, 모델에 대한 변경 사항을 반영하는 마이그레이션 스크립트를 생성하고 적용해야 합니다. Alembic 설정: 프로젝트 루트에서 $ pip install alembic ; alembic init alembic 명령어를 실행하여 Alembic을 초기화합니..

flask를 써봤다면 조금 익숙할 수도 있다. 예시 참고 https://github.com/tiangolo/full-stack-fastapi-template GitHub - tiangolo/full-stack-fastapi-template: Full stack, modern web application template. Using FastAPI, React, SQLModel, Post Full stack, modern web application template. Using FastAPI, React, SQLModel, PostgreSQL, Docker, GitHub Actions, automatic HTTPS and more. - tiangolo/full-stack-fastapi-template git..

테스트를하려면 루트보다는 유저를 생성해서 하는 것이 좋다. mysql에서 user를 생성하는 가장 기본적인 방법은 아래를 수행하는 것이다. CREATE USER 'username'@'host' IDENTIFIED BY 'password'; 여기서 Your password does not satisfy the current policy requirements. 라는 에러가 날 수 있다. 이는 비밀번호 때문인데 SHOW VARIABLES LIKE 'validate_password%'; +--------------------------------------+-------+ | Variable_name | Value | +--------------------------------------+-------+ | ..