HomeAboutMeBlogGuest
© 2025 Sejin Cha. All rights reserved.
Built with Next.js, deployed on Vercel
💌
JJong’s Archive
/
🌞
JS
/
자동 저장 편집기 만들기

자동 저장 편집기 만들기

Status
Done
Tags
실습
날짜
Oct 24, 2023 12:17 AM
저장 버튼 없이 자동으로 서버와 싱크되는 편집기를 만들어보자!
 
API
API_END_POINT = https://kdt-frontend.programmers.co.kr 편집 가능한 글 목록 불러오기 : /posts 특정 게시글 불러오기 : /posts/{id} 게시글 저장하기 : [POST] /posts 게시글 수정하기 : [PUT] /posts/{id}
+) url 주소창에 /posts/new 입력 ⇒ 새 에디터 등장
여기서 수정하면, 아이디 부여하고 포스트로 등록됨
 
  • 에디터의 값을 로컬 스토리지에 저장하고, 특정 시간마다 로컬 값을 서버에 저장 하고 동시에 로컬을 비워내는 식으로 작업하기
    • ⇒ 최신의 값을 서버에 저장하지 못했다면, 로컬스토리지에 있는 최신 값을 가져오도록 하기
      ⇒ 저장 시간으로 비교
       
  • customeEvent를 dispatch해서 url 라우팅 처리
    • 새글쓰기, 목록으로 버튼도
 

 
코드
  • App ⇒ 페이지 두개를 렌더링
  • PostList ⇒ 리스트를 렌더링
  • PostsPage ⇒ 왼쪽 컨테이너 +) 리스트 패치해서 postlist에 데이터 넣어줌
  • Editor ⇒ 에디터를 렌더링
  • PostEditPage ⇒ 오른쪽 컨테이너 +) 에디터 값(타이틀, 내용)을 패치해서 Editor에 넣어줌
    • title, content 상태 갖기
    • 현 상태 + 저장 시간을 로컬스토리지에 저장하기