코드 문법

코드는 기술 문서에서 중요한 요소입니다. Markdown은 인라인 코드와 코드 블록을 포함한 여러 가지 코드 표시 방법을 제공합니다.

인라인 코드

기본 문법

백틱 `을 사용하여 코드를 감쌉니다:

markdown

이것은 `인라인 코드`의 예시입니다.
정보를 출력하려면 `console.log()` 함수를 사용하세요.

렌더링 결과:

이것은 인라인 코드의 예시입니다. 정보를 출력하려면 console.log() 함수를 사용하세요.

백틱이 포함된 코드

코드 자체에 백틱이 포함된 경우 이중 백틱을 사용합니다:

markdown

```console.log()` 함수 사용``

렌더링 결과:

```console.log()` 함수 사용``

여러 백틱 처리

markdown

```여러 백틱 `` ` ```이 있는 코드```

렌더링 결과:

여러 백틱 `` ` 이 있는 코드```


## 코드 블록

### 들여쓰기 코드 블록

4개의 공백 또는 1개의 탭을 사용하여 들여쓰기:

```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 hello(name) {
    console.log(`Hello, ${name}!`);
}
```

렌더링 결과:

javascript

function hello(name) {
    console.log(`Hello, ${name}!`);
}

일반적인 프로그래밍 언어 예시

JavaScript

markdown

```javascript
// 비동기 함수 예시
async function fetchData(url) {
    try {
        const response = await fetch(url);
        const data = await response.json();
        return data;
    } catch (error) {
        console.error('Error:', error);
    }
}
```

렌더링 결과:

javascript

// 비동기 함수 예시
async function fetchData(url) {
    try {
        const response = await fetch(url);
        const data = await response.json();
        return data;
    } catch (error) {
        console.error('Error:', error);
    }
}

Python

markdown

```python
# 클래스 정의 예시
class Calculator:
    def __init__(self):
        self.result = 0
    
    def add(self, x, y):
        return x + y
    
    def multiply(self, x, y):
        return x * y

# 사용 예시
calc = Calculator()
print(calc.add(5, 3))
```

렌더링 결과:

python

# 클래스 정의 예시
class Calculator:
    def __init__(self):
        self.result = 0
    
    def add(self, x, y):
        return x + y
    
    def multiply(self, x, y):
        return x * y

# 사용 예시
calc = Calculator()
print(calc.add(5, 3))

HTML

markdown

```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>샘플 페이지</title>
</head>
<body>
    <h1>Markdown에 오신 것을 환영합니다</h1>
    <p>이것은 샘플 단락입니다.</p>
</body>
</html>
```

렌더링 결과:

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>샘플 페이지</title>
</head>
<body>
    <h1>Markdown에 오신 것을 환영합니다</h1>
    <p>이것은 샘플 단락입니다.</p>
</body>
</html>

CSS

markdown

```css
/* 반응형 레이아웃 예시 */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

@media (max-width: 768px) {
    .container {
        padding: 0 10px;
    }
}

.button {
    background-color: #007bff;
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 4px;
    cursor: pointer;
}

.button:hover {
    background-color: #0056b3;
}
```

렌더링 결과:

css

/* 반응형 레이아웃 예시 */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

@media (max-width: 768px) {
    .container {
        padding: 0 10px;
    }
}

.button {
    background-color: #007bff;
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 4px;
    cursor: pointer;
}

.button:hover {
    background-color: #0056b3;
}

Bash/Shell

markdown

```bash
#!/bin/bash

# 스크립트 예시: 파일 일괄 처리
for file in *.txt; do
    if [ -f "$file" ]; then
        echo "Processing $file"
        cp "$file" "backup_$file"
    fi
done

# 함수 정의
function check_dependencies() {
    command -v git >/dev/null 2>&1 || {
        echo "Git is required but not installed."
        exit 1
    }
}

