Visualization (recommended): Component name and type
Step 4: Write Easy section (중학생 수준)
Structure (4-5 subsections with bold headers):
Opening statement with emoji (one sentence concept summary)
무슨 뜻이냐구요? or similar question header
Everyday analogy (서랍, 풍선, 신호등, 교실, etc.)
Explain technical terms in parentheses immediately
🤔 왜 문제가 되나요? or 💡 왜 좋은가요?
Why it matters with concrete example
🆚 다른 방법과 뭐가 다른가요? or similar comparison
Compare with alternative approaches
Additional insight (optional, if needed)
Writing principles:
Use emojis as supporting aids (🎈, 🏠, 📚, 💡, 🚫, ✅, 🎯, etc.)
Everyday object analogies are key
Absolutely NO code examples
Question-answer structure for engagement
Middle school level language
Example structure:
### Easy
🎈 var로 선언한 변수는 "위로 올라가는" 마법을 부립니다!
**무슨 뜻이냐구요?**
마치 교실에서 선생님이 수업 시작 전에 "오늘 우리가 사용할 단어들"을 칠판에 미리 적어두는 것과 같습니다.
**🤔 왜 문제가 되나요?**
예를 들어, 친구에게 편지를 쓰는데 "안녕, 철수야!"라고 쓴 뒤에...
**🆚 다른 방법과 뭐가 다른가요?**
let과 const는 "순서대로" 읽어야 하는 규칙이 있어서...
Step 5: Write Normal section (일반 개발자)
MUST follow this structure:
Start with #### Text
Alternate #### Text and #### Code: [Descriptive Title]
More Text than Code (explanation first, code confirms concept)
Text writing:
Use technical terms as-is (with brief explanations)
Focus on cause-effect relationships
Use subsections (핵심 포인트, 주의사항, etc.) with bold headers
Include bullet points for key takeaways
Code writing:
3-8 executable statements per Code block
Use ES6+ syntax (const, let, arrow functions, template literals)
Omit semicolons
2-space indentation
camelCase variable names
Include console.log for verification
Add comments only on key parts (< 20% of code)
Split complex logic into multiple Code blocks
Example structure:
### Normal#### Text
호이스팅(Hoisting)은 변수 선언이 스코프의 최상단으로 이동하는 JavaScript의 동작입니다.
**핵심 포인트**:
- 선언은 호이스팅되지만 할당은 안 됨
- undefined로 초기화됨
#### Code: 호이스팅 예시\`\`\`javascript
console.log(name) // undefined
var name = "Alice"
console.log(name) // "Alice"
\`\`\`#### Text
위 코드는 JavaScript 엔진이 다음과 같이 해석합니다:
#### Code: 엔진의 해석\`\`\`javascript
var name // 선언만 위로 이동
console.log(name) // undefined
name = "Alice" // 할당은 원래 위치
\`\`\`
Step 6: Write Expert section (전문가 20년+)
Required subsections:
#### ECMAScript Specification
#### Performance and Optimization
ECMAScript Specification subsection:
Quote ECMAScript specification with section numbers
### Expert#### ECMAScript Specification
ECMAScript 2015 (ES6) 명세 **13.3.2절 (Variable Statement)**에 따르면, var 선언은 `VariableDeclaration`으로 처리됩니다:
1.**Instantiation Phase**: FunctionDeclarationInstantiation 알고리즘 실행 시 모든 var 선언을 수집
2.**Initialization**: 변수 환경 레코드에 바인딩 생성, **undefined**로 초기화
명세 **8.1.1.1.6 (InitializeBinding)** 참조: 바인딩 초기화는 실행 컨텍스트 생성 시점에 발생합니다.
#### Performance and Optimization**V8 엔진 최적화**:
- Hidden Class 변경 최소화: var 호이스팅으로 인한 예측 불가능한 속성 추가는 Hidden Class를 무효화
- Inline Caching 실패: 변수 타입이 런타임에 변경되면 IC 최적화 무효화
**메모리 영향**:
- Function Scope 전체에 변수 바인딩 생성 → 불필요한 메모리 점유
- Block Scope (let/const) 대비 평균 15-20% 더 많은 메모리 사용 (V8 벤치마크)
Step 7: Add optional Code Snippet (if valuable)
When to include:
Concept can be demonstrated in 3-5 lines
Adds clarity beyond Normal section examples
Shows essence at a glance
Location: After Expert section, before Visualization
Format:
### Code Snippet#### Code: [Title Showing Only Essentials]\`\`\`javascript
var x = 1
var x = 2 // OK
let y = 1
let y = 2 // SyntaxError!
\`\`\`
<!--
CURRENT_AGENT: visualization-writer
STATUS: IN_PROGRESS
STARTED: 2025-10-18T10:00:00+09:00
UPDATED: 2025-10-18T10:45:00+09:00
HANDOFF LOG:
[START] pipeline | Content generation started | 2025-10-18T10:00:00+09:00
[DONE] overview-writer | Overview completed | 2025-10-18T10:15:00+09:00
[DONE] concepts-writer | Core concepts section completed | 2025-10-18T10:45:00+09:00
-->
# Overview
[Existing content...]
# Core Concepts## Concept: 호이스팅**ID**: var-hoisting
### Easy
🎈 var로 선언한 변수는 "위로 올라가는" 마법을 부립니다!
**무슨 뜻이냐구요?**
마치 교실에서 선생님이 수업 시작 전에 "오늘 우리가 사용할 단어들"을 칠판에 미리 적어두는 것과 같습니다. JavaScript도 코드를 실행하기 전에 "이 변수들이 있을 거야"라고 미리 준비해 둡니다.
**🤔 왜 문제가 되나요?**
예를 들어, 친구에게 편지를 쓰는데 "안녕, 철수야!"라고 쓴 뒤에 나중에 "철수는 내 친구야"라고 소개한다면 이상하지 않나요? var는 이런 일을 허용해서 헷갈리게 만듭니다.
**🆚 다른 방법과 뭐가 다른가요?**
let과 const는 "순서대로" 읽어야 하는 규칙이 있어서, 소개하기 전에는 사용할 수 없게 막아줍니다. 훨씬 안전하죠!
### Normal#### Text
호이스팅(Hoisting)은 변수 선언이 스코프의 최상단으로 이동하는 JavaScript의 동작입니다. var로 선언된 변수는 **선언부만** 호이스팅되고, 할당은 원래 위치에 남습니다.
**핵심 포인트**:
- 선언은 호이스팅되지만 할당은 안 됨
- undefined로 초기화됨
- 실행 컨텍스트 생성 단계에서 처리
#### Code: 호이스팅 예시\`\`\`javascript
console.log(name) // undefined (에러 아님!)
var name = "Alice"
console.log(name) // "Alice"
\`\`\`#### Text
위 코드는 JavaScript 엔진이 다음과 같이 해석합니다:
#### Code: 엔진의 해석\`\`\`javascript
var name // 선언만 위로 이동
console.log(name) // undefined
name = "Alice" // 할당은 원래 위치
console.log(name) // "Alice"
\`\`\`### Expert#### ECMAScript Specification
ECMAScript 2015 (ES6) 명세 **13.3.2절 (Variable Statement)**에 따르면, var 선언은 `VariableDeclaration`으로 처리됩니다:
1.**Instantiation Phase**: FunctionDeclarationInstantiation 알고리즘 실행 시 모든 var 선언을 수집
2.**Initialization**: 변수 환경 레코드에 바인딩 생성, **undefined**로 초기화
3.**Assignment**: 실행 단계에서 할당문 도달 시 값 할당
명세 **8.1.1.1.6 (InitializeBinding)** 참조: 바인딩 초기화는 실행 컨텍스트 생성 시점에 발생하며, 이것이 호이스팅의 근본 원인입니다.
#### Performance and Optimization**V8 엔진 최적화**:
- Hidden Class 변경 최소화: var 호이스팅으로 인한 예측 불가능한 속성 추가는 Hidden Class를 무효화
- Inline Caching 실패: 변수 타입이 런타임에 변경되면 IC 최적화 무효화
- TurboFan 최적화 방해: 호이스팅된 변수의 타입 추론 어려움
**메모리 영향**:
- Function Scope 전체에 변수 바인딩 생성 → 불필요한 메모리 점유
- Block Scope (let/const) 대비 평균 15-20% 더 많은 메모리 사용 (V8 벤치마크)
### Visualization- component: VarHoistingVisualization
- type: interactive
- data: {
showMemory: true,
showSteps: true,
interactive: true
}
## Concept: 함수 스코프**ID**: var-function-scope
[Similar structure with Easy/Normal/Expert sections...]
## Concept: 중복 선언 허용**ID**: var-redeclaration
[Similar structure with Easy/Normal/Expert sections...]
Example 2: Improvement Mode (Easy 섹션 개선)
Input:
<!--
CURRENT_AGENT: concepts-writer
STATUS: IN_PROGRESS
VALIDATION_SCORE: 88
IMPROVEMENT_NEEDED:
- concepts-writer: Rewrite Easy explanations with more everyday analogies (-7점)
- quiz-writer: Add more difficulty 1-2 questions (-5점)
-->
# Core Concepts## Concept: 호이스팅**ID**: var-hoisting
### Easy
호이스팅은 변수 선언이 위로 이동하는 것입니다.
[Minimal Easy content...]
Output:
<!--
CURRENT_AGENT: quiz-writer
STATUS: IN_PROGRESS
VALIDATION_SCORE: 88
IMPROVEMENT_NEEDED:
- quiz-writer: Add more difficulty 1-2 questions (-5점)
UPDATED: 2025-10-18T12:40:00+09:00
HANDOFF LOG:
[Previous entries...]
[IMPROVE] concepts-writer | Rewrote Easy explanations with more analogies | 2025-10-18T12:40:00+09:00
-->
# Core Concepts## Concept: 호이스팅**ID**: var-hoisting
### Easy
🎈 var로 선언한 변수는 "위로 올라가는" 마법을 부립니다!
**무슨 뜻이냐구요?**
마치 교실에서 선생님이 수업 시작 전에 "오늘 우리가 사용할 단어들"을 칠판에 미리 적어두는 것과 같습니다. JavaScript도 코드를 실행하기 전에 "이 변수들이 있을 거야"라고 미리 준비해 둡니다.
**🤔 왜 문제가 되나요?**
예를 들어, 친구에게 편지를 쓰는데 "안녕, 철수야!"라고 쓴 뒤에 나중에 "철수는 내 친구야"라고 소개한다면 이상하지 않나요? var는 이런 일을 허용해서 헷갈리게 만듭니다.
**🆚 다른 방법과 뭐가 다른가요?**
let과 const는 "순서대로" 읽어야 하는 규칙이 있어서, 소개하기 전에는 사용할 수 없게 막아줍니다. 훨씬 안전하죠!
[Rest of concept unchanged...]