Markdown에서 JavaScript 사용하기
Markdown은 주로 텍스트 서식을 위한 마크업 언어이지만, JavaScript를 사용하여 Markdown 문서를 강화하고 상호 작용성과 동적 기능을 추가할 수 있습니다.
제한 사항 이해하기
표준 Markdown 파서는 JavaScript 코드를 실행하지 않습니다. 그러나 JavaScript를 Markdown과 통합하는 여러 방법이 있습니다:
- HTML Script 태그: HTML 블록에 JavaScript를 직접 포함
- Markdown 프로세서: JavaScript 실행을 지원하는 프로세서 사용
- 정적 사이트 생성기: 빌드 시 JavaScript 처리 활용
- 클라이언트 사이드 렌더링: Markdown이 HTML로 변환된 후 JavaScript 추가
기본 JavaScript 통합
인라인 스크립트 태그
HTML script 태그를 사용하여 Markdown에 JavaScript를 직접 삽입할 수 있습니다:
markdown
# 인터랙티브 문서
<script>
function greet() {
alert('Markdown에서 안녕하세요!');
}
</script>
<button onclick="greet()">클릭하세요</button>외부 스크립트
외부 JavaScript 파일 참조:
markdown
<script src="https://cdn.example.com/script.js"></script>
<div id="dynamic-content"></div>일반적인 사용 사례
1. 인터랙티브 양식
markdown
# 문의 양식
<form id="contactForm">
<input type="text" id="name" placeholder="이름">
<input type="email" id="email" placeholder="이메일">
<button type="submit">제출</button>
</form>
<script>
document.getElementById('contactForm').addEventListener('submit', function(e) {
e.preventDefault();
const name = document.getElementById('name').value;
alert('감사합니다, ' + name + '님!');
});
</script>2. 동적 콘텐츠 로딩
markdown
# 최신 게시물
<div id="posts-container"></div>
<script>
fetch('/api/posts')
.then(response => response.json())
.then(posts => {
const container = document.getElementById('posts-container');
posts.forEach(post => {
container.innerHTML += `<h3>${post.title}</h3><p>${post.excerpt}</p>`;
});
});
</script>3. 데이터 시각화
markdown
# 판매 차트
<canvas id="salesChart" width="400" height="200"></canvas>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
const ctx = document.getElementById('salesChart').getContext('2d');
new Chart(ctx, {
type: 'line',
data: {
labels: ['1월', '2월', '3월', '4월'],
datasets: [{
label: '판매량',
data: [12, 19, 3, 5]
}]
}
});
</script>보안 고려사항
XSS 보호
Markdown에서 JavaScript를 사용할 때는 항상 사용자 입력을 정화하세요:
javascript
// 나쁨: 직접 HTML 삽입
element.innerHTML = userInput;
// 좋음: textContent 사용 또는 정화
element.textContent = userInput;
// 또는
element.innerHTML = DOMPurify.sanitize(userInput);콘텐츠 보안 정책
스크립트 실행을 제한하기 위해 CSP 헤더를 구현하세요:
html
<meta http-equiv="Content-Security-Policy"
content="script-src 'self' https://trusted-cdn.com;">모범 사례
- JavaScript 분리: 가능하면 JavaScript를 외부 파일에 저장
- 점진적 향상: JavaScript 없이도 콘텐츠가 작동하도록 보장
- CDN 사용: 인기 있는 라이브러리는 CDN에서 로드하여 캐싱 개선
- 인라인 스크립트 최소화: 인라인 핸들러 대신 이벤트 위임 사용
- 종속성 문서화: 필요한 JavaScript 라이브러리를 명확히 명시
결론
Markdown 자체는 JavaScript를 실행하지 않지만, 이 두 기술을 효과적으로 결합하여 풍부한 인터랙티브 문서를 만들 수 있습니다. 사용 사례에 가장 적합한 방법을 선택하고, 항상 보안과 사용자 경험을 우선시하세요.