check_dependencies
echo "All dependencies satisfied."
```

렌더링 결과:

bash

#!/bin/bash

# 스크립트 예시: 파일 일괄 처리
for file in *.txt; do
    if [ -f "$file" ]; then
        echo "Processing $file"
        cp "$file" "backup_$file"
    fi
done

# 함수 정의
function check_dependencies() {
    command -v git >/dev/null 2>&1 || {
        echo "Git is required but not installed."
        exit 1
    }
}

check_dependencies
echo "All dependencies satisfied."

JSON

markdown

```json
{
  "name": "markdown-tutorial",
  "version": "1.0.0",
  "description": "Markdown 한국어 튜토리얼",
  "main": "index.js",
  "scripts": {
    "dev": "vitepress dev docs",
    "build": "vitepress build docs",
    "preview": "vitepress preview docs"
  },
  "dependencies": {
    "vitepress": "^1.0.0"
  },
  "author": "Your Name",
  "license": "MIT"
}
```

렌더링 결과:

json

{
  "name": "markdown-tutorial",
  "version": "1.0.0",
  "description": "Markdown 한국어 튜토리얼",
  "main": "index.js",
  "scripts": {
    "dev": "vitepress dev docs",
    "build": "vitepress build docs",
    "preview": "vitepress preview docs"
  },
  "dependencies": {
    "vitepress": "^1.0.0"
  },
  "author": "Your Name",
  "license": "MIT"
}

고급 코드 블록 기능

줄 번호 표시

일부 Markdown 프로세서는 줄 번호 표시를 지원합니다:

markdown

```javascript {1}
// 이것은 첫 번째 줄입니다
function example() {
    console.log("Hello");
}
```

줄 강조

특정 줄을 강조합니다:

markdown

```javascript {2-3}
function example() {
    console.log("이 줄이 강조됩니다");  // 강조됨
    return true;               // 강조됨
}
```

파일명 표시

코드 파일명을 표시합니다:

markdown

```javascript title="app.js"
const express = require('express');
const app = express();

app.get('/', (req, res) => {
    res.send('Hello World!');
});
```

일반적인 오류 및 해결 방법

1. 백틱 개수 불일치

markdown

❌ 잘못된:
```javascript
function hello() {
    console.log("Hello");
}
``  ← 백틱 개수 불일치

✅ 올바른:
```javascript
function hello() {
    console.log("Hello");
}
```

2. 들여쓰기 불일치

markdown

❌ 잘못된: 들여쓰기 코드 블록
    첫 번째 줄 (4개 공백)
  두 번째 줄 (2개 공백)  ← 들여쓰기 불일치

✅ 올바른: 들여쓰기 코드 블록
    첫 번째 줄 (4개 공백)
    두 번째 줄 (4개 공백)

3. 잘못된 언어 이름

markdown

❌ 잘못된:
```js  ← javascript여야 함
function hello() {}
```

✅ 올바른:
```javascript
function hello() {}
```

지원되는 언어 목록

일반적인 언어 식별자:

언어	식별자	예시
JavaScript	`javascript`, `js`	`function(){}`
Python	`python`, `py`	`def function():`
Java	`java`	`public class{}`
C++	`cpp`, `c++`	`#include <iostream>`
C#	`csharp`, `cs`	`public class{}`
Go	`go`	`func main(){}`
Rust	`rust`, `rs`	`fn main(){}`
TypeScript	`typescript`, `ts`	`interface{}`
PHP	`php`	`<?php`
Ruby	`ruby`, `rb`	`def method`
SQL	`sql`	`SELECT * FROM`
HTML	`html`	`<div></div>`
CSS	`css`	`.class{}`
XML	`xml`	`<root></root>`
YAML	`yaml`, `yml`	`key: value`
Markdown	`markdown`, `md`	`# Title`
Bash	`bash`, `sh`	`#!/bin/bash`
PowerShell	`powershell`, `ps1`	`Get-Process`
Dockerfile	`dockerfile`	`FROM ubuntu`

모범 사례

1. 적절한 코드 형식 선택

markdown

✅ 권장: 짧은 코드에는 인라인 형식 사용
배열을 처리하려면 `Array.map()` 메서드를 사용하세요.

✅ 권장: 긴 코드에는 코드 블록 사용
function processArray(arr) {
    return arr.map(item => item * 2);
}

2. 적절한 주석 추가

markdown

✅ 권장: 설명 주석 포함
```javascript
// 배열 요소의 평균 계산
function calculateAverage(numbers) {
    const sum = numbers.reduce((acc, num) => acc + num, 0);
    return sum / numbers.length;
}
```

