배포

노션 클로닝 바로가기

🍡 최초 state 형태

원래는 App.js에서 state를 다 받아와 자식 컴포넌트들에게 쏴주는 형태로 가려고 했는데, state를 조합해서 어떻게 내려줘야 할 지 감이 잘 안잡혔다.

• listPage와 editPage로 분리
  따라서 listPage와 editPage로 분리해 그 밑에 컴포넌트들에게
  데이터를 뿌려주는 형식으로 바꿨다.
  이렇게 하면 어차피 받아올 데이터들이 다르기 때문에 각 역할에 따라 분리되었다.

• pushUrl로 전체 컴포넌트 렌더링 관리
  

이 방식 깔끔하고 좋은 둡 ㅎㅎ

이 방식이 깔끔하고 좋다 생각했으나, 받아온 데이터를 활용해야 할 때
애초에 각 컴포넌트가 받는 데이터들을 따로 관리해줘야 하기 때문에
프로젝트 규모가 더 커질 수록 복잡해질 것 같았다.
또 데이터가 하나로 모여있지 않기 때문에
한 컴포에서 다른 컴포로 데이터를 전달하기 위한 방법을 고안하는 것이 어려웠다.
기존의 state를 위와같이 다시 하나의 state로 관리하기 위해선 받아온 데이터들을 합치는 과정이 필요한데 너무 어렵다 ㅜㅜ

🍡 list-page

📄 DocList

this.render

• list를 재귀형태로 렌더
• storage에 있는 active key와 toggle key로 렌더할 때 클래스를 토글함.

setState

• state를 변경시킴
• 렌더함수를 실행함
• scroll을 고정함.

클릭 이벤트

• 이벤트 위임 활용
• add-button: addDoc 함수를 실행하고 토글을 펼침
• delete-button: deleteDoc 함수를 실행하고 토글을 삭제
• list-item 클릭
  - 스토리지에 toggle, active 키 저장
• pushUrl 호출 최소화
  • 같은 list-item 클릭시 this.render만 실행
  • 다를 경우 pushUrl 호출

📄 DocListPage

fetchDocs

setState

• fetch를 받아와 state를 변경
• state 값이 유효하면 docList에게 전달
• docListPage가 왼쪽에 정렬되어야 하므로 insertBefore 활용

📄 DocList와 AddRootDocButton 호출

• DocList
  • addDoc
  • DeleteDoc: 문서 삭제 후 root로 돌아오기 위해 pushUrl 사용
    • 두번째 인자 false로 editPage 렌더 안함
• AddRootDocButton
  • DocList와 별개로 분리하고자 컴포넌트로 만듦.

👾 list-page 구현 & 오류

1. 두개의 컴포넌트 ListPage, EditPage 중
   ListPage가 App이 실행되면 바로 render 돼야 하는데
   왜 EditPage가 먼저 렌더링되는지 모르겠다...

1차: css로 direction을 바꿔주었다. (꼼수)
원인: ListPage의 렌더 함수를 호출하면 appendChild로 부모의 마지막에 append되도록 해 놓았었다.
렌더할 때 ListPage가 항상 첫번째 자식으로 렌더링 되게 insertBefore를 걸어줌!

2. class로 리스트를 토글해 자식 ui를 보였다 안보였다 할 수 있는데,
   새로고침하면 날아간다.
   상태를 저장해 접은 상태가 유지될 수 있도록 바꿔야 되는데 아직 방법을 모르겠다 ㅜ

클릭된 li의 id를 스토리지에 저장 후 li를 렌더할 때 id값이 스토리지에 있으면 토글되었다는 뜻이므로 toggled 클래스를 넣어준다.
한번 더 누르면 스토리지 키를 없애주고 이후 렌더를 돌렸을 때 키 체크 후 없으면 toggled 클래스를 삭제한다.
이러면 새로고침을 하더라도 토글된 상태가 유지된다.

3. 컴포넌트 분리하는 법을 잘 모르겠다.
   많이 만들어보고 연습하면 숙달할 수 있을 것 같은데,
   가장 작은 단위부터 만들고 비슷한 것끼리 모아서 점점 구조화해서
   복잡하게 연결시키는 게 아직 미숙하다고 느낀다.

팀원들과 매일매일 모르는 부분들을 공유해가며 배우니
컴포넌트를 어떤 방식으로 구조화해야 할지 감이 조금 잡히는 것 같다.
(1) 가장 최상위 컴포넌트에서 state를 쏴주는 방식도 있고,
(2) 각 컴포마다 state를 관리해주는 방식도 있다.
지금은 가장 최상위 컴포에서 쏴주는 방식이 state 관리 측면에서 효율적이라 느낀다. (하지만 어렵다)

