#6 메모 내용 줄바꿈 처리하기

이번에는 메모 내용을 입력하면서 생긴 작은 문제를 수정했다.

문제는 textarea에서는 줄바꿈이 잘 입력되는데, 메모 목록에 출력하면 줄바꿈이 사라지는 것이었다.

예를 들어 메모 내용을 이렇게 입력했다.

첫 번째 줄
두 번째 줄
세 번째 줄

하지만 메모 카드에서는 다음처럼 한 줄로 보였다.

첫 번째 줄 두 번째 줄 세 번째 줄

처음에는 JavaScript에서 입력값을 잘못 가져오는 문제라고 생각했다.
하지만 확인해보니 입력값 자체가 사라진 것은 아니었다.

문제는 메모 내용을 출력하는 HTML 태그의 기본 동작에 있었다.

문제 원인

현재 메모 내용은 <p> 태그 안에 출력하고 있었다.

memoCard.innerHTML = `
    <h3>${memo.title}</h3>
    <p>${memo.content}</p>
    <button type="button">삭제</button>
`;

textarea에서는 엔터를 누르면 줄바꿈이 그대로 보인다.
하지만 그 값을 <p> 태그 안에 넣으면 브라우저는 줄바꿈을 그대로 보여주지 않는다.

예를 들어 HTML에 이렇게 작성해도,

<p>
첫 번째 줄
두 번째 줄
</p>

화면에서는 보통 다음처럼 보인다.

첫 번째 줄 두 번째 줄

일반 HTML 텍스트 요소는 여러 공백과 줄바꿈을 하나의 공백처럼 처리하기 때문이다.

즉, 이번 문제는 다음과 같이 정리할 수 있다.

textarea에서 줄바꿈이 사라진 것이 아니다.
JavaScript가 값을 잘못 가져온 것도 아니다.
p 태그가 기본적으로 줄바꿈을 그대로 보여주지 않는 것이다.

이번에는 <p> 태그를 그대로 사용하고, CSS에서 줄바꿈을 유지하도록 처리했다.

.memo-card p {
    white-space: pre-wrap;
}

white-space: pre-wrap;을 사용하면 사용자가 입력한 줄바꿈을 화면에 반영할 수 있다.

그래서 현재 구조는 그대로 유지했다.

memoCard.innerHTML = `
    <h3>${memo.title}</h3>
    <p>${memo.content}</p>
    <button type="button">삭제</button>
`;

대신 CSS에 다음 코드를 추가했다.

.memo-card p {
    white-space: pre-wrap;
}

이렇게 수정하니 textarea에서 입력한 줄바꿈이 메모 카드에서도 그대로 보였다.

다른 방법으로는 <pre> 태그를 사용할 수도 있다.

memoCard.innerHTML = `
    <h3>${memo.title}</h3>
    <pre>${memo.content}</pre>
    <button type="button">삭제</button>
`;

pre 태그는 기본적으로 줄바꿈과 공백을 유지한다.

다만 pre 태그는 일반 문단이라기보다는 코드나 서식이 있는 텍스트를 보여주는 느낌이 강하다.
메모장 본문에는 일반 문단처럼 보이는 <p> 태그를 유지하고, CSS로 줄바꿈만 처리하는 방식이 더 자연스럽다고 판단했다.