3. 올바른 언어 식별자 사용

markdown

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

❌ 권장하지 않음: 모호한 언어 식별자
```text
interface User {
    id: number;
    name: string;
}
```

4. 코드를 간결하게 유지

markdown

✅ 권장: 핵심 로직 표시
```javascript
// 사용자 인증
function authenticate(token) {
    return validateToken(token);
}
```

❌ 권장하지 않음: 너무 많은 관련 없는 세부사항
```javascript
// 이것은 관련 없는 세부사항이 많은 긴 코드입니다...
```

HTML 출력

Markdown 코드는 HTML로 변환됩니다:

markdown

`인라인 코드`

변환된 것:

html

<code>인라인 코드</code>

코드 블록:

markdown

```javascript
function hello() {}
```

변환된 것:

html

<pre><code class="language-javascript">
function hello() {}
</code></pre>

실제 예시

API 문서

markdown

## 사용자 로그인

`/api/login`에 POST 요청을 보냅니다:

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

샘플 응답:

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

설정 파일 예시

markdown

## 프로젝트 설정

`config.json` 파일을 생성합니다:

```json
{
  "database": {
    "host": "localhost",
    "port": 5432,
    "name": "myapp"
  },
  "server": {
    "port": 3000,
    "host": "0.0.0.0"
  }
}
```

`package.json` 스크립트 업데이트:

```json
{
  "scripts": {
    "start": "node server.js",
    "dev": "nodemon server.js",
    "test": "jest"
  }
}
```

설치 가이드

markdown

## 환경 설정

1. Node.js 설치:

```bash
# macOS (Homebrew 사용)
brew install node

# Ubuntu/Debian
sudo apt update
sudo apt install nodejs npm

# Windows (Chocolatey 사용)
choco install nodejs
```

2. 설치 확인:

```bash
node --version
npm --version
```

3. 프로젝트 초기화:

```bash
mkdir my-project
cd my-project
npm init -y
```

연습

다음을 만들어보세요:

다양한 프로그래밍 언어의 코드 예시 모음
요청 및 응답 코드가 있는 API 사용 튜토리얼
다양한 시스템의 명령줄 지침이 있는 설치 가이드
상세한 주석이 있는 설정 파일 템플릿

코드 문법 ​

인라인 코드 ​

기본 문법 ​

백틱이 포함된 코드 ​

여러 백틱 처리 ​

펜스 코드 블록 ​

프로그래밍 언어 지정 ​

일반적인 프로그래밍 언어 예시 ​

JavaScript ​

Python ​

HTML ​

CSS ​

Bash/Shell ​

JSON ​

고급 코드 블록 기능 ​

줄 번호 표시 ​

줄 강조 ​

파일명 표시 ​

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

1. 백틱 개수 불일치 ​

2. 들여쓰기 불일치 ​

3. 잘못된 언어 이름 ​

지원되는 언어 목록 ​

모범 사례 ​

1. 적절한 코드 형식 선택 ​

2. 적절한 주석 추가 ​

3. 올바른 언어 식별자 사용 ​

4. 코드를 간결하게 유지 ​

HTML 출력 ​

실제 예시 ​

API 문서 ​

설정 파일 예시 ​

설치 가이드 ​

관련 문법 ​

연습 ​

코드 문법

인라인 코드

기본 문법

백틱이 포함된 코드

여러 백틱 처리

펜스 코드 블록

프로그래밍 언어 지정

일반적인 프로그래밍 언어 예시

JavaScript

Python

HTML

CSS

Bash/Shell

JSON

고급 코드 블록 기능

줄 번호 표시

줄 강조

파일명 표시

일반적인 오류 및 해결 방법

1. 백틱 개수 불일치

2. 들여쓰기 불일치

3. 잘못된 언어 이름

지원되는 언어 목록

모범 사례

1. 적절한 코드 형식 선택

2. 적절한 주석 추가

3. 올바른 언어 식별자 사용

4. 코드를 간결하게 유지

HTML 출력

실제 예시

API 문서

설정 파일 예시

설치 가이드

관련 문법

연습