1. Next.js 프로젝트 생성

npx create-next-app@latest my-app
cd my-app

이미 프로젝트가 있다면 그 디렉토리로 이동.

2. Typescript 패키지 설정

npm install --save-dev typescript @types/react @types/node

자동으로 TypeScript 설정 파일을 생성. tsconfig.json은 처음 실행할 때 자동으로 생성됨.

3. 파일 확장자 변경

• 기존의 .js, .jsx 파일을 .ts, .tsx로 변경.

예시:

• pages/index.js → pages/index.tsx
• components/Button.jsx → components/Button.tsx

주의: .tsx는 JSX 문법이 들어간 파일에서만 사용.

4. tsconfig.json 자동 생성

다음 명령어를 실행하면 Next.js가 자동으로 tsconfig.json을 생성:

npm run dev

실행 시, tsconfig.json이 없다면 다음과 같이 자동 생성:

{
  "compilerOptions": {
    "target": "es5",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noEmit": true,
    "esModuleInterop": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve"
  },
  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
  "exclude": ["node_modules"]
}

strict 모드를 꺼야 하는 경우에는 "strict": false로 수정.

5. 타입 정의 파일 확인

Next.js는 자동으로 next-env.d.ts 파일을 생성:

/// <reference types="next" />
/// <reference types="next/types/global" />
/// <reference types="next/image-types/global" />

이 파일은 삭제 금지, 타입 정의가 깨지면 컴파일 오류가 발생할 수 있음.

6. TypeScript 사용 예시

컴포넌트에서 type 정의

type ButtonProps = {
  label: string;
  onClick?: () => void;
};

const Button = ({ label, onClick }: ButtonProps) => {
  return <button onClick={onClick}>{label}</button>;
};

7. 자주 사용하는 타입 패키지

@types/react : React 관련 타입 @types/node : Node.js 관련 타입 @types/uuid, @types/lodash 등: 서드파티 라이브러리 타입

8. ESLint와 함께 쓰기

• 코드 품질을 유지하려면 ESLint 설정도 같이 설정.

pm install --save-dev eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin

.eslintrc.json설정 예시

{
  "parser": "@typescript-eslint/parser",
  "extends": [
    "plugin:@typescript-eslint/recommended",
    "next/core-web-vitals"
  ]
}

9. 절대경로 설정

tsconfig.json에 다음 항목을 추가하면 @/components/Button처럼 경로를 쉽게 사용할 수 있음:

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"]
    }
  }
}

app 폴더를 src/app으로 옮겨두면 디렉토리도 더 깔끔해짐.

정리

이제 Next.js 프로젝트에서 TypeScript를 안전하게 사용할 준비 완료

정리하자면:

• 타입 안정성 덕분에 코드 퀄리티가 상승
• 초기 설정만 잘 하면 유지보수는 훨씬 쉬움
• 협업 시 커뮤니케이션 비용 감소

이 포스트에서는 Next.js의 App Router를 처음 접하는 개발자를 위해, 라우팅 구조와 각 파일(page.tsx, route.ts 등)의 명확한 역할 및 사용법을 알기 쉽게 정리.

1. App Router란?

• 기존의 Pages Router와의 차이점
• 장점: 서버 컴포넌트 지원, 중첩 라우팅, 병렬 라우팅 등

2. 폴더 기본 구조

app/
├── layout.tsx
├── page.tsx
├── loading.tsx
├── error.tsx
├── template.tsx
└── api/
    └── route.ts

• 폴더와 파일의 구조적 의미 소개

3. 파일별 라우팅 특성 상세 정리

1. page.tsx (기본 페이지 컴포넌트)

• 페이지 단위의 UI를 렌더링하는 기본 컴포넌트
• 서버 및 클라이언트 컴포넌트로 구성 가능
  • 'use client'키워드로 클라이언트 구분 가능
• 페이지 진입점(entry-point) 역할
• 정적(Static) 및 동적(Dynamic) 라우팅 모두 지원

const Page = () => {
  return (
      <div> Page </div>  
  );
}

export default TestPage;

2. layout.tsx (레이아웃 컴포넌트)

• 공통 레이아웃(헤더, 푸터 등)을 정의하고 페이지 간 상태를 유지
• 페이지 이동 시에도 레이아웃 유지
• 중첩된(Nested) 레이아웃 구조 가능

const Layout= ({ children }) => {
  return (
    <>
      <header>헤더</header>
      {children}
      <footer>푸터</footer>
    </>
  );
}

export default Layout;

3. route.ts (API 라우팅)

• 서버 기반 API 엔드포인트를 정의
• HTTP 메소드(GET, POST, PUT, DELETE) 처리 방법
• REST API 구현 시 필수

// app/api/users/route.ts

import { NextResponse } from 'next/server';

let users = [
  { id: 1, name: 'Alice' },
  { id: 2, name: 'Bob' }
];

// GET - 전체 유저 조회
export const GET = async () => {
  return NextResponse.json(users);
}

