프로그래머스 데브코스 TIL - Day 21

 

✅ 오늘의 학습

- Notion cloning 과제 구현

 

---

 

1. contentEditable

이전에 먼저 접해보다가 시간이 걸릴 것 같아서 다른 요구사항 먼저 처리를 하고

이제서야 다시 접하게 되었는데 꽤나 시간이 걸린 부분이다. 정말.. 여러 에러사항들이 있었다..

 

📌 문제 상황 1

contentEditable에서 엔터를 누르면 div가 자동 생성되고 해당 div안에 텍스트가 들어가게 된다.
마크다운 형태의 에디터를 구현하기 위해 # 입력 시 div안에 h1태그를 추가하는 식으로 구현했다.
하지만 h1태그로 변경되는 것은 확인되었지만 엔터(개행) 시 원래의 텍스트 크기로

돌아오지 않고 이전에 변경한 상태 그대로 아래처럼 추가가 되는 상황이 발생했다.

<div><h1> text </h1></div>
<div><h1> text </h1></div>
<div><h1> text </h1></div>

 

 

✅ 문제 해결

바로 반응할 수 있게 keydown으로 이벤트를 받던 것을  keyup으로 변경하고

selection의 메소드들을 사용하여 처리했다.

const newTag = EditorShortcut(text);
  if (parentNode.nodeName === "DIV") {
    if (newTag) {
      e.preventDefault();

      parentNode.innerHTML = "";
      parentNode.appendChild(newTag);

      selection.selectAllChildren(newTag);
      selection.collapseToEnd();
    }
  }

 

새로운 태그를 추가하여 부모의 innerHTML을 지우고 생성한 태그를 추가했다.

지정된 노드의 모든 자식을 select에 추가하고

collapseToEnd()를 사용하여 커서를 맨 뒤로 보내버리니 처리가 되었다.

 

 

📌 문제 상황 2

contenteditable에서  keydown 이벤트 적용 시
event.key값을 사용하여 enter키가 입력되었을 때
해당 innerHTML을 불러와서 서버에 넘겨주는 작업을 하려고 했는데
한글 입력 후 엔터 발생 시 event가 중복되어 호출된다.

 

✅ 문제 해결

event.isComposing메소드를 활용하여 중복으로 이벤트가 발생되지 않게 처리하였다.

if (e.isComposing) {
    onEditing(nextState);
    return;
  }

 

 

😱 아직 해결하지 못한 것

태그 안의 내부를 모두 지워버리면 커서가 인지를 못해서 <br>을 넣어주었는데

마크 다운 기능을 사용할 경우 변경된 태그 내부에서 띄어쓰기가 발생한다.

==> 다시 생각해보고 수정해볼 예정이다.

 

 

---

2. document 클릭 시 Editor에서 하위 documents 렌더링

이전에 구현 했었는데 최종적으로 확인을 해보니 약간의 오류가 있었다.

 

📌 문제 상황/해결 

Editor의 contentEditable 내부에 documents들을 추가해 놓아서 커서가 잡혔다.

documents가 담긴 div의 속성에 contentEditable = false 설정을 해주고

부모가 true이면 자식들도 전부 true가 되는 모양이다.

 

📌 문제 상황/해결

구현하다보니 Editor의 innerHTML자체를 서버로 보내게 되는데

Editor 내부에 documents들이 있다보니 함께 정보가 전송되었다. 당연한 결과였다;

 

요구사항이 "편집기 최하단에는 현재 편집 중인 Document의 하위 Document 링크를 렌더링"이였고

Editor와 childDocuments들을 분리하여 처리했다.

 

---

✍ 느낀 점

 

오늘 CSS를 거의 마무리 하고 남아 있던 보너스 요구사항들을 하나씩 처리했다.

구현하다가 막혀서 검색하는 과정에서 새로운 것들을 알게 되었는데

과제가 급하기 때문에 깊게 살펴보지 못했던 점이 아쉬웠다. ㅠㅠ

구현은 되었지만 안정적으로 동작하지는 않는 것 같아서 전체 완료 후 다시 체크해 보려 하는데

시간이 될 지는 잘 모르겠다. 일단은 조금 미흡하더라도 보너스 요구사항들을 처리하고

이후에 피드백을 받은 후 다시 다듬고 추가해야겠다!!