## React에서 상태 관리란?

**핵심 답변**: React 상태 관리는 컴포넌트의 데이터를 저장하고 업데이트하는 메커니즘입니다.

### 주요 방법

- **useState**: 함수형 컴포넌트의 로컬 상태
- **useReducer**: 복잡한 상태 로직
- **Context API**: 전역 상태 공유
- **Redux/Zustand**: 대규모 앱의 상태 관리 라이브러리

## 개발자 채용 시장 동향 (2025년)

[2025년 스택오버플로우 설문조사](출처링크)에 따르면:

- **백엔드 개발자 평균 연봉**: 9,500만원 (전년 대비 12% 상승)
- **가장 인기있는 언어**: TypeScript (67.2% 사용)
- **원격 근무 비율**: 82.3% (2024년 대비 5.1%p 증가)

_출처: Stack Overflow Developer Survey 2025, n=89,184_

## TypeScript를 사용해야 하는 이유

TypeScript는 JavaScript에 정적 타입을 추가한 슈퍼셋 언어입니다. 대규모 프로젝트에서 TypeScript를 사용하면 다음과 같은 이점이 있습니다.

### 1. 컴파일 타임 오류 감지

JavaScript는 런타임에서만 타입 오류를 발견할 수 있지만, TypeScript는 코드를 작성하는 순간 IDE에서 오류를 표시합니다. 예를 들어, 함수에 잘못된 타입의 인자를 전달하면 즉시 경고가 표시되어 배포 전에 문제를 해결할 수 있습니다.

### 2. 향상된 개발자 경험

자동 완성, 타입 힌트, 리팩토링 도구가 모두 타입 정보를 기반으로 작동하여 개발 속도가 크게 향상됩니다. 실제로 Airbnb의 사례 연구에 따르면 TypeScript 도입 후 버그가 38% 감소했습니다.

// astro.config.mjs에 추가
{
  userAgent: "PerplexityBot",
  allow: "/",
  crawlDelay: 1,
},
{
  userAgent: "ClaudeBot",
  allow: "/",
  crawlDelay: 1,
},
{
  userAgent: "Bard",
  allow: "/",
  crawlDelay: 1,
},
{
  userAgent: "Applebot-Extended",  // Apple Intelligence
  allow: "/",
  crawlDelay: 1,
},

<!-- BlogPost.astro에 추가 -->{
  faq && faq.length > 0 && (
    <script
      type="application/ld+json"
      set:html={JSON.stringify({
        "@context": "https://schema.org",
        "@type": "FAQPage",
        mainEntity: faq.map((item) => ({
          "@type": "Question",
          name: item.question,
          acceptedAnswer: {
            "@type": "Answer",
            text: item.answer,
          },
        })),
      })}
    />
  )
}

---
title: "React 완벽 가이드"
faq:
  - question: "React란 무엇인가요?"
    answer: "React는 사용자 인터페이스를 만들기 위한 JavaScript 라이브러리입니다."
  - question: "React를 배우는 데 얼마나 걸리나요?"
    answer: "기초는 1-2주, 실무 수준은 3-6개월 정도 소요됩니다."
---

<!-- 튜토리얼 포스트에 추가 -->{
  steps && steps.length > 0 && (
    <script
      type="application/ld+json"
      set:html={JSON.stringify({
        "@context": "https://schema.org",
        "@type": "HowTo",
        name: title,
        description: description,
        totalTime: totalTime || "PT30M",
        step: steps.map((step, index) => ({
          "@type": "HowToStep",
          position: index + 1,
          name: step.name,
          text: step.text,
          image: step.image || undefined,
        })),
      })}
    />
  )
}

---
title: "TypeScript 프로젝트 시작하기"
totalTime: "PT15M" # ISO 8601 형식 (15분)
steps:
  - name: "Node.js 설치"
    text: "Node.js 공식 사이트에서 LTS 버전을 다운로드합니다."
  - name: "TypeScript 설치"
    text: "터미널에서 'npm install -g typescript'를 실행합니다."
---

// BlogPost.astro의 Schema를 더 상세하게
{
  "@context": "https://schema.org",
  "@type": "Article",  // BlogPosting 대신 Article도 가능
  "headline": title,
  "description": description,
  "image": featured_image ? [featured_image] : undefined,  // 배열로
  "author": {
    "@type": "Person",
    "name": author || "김덕환",
    "url": "https://log8.kr",
    "sameAs": [  // 소셜 프로필 추가
      "https://github.com/your-username",
      "https://twitter.com/your-username"
    ]
  },
  "publisher": {
    "@type": "Organization",
    "name": "김덕환의 WebSite",
    "url": "https://log8.kr",
    "logo": {
      "@type": "ImageObject",
      "url": "https://log8.kr/favicon.svg",
    }
  },
  "datePublished": created_date?.toISOString(),
  "dateModified": updated_date?.toISOString() || created_date?.toISOString(),
  "mainEntityOfPage": {
    "@type": "WebPage",
    "@id": `https://log8.kr/blog/${postSlug}`,
  },
  "keywords": safeTags.join(", "),  // 배열을 문자열로
  "articleSection": safeTags[0],  // 주요 카테고리
  "inLanguage": "ko-KR",
  "url": `https://log8.kr/blog/${postSlug}`,
  "wordCount": wordCount,  // 추가하면 좋음
  "speakable": {  // 음성 검색 최적화
    "@type": "SpeakableSpecification",
    "cssSelector": [".prose h1", ".prose h2", ".prose p:first-of-type"]
  }
}