// POST - 새로운 유저 추가
export const POST = async (request: Request) => {
  const body = await request.json();
  const newUser = {
    id: users.length + 1,
    name: body.name
  };
  users.push(newUser);

  return NextResponse.json(newUser, { status: 201 });
}

// PUT - 유저 이름 수정 (간단히 id=1만 수정한다고 가정)
export const PUT (request: Request) => {
  const body = await request.json();
  const user = users.find(u => u.id === body.id);

  if (!user) {
    return NextResponse.json({ error: 'User not found' }, { status: 404 });
  }

  user.name = body.name;
  return NextResponse.json(user);
}

// DELETE - 유저 삭제 (id 기반 삭제)
export const DELETE = async (request: Request) => {
  const { searchParams } = new URL(request.url);
  const id = parseInt(searchParams.get('id') || '0');

  const index = users.findIndex(u => u.id === id);
  if (index === -1) {
    return NextResponse.json({ error: 'User not found' }, { status: 404 });
  }

  const deleted = users.splice(index, 1)[0];
  return NextResponse.json(deleted);
}

4. loading.tsx (로딩 컴포넌트)

• 페이지 데이터를 로딩 중일 때 사용자에게 표시할 UI를 구성
• Suspense와 스트리밍 데이터 처리 시 자동으로 렌더링
• 별도의 로딩 처리 로직이 필요하지 않음

const Loading = () => {
  return <div>Loading...</div> 
}

export default Loading;

• VS layout.tsx vs template.tsx

5. error.tsx (에러 컴포넌트)

• 페이지에서 발생한 에러를 처리하고 사용자에게 적절한 메시지를 표시
• 자동으로 에러를 캡처하여 UI로 렌더링 (Error Boundary)
• 사용자 친화적인 에러 처리 가능

const Error = ({ error, reset }) => {
  return (
    <div>
      <p>에러가 발생했습니다: {error.message}</p>
      <button onClick={reset}>다시 시도</button>
    </div>
  );
}

export default Error;

6. template.tsx (템플릿 컴포넌트)

• 페이지 전환 시 레이아웃 상태를 유지하지 않고 매번 초기화하여 렌더링
• 페이지 전환 애니메이션이나 새로 렌더링되는 UI에 적합
• layout과 달리 상태 유지하지 않음

  const Template = ({ children }) => {
  return <div className="transition-opacity animate-fadeIn">{children}</div>;
  }
  

export default Template;

## 4. 특수 라우팅
- 동적 라우팅 ([id])
  - URL 경로 일부를 **변수처럼 사용하는 방식**
  - 파일명에 대괄호를 사용하여 동적 파라미터를 받음.


**- URL 예시**
- `/posts/1`
- `/posts/hello-world`

