[VanillaJS] 자동 저장 편집기 만들기

❗❗  데브코스 19일차 (08.26)

 

✏️ TodoApp 실습에 이어서 두번째로 자동 저장 편집기 만들기 실습을 진행했다.

요구사항을 간략하게 표현하자면 다음과 같다.

• PostsPage - posts를 서버에서 불러와 렌더링하고, 클릭 시 해당 post를 수정하는 곳으로 이동
• fetch api를 활용해 post 저장, 불러오기, 수정하기 기능 개발
• PostEditPage - post를 생성하고 수정하는 페이지
• route처리를 통해 기본 경로로 들어왔을때 컴포넌트, post클릭시 해당 포스터 보여주는 컴포넌트 분리

한마디로, 메모장 기능같이 원하는 텍스트의 제목, 본문을 입력하면 해당 post가 저장이 되고

기본경로에 post의 제목이 list형태로 렌더링 되어 보여지는 기능이다.

 

TodoApp에 비해 처리해야할 데이터의 양이나, state, route, api 등 조금 더 복잡하고, 많은 기능을

요구하는 실습이다.

 

첫째날은 무작정 강의를 보고 따라치기 시작했다....

크나큰 실수였었다.

 

강의가 후반부로 흐를수록, 중간중간 에러 처리, 코드 리팩토링 등의 과정에서

컴포넌트들 간의 관계가 머릿속에서 뒤죽박죽 섞였고, 해당 기능이 무엇을 수행하는지,

데이터의 흐름이 어떻게 되는지 점점 이해 안 되기 시작했다.... 그렇게 하루를 마무리했다...

 

~ing

 

💡기억에 남는 로직

    //사용자 입력시 발생하는 함수
    onEditing: (post) => {
      if (timer !== null) clearTimeout(timer);    
      !!2초 후에 발생하는 이벤트 로직 작성
      }, 2000); //2초안에 이루어지는 작업일때는 동작안함
    },
  });

사용자의 입력에 따라 주기적으로 서버에 저장하는 로직이 있을 수 있다.

예를들어 편집기에 입력하는 정보를 서버에 저장해야하는 경우 사용자가 입력하는

한 글자마다 저장하기에는 서버에 너무 부담이 된다.

이때 사용하는 방법중 하나가 timer기능을 이용해서 반복적으로 해당 함수가 실행되면 발생하지 않았다가

마지막 이벤트가 발생 후 사용자가 지정한 시간 이후에 발생하도록 로직을 작성할 수 있다.

그렇게 되면 서버 과부하를 줄일 수 있다.

 

📖 학습한 내용

• VanillaJS
  • 자동 저장 편집기 만들기 실습(1)