4. 삭제 API 사용 후 새로고침하면 현재 url이 삭제된 리스트의 id로 되어있기 때문에 fetch 실패가 뜬다.
   삭제 후 pushState로 경로를 바꿔주면 새로고침했을 때 괜찮아지려나?

굳 👍

5. 리스트를 클릭하면 actived가 유지되도록 구현은 했는데
   뒤로가기를 눌렀을 때 actived 상태가 이전으로 가는 것은 구현하지 못했다.

1. onpopstate 이벤트에서 현재 url의 id값을 딴다.
2. 기존 스토리지의 active-key 값을 id로 바꿔준다.
3. this.route를 실행하면 url에 맞춰 각 컴포넌트를 다시 렌더한다.

6. list-page에서 render가 되더라도 현재 positon을 기억할 것 (위로 올라가지 않을 것)

역시 사람은 잔꾀가 많아야 한다.
맨 처음엔 클릭 이벤트가 발생할 때마다 list-page가 렌더되니까
클릭 이벤트 내부의 분기된 함수들 각각에게 moveToOffset 함수를 만들어
걸어주려는 무식한 생각을 했다.
생각해보니까 어차피 클릭 이벤트가 발생할 때마다 render 함수가 실행되니까
render 함수 내부에서 해결하면 되네?
클릭된 요소에 scrollIntoView 함수를 걸어줄 꺼니까 render 함수에서 DOM 요소 선택해야지 ㅎㅎ
👉🏻 실패
list가 재귀로 돌면서 렌더되기 전에 DOM 요소를 선택하려 해서 null 값이 리턴됨.
👉🏻 해결
render 함수는 setState 호출될 때만 실행되니까
setState 내부에서 render를 await 하고 그 다음에 선택하면 되겠다! 👏👏👏

또르르...
익숙해지면 오류 수정 단계가 많이 줄어들겠지?...

🍡 edit-page

📄 Editor

setState & this.render

• this.render에는 최초 렌더링 초기화만 함.
• setState에서 state를 변경 후 editor 화면에 뿌려줌.
  • App에서 컴포를 조작할 때 setState로 하기위한 구색 맞추기 😉

keyup 이벤트

• 1초 디바운스
  • setState 실행
    • 디바운스 없이 state를 변경하면 contentEditable이 커서를 처음으로 되돌리는 특성 때문에 글씨가 거꾸로 써짐.
  • onEditing 실행
    • 변경된 state를 onEditing에 전달

📄 DocEditPage

키포인트

storage에 임시 저장된 데이터와 fetch로 불러온 데이터 간의 눈치싸움

Editor 호출과 임시 storage 저장

• Editor 호출
  • Editor가 호출되면 최초 값을 스토리지에서 불러온 데이터로 전달.

• onEditing
  • editor에서 1초 디바운스로 받아온 데이터를 스토리지에 저장
  • ⚠️ 스토리지에 저장된 값을 불러오고 fetch 데이터와 비교하고 삭제하는 과정에서 list-page가 껄떡댐.
    임시 방편으로 0초 디바운스를 걸어 비동기로 작동하도록 함.

setState

• DocEditPage의 setState는 App에서 route할 때, 스토리지와 서버 데이터를 비교할 때 호출됨
• 현재 state.id와 nextState.id가 다를 때 둘이 맞춰주는 작업
  • 새로 들어온 id를 스토리지 키로 바꿈
  • 새로 들어온 state를 this.state로 바꿈
  • fetchDoc 실행
• 같을 때 editor의 state를 변경

fetchDoc

하는 일: 더 최신값을 state로 변경시켜 editor에 반영.

• 방금 바뀐 state.id로 서버와 스토리지에서 데이터를 받아옴.
• 스토리지 값이 최신일 경우
  • 스토리지 값으로 서버에 반영
  • 임시 스토리지값 삭제
  • pushUrl 실행 (두번째 인자 false로 edit-page 렌더 안함)
• nextDoc이 최신일 경우(route로 렌더링될 때)
  • 새로 routing 됐다는 뜻으로 id를 맞춰주기
    

기타

👾 edit-page 구현 & 오류

1. contentEditable이 엔터를 칠 때마다 div로 구분이 되기 때문에
   먼가 drag & drop을 구현할 수 있을 것 같다. 연구해봐야겠다

