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

✅ 오늘의 학습

- Notion Cloning 과제 구현

 

---

 

📑 추가로 구현해본 내용

 

Document List에서 선택된 li를 ui로 표시

 

selected-document를 로컬스토리지에 생성하여 처리했다
{ id: documentId }

렌더링 시 현재 id와 selected-document에 담긴 아이디가 같다면,
class를 추가하여서 ui를 변경했다.

 

모듈화를 위한 리팩토링

로컬 스토리지를 사용한 경우 key를 상수로 빼놓고 사용할 때 불러와서 사용했다.
선택된 Document의 id 외에도 토글이 되어있는 Document list의 id가 담겨있는 open-list 또한
로컬스토리지에서 관리를 했기 때문에 두 개의 상수로 나누었고
localstorage에 id를 넣거나 빼는 부분 또한 폴더를 나누어 한 곳에서 관리 했다.

 

이외의 debounce나 클래스를 가진 엘리먼트를 생성하는 함수,

URL에서 documentID를 빼는 함수 등 분리를 하였다. 

 

😱 어려웠던 부분

 

contentEditable...

contentEditable...

contentEditable...

 

TIL에 꽤나 자주 등장했던 부분..

contentEditable의 경우 나와있는 정보들이 별로 없다보니

동작 방식 자체에 대한 이해가 떨어져서 원치않는 결과물을 보았을 때

해결 방안을 찾기가 너무 어려웠다. 😭

 

장황했던 에러 해결 과정 정리

 

1.

keydown형식으로 구현하려니 "# "이 작성됨과 동시에 변경되는 것이 아니라

한박자씩 느렸다. 나는 엔터를 치면 변경되는 게 아니라 작성됨과 동시에 변경되고 싶었다.

==> input으로 했다가 엔터를 감지해야 될 것 같아서  keyup으로 변경했다.

 

2.

"# " 입력 시 인지를 못하는 오류

text.indexOf(), startsWith()를 사용한 방식은 띄어쓰기 입력을 인지를 못하는건지 

if문을 걸었을 때 원하는 부분에서 캐치를 못했다.

/^#\s/.test(text)

==> 정규식으로 처리

 

3.

"# "으로 h1 태그로 변경하고 엔터키를 눌렀을 때 앞글자가 중복해서 나타나는 현상

예를들어 "안녕"을 입력하면 "ㅇ안녕"이 출력된다..

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

==> e.isComposing으로 처리

찾아보니 key !== "Enter" 조건문 안에서 한국어를 입력하고 엔터를 입력하면

이벤트가 두번 발생하는 문제가 있다고 한다.

 

참고 글

 

여담이지만, 들어갔다가 keypress와 keyCode는 이제 지원하지 않는다고 하는 것을 알았다ㅎ

 

 

4.

"# "을 눌렀을 때 text가 <h1>으로 감싸지기는 하지만

엔터를 쳤을 때 원래 텍스트로 돌아오지 않던 부분

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

==> 커서를 맨 뒤로 보냄으로써 해결

여기까지는 지난번 포스팅과 같다.

 

5.

커서를 맨 뒤로 보내니 빈 공백이 앞에 함께 출력되는 현상이 있었다.
공백을 지워보니 엔터 시에 커서가 이전 div에 붙어버린다.

 

selection.collapseToStart();

위 메소드를 사용하여 엔터 시 커서를 맨 앞으로 보내서

공백이 뒤로감으로써 가려버렸는데,
엔터 시 마크다운 태그가 그대로 이어져 나온다.. (처음과 같은..)

 

newTag.innerHTML = ""; // X
newTag.innerHTML = " "; // X

newTag.innerHTML = "<br>"; // O

==> <br>로 처리

난 <br>도 공백으로 처리될 줄 알았다.. 커서 위치를 바꿔보기도 하고 계산도 하고 등등..

많은 시행착오가 있었지만, 울며 겨자먹기로 아무거나 했다가 해결..

 

이 외에도 이것저것 keydown형식으로 바꿔보기도 하고, enter를 감지해보기도 하고

최종코드에는 e.key == "Enter"을 하지 않아도 됐다 ㅎ..

 

---

✍ 느낀 점

 

에디터의 소중함을 느꼈다..ㅎㅎ; 😜

유추할 수 없는 에러 부분이 있었지만 끝까지 하니 결국 해결이 되어서 내심 뿌듯했다.

과제를 수행하며 시간 안에 끝내야 한다는 촉박함도 느껴보고

어찌보면 간단한 과제지만 추가 기능이 어떤 게 좋을지,

어떤게 편하고 어떤게 불편할 지 혼자서 생각해보는 계기가 되었다.