목차

1. 자동 저장 편집기 만들기

자동저장 편집기는 별도의 저장 버튼없이 서버와 자동으로 싱크되는 편집기 이다. url에 따른 라우팅 처리 필요

1-1.페이지 및 컴포넌트 구조

<App>

• 기능
  • [x] PostPage, PostEditPage 생성
  • [ ] router(url path) 에 따라 PostPage와 PostEditPage를 렌더링 하는 역할
  • [ ] 커스텀 이벤트를 통해 라우트 처리 (6강)
• state
  • posts : []
• 컴포넌트
  • <PostPage>
  • <PostEditPage>

<PostPage>

기본 경로로 들어왔을 때의 컴포넌트

• 기능
  • [ ] post를 불러와 렌더링 (PostList)
  • [ ] post 클릭 시, 해당 post를 수정하는 페이지로 이동 (onPostClick(id))
  • [ ] 하단 부 post를 생성할 수 있는 페이지 이동 링크 존재 (addNewPost)
• 컴포넌트
  • <PostList onPostClick={} >
  • <button onclick = { addNewPost } />

<PostEditPage>

post를 생성하고, 수정할 수 있는 페이지

• 기능
  • id가 new 일 경우 빈 값을 가지고, 새로운 post를 생성하는 Editor id의 값이 있을 경우, 해당 id의 post를 불러와서 렌더링 함
  • autosave
    • 텍스트 내용 입력 시, debounce처리 되어, 1초후 로컬스토리지에 저장되도록 함
    • 처음 불러온 DB값의 데이터와 비교 후, 로컬스토리지 시간이 더 최근이라면, alert창 띄워서 선택하도록 함
  • new로 들어왔는데, 1글자라도 입력이 발생하여 isCreated 상태로 변경되었다면, 현재 url 패스도 변경되어야 함 (history.replaceState이용)
• state
  • { postId: ‘new’, post: { title, content }}