**📘 코드 예시**
```tsx
// app/posts/[id]/page.tsx
import { useParams } from 'next/navigation';

const PostPage = () => {
  const params = useParams();
  return <div>Post ID: {params.id}</div>;
}

export default PostPage;

• 병렬 라우팅 (@folder)
  • 여러 뷰(슬롯)를 동시에 렌더링하고 싶을 때 사용
  • @폴더명으로 병렬적으로 UI를 구성할 수 있음
  • layout.tsx 안에서 <Slot />으로 활용

app/
└── layout.tsx
└── @modal/
    └── page.tsx
└── @main/
    └── page.tsx

// app/layout.tsx

const RootLayout = ({ modal, main}: {modal: React.ReactNode; main: React.ReactNode }) => {
  return (
    <>
      <div>{main}</div>
      <aside>{modal}</aside>
    </>
  );
}

export default RootLayout;

• 인터셉트 라우팅 ((.) / (..) / (...))

  • 현재 페이지를 유지하면서 다른 경로로 이동한 것처럼 보이게 하는 라우팅
  • 주로 모달, 사이드 패널 등을 라우팅으로 처리할 때 유용

• 인터셉트 종류와 개념

예시 구조:

app/
├─ dashboard/
│  ├─ page.tsx
│  └─ (...)/modal/
│     └─ page.tsx
├─ modal/         <-- 일반 경로 (가로채지 않음)
│  └─ page.tsx
├─ layout.tsx

• (.)modal/

  • /dashboard/modal로 접근했을 때만 가로채짐
  • 그 외 경로에서는 접근 불가 (에러)

• (..)/modal/

  • /dashboard, /settings, 등 상위 1단계 경로에서도 modal을 가로챔
  • URL은 /dashboard/modal, /settings/modal 등으로 구성 가능

• (...)/modal/

  • 앱 전체 어디서든 modal 라우트를 가로챔
  • /any/route/modal 로 접근해도 가로채기 적용됨
  • 가장 범용적인 방식

• 인터셉트 라우팅(intercepted routing)으로 설정한 디렉토리(ex - modal)는 Slot으로 동작.

//app/dashboard/(...)/modal/page.tsx
'use client'

import { useParams, useRouter } from 'next/navigation';

const TestModal = () => {
  const params = useParams();
  const router = useRouter();

  const closeModal = () => {
    router.back(); // 뒤로 가기 (이전 경로로 복귀)
  };

  return (
    <div
      style={{
        position: 'fixed',
        inset: 0,
        backgroundColor: 'rgba(0,0,0,0.6)',
        display: 'flex',
        justifyContent: 'center',
        alignItems: 'center',
        zIndex: 100,
      }}
    >
      <div
        style={{
          backgroundColor: '#fff',
          padding: '2rem',
          borderRadius: '8px',
          width: '400px',
          textAlign: 'center',
        }}
      >
        <h2>모달 테스트</h2>
        <p>Modal ID: {params.id}</p>
        <button className={'bg-amber-400 rounded-2xl p-2 cursor-pointer'} onClick={closeModal}>닫기</button>
      </div>
    </div>
  );
}

export default TestModal;

//app/layout.tsx - modal 추가
const RootLayout = async ({children, modal} :{children: React.ReactNode, modal: React.ReactNode}) => {

  const systemMode = await getSystemMode()
  const direction = 'ltr'
  const session = await getServerSession(authOptions);

  return (
    <html id='__next' lang='en' dir={direction} suppressHydrationWarning>
      <body className='flex is-full min-bs-full flex-auto flex-col'>
        <InitColorSchemeScript attribute='data' defaultMode={systemMode}/>
        <SessionProvider session={session}>
          {children}
          {modal}
        </SessionProvider>
      </body>
    </html>
  )
}

export default RootLayout

5. 정리

Next.js 프로젝트에서 환경 별 값을 설정하는 변수 값 API_KEY, DB_URL, SECRET 등 민감한 정보는 코드에 직접 작성하는 대신 환경변수를 통해 안전하게 관리

• 구성

1. 환경변수 파일 종류

Next.js는 환경에 따라 아래와 같은 파일을 자동 인식:

.env.local은 Git에 커밋하면 안 됨. (.gitignore에 기본 포함됨)

2. 환경변수 선언 예시

# .env.local
NEXT_PUBLIC_API_URL=https://api.example.com
SECRET_KEY=my-secret-key

3. Next.js 환경변수 네이밍 규칙

Next.js에서는 환경변수를 선언할 때 접근 범위에 따라 변수명 규칙이 존재.

• 클라이언트에서 접근 가능한 변수: NEXT_PUBLIC_ 접두사 필수
• 나머지는 서버 사이드에서만 접근 가능.

4. 환경변수 사용 방법 (Next.js 기준)

Next.js에서는 process.env.변수명으로 환경변수를 사용할 수 있습니다.
서버/클라이언트 위치에 따라 접근 방식이 다르며, NEXT_PUBLIC_ 접두사가 중요.

4-1. 서버 컴포넌트 또는 API Route에서 사용

.env 또는 .env.local에 선언한 환경변수는 서버 코드에서 바로 사용가능.

# .env.local
SECRET_KEY=my-secret

// app/api/hello/route.ts
export async function GET() {
  const secret = process.env.SECRET_KEY
  return Response.json({ secret })
}

• SECRET_KEY는 클라이언트 코드에서는 접근할 수 없습니다. (보안 상 안전)

4-2. 클라이언트 컴포넌트에서 사용 (NEXT_PUBLIC_ 붙이기)

클라이언트 컴포넌트에서 환경변수를 사용하려면 반드시 NEXT_PUBLIC_ 접두사가 필요.

# .env.local
NEXT_PUBLIC_API_URL=https://api.example.com

// app/components/ClientComponent.tsx
"use client"

export default function ClientComponent() {
  const apiUrl = process.env.NEXT_PUBLIC_API_URL
  return <p>API 주소: {apiUrl}</p>
}

process.env.API_URL처럼 접두사가 없는 변수는 브라우저에서는 undefined로 나옵니다.

4-3. TypeScript에서 환경변수 타입 지정 (선택)

• process.env는 기본적으로 모든 키를 string | undefined로 간주하므로 타입 오류가 날 수 있음. 이럴 땐 env.d.ts로 타입을 정의할 수 있음.

// env.d.ts
namespace NodeJS {
  interface ProcessEnv {
    NEXT_PUBLIC_API_URL: string
    SECRET_KEY: string
  }
}

• env.d.ts 파일 정의 후, tsconfig.json 설정 확인

{
  "compilerOptions": {
    "strict": true,
    "types": []
  },
  "include": [
    "next-env.d.ts",
    "**/*.ts",
    "**/*.tsx",
    "env.d.ts",        // ✅ 여기에 직접 경로 추가
    "types/env.d.ts"   // ✅ types 폴더에 뒀다면 이렇게
  ]
}

4-4. 환경변수 변경 시 dev 서버 재시작 필수

.env 파일을 수정한 경우에는 반드시 dev 서버를 재시작해야 반영 됨.

npm run dev

5. 클라이언트에 노출되면 안 되는 정보 예시

• 데이터베이스 주소 (DATABASE_URL)
• 시크릿 키 (SECRET_KEY)
• 외부 API 키 중 민감한 키 (예: Stripe Secret Key)

이런 값들은 절대 NEXT_PUBLIC_을 붙이지 않고, 서버에서만 사용해야 함.

6. 정리

• .env는 프로젝트 루트에 위치
• 클라이언트에서 사용하려면 반드시 NEXT_PUBLIC_ 접두사 붙이기
• 민감 정보는 .env.local에 작성 & Git에 커밋하지 않기
• 환경에 따라 .env.production, .env.development 분리 가능

pip install sqlalchemy psycopg2 asyncpg pydantic alembic

2. database 설정

SAMPLE CODE

• 동기 방식

  database.py

from sqlalchemy import create_engine from sqlalchemy.orm import sessionmaker, Session

SQLite

#=======================================================================================

SQLAlchemy 엔진 생성 (동기 방식)

engine = create_engine("sqlite:///./{DatabaseName}.db", echo=True) #echo=True > DB 작업 시 로그 출력 #=======================================================================================

PostgreSQL

접속 URL

DATABASE_URL = "postgresql+psycopg2://{Username}:{Password}@{Host}:{Port}/{DatabaseName}"

SQLAlchemy 엔진 생성

engine = create_engine( DATABASE_URL, echo=True # SQL 로그 출력 ) #=======================================================================================

sessionmaker는 세션을 생성해주는 팩토리 함수

SessionLocal = sessionmaker( bind=engine, # DB 엔진에 연결 class_=Session, # 사용할 세션 클래스 (기본값이므로 생략 가능) expire_on_commit=False # 커밋 후 객체의 속성을 만료시키지 않음 (재조회 없이 사용 가능) )

모든 모델이 상속할 Base 클래스 정의

Base = declarative_base()

FastAPI 의존성 주입용 함수

def get_db(): db: Session = SessionLocal() # 세션 인스턴스 생성 try: yield db # 세션을 외부에 제공 finally: db.close() # 요청 종료 시 세션 닫기

테이블 자동 생성 함수 (동기)

def create_tables(): try: Base.metadata.create_all(bind=engine) print("테이블 생성 완료") except Exception as e: print(f"테이블 생성 중 오류 발생: {e}")

- 비동기 방식

```python
database.py
------------------------------------------------
from sqlalchemy.ext.asyncio import create_async_engine, AsyncSession
from sqlalchemy.orm import sessionmaker

