엔터가 반영 되지 않는 이슈 & 해결안
이슈
댓글 추가 기능을 구현하면서 다음과 같은 버그를 만났다.
분명히 textarea에 Enter를 작성하여 댓글을 등록하였다. 그런데…
실제로는 Enter, 즉 개행이 반영되지 않는 버그이다.
개행이 올바르게 반영되지 않고 하나의 공백으로 처리된다.
왜 그럴까?
문제 해결
해결안: CSS의 white-space 속성값을 pre-wrap으로 부여한다.
white-space는 요소 안에 공백 처리를 어떻게 할지 지정하는 속성이다. 기본값은 normal이다.
normal
연속 공백을 하나로 합침. 개행 문자도 다른 공백 문자와 동일하게 처리한다.
다음과 같은 결론을 내릴 수 있다.
- 개행 문자를 다른 공백 문자와 동일하게 처리하므로, 엔터가 반영되지 않았다.
- 연속 공백을 하나로 합치기 때문에, Enter를 여러 번 입력했음에도 하나의 공백이 되었다.
반면에 pre-wrap은 다음과 같다.
pre-wrap
연속 공백 유지. 줄 바꿈은 개행 문자와 <br> 요소에서 일어나며,
한 줄이 너무 길어서 넘칠 경우 자동으로 줄을 바꾼다.
이에 white-space: pre-wrap을 적용하게 되면…
댓글창에 Enter가 제대로 반영된 것을 볼 수 있다.
추가적으로, white-space: pre는 다음과 같다.
pre
연속 공백 유지. 줄 바꿈은 개행 문자와 <br> 요소에서만 일어난다.
pre-wrap과 유사하지만, 한 줄이 너무 길어서 넘칠 경우에도
개행 문자 또는 <br>이 없으면 줄바꿈이 되지 않는다.
그것은 내가 원하는 바가 아니므로 white-space: pre-wrap을 적용하였다.
참고자료
Mdn: white-space