[프로젝트] 딴짓추적표 | 트러블슈팅-Enter 이벤트 발생에 따른 요소 간 충돌문제

(진행배경) 메모를 추가하고 엔터 버튼을 누른 뒤 창을 새로고침하면, 메모 컨테이너 안에 있던 이미지가 아래 사진과 같이 밖으로 벗어나는 오류가 발생하였다.

 

[문제 - Enter 이벤트 발생에 따른 요소 간 충돌문제]

(문제 상황) 엔터를 치지 않았을 때는 해당 문제가 발생하지 않고, 엔터를 치고 웹을 재로드 하면 문제가 발생하는 것으로 보아 엔터 이벤트 발생과 관련된 오류인 것으로 추정되었다.

 

(문제 원인) 원인은 사용자가 내용을 편집할 때 'Enter' 키를 누르면 웹 브라우저는 내부적으로 <div> 태그를 삽입하여 줄 바꿈을 처리하는 문제였다. 메모를 기록하고 엔터를 치면 로컬스토리지에 해당 내용이 저장 되도록 소스 코드를 작성해 놨는데, 이 과정에서 이미지를 감싼 div가 p태그 내부에 새롭게 만들어지며 충돌오류를 일으킨 것이다.

 

로컬스토리지에는 아래와 같이 저장 된다:

// 엔터 없이 메모 저장
<p class="input-box" contenteditable="true">입력하고 새로고침했다<img src="images/delete.png"></p>

// 엔터와 함께 메모 저장
<p class="input-box" contenteditable="true">입력하고 엔터 후 새로고침했다<div><br><img src="images/delete.png"></div></p>

 

 

(해결 방법) 간단하게 p 태그를 div로 변경해주었다.

 

로컬스토리지는 아래와 같이 저장 된다:

// 엔터 없이 메모 저장
<div class="input-box" contenteditable="true">tag를 p에서 div로 바꾸고 새로고침했다<img src="images/delete.png"></div>

// 엔터와 함께 메모 저장
<div class="input-box" contenteditable="true">tag를 p에서 div로 바꾸고 엔터를 누르고 새로고침했다<div><br><img src="images/delete.png"></div></div>

 

이 결과 div 안에 새로운 div가 만들어지면서 레이아웃 오류를 일으키지 않았다.

 

 

(배운점)

1. 엔터키를 누르면 웹 브라우저는 내부적으로 <div>태그를 삽입한다는 사실을 새롭게 알게 되었다. 충돌을 방지하기 위해서는 특별한 이유가 없는 한 가능한 div로 통일하면 좋을 것 같다.
2.  contenteditalble 관련 배운점 :

• input 태그 사이에는 이미지를 넣을 수 없다
• p 태그 사이에는 이미지를 넣을 수 있다.
• p 태그와 div 태그의 속성을 contenteditable 하게 만들어 편집할 수 있다.