# SQLite
#=======================================================================================
# SQLAlchemy 비동기 엔진 생성
engine = create_async_engine("sqlite+aiosqlite:///./{DatabaseName}.db", echo=True) #echo=True > DB 작업 시 로그 출력
#=======================================================================================
# PostgreSQL
# PostgreSQL 접속 URL (asyncpg 드라이버 사용)
DATABASE_URL = "postgresql+asyncpg://{Username}:{Password}@{Host}:{Port}/{DatabaseName}"

# Async 엔진 생성
engine = create_async_engine(
    DATABASE_URL,
    echo=True  # SQL 로그 출력
)
#=======================================================================================

# 비동기 세션 팩토리 생성
AsyncSessionLocal = sessionmaker(
    bind=engine,               # 비동기 DB 엔진에 연결
    class_=AsyncSession,       # 사용할 세션 클래스 (비동기용)
    expire_on_commit=False     # 커밋 후에도 객체 속성 유지
)

# 모든 모델이 상속할 Base 클래스 정의
Base = declarative_base()

# FastAPI 의존성 주입용 비동기 함수
@asynccontextmanager
async def get_async_db():
    async with AsyncSessionLocal() as session:
        yield session  # 세션 제공 (자동으로 닫힘)

# 테이블 자동 생성
async def create_tables():
    try:
        async with engine.begin() as conn:
            await conn.run_sync(Base.metadata.create_all)
    except Exception as e:
        print(f'Create Table 시도 중 오류 발생 : {e}')

3. 데이터베이스 테이블 구조 정의

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

SAMPLE CODE

models.py
------------------------------------------------
from sqlalchemy import Column, Integer, String, ForeignKey, DateTime, Text
from sqlalchemy.orm import relationship
from database import Base
from datetime import datetime

# 사용자 테이블 정의
class User(Base):
    __tablename__ = 'users'

    id = Column(Integer, primary_key=True, index=True)
    username = Column(String(50), unique=True, nullable=False)
    email = Column(String(100), unique=True, nullable=False)
    created_at = Column(DateTime, default=datetime.utcnow)

    # 관계 설정
    boards = relationship("Board", back_populates="owner")