<!-- BaseHead.astro에 추가 --><!-- AI 요약을 위한 메타 태그 -->
<meta name="abstract" content={description?.substring(0, 150)} />
<meta name="topic" content={keywords?.[0]} />

<!-- 콘텐츠 유형 명시 -->
<meta property="article:tag" content={keywords?.join(", ")} />
<meta property="article:section" content={keywords?.[0]} />

<!-- AI가 이해하기 쉬운 구조 -->
<meta name="content-type" content="article" />
<meta name="audience" content="개발자, 프로그래머" />

## React Hooks가 뭔가요?

React는 2013년 Facebook이 만든 라이브러리입니다.
처음에는 클래스 컴포넌트만 있었는데요...
[긴 역사 설명...]

그래서 Hooks는 함수형 컴포넌트에서 상태를 사용할 수 있게 해주는 기능입니다.

## React Hooks가 뭔가요?

**React Hooks는 함수형 컴포넌트에서 상태(state)와 생명주기(lifecycle)를 사용할 수 있게 해주는 기능입니다.**

### 주요 Hooks

- **useState**: 상태 관리
- **useEffect**: 사이드 이펙트 처리
- **useContext**: 전역 상태 접근

### 역사적 배경

React는 2013년 Facebook이 만든 라이브러리로...
[상세 설명은 뒤로]

## 자주 묻는 질문 (FAQ)

### Q1. TypeScript는 JavaScript를 대체하나요?

아니요, TypeScript는 JavaScript의 슈퍼셋으로 JavaScript에 타입을 추가한 것입니다. 최종적으로는 JavaScript로 컴파일됩니다.

### Q2. TypeScript를 배우기 전에 JavaScript를 완벽히 알아야 하나요?

JavaScript 기초(변수, 함수, 객체, 배열)만 알면 TypeScript를 시작할 수 있습니다.

### Q3. TypeScript의 단점은 무엇인가요?

초기 학습 곡선, 빌드 설정의 복잡성, 작은 프로젝트에서는 오버헤드가 있을 수 있습니다.

## 2025년 개발자 트렌드

[Stack Overflow Developer Survey 2025](링크)에 따르면:

- **가장 사랑받는 언어**: Rust (87.3%)
- **가장 많이 사용되는 언어**: JavaScript (65.4%)
- **평균 연봉**: $120,000 (미국 기준)

_출처: Stack Overflow Developer Survey 2025, 응답자 89,184명_

| 언어       | 난이도 | 평균 연봉 | 인기도     |
| ---------- | ------ | --------- | ---------- |
| Python     | 쉬움   | $110K     | ⭐⭐⭐⭐⭐ |
| JavaScript | 쉬움   | $105K     | ⭐⭐⭐⭐⭐ |
| Rust       | 어려움 | $150K     | ⭐⭐⭐     |

### React 프로젝트 시작 전 체크리스트

- [ ] Node.js 설치 (v18 이상)
- [ ] VSCode 설치
- [ ] Git 설정
- [ ] npm/yarn 선택
- [ ] ESLint + Prettier 설정

### TypeScript 프로젝트 시작하기

**Step 1**: Node.js 설치

- 공식 사이트에서 LTS 버전 다운로드
- 터미널에서 `node -v`로 확인

**Step 2**: TypeScript 설치

```bash
npm install -g typescript
```

### 5. 명확한 제목과 부제목

AI는 헤딩(H1, H2, H3)을 중요하게 봅니다.

❌ **나쁜 예**:
```markdown
# 블로그 글
## 이것저것
### 뭔가 재미있는 것

# React Hooks 완벽 가이드: useState부터 useEffect까지

## useState란 무엇인가?

### useState의 기본 사용법

### useState 주의사항

## useEffect 완벽 정복

### useEffect의 동작 원리

### 의존성 배열 이해하기

ChatGPT에 질문: "React Hooks가 뭔가요?"
→ 답변에 "log8.kr" 또는 "김덕환" 언급 여부 확인

Perplexity에 질문: "TypeScript 시작하는 방법"
→ 출처(citation)에 사이트 포함 여부 확인

Claude에 질문: "Astro 블로그 만들기"
→ 답변에 콘텐츠 인용 여부 확인