2. render가 되면 contentEditable에서는 커서가 처음으로 돌아간다.
   때문에 keyup 이벤트가 발생할 때마다 state가 변경되어서 한 글자 칠 때마다 커서가 처음으로 돌아가 글씨가 거꾸로 써지는 현상이 발생했다.

state 변경 시기를 1초 정도 디바운스해서 keyup 이벤트가 발생할 땐 state를 저장하지 않다가 1초 후에 state를 변경하고 서버로 보내줬다. 서버에서는 따로 디바운스를 주지 않고 바로 저장되도록 바꾸었다.

또다른 문제: 글씨가 거꾸로 써지는 현상은 막았으나 state가 저장될 때마다 어쨋든 다시 처음으로 커서가 돌아갔다. 또, 화면 flikering 문제 발생.

• focus 시 outline을 감춰서 flikering을 속일 수 있을 것 같은데
  접근성 문제로 다른 방법을 생각해야 할 것 같다.

3. 실시간 title 업데이트에 관해

낙관적 업데이트를 사용해 keyup 이벤트가 발생할 때마다 바뀌는 title 값을
list-page에게 바로바로 넘겨주고 싶었다.
하지만 app을 제외하곤 각 컴포넌트의 state가 따로 관리되고 있어서
edit-page에서 list-page의 state에 접근할 방법이 사실상 없었다.
keyup 이벤트가 발생할 때마다 put API를 사용할 수도 없고...
customEvent로 list의 state를 변경하는 방법은 어떨까?
뭔가 효율적이지 못한 것 같은데 🧐

🍡 App

• App은 사실상 조종술사임. App에서 컴포넌트의 state를 바꾸진 않음.
  
  
  

this.route

• root에는 docListPage만.
  • list-item 삭제 시 root로 가도록 했는데 기존에 렌더링 되어있던 docEditPage는 사라지지 않음.
  • 때문에 docEditPage를 보였다 안보였다 하는 (in)visible 함수 활용
• 선택적 routing
  • pushUrl의 두번째 인자로 false를 주면 docEditPage는 routing 안됨.

pushUrl

• 다른 컴포넌트에서 pushUrl의 두번째 인자(routeEdit)를 false로 넣고 호출할 때
  • pushRouter의 이벤트가 발생하면서 url을 바꾸고 onRoute를 실행
  • App에선 routeEdit이 true일 때만 DocEditPage를 routing.

onpopstate

• 뒤로가기 라우팅
  • actived item 따라가기
    • list-item이 삭제되거나 root 페이지가 아니라면
      url에 따라 스토리지의 active key도 함께 바꿔주고 route 시킴
    • 위 경우라면 active를 풀어줌

👾 App 구현 & 오류

1. pathname.startsWith 을 했더니 계속 false가 떴다.
   pathname.indexOf로 찾았을 땐 잘 나오는데 무슨 차이가 있을까?

2. route 경로를 바꾸자 css가 안먹혔다.

원인: css 경로를 ./ 로 현재 경로부터 시작했기 때문에
현재 페이지와 관련된 경로를 찾으려고 시도한다고 한다.
해결: / (root)로 바꾸어 해결했다.

팀원 리뷰

• 사용자에게 textarea가 있는지 알려줄 수 있게
  • contentEditable 사이즈 키우기 | border 만들기 | placehoder 사용하기
• 디바운스로 서버에 저장되기 전에 다른 리스트로 들어가면 해당 리스트 값이 바뀜
  • 현재 url 기준으로 id 선택되기 때문에 발생.

🍡 할 일

• ✅ 뒤로갈 때 현재 url의 id로 active-doc을 바꾸고 render로 반영해야 함
• 👀 textarea의 커서를 새로고침했을 때에도 그대로 위치하도록
• ✅ list-page에서 render가 되더라도 현재 positon을 기억할 것 (위로 올라가지 않을 것)
• ✅ storage key 값 상수화
• ✅ editor에 글쓰면 editor 자체 페이지는 render되지 않고 list만 렌더되도록 바꾸기. (setState랑 render를 분리해야 하나?)
• ✅ 제목 입력 후 바로 컨텐트 입력해도 다 저장되도록 만들기
• ✅ list가 클릭될 때마다 get 요청으로 받아오는데, 만약 같은 리스트를 누를 경우엔 (직전 id === 현재 id)
  fetch하지않고 render만 시켜줌.
• ✅ 삭제 시 토글된 문서 id도 스토리지에서 날리기
• ✅ title | content 값이 있을 때만 저장
• 👀 저장될 때 오른쪽 위에 알려주기