프로그래머스 데브코스 TIL - 과제 보충

 

 

🙌 주말 동안 구현한 과제 내용

 

📌 보너스 요구사항

✅ 편집기 최하단에 현재 편집 중인 Document의 하위 Document 링크 렌더링

 

📌 요구사항은 아니지만 추가한 내용들

✅ 토글을 열고 추가/삭제 버튼 클릭 시 토글이 닫히는 부분 해결하기

처음에는 낙관적 업데이트 방식을 사용하여 document 추가 시

자동적으로 toggle을 감지하는 isOpne값을 true로 설정하고
해당 document 컴포넌트에 setState를 사용하여 state값만 추가하는 방식을 적용해보기로 했었다.

 

실패..

map을 사용해서 document를 반복적으로 생성하는 로직이기 때문에

render를하게되면 하위 컴포넌트들이 새로 그려진다는 것을 간과했다.

 

또한 낙관적 업데이트 이후 서버 업데이트를 하지 않았기 때문에

새로 추가된 document에 또 추가버튼을 누르면 에러가 생긴다.

 

그렇다면 다른 방법은?

localstrorage방식으로 구현을 해보기로 했고 원하는 기능을 완성시킬 수 있었다.

코드가 조금 보기 어려운 것 같아서 조금 더 다듬어야 할 듯 하다.

 

 

✅ 삭제된 document 접근 시 처리

삭제된 document에 접근 시 "/" 로 보내버렸다 .. ㅎ

또한 이것을 구현하면서 선택된 document에 머물러 있을 때

해당 document를 삭제하면 적용이 안되는 부분을 발견했었는데

삭제 시 해당 document의 id와 현재 url의 document id를 비교하여 같으면 삭제하게 처리했다.

 

✅ document 개수가 0개가 될 경우 처리

이건 간단하게 document를 출력하는 엘리먼트의 innerHTML에서 조건문으로 처리했다.

 

✅ document title이 null일 경우 documentList에서 "제목 없음"으로 출력하기

이것 또한 출력하는 element의 innerHTML과 placeholder로 처리했다.

 

✅ editor에서 제목 변경 시 documentList에서도 제목 실시간으로 변경

각각 최하단의 컴포넌트들이라 이벤트를 감지하여 상위로 전달하는 절차가 긴 것 같아서

일단은 custom event로 구현을 했다. 하지만 더 나은 방법이 있지 않을까 싶다.

 

✅ SPA 뒤로가기 구현

강의 내용대로 간단하게 구현했다.

 

⛔ 서버에 저장이 제대로 안되었을 경우 로컬스토리지의 값을 꺼내오게 하기

==> 구현은 했지만 테스트가 좀 더 필요할 듯 하다.

 

✅ 하위메뉴 5개 이상 추가 금지 처리

우선순위는 아니였지만 list가 중첩되면서 padding값이 늘어나야 하는 부분 때문에 함께 구현했다.

각 컴포넌트에 depth 값을 추가해서 하위 컴포넌트들에게 depth값을 전달해주어

depth값이 5가 넘으면 추가 버튼이 보이지 않게 처리했다.

padding값 또한 style을 사용하여 해당 li에 추가하였다.

 

 

이 외에도 자잘자잘 여러개 수정 했던 듯 하다.

그리고 CSS 조금..

 

이제 남은 것!

📌 보너스 요구사항인 contentEditable을 사용한 rich한 Editor를 만들기 (가장 오래 걸릴 것 같다..)

📌 CSS구현 (애니메이션도 추가하고 싶은데 시간이 될 지 모르겠다...)

📌 전체적인 코드 리팩토링 + 테스트

📌 하다가 추가될 예정..ㅎ

 

---

✍ 느낀 점

 

전체적으로 코드가 조금 보기 불편한 것 같고, 데이터를 처리하는 구조 또한

일관성이 안 맞는 것 같기도 해서 리팩토링에 꽤나 시간이 걸릴 것 같은데 최대한 해보고 싶다.

중간에 욕심이 생겨서 이것저것 테스트도 해보고 과하게 시간을 낭비한 부분들이 있기는 하지만

그 시간들이 나중에 도움이 될 것이라고 믿는다..ㅎ

시간이 3일 밖에 안 남은지라 월요일에는 어느 정도 마무리를 할 수 있길 바란다.. 내 자신 화이팅!!🔥🔥