5일 차

yoon Y·2021년 9월 13일
0

[o] 자동 저장 이벤트 지연
[o] 제목 변화 시에만 페이지 목록 업데이트
[o] 트리 목록 만들기
[o] 트리 목록 스타일
[o] 토글 구현

  • 굳이 문서가 없을 때 시작페이지를 보여주지 않아도 됐다. 그냥 new페이지 보여줬으면 됐음
    ⇒ 이것때매 여러경우를 생각해야했어서 시간을 잡아먹었다
    ⇒ 불러올 리스트가 없을 때 자동으로 시작 페이지를 생성하는게 더 간편한 방법이었다.

  • 커밋을 몰아서 하는 것 고치기..

  • 목록을 url이 변경될 때마다 전체 목록을 불러와 화면에 그리도록 했는데 목록의 변화가 없을 때도 불러지기 때문에 콜백함수를 이용해 변경이 됐을 때만 바뀌게 해주었다. *자식 컴포넌트끼리는 절대 직접적으로 상호작용하면 안된다.

  • 같은 url일 때 새로운 데이터가 안 넘어온다.
    ⇒ 같은 url일 시 새로 데이터를 불러오도록 하지 않았기 때문이었다. 다른 url로 이동 시, 일단 state.id를 같게 만든 후 this.state에 불러온 데이터를 받아서 id가 같은 경우는 그냥 받아온 데이터로 화면만 바꿔주도록 했기 때문이었다.
    (데이터 자체가 없기 때문에 불러와야만 화면에 그릴 수 있다.)
    ⇒ 이미 url이 같은 상태에서 내용만 수정될 경우 수정된 데이터가 전체 데이터에 업데이트되긴 하지만 같은 id라 데이터를 불러 올 수 없다, 수정된 내용 자체로 state를 바꿔줘야 한다.
    (수정하려는 데이터가 이미 저장된 데이터랑 같기 때문에 상관 없다.)

  • 꼭 모든 데이터를 서버에서 가져올 필요는 없다. 서버에 저장된, 하려는 데이터가 있으면 그걸로 화면 그려주면 됨(그게 성능에 더 좋음)

  • 서버에서 가져오는 것이 빈번하면 안된다

  • 서버와 state를 꼭 동일 시 하지 않아도 된다, 서버 데이터는 나중에 불러올 때를 위한 것

  • 트리구조 리스트 구현

    • 재귀 함수 이용해 자식 리스트까지 렌더링 함.
    • ul에 padding-left를 주면 단계적으로 나열된다.

이로써 기본 기능은 전부 구현 했다.
계속 해서 기능을 추가하고 수정해나가려고 한다.

보너스 요구사항

  • 기본적으로 편집기는 textarea 기반으로 단순한 텍스트 편집기로 시작하되, 여력이 되면 div와 contentEditable을 조합해서
    좀 더 Rich한 에디터를 만들어봅니다.
  • 편집기 최하단에는 현재 편집 중인 Document의 하위 Document 링크를 렌더링하도록 추가합니다.
  • 편집기 내에서 다른 Document name을 적은 경우, 자동으로 해당 Document의 편집 페이지로 이동하는 링크를 거는 기능을 추가합니다.

추가 구현할 사항

  • 로컬 스토리지 적용
  • css개선
  • 코드 리팩토링
profile
#프론트엔드

0개의 댓글