Next.js 프로젝트에 TypeScript를 적용하면 더 안전하고 유지보수하기 쉬운 코드를 작성할 수 있으며,이 포스트에서는 Next.js에서 TypeScript 환경을 처음 설정하는 방법을 단계별로 정리.

13버전부터 지원하는 App Router에 대한 종류를 정의하고 관련 소스를 정리하였습니다.

환경 변수 (.env)란?Next.js 프로젝트에서 환경 별 값을 설정하는 변수 값API_KEY, DB_URL, SECRET 등 민감한 정보는 코드에 직접 작성하는 대신 환경변수를 통해 안전하게 관리Next.js는 환경에 따라 아래와 같은 파일을 자동 인식:.env.l

SAMPLE CODE동기 방식비동기 방식models.py는 데이터베이스 테이블과 매핑되는 ORM 모델 클래스들을 정의하는 파일.SQLAlchemy를 이용하여 Python 클래스로 DB 테이블 구조를 선언하고, FastAPI에서 CRUD 등의 데이터 조작에 활용.SAMP

IntelliJ 실행File > Settings (Ctrl+Alt+S) > Plugins상단 Marketplace 탭에서 Python 검색설치 후 IntelliJ 재시작File > New Project왼쪽에서 Python 선택아래 설정:Location: 프로젝트 경로P

Python 3.7 이상 설치 패키지 설치 :: fastAPI / 실행환경(uvicorn)\--reload: 코드 수정 시 자동 재시작 (개발용)브라우저에서 http://127.0.0.1:8000 접속자동 생성된 문서:/docs (Swagger UI)/redo

미리 정의된 URL항목으로 라우트하는 것이 아닌, 변경될 수 있는 Parameter 항목 등의 URL주소를 가질 수 있게 동적으로 처리하는 라우트 방식NextJS의 디렉토리 경로가 URL이 되는 것을 알 수 있습니다.Dynamic Routes를 하기위해서는 마찬가지로

기존 HTML 소스에서 <meta> 태그에 관한 설정을 가리키는 변수입니다.Server Component에서만 동작이 가능합니다.layout 또는 page 파일에서만 사용이 가능합니다.JavascriptTypescript또한, title의 형식을 객체 형식으로 가

NextJS에서 기본적으로 디렉토리가 있으면 일반적으로 URL에 매핑이 됩니다.허나 Route Group의 기능을 사용하여 이를 URL 경로에 포함시키지 않을 수 있습니다.또한, 라우트 그룹은 다음과 같은 경우에 유용합니다:1.사이트 섹션, 의도 또는 팀별로 경로를 구

1. Rendering > > 1) Rendering이란? > - React Component의 props, state에 따라서 뷰(HTML)을 형성하는 작업입니다. > 한 마디로, React 코드로 작성된 Component를 HTML 소스로 변환하는 것을 뜻합니다

NextJS 프레임워크 Workspace가 있어야 합니다. 이전 게시글 참조 ----> \[NextJS]Project Workspace 시작하기기본적으로, NextJS의 기본적인 구성은 다음과 같습니다.app├layout.tsx├page.tsx├node_modules├

node.js 20.11.0 LTS 버전을 설치합니다 (NODE.JS 다운로드 바로가기)처음 NextJS 프로젝트의 디렉토리가 될 Workspace 공간을 생성합니다.Ex) C:\\Documents\\nextjs-workspace\\아래 커맨드를 입력하여 packag

SSMS 프로그램을 설치해야 합니다. \[SSMS 다운로드 바로가기]되도록이면 MS-SQL 최신버전을 설치해야 합니다.SQL Server가 설치되어 있어야 합니다.저의 경우, Docker를 이용하여 Container에 2022-latest버전을 설치하였습니다.데이터베이