펜스 코드 블록

펜스 코드 블록은 Markdown 확장 문법의 중요한 기능으로, 기본 코드 블록보다 더 강력한 코드 표시 기능을 제공하며 구문 강조, 줄 번호, 파일 이름 및 기타 고급 기능을 포함합니다.

기본 펜스 코드 블록

세 개의 백틱

세 개의 백틱 ```을 사용하여 코드 블록을 만듭니다:

markdown

```
function hello() {
    console.log("Hello, World!");
}
```

렌더링된 출력:

function hello() {
    console.log("Hello, World!");
}

세 개의 물결표

세 개의 물결표 ~~~를 사용하여 코드 블록을 만들 수도 있습니다:

markdown

~~~
function hello() {
    console.log("Hello, World!");
}
~~~

렌더링된 출력:

function hello() {
    console.log("Hello, World!");
}

구문 강조

프로그래밍 언어 지정

시작 표시 뒤에 언어 이름을 지정하여 구문 강조를 활성화합니다:

markdown

```javascript
function fibonacci(n) {
    if (n <= 1) return n;
    return fibonacci(n - 1) + fibonacci(n - 2);
}

console.log(fibonacci(10)); // 55
```

렌더링된 출력:

javascript

function fibonacci(n) {
    if (n <= 1) return n;
    return fibonacci(n - 1) + fibonacci(n - 2);
}

console.log(fibonacci(10)); // 55

일반적인 언어 예시

Python

markdown

```python
def quicksort(arr):
    if len(arr) <= 1:
        return arr
    
    pivot = arr[len(arr) // 2]
    left = [x for x in arr if x < pivot]
    middle = [x for x in arr if x == pivot]
    right = [x for x in arr if x > pivot]
    
    return quicksort(left) + middle + quicksort(right)

# 사용 예시
numbers = [3, 6, 8, 10, 1, 2, 1]
print(quicksort(numbers))
```

렌더링된 출력:

python

def quicksort(arr):
    if len(arr) <= 1:
        return arr
    
    pivot = arr[len(arr) // 2]
    left = [x for x in arr if x < pivot]
    middle = [x for x in arr if x == pivot]
    right = [x for x in arr if x > pivot]
    
    return quicksort(left) + middle + quicksort(right)

# 사용 예시
numbers = [3, 6, 8, 10, 1, 2, 1]
print(quicksort(numbers))

TypeScript

markdown

```typescript
interface User {
    id: number;
    name: string;
    email: string;
    isActive: boolean;
}

class UserService {
    private users: User[] = [];

    async createUser(userData: Omit<User, 'id'>): Promise<User> {
        const newUser: User = {
            id: Date.now(),
            ...userData
        };
        
        this.users.push(newUser);
        return newUser;
    }

    async getUserById(id: number): Promise<User | undefined> {
        return this.users.find(user => user.id === id);
    }
}
```

렌더링된 출력:

typescript

interface User {
    id: number;
    name: string;
    email: string;
    isActive: boolean;
}

class UserService {
    private users: User[] = [];

    async createUser(userData: Omit<User, 'id'>): Promise<User> {
        const newUser: User = {
            id: Date.now(),
            ...userData
        };
        
        this.users.push(newUser);
        return newUser;
    }

    async getUserById(id: number): Promise<User | undefined> {
        return this.users.find(user => user.id === id);
    }
}

Go

markdown

```go
package main

import (
    "fmt"
    "net/http"
    "log"
)

type Server struct {
    port string
}

func NewServer(port string) *Server {
    return &Server{port: port}
}

func (s *Server) Start() error {
    http.HandleFunc("/", s.handleHome)
    http.HandleFunc("/api/health", s.handleHealth)
    
    fmt.Printf("Server starting on port %s\n", s.port)
    return http.ListenAndServe(":"+s.port, nil)
}

func (s *Server) handleHome(w http.ResponseWriter, r *http.Request) {
    fmt.Fprintf(w, "Welcome to Go Server!")
}

func (s *Server) handleHealth(w http.ResponseWriter, r *http.Request) {
    w.Header().Set("Content-Type", "application/json")
    fmt.Fprintf(w, `{"status": "healthy"}`)
}

func main() {
    server := NewServer("8080")
    log.Fatal(server.Start())
}
```

렌더링된 출력:

package main

import (
    "fmt"
    "net/http"
    "log"
)

type Server struct {
    port string
}

func NewServer(port string) *Server {
    return &Server{port: port}
}

func (s *Server) Start() error {
    http.HandleFunc("/", s.handleHome)
    http.HandleFunc("/api/health", s.handleHealth)
    
    fmt.Printf("Server starting on port %s\n", s.port)
    return http.ListenAndServe(":"+s.port, nil)
}

func (s *Server) handleHome(w http.ResponseWriter, r *http.Request) {
    fmt.Fprintf(w, "Welcome to Go Server!")
}

func (s *Server) handleHealth(w http.ResponseWriter, r *http.Request) {
    w.Header().Set("Content-Type", "application/json")
    fmt.Fprintf(w, `{"status": "healthy"}`)
}

func main() {
    server := NewServer("8080")
    log.Fatal(server.Start())
}

고급 기능

줄 강조

일부 Markdown 프로세서는 특정 줄을 강조할 수 있습니다:

markdown

```javascript {2,4-6}
function calculateTotal(items) {
    let total = 0; // This line is highlighted
    
    for (const item of items) { // These lines are highlighted
        total += item.price * item.quantity;
    } // Highlight ends
    
    return total;
}
```

줄 번호 표시

코드 줄 번호를 표시합니다:

markdown

```python:line-numbers
def binary_search(arr, target):
    left, right = 0, len(arr) - 1
    
    while left <= right:
        mid = (left + right) // 2
        if arr[mid] == target:
            return mid
        elif arr[mid] < target:
            left = mid + 1
        else:
            right = mid - 1
    
    return -1
```

파일 이름 제목

코드 파일 이름을 표시합니다:

markdown

```typescript title="userService.ts"
export class UserService {
    private apiUrl = '/api/users';

    async getUsers(): Promise<User[]> {
        const response = await fetch(this.apiUrl);
        return response.json();
    }

    async createUser(user: CreateUserDto): Promise<User> {
        const response = await fetch(this.apiUrl, {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify(user)
        });
        return response.json();
    }
}
```

코드 블록 차이 표시

코드 변경을 표시합니다:

markdown

```diff
function calculateTax(amount) {
-   return amount * 0.05; // Old tax rate
+   return amount * 0.08; // New tax rate
}

+ // New function
+ function calculateDiscount(amount, percentage) {
+     return amount * (percentage / 100);
+ }
```

렌더링된 출력:

diff

function calculateTax(amount) {
-   return amount * 0.05; // Old tax rate
+   return amount * 0.08; // New tax rate
}

+ // New function
+ function calculateDiscount(amount, percentage) {
+     return amount * (percentage / 100);
+ }

설정 파일 예시

JSON 설정

markdown

```json
{
  "name": "my-app",
  "version": "1.0.0",
  "scripts": {
    "start": "node server.js",
    "dev": "nodemon server.js",
    "build": "webpack --mode production",
    "test": "jest"
  },
  "dependencies": {
    "express": "^4.18.2",
    "mongoose": "^7.0.3",
    "jsonwebtoken": "^9.0.0"
  },
  "devDependencies": {
    "nodemon": "^2.0.22",
    "jest": "^29.5.0",
    "webpack": "^5.82.0"
  }
}
```

렌더링된 출력:

json

{
  "name": "my-app",
  "version": "1.0.0",
  "scripts": {
    "start": "node server.js",
    "dev": "nodemon server.js",
    "build": "webpack --mode production",
    "test": "jest"
  },
  "dependencies": {
    "express": "^4.18.2",
    "mongoose": "^7.0.3",
    "jsonwebtoken": "^9.0.0"
  },
  "devDependencies": {
    "nodemon": "^2.0.22",
    "jest": "^29.5.0",
    "webpack": "^5.82.0"
  }
}

YAML 설정

markdown

```yaml
apiVersion: apps/v1
kind: Deployment
metadata:
  name: web-app
  labels:
    app: web-app
spec:
  replicas: 3
  selector:
    matchLabels:
      app: web-app
  template:
    metadata:
      labels:
        app: web-app
    spec:
      containers:
      - name: web
        image: nginx:1.21
        ports:
        - containerPort: 80
        env:
        - name: NODE_ENV
          value: production
        resources:
          requests:
            memory: "64Mi"
            cpu: "250m"
          limits:
            memory: "128Mi"
            cpu: "500m"
```

렌더링된 출력:

yaml

apiVersion: apps/v1
kind: Deployment
metadata:
  name: web-app
  labels:
    app: web-app
spec:
  replicas: 3
  selector:
    matchLabels:
      app: web-app
  template:
    metadata:
      labels:
        app: web-app
    spec:
      containers:
      - name: web
        image: nginx:1.21
        ports:
        - containerPort: 80
        env:
        - name: NODE_ENV
          value: production
        resources:
          requests:
            memory: "64Mi"
            cpu: "250m"
          limits:
            memory: "128Mi"
            cpu: "500m"

SQL 쿼리

markdown

```sql
-- Create users table
CREATE TABLE users (
    id SERIAL PRIMARY KEY,
    username VARCHAR(50) UNIQUE NOT NULL,
    email VARCHAR(100) UNIQUE NOT NULL,
    password_hash VARCHAR(255) NOT NULL,
    created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
    updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
);

-- Create indexes
CREATE INDEX idx_users_email ON users(email);
CREATE INDEX idx_users_username ON users(username);

-- Query active users
SELECT 
    u.id,
    u.username,
    u.email,
    COUNT(p.id) as post_count
FROM users u
LEFT JOIN posts p ON u.id = p.user_id
WHERE u.created_at >= NOW() - INTERVAL '30 days'
GROUP BY u.id, u.username, u.email
HAVING COUNT(p.id) > 0
ORDER BY post_count DESC
LIMIT 10;
```

렌더링된 출력:

sql

-- Create users table
CREATE TABLE users (
    id SERIAL PRIMARY KEY,
    username VARCHAR(50) UNIQUE NOT NULL,
    email VARCHAR(100) UNIQUE NOT NULL,
    password_hash VARCHAR(255) NOT NULL,
    created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
    updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
);

-- Create indexes
CREATE INDEX idx_users_email ON users(email);
CREATE INDEX idx_users_username ON users(username);

-- Query active users
SELECT 
    u.id,
    u.username,
    u.email,
    COUNT(p.id) as post_count
FROM users u
LEFT JOIN posts p ON u.id = p.user_id
WHERE u.created_at >= NOW() - INTERVAL '30 days'
GROUP BY u.id, u.username, u.email
HAVING COUNT(p.id) > 0
ORDER BY post_count DESC
LIMIT 10;

쉘 스크립트 및 명령어

Bash 스크립트

markdown

```bash
#!/bin/bash

# Deployment script
set -e

APP_NAME="my-app"
DEPLOY_DIR="/var/www/${APP_NAME}"
BACKUP_DIR="/var/backups/${APP_NAME}"
CURRENT_DATE=$(date +%Y%m%d_%H%M%S)

echo "Starting deployment of ${APP_NAME}..."

# Create backup
if [ -d "$DEPLOY_DIR" ]; then
    echo "Creating backup at ${BACKUP_DIR}/${CURRENT_DATE}"
    mkdir -p "$BACKUP_DIR"
    cp -r "$DEPLOY_DIR" "${BACKUP_DIR}/${CURRENT_DATE}"
fi

# Stop service
echo "Stopping service..."
sudo systemctl stop $APP_NAME || true

# Deploy new version
echo "Deploying new version..."
rm -rf "$DEPLOY_DIR"
mkdir -p "$DEPLOY_DIR"
tar -xzf "${APP_NAME}.tar.gz" -C "$DEPLOY_DIR"

# Install dependencies
echo "Installing dependencies..."
cd "$DEPLOY_DIR"
npm ci --production

# Start service
echo "Starting service..."
sudo systemctl start $APP_NAME
sudo systemctl enable $APP_NAME

echo "Deployment complete!"
```

렌더링된 출력:

bash

#!/bin/bash

# Deployment script
set -e

APP_NAME="my-app"
DEPLOY_DIR="/var/www/${APP_NAME}"
BACKUP_DIR="/var/backups/${APP_NAME}"
CURRENT_DATE=$(date +%Y%m%d_%H%M%S)

echo "Starting deployment of ${APP_NAME}..."

# Create backup
if [ -d "$DEPLOY_DIR" ]; then
    echo "Creating backup at ${BACKUP_DIR}/${CURRENT_DATE}"
    mkdir -p "$BACKUP_DIR"
    cp -r "$DEPLOY_DIR" "${BACKUP_DIR}/${CURRENT_DATE}"
fi

# Stop service
echo "Stopping service..."
sudo systemctl stop $APP_NAME || true

# Deploy new version
echo "Deploying new version..."
rm -rf "$DEPLOY_DIR"
mkdir -p "$DEPLOY_DIR"
tar -xzf "${APP_NAME}.tar.gz" -C "$DEPLOY_DIR"

# Install dependencies
echo "Installing dependencies..."
cd "$DEPLOY_DIR"
npm ci --production

# Start service
echo "Starting service..."
sudo systemctl start $APP_NAME
sudo systemctl enable $APP_NAME

echo "Deployment complete!"

일반적인 오류 및 해결 방법

1. 백틱 개수 불일치

markdown

❌ 오류:
```javascript
function hello() {
    console.log("Hello");
}
``  ← 두 개의 백틱만 사용

✅ 수정:
```javascript
function hello() {
    console.log("Hello");
}
```  ← 세 개의 백틱 사용

2. 잘못된 언어 식별자

markdown

❌ 오류:
```js  ← 일부 프로세서는 인식하지 못함
function hello() {}
```

✅ 권장:
```javascript  ← 정확한 언어 이름 사용
function hello() {}
```

3. 중첩된 코드 블록

markdown

❌ 문제: ``` 포함 코드를 표시할 수 없음

✅ 해결: 네 개의 백틱으로 세 개의 백틱을 감싸기
````markdown
```javascript
console.log("hello");
```


### 4. 특수 문자 처리

````markdown
```markdown
<!-- Markdown 구문을 Markdown 코드 블록에 표시 -->
\```javascript  ← 백틱 이스케이프
code here
\```
```

지원되는 언어 목록

프로그래밍 언어

언어	식별자	별칭
JavaScript	`javascript`	`js`
TypeScript	`typescript`	`ts`
Python	`python`	`py`
Java	`java`
C++	`cpp`	`c++`, `cxx`
C#	`csharp`	`cs`
Go	`go`	`golang`
Rust	`rust`	`rs`
PHP	`php`
Ruby	`ruby`	`rb`
Swift	`swift`
Kotlin	`kotlin`	`kt`

마크업 및 설정 언어

언어	식별자	사용
HTML	`html`	웹 마크업
CSS	`css`	스타일시트
XML	`xml`	데이터 교환
JSON	`json`	데이터 형식
YAML	`yaml`, `yml`	설정 파일
TOML	`toml`	설정 파일
Markdown	`markdown`, `md`	문서화

데이터 및 쿼리 언어

언어	식별자	사용
SQL	`sql`	데이터베이스 쿼리
GraphQL	`graphql`	API 쿼리
R	`r`	통계 계산
MATLAB	`matlab`	수치 계산

쉘 및 스크립트

언어	식별자	사용
Bash	`bash`, `sh`	Unix 쉘
PowerShell	`powershell`, `ps1`	Windows 쉘
Batch	`batch`, `bat`	Windows 배치
Dockerfile	`dockerfile`	컨테이너 설정

모범 사례

1. 적절한 언어 식별자 선택

markdown

✅ 권장: 정확한 언어 식별자 사용
```typescript
interface User {
    id: number;
    name: string;
}
```

❌ 권장하지 않음: 잘못된 식별자 사용
```javascript  ← 이것은 TypeScript 코드임
interface User {
    id: number;
    name: string;
}
```

2. 의미 있는 주석 추가

markdown

✅ 권장: 설명 주석 포함
```python
def fibonacci(n):
    """Calculate the nth Fibonacci number"""
    if n <= 1:
        return n
    return fibonacci(n-1) + fibonacci(n-2)
```

❌ 권장하지 않음: 설명 없는 코드
```python
def fib(n):
    if n <= 1:
        return n
    return fib(n-1) + fib(n-2)
```

3. 코드 간소화

markdown

✅ 권장: 핵심 로직 표시
```javascript
// User authentication middleware
function authenticate(req, res, next) {
    const token = req.headers.authorization;
    if (!token) {
        return res.status(401).json({ error: 'No token provided' });
    }
    // Verification logic...
    next();
}
```

❌ 권장하지 않음: 관련 없는 코드 많음
```javascript
// Omitted a lot of unrelated code...
```

4. 파일 이름 제목 사용

markdown

✅ 권장: 파일 이름 표시
```javascript title="middleware/auth.js"
export function authenticate(req, res, next) {
    // Authentication logic
}
```

✅ 권장: 설정 파일 이름 표시
```json title="package.json"
{
  "name": "my-app",
  "version": "1.0.0"
}
```

실제 응용 사례

1. API 문서화

markdown

## 사용자 로그인 API

**요청 예시:**

```bash
curl -X POST https://api.example.com/auth/login \
  -H "Content-Type: application/json" \
  -d '{
    "email": "user@example.com",
    "password": "password123"
  }'
```

**응답 예시:**

```json
{
  "success": true,
  "data": {
    "token": "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...",
    "user": {
      "id": 1,
      "email": "user@example.com",
      "name": "Zhang San"
    }
  }
}
```

**오류 응답:**

```json
{
  "success": false,
  "error": {
    "code": "INVALID_CREDENTIALS",
    "message": "Invalid email or password"
  }
}
```

2. 설치 가이드

markdown

## 환경 설정

### 1. Node.js 설치

**macOS (Homebrew 사용):**

```bash
# Homebrew 설치 (설치되지 않은 경우)
/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

# Node.js 설치
brew install node

# 설치 확인
node --version
npm --version
```

**Ubuntu/Debian:**

```bash
# 패키지 목록 업데이트
sudo apt update

# Node.js 및 npm 설치
sudo apt install nodejs npm

# 설치 확인
node --version
npm --version
```

**Windows (Chocolatey 사용):**

```powershell
# Chocolatey 설치 (관리자 권한으로 실행)
Set-ExecutionPolicy Bypass -Scope Process -Force; 
[System.Net.ServicePointManager]::SecurityProtocol = [System.Net.ServicePointManager]::SecurityProtocol -bor 3072; 
iex ((New-Object System.Net.WebClient).DownloadString('https://chocolatey.org/install.ps1'))

# Node.js 설치
choco install nodejs

# 설치 확인
node --version
npm --version
```

3. 코드 비교

markdown

## 리팩토링 전과 후

**리팩토링 전 (Callback Hell):**

```javascript
function getUserData(userId, callback) {
    getUser(userId, function(err, user) {
        if (err) {
            callback(err);
            return;
        }
        
        getPosts(user.id, function(err, posts) {
            if (err) {
                callback(err);
                return;
            }
            
            getComments(posts[0].id, function(err, comments) {
                if (err) {
                    callback(err);
                    return;
                }
                
                callback(null, { user, posts, comments });
            });
        });
    });
}
```

**리팩토링 후 (async/await):**

```javascript
async function getUserData(userId) {
    try {
        const user = await getUser(userId);
        const posts = await getPosts(user.id);
        const comments = await getComments(posts[0].id);
        
        return { user, posts, comments };
    } catch (error) {
        throw error;
    }
}
```

HTML 출력

펜스 코드 블록은 HTML로 변환됩니다:

markdown

```javascript
function hello() {
    console.log("Hello");
}
```

변환된 결과:

html

<pre><code class="language-javascript">
function hello() {
    console.log("Hello");
}
</code></pre>

펜스 코드 블록 ​

기본 펜스 코드 블록 ​

세 개의 백틱 ​

세 개의 물결표 ​

구문 강조 ​

프로그래밍 언어 지정 ​

일반적인 언어 예시 ​

Python ​

TypeScript ​

Go ​

고급 기능 ​

줄 강조 ​

줄 번호 표시 ​

파일 이름 제목 ​

코드 블록 차이 표시 ​

설정 파일 예시 ​

JSON 설정 ​

YAML 설정 ​

SQL 쿼리 ​

쉘 스크립트 및 명령어 ​

Bash 스크립트 ​

일반적인 오류 및 해결 방법 ​

1. 백틱 개수 불일치 ​

2. 잘못된 언어 식별자 ​

3. 중첩된 코드 블록 ​

지원되는 언어 목록 ​

프로그래밍 언어 ​

마크업 및 설정 언어 ​

데이터 및 쿼리 언어 ​

쉘 및 스크립트 ​

모범 사례 ​

1. 적절한 언어 식별자 선택 ​

2. 의미 있는 주석 추가 ​

3. 코드 간소화 ​

4. 파일 이름 제목 사용 ​

실제 응용 사례 ​

1. API 문서화 ​

2. 설치 가이드 ​

3. 코드 비교 ​

HTML 출력 ​

관련 구문 ​

펜스 코드 블록

기본 펜스 코드 블록

세 개의 백틱

세 개의 물결표

구문 강조

프로그래밍 언어 지정

일반적인 언어 예시

Python

TypeScript

Go

고급 기능

줄 강조

줄 번호 표시

파일 이름 제목

코드 블록 차이 표시

설정 파일 예시

JSON 설정

YAML 설정

SQL 쿼리

쉘 스크립트 및 명령어

Bash 스크립트

일반적인 오류 및 해결 방법

1. 백틱 개수 불일치

2. 잘못된 언어 식별자

3. 중첩된 코드 블록

지원되는 언어 목록

프로그래밍 언어

마크업 및 설정 언어

데이터 및 쿼리 언어

쉘 및 스크립트

모범 사례

1. 적절한 언어 식별자 선택

2. 의미 있는 주석 추가

3. 코드 간소화

4. 파일 이름 제목 사용

실제 응용 사례

1. API 문서화

2. 설치 가이드

3. 코드 비교

HTML 출력

관련 구문