프로그래머스 데브코스 TIL - Day 16

✅ 학습 목차

- [DAY 16] VanillaJS를 통한 자바스크립트 기본 역량 강화 (8)

 

✅ 새롭게 학습한 부분

- 자동 저장 편집기 만들기 (실습)

 

 

---

debouce 사용

let timer = null;

const editor = new Editor({
    $target: $page,
    initialState: post,
    onEditing: (post) => {
      if (timer !== null) {
        clearTimeout(timer);
      }
      timer = setTimeout(async () => {
        setItem(postLocalSaveKey, {
          ...post,
          tempSaveDate: new Date(),
        });
      }, 500);
    },
  });

이전에 스터디를 하면서 처음 접했던 기능이지만 한번 더 복습 차원에서 정리를 하였다.

 

텍스트를 입력할 때마다 서버에 요청을 하면 서버에 부담이 되기 때문에

debounce기법을 사용하여 마지막 입력이 끝나고 지정한 시간이 지나면

서버에 요청을 하여 부하를 줄일 수 있다.

 

예시 코드에서는 일단 localstorage에 저장하는 것으로 구현했지만,

localstorage에는 1초의 시간 후에 저장하고, 서버에는 조금 더 여유 있는 시간으로 조절하는 등

분리해서도 활용이 가능하다.

 

name속성을 사용한 state 변경

여러개의 text input을 다루다보면 change이벤트를 하나씩 달아주어야 해서 불편함이 있는데

name 속성을 사용하여 하나의 이벤트로 핸들링 할 수 있다.

  $editor.addEventListener("keyup", (e) => {
    const { target } = e;

    const name = target.getAttribute("name");

    const nextState = {
    ...this.state,
    [name]: target.value,
    };
    
    this.setState(nextState);
    onEditing(nextState);

  });

이전에 아이디/비밀번호 관련되서 여러 input을 다룰 때 사용했었지만

막상 나중에 써야 할 때 까먹는 부분중 하나이다.😓

 

 

커스텀 이벤트

커스텀 이벤트 또한 이전에 스터디를 통해 접했던 부분이지만

자주 사용하지 않아서 손에 익지는 않았다.

 // 부모 컴포넌트에서 이벤트 생성
  window.addEventListener("route-change", (e) => {
    const { nextUrl } = e.detail;
    history.pushState(null, null, nextUrl);
    this.route();
  });
  
 // 자식 컴포넌트에서 이벤트 호출
  
  window.dispatchEvent(
    new CustomEvent("route-change", {
      detail: {
            nextUrl: `/posts/${id}`,
      },
    })
  );

부모 컴포넌트에서 생성한 함수를 자식 컴포넌트에게

전달을 할 때 depth가 깊은 경우 커스텀 이벤트를 통해 한번에 이벤트 호출을 할 수 있다.

 

커스텀 이벤트의 모듈화

router.js

const ROUTE_CHANGE_EVENT_NAME = "route-change";

export const inItRouter = (callback) => {
  window.addEventListener(ROUTE_CHANGE_EVENT_NAME, (e) => {
    const { nextUrl } = e.detail;
    history.pushState(null, null, nextUrl);
    callback();
  });
};

export const push = (nextUrl) => {
  window.dispatchEvent(
    new CustomEvent("route-change", {
      detail: {
        nextUrl,
      },
    })
  );
};

파일을 생성하여 이벤트를 생성하는 함수와 이벤트를 호출하는 함수를 만들어서

모듈화를 시킴으로써 재사용성을 높일 수 있다.

사실 너무 남용하면 안된다는 이야기를 듣고 나서 쓸 생각을 안했던 것 같다.

route처럼 이벤트가 발생하는 시점이 명확할 때에는 사용해도 될 듯 하다.

 

 

반복되는 button 컴포넌트 모듈화

  const $moveListButton = document.createElement("button");
  $moveListButton.innerHTML = "목록으로";
  $page.appendChild($moveListButton);

  $moveListButton.addEventListener("click", () => {
    push("/");
  });

위와 같은 버튼들이 각 컴포넌트 안에 있을 때

반복적으로 작성하지 않고 하나의 컴포넌트로 만들어 두고 모듈화를 할 수 있다.

리액트에서는 반복되는 코드들을 컴포넌트화 하여 관리를 했었는데

Vanilla JS에서도 이렇게 작은 단위도 컴포넌트화 할 수 있다는 것을 깨달았다.

 

 

contentEditable

지금까지 text box를 다룰 일이 많지 않았어서 보통 textarea로 구현을 했었는데

contentEditable을 처음 알게 되었다.

<div name="content" contentEditable="true">${this.state.content}</div>

간단하게 div 속성에 contentEditable="true"를 적어서 사용할 수 있다.

 

❗ 서버에서 데이터를 받을 경우 개행이 \n값으로 들어오기 때문에

div안의 텍스트들이 줄바꿈이 되지 않는다.

==> \n을 <br>로 변경하여 해결할 수 있다.

this.state.content.replace(/\n/g, "<br>");

기본 사용 방법만 익혔지만 내일부터 하게 될 과제에서 확실하게 사용을 해 볼 예정이다.

 

 

---

✍ 느낀 점

 

오늘의 강의는 이번 주에 진행 할 과제를 위한 강의들이였다.

새롭게 접한 부분도 있었고 이전에 알고 있었던 내용을 한번 더 되짚어볼 수 있었던 시간이였다.

점점 내부에 기능들이 추가되면서 복잡하다고 느끼게되면서도

vanilla JS에 대해 알아가면 알아갈 수록 재밌는 것 같다.

내일부터 시작하게 될 이번 주 과제를 잘 마무리 할 수 있길!! 🙏🙏