# 게시판 테이블 정의
class Board(Base):
    __tablename__ = 'boards'

    id = Column(Integer, primary_key=True, index=True)
    title = Column(String(200), nullable=False)
    content = Column(Text, nullable=False)
    created_at = Column(DateTime, default=datetime.utcnow)

    # 외래 키 (User 테이블과 연결)
    user_id = Column(Integer, ForeignKey("users.id"))

    # 관계 설정
    owner = relationship("User", back_populates="boards")

4. 데이터베이스 검증 및 직렬화

schemas.py는 FastAPI에서 데이터 검증 및 직렬화(Serialization) 를 위해 Pydantic 모델을 정의하는 파일.
클라이언트와 서버 간의 데이터 구조를 정의하고, API 요청 및 응답 데이터를 검증하는 역할을 함.

SAMPLE CODE

schemas.py
------------------------------------------------
from pydantic import BaseModel, Field
from datetime import datetime
from typing import Optional

# 요청(Request) 스키마
class UserCreate(BaseModel):
    username: str = Field(..., min_length=3, max_length=50)
    email: str
    password: str = Field(..., min_length=6)

# 응답(Response) 스키마
class UserResponse(BaseModel):
    id: int
    username: str
    email: str
    created_at: datetime

    class Config:
        from_attributes = True  # ORM 모드 활성화 (SQLAlchemy 모델과 호환)

# 업데이트(Update) 스키마 (Optional 필드 포함)
class UserUpdate(BaseModel):
    username: Optional[str] = None
    email: Optional[str] = None

5. DB와의 상호작용 로직

crud.py는 FastAPI 프로젝트에서 DB와의 상호작용 로직을 모아놓은 파일로, 주로 다음 작업을 수행:

• 데이터 생성 (Create)
• 데이터 조회 (Read)
• 데이터 수정 (Update)
• 데이터 삭제 (Delete)

특징

• 서비스 로직과 분리되어 가독성과 유지보수 용이
• 비즈니스 로직의 중심이 아닌, DB 연산 담당
• Pydantic 스키마와 SQLAlchemy 모델을 함께 사용

crud.py
------------------------------------------------
from sqlalchemy.ext.asyncio import AsyncSession
from sqlalchemy.future import select
from models import User
from schemas import UserCreate, UserUpdate

# 사용자 생성
async def create_user(db: AsyncSession, user_create: UserCreate):
    new_user = User(**user_create.dict())
    db.add(new_user)
    await db.commit()
    await db.refresh(new_user)
    return new_user

# 사용자 조회 by ID
async def get_user(db: AsyncSession, user_id: int):
    result = await db.execute(select(User).where(User.id == user_id))
    return result.scalars().first()

# 전체 사용자 조회
async def get_users(db: AsyncSession, skip: int = 0, limit: int = 10):
    result = await db.execute(select(User).offset(skip).limit(limit))
    return result.scalars().all()

# 사용자 수정
async def update_user(db: AsyncSession, user_id: int, user_update: UserUpdate):
    result = await db.execute(select(User).where(User.id == user_id))
    user = result.scalars().first()
    if user:
        for field, value in user_update.dict(exclude_unset=True).items():
            setattr(user, field, value)
        await db.commit()
        await db.refresh(user)
    return user

# 사용자 삭제
async def delete_user(db: AsyncSession, user_id: int):
    result = await db.execute(select(User).where(User.id == user_id))
    user = result.scalars().first()
    if user:
        await db.delete(user)
        await db.commit()
    return user

6. 라우터 연결 및 요청 연결

# main.py
from fastapi import FastAPI, Depends, HTTPException
from sqlalchemy.orm import Session

import models, schemas, crud
from database import engine, get_db

asynccontextmanager로 lifespan 정의
@asynccontextmanager
async def lifespan(app: FastAPI):
    print("앱 시작 중... 테이블 생성 시도")
    #==============================================
    # 동기
    create_tables() # 시작 시 테이블 자동 생성
    #==============================================
    # 비동기
    await create_tables()  # 시작 시 테이블 자동 생성
    #==============================================
    yield
    print("앱 종료 중...")

app = FastAPI(lifespan=lifespan)

# POST: 사용자 생성
@app.post("/users/", response_model=schemas.UserResponse)
def create_user(user: schemas.UserCreate, db: Session = Depends(get_db)):
    return crud.create_user(db=db, user=user)

# GET: 사용자 리스트 조회
@app.get("/users/", response_model=list[schemas.UserResponse])
def read_users(skip: int = 0, limit: int = 10, db: Session = Depends(get_db)):
    users = crud.get_users(db, skip=skip, limit=limit)
    return users

1. Python 플러그인 설치 (한 번만 하면 됨)

1. IntelliJ 실행
2. File > Settings (Ctrl+Alt+S) > Plugins
3. 상단 Marketplace 탭에서 Python 검색
4. 설치 후 IntelliJ 재시작

2. 새 Python 프로젝트 만들기

1. File > New Project

2. 왼쪽에서 Python 선택

3. 아래 설정:

   • Location: 프로젝트 경로
   • Python Interpreter:
     • 새 가상환경(venv) 만들거나
     • 기존 Python 설치 선택
   • Create 클릭

