JavaScript / document.writeln()의 줄바꿈 동작과 대체 방법
document.writeln()은 문서 스트림에 문자열을 쓰고 끝에 줄바꿈 문자를 하나 더하는 오래된 메서드입니다. HTML 화면에서는 공백이 합쳐지므로 줄이 바뀌어 보이지 않을 수 있습니다. 새 코드에서는 문서 스트림 대신 DOM 요소의 textContent로 필요한 위치에 내용을 표시하는 편이 안전합니다.
write()와 writeln()의 차이
document.write()는 전달한 내용을 그대로 쓰고, document.writeln()은 끝에 줄바꿈 문자를 덧붙입니다. 둘 다 입력을 HTML로 해석하며 페이지를 파싱하는 중에 작동합니다. 따라서 사용자 입력을 그대로 넣으면 의도하지 않은 HTML이나 스크립트가 삽입될 수 있습니다.
document.write('첫 줄'); // 줄바꿈을 덧붙이지 않음
document.writeln('둘째 줄'); // 끝에 줄바꿈 문자 추가HTML의 일반 요소는 연속 공백과 줄바꿈을 한 칸 공백처럼 표시합니다. 실제 줄바꿈 문자를 확인하려면 <pre>처럼 공백을 보존하는 요소를 사용하세요. MDN의 document.writeln() 문서는 이 API를 새 프로젝트에서 사용하지 말 것을 권합니다.
기존 코드의 출력 방식 확인하기
아래 파일을 writeln-legacy.html로 저장해 브라우저에서 엽니다. 첫 문단은 두 문자열 사이가 공백처럼 보이고, pre 안에서는 두 줄로 보입니다. 이 코드는 기존 동작을 이해하기 위한 예제이며 사용자 입력을 넣거나 로드가 끝난 뒤 호출하는 방식으로 확장하지 마세요.
<!doctype html>
<html lang="ko">
<head><meta charset="utf-8"><title>writeln 비교</title></head>
<body>
<p>일반 요소: <script>document.writeln('첫 줄'); document.writeln('둘째 줄');</script></p>
<pre id="old-result"><script>document.writeln('첫 줄'); document.writeln('둘째 줄');</script></pre>
</body>
</html>로드 완료 후 document.writeln()을 호출하면 상황에 따라 기존 문서가 지워질 수 있습니다. 동적으로 화면을 갱신할 때 이 메서드를 사용하지 않는 중요한 이유입니다. MDN의 document.write() 문서에도 문서 파서와 보안에 관한 제한이 설명되어 있습니다.
대체 예제: 지정한 위치에 두 줄 표시하기
다음 코드를 text-content-lines.html로 저장해 엽니다. 버튼을 누르면 배열을 줄바꿈 문자로 연결한 뒤 pre 요소에 textContent로 넣습니다. 페이지의 다른 내용은 유지되고, 지우기 버튼으로 결과만 비울 수 있습니다.
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>문서에 줄바꿈 텍스트 표시하기</title>
</head>
<body>
<button id="show" type="button">두 줄 표시</button>
<button id="clear" type="button">지우기</button>
<pre id="result" aria-live="polite"></pre>
<script>
const lines = ['첫 줄', '둘째 줄'];
const result = document.querySelector('#result');
document.querySelector('#show').addEventListener('click', () => {
result.textContent = lines.join('\n');
});
document.querySelector('#clear').addEventListener('click', () => {
result.textContent = '';
});
</script>
</body>
</html>“두 줄 표시”를 누르면 “첫 줄”과 “둘째 줄”이 각각 다른 줄에 나타납니다. textContent는 넣은 문자열을 HTML로 해석하지 않으므로 일반 텍스트 출력에 적합합니다. HTML 요소를 만들어야 한다면 createElement()와 append()처럼 DOM 메서드로 필요한 노드만 구성하세요.
