Q 어떤 문제가 있었는지
미니 프로젝트에서 방명록의 CRUD를 구현 후 테스트 할 때 엔터로 구분하여 두 줄 이상 글을 작성하고 등록, 수정 시 한 줄로 보이는 문제가 발생했다.
방명록을 보여줄 때 내용이 작성된 부분은 <p> 태그로 되어 있다가 수정을 누르면 <textarea> 태그로 변경되고 그 안에서 글을 수정할 수 있게 구현되어 있는 상태였다.
다음 이미지는 수정 버튼을 눌러 <textarea> 태그 내 글을 작성했을 때이다.
위와 같이 엔터를 쳐서 두 줄로 만든 후 수정 버튼을 클릭하면 글은 정상 수정되지만 한 줄로 나오게 된다.
Q 내가 시도해본 것들
- <pre>태그를 사용해서 작성한 내용이 들어있는 태그를 감싸서 줄바꿈이 그대로 적용되도록 했지만 수정을 할 때 <textarea> 태그로 변경되면서 줄 바꿈이 사라졌다. (innerText의 값을 사용)
- innerText의 값을 사용해서 줄 바꿈이 적용되지 않는 것 같아 innerHTML로 <br> 태그까지 전부 임시 변수에 기록 되도록 했더니 이번엔 태그 전체가 <textarea> 태그 내 그대로 드러났다.
- 글을 보여줄 때는 <pre> 태그를 사용하고 수정할 때는 <div> 태그의 contentEditable 속성을 지정해서 <textarea>처럼 사용할 수 있게 했더니 다음과 같은 현상이 발생했다.
- 처음에는 두 줄인 상태 → 수정 버튼을 누름 → 두 줄이 그대로 유지 → 작성을 취소 → 다시 수정 버튼을 누름 → 한줄로 이어져서 나옴
Q 어떻게 해결했는지
- DOM load 후 데이터를 태그에 넣어 출력할 때 내용을 넣는 태그로 <pre> 태그를 사용한다.
- 글 수정 시 입력을 받기 위해 사용하던 <textarea> 태그 대신 <div> 태그를 사용하고 contentEditable 속성을 사용한다.
- 수정된 내용을 등록할 때 이벤트 타겟의 부모의 마지막 노드의 value를 사용하는 대신 innerText를 사용했다.
- 사용자가 수정 글 작성 중 취소할 때 동적으로 <pre> 태그를 생성해서 이전 내용을 담는데 이 때 <pre> 태그의 innerHTML의 값으로 담아야 한다.
Q 뭘 새롭게 알았는지
- <div> 태그를 <textarea>처럼 사용할 수 있다.
- innerText에 담긴 엔터 값은 HTML 내 다시 표현할 때 innerHTML에 값을 넣고 그 값은 HTML 내에서 <br> 태그가 된다.