3. FastAPI + Uvicorn 설치

▶ 터미널 열기

• IntelliJ 하단의 Terminal 탭 클릭
• 가상환경이 자동으로 활성화돼 있을 것임

pip install fastapi uvicorn

4. FastAPI 서버 파일 생성

▶ main.py 파일 생성

from fastapi import FastAPI


app = FastAPI()

@app.get("/")
def read_root():
    return {"message": "Hello from IntelliJ + FastAPI!"}

5. 실행 설정 만들기 (Run Configuration)

1. 메뉴 상단 Run > Edit Configurations
2. 왼쪽 상단 + 버튼 → FastAPI 선택
3. 이름: FastAPI
4. Script path: directories > main.py
5. Uvicorn 옵션

--reload

6. Apply > OK

6. 실행

1. 실행 버튼 클릭

1. Python & 환경 준비

• Python 3.7 이상 설치

• 패키지 설치 :: fastAPI / 실행환경(uvicorn)

  pip install fastapi uvicorn

2. 가상환경 만들기

# 프로젝트 폴더 생성
mkdir fastapi_project
cd fastapi_project

# 가상환경 생성
python -m venv venv

# 가상환경 활성화
venv\Scripts\activate

3. FastAPI 기본 서버 파일 만들기

from fastapi import FastAPI

app = FastAPI()

@app.get("/")
def read_root():
    return {"message": "Hello, FastAPI!"}

4. 서버 실행

uvicorn main:app --reload

• --reload: 코드 수정 시 자동 재시작 (개발용)

• 브라우저에서 http://127.0.0.1:8000 접속

• 자동 생성된 문서:

  /docs (Swagger UI) /redoc (ReDoc)

• 미리 정의된 URL항목으로 라우트하는 것이 아닌, 변경될 수 있는 Parameter 항목 등의 URL주소를 가질 수 있게 동적으로 처리하는 라우트 방식

Expression

• NextJS의 디렉토리 경로가 URL이 되는 것을 알 수 있습니다.
• Dynamic Routes를 하기위해서는 마찬가지로 디렉토리를 이용하여 가능하며, Group Route를 소괄호() 로 감싸서 처리한것과 비슷하게, 대괄호[]를 이용하여 표현이 가능합니다.

Example)

app/test/[id] 디렉토리 생성 후, 아래와 같은 URL을 입력했을 때, 해당 page.tsx의 property로 다음과 같은 값을 받을 수 있습니다.

/test/1?value=testInfo&value2=123

---

• id : Dynamic Routes로 지정한 키값으로, params에서 값을 받을 수 있습니다.
• value, value2 : 해당 URL의 parameter로 전달된 값으로, searchParams에서, object(key-value) 형식의 값으로 받아올 수 있습니다.

비슷한 예시

• react-router-dom에서 사용하는 동적 라우트 경로와 유사하고, router-dom에서 사용되는 아래의 동적 URL 할당과 유사합니다.

  /test/:id

• 기존 HTML 소스에서 <meta> 태그에 관한 설정을 가리키는 변수입니다.
• Server Component에서만 동작이 가능합니다.

Expression

• layout 또는 page 파일에서만 사용이 가능합니다.

Javascript

export const metadata = {
    title: "Head Title",
    description: "Page Description",
}

Typescript

import { Metadata } from 'next';
export const metadata :Metadata = {
    title: "Head Title",
    description: "Page Description",
}

• 또한, title의 형식을 객체 형식으로 가져가는 것도 가능합니다.

export const metadata :Metadata = {
    title: {
       template: "Home > %s",
       default: "Next Movies"
    },
    description: "Page Description",
}

• 위의 template을 이용하여, 각 페이지별로 선언하는 title로 %s의 리터럴을 대체할 수 있습니다.

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

1.사이트 섹션, 의도 또는 팀별로 경로를 구성 할 때 2.동일한 라우트 세그먼트 수준에서 중첩된 레이아웃을 활성화 할 때

• 여러 루트 레이아웃을 포함하여 동일한 세그먼트에 여러 중첩 레이아웃 만들기
• 특정 세그먼트를 레이아웃으로 선택 할 때

기본적으로 Route Group을 사용하는 의미는, 코드 내부의 파일이 어떠한 의도를 가졌는 지 설명할 수 있는 데에 의미를 두고있습니다. 예를 들면, Root 폴더 경로에서 Home 화면에 해당하는 page.tsx에 대해서 Home이라는 의도를 부여하고 이를 넣는 등의 행위를 통해, "이 page.tsx 파일은 Home화면에서 사용하는 파일이다." 와 같은 의도를 부여할 수 있습니다.

Expression

• Route Group의 표기방법은, 디렉토리 폴더명에 괄호를 묶음으로써 해결할 수 있습니다 => (:FolderName)

• Example) URL 경로에 영향을 주지 않고 라우트 구성

  1. (home) 및 (movies)의 Route Group 하위로 폴더들이 생성이 되어있으나, 경로에 어떠한 영향도 미치지 않고, 위와 같이 라우팅이 적용됨을 알 수 있습니다.
  2. 주의할 점 > Route Group으로 묶인 경로 중, 동일한 경로를 만들어서는 안될 것입니다. 예를 들면, (Home)/about-us 와 (Sub)/about-us는 둘 다 URL 경로상으로는 /about-us이기 때문에, 위와 같이 디렉토리를 구성해서는 오류가 날 것 입니다.

1) Rendering이란?

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

2) Server Side Rendering / Client Side Rendering

1. 기본적으로 NextJS는 React기반의 Framwork로써, Server Side Rendering의 방식을 사용합니다.
2. 그 외에 create-react-app을 통해 직접 생성되는 React Application은 Client Side Rendering의 방식을 사용합니다.

• 즉, React 구조에서는 두 가지 방식이 존재하며, 두 가지 방식의 단어들의 뜻을 직역하면, 각각 다음과 같습니다. SSR(Server Side Rendering) : Server에서 Rendering이 이루어지는 것을 의미합니다. CSR(Client Side Rendering) : Client에서 Rendering이 이루어지는 것을 의미합니다.

3) CSR과 SSR의 특징 및 차이점

• React에서 제공이 가능한 두 가지 방식의 Render는 그 특징만큼이나, 차이점 역시 큽니다.

2. Hydration

• React의 Hydration Server Side Rendering을 통해서, 서버에서 렌더링된 HTML소스를 받은 다음, 기존 CSR에서 사용하는 방식과 같이 Javascript로 된 React Component로 Load하는 작업을 수행하는 것을 Hydration이라고 합니다.

• NextJS에서 사용하는 Anchor 태그 (<a>)는 최초에 서버에서 렌더링된 HTML로 호출이 된 다음, React App으로 Hydrate 작업을 거쳐서 <LinkComponent>로 변경 됩니다.

---

Hidration Diagram

Reference. Keeping Server-Side Rendering Cool With React Hydration (Link)

3. "use client"

• SSR 방식으로 운용되는 nextJS에서는 초기에 HTML을 반환하고, React Component로 변환하는 Hydration 작업을 수행합니다. 이 때, Hydration을 하게되는 컴포넌트에는 아래와 같이 키워드를 1번째 줄에 입력해야 합니다.

  "use client"

  ---

  • hook을 사용 중이지만, "use client" 커맨드를 추가하지 않았을 경우, 아래 사진과 같이 오류가 나타납니다.

  ---

  • 위와 같이 hook 함수를 사용하기 위해서는 Client Component이어야 하며, use client는 가장 최상단 줄에 입력을 합니다.

  • 한번 use client를 사용한 Component인 경우, 이 안에서 렌더링 된 Component들은 전부 Client Component로 인식됩니다.

  > Navigation.tsx / > Test.tsx

  • "use client"에 대한 선언은 항상 최상위 줄에 명시 되어야 합니다.
  • Navigation 컴포넌트 안에 렌더링 된 Test 컴포넌트는 Client Component에서 사용하고 있기 때문에,
  • *"use client"** 선언 없이도 hook 함수를 사용할 수 있습니다.

NextJS 프레임워크 Workspace가 있어야 합니다. 이전 게시글 참조 ----> [NextJS]Project Workspace 시작하기

NextJS Defining Routes

• 기본적으로, NextJS의 기본적인 구성은 다음과 같습니다.

  app ├layout.tsx ├page.tsx ├node_modules ├next-env.d.ts ├package-lock.json ├package.json └tsconfig.json

• 여기서, pages.tsx 파일의 역할은 index.html 파일의 역할과 동일하며,

• NextJS*에서의 Route 설정은 app 폴더의 디렉토리 경로를 통해서 결정됩니다.

Example)

localhost:3000/dev ==> /app/dev/page.tsx localhost:3000/dev/uat ==> /app/dev/uat/page.tsx localhost:3000/prod ==> /app/prod/page.tsx

이 때, page.tsx에서는 아래의 내용과 같이, 컴포넌트에 대해서 export default 커맨드가 걸려있어야 합니다.

> app/dev/page.tsx

export default function Dev() {
    return <h1>Dev Page</h1>
}

또한, 폴더 경로 안에 page.tsx 파일이 없는 경우, 해당 경로에 접속하게 되는 경우 404 Not found 오류를 반환합니다.

시작하기 앞서...

node.js 20.11.0 LTS 버전을 설치합니다 (NODE.JS 다운로드 바로가기)

Project Workspace 구성

1. 처음 NextJS 프로젝트의 디렉토리가 될 Workspace 공간을 생성합니다. Ex) C:\Documents\nextjs-workspace\

2. 아래 커맨드를 입력하여 package.json을 생성합니다.

   npm init -y 그러면, 아래와 같은 결과가 출력이 됩니다.

   > package.json

   {
   "name": "learn-nextjs14",
   "version": "1.0.0",
   "description": "",
   "main": "index.js",
   "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
   },
   "keywords": [],
   "author": "",
   "license": "ISC"
   }

3. package.json 항목의 내용을 아래와 같이 수정합니다.

• license : "MIT"
• scripts : { "dev": "next dev" }

4. 아래 커맨드를 입력하여 next-js의 구성 파일을 다운로드 받는다.

   npm install react@latest react-dom@latest next@latest

   해당 시점에서, next@latest의 버전은 14.1.0버전이며, Node.js 18.17.0버전 이상부터 다운로드 받을 수 있다.

   Node.js의 버전이 낮은 경우, 아래와 같이 오류 문구가 발생합니다. 구성파일을 다운로드 받게되면, node-modules 등의 폴더가 생성된다.

5. app/page.tsx 또는 app/page.jsx 파일 생성

   NextJS에서는 app 디렉토리의 page.jsx 또는 page.tsx 파일이 index.js의 역할을 수행한다. 파일 내용은 아래와 같이 입력합니다.

   > page.tsx

   export default function Page() {
    return <h1>Hello NextJS</h1>
   }

6. 커맨드를 다음과 같이 입력합니다.

   npm run dev

   그러면, 다음과 같은 화면과 함께 실행 화면이 나타납니다.

   

   • 위의 사진의 문구를 보면, 아래의 Log내용이 있음을 확인할 수 있습니다. [Your page app/page.tsx did not have a root layout. We created app/layout.tsx for you.]
   • 위의 내용을 토대로, page.tsx를 렌더링 하기 위해서는 nextJS에서는 layout.tsx가 필요하며, 파일이 없는 경우 직접 생성해 주는 것을 확인할 수 있습니다.

   > layout.tsx

   export const metadata = {
   title: 'Next.js',
   description: 'Generated by Next.js',
   }
   export default function RootLayout({
   children,
   }: {
   children: React.ReactNode
   }) {
   return (
    <html lang="en">
      <body>{children}</body>
    </html>
   )
   }

7. 위의 사진과 같이, localhost:3000 경로로 웹페이지가 나타나게 되며 아래의 화면과 같이 나타납니다.

백업, 복원하기에 앞서...

1. SSMS 프로그램을 설치해야 합니다. [SSMS 다운로드 바로가기]
2. 되도록이면 MS-SQL 최신버전을 설치해야 합니다.
3. SQL Server가 설치되어 있어야 합니다.

• 저의 경우, Docker를 이용하여 Container에 2022-latest버전을 설치하였습니다.

데이터베이스 백업

1. SSMS 모듈에서 백업을 진행할 데이터베이스를 우클릭합니다.
2. 우클릭 후 나타나는 CONTEXT화면은 위와 같이 나타나며, [태스크 >백업]을 누릅니다.

1. 데이터베이스 백업 창이 위와같이 나타나면 백업위치가 디스크인지 확인합니다.
2. 디스크로 설정 후, 백업 위치가 없는 경우 추가하여 설정하며, 이미 있으면 확인을 누릅니다.
3. 확인 버튼 클릭 후, 백업 파일을 확인합니다.

데이터베이스 복원

1. 복원을 진행할 데이터베이스를 우클릭합니다.
2. [태스크 > 복원 > 데이터베이스]를 순차적으로 클릭합니다.

1. 데이터베이스 복원 화면에서, 원본의 설정을 [디바이스]로 변경합니다.
2. 디바이스 옆의 [...] 버튼을 클릭합니다.
3. 그러면 백업 디바이스 선택 창이 나타나는데, 여기서 [백업 미디어 유형]은 [파일]로 합니다.
4. [추가] 버튼을 클릭하여, 백업할 파일을 선택합니다. (.bak가 아닌 다른 확장자를 했을 경우, 모든 파일 탭으로 설정하여 파일을 선택합니다.

데이터베이스 복원 시, 오류 케이스

1. 데이터베이스 버전 설정 문제

System.Data.SqlClient.SqlError: The database was backed up on a server running version ${BACKUP_VERSION}. That version is incompatible with this server, which is running version ${RECOVERY_VERSION}. Either restore the database on a server that supports the backup, or use a backup that is compatible with this server. (Microsoft.SqlServer.SmoExtended)

• 백업파일의 버전이 복원하려는 버전보다 높은 경우 발생하는 내용으로, 복원하려는 서버의 버전을 업그레이드 해야 합니다.
• 만약, 업그레이드 할 수 없는 경우, [DB 데이터 내보내기]를 이용한 방법으로 데이터를 받아야합니다.

2. 데이터베이스 복원 파일 덮어쓰기 미설정

System.Data.SqlClient.SqlError: The backup set holds a backup of a database other than the existing ‘${database}’ database

• 위와 같이 파일의 덮어쓰기 설정만 활성화하면 됩니다. (WITH REPLACE)