프론트엔드 개발을 위한 자바스크립트 - 2주차

 

 

 

https://school.programmers.co.kr/learn/courses/14723

[스터디/17기] 프론트엔드 개발을 위한 자바스크립트 (feat. VanillaJS)

 

 

---

 

서두

2주 차가 시작됐다! 사실은 정확하게 말해서 어제 3주 차 수업을 수강했다 🤔

과제 빨리빨리 하고 요번에도 코드리뷰 해야지 하고 마음을 먹었지만 귀신같은 면접 준비로

월요일까진 오래간만에 프로젝트 정리와 면접 준비로 바빠서

 

부랴부랴 2주 차 미션을 화 ~ 수요일에 올인해서 겨우 시간에 맞춰서 끝낼 수 있었다 😀

 

https://zerosial.github.io/VanillaJS-todolist/

Mission 2

디자인은 Tailwindcss

사이트 구성은 SPA 기준으로 퓨어한 자바스크립트만 사용하였다.

(클릭 시 사선 처리 , 삭제 , 전체 삭제 , 브라우저 종료 및 시작 시

등 모든 todo데이터는 로컬 스토리지에서 관리)

---

 

사용하는 기술 스택

• Javascript🐱‍🏍
  시작이자 끝 처음이자 전부
  
  
• TailwindCSS
  수업 중에 사용하지 않는다. 사용하는 감을 잃지 않으려고 틈틈이 쓰는 중
  
  
• HTML + CSS
  과정 중엔 없고 기초적인 지식만 알면 된다.

 

---

 

 

이벤트 Delegate

확실히 프런트엔드 성격이 맞는지 백 엔 할 때는 감이 잘 안 잡혔던 기술들이 프엔할 땐 확 와닿았다.

차근차근 스탭업 하면서 구현하며 느끼는 점이 엄청 많았다.. 😋

다음 주에는 비동기도 하는데 얼마나 다양한 경험을 할지 너무 설렌다.


특히 이번에 사용한 것 중에 이벤트 델리게이트를 비롯한 이벤트를 다루는 기술이 드디어 이해가 갔다.

https://ko.javascript.info/event-delegation

이벤트 위임

하나하나의 이벤트를 매번 렌더링 하면서. foreach 등으로 추적하는 것도 나쁜 방법은 아니지만 😸

SPA로 파츠들을 추가 삭제하다 보면 중간에 빼먹는 경우도 많을 것 같은데 이때 유용하게 사용 가능했다. 

특히 유용했던 점은 예를 들어 

$target.addEventListener('click', function (e) {
    this.data = data.get();
    if (e.target && e.target.nodeName === 'LI') {
      Object.values(this.data)[e.target.id].isCompleted = !Object.values(
        this.data
      )[e.target.id].isCompleted;
    }

    if (e.target && e.target.nodeName === 'BUTTON') {
      this.data.splice(e.target.id, 1);
    }

    data.set(this.data);
  });

하나의 큰 컴포넌트를 클릭 이벤트를 통해 제어할 때 클릭한 게 <LI> 라면? <BUTTON>이라면?

혹은 타깃이 XXX라면 등을 분류하여서 추적할 수 있다는 점도 편리했다.

특히 이렇게 이벤트를 달아줄 경우 나중에 추가 삭제되더라도 자동으로 추가가 되기 때문에

에러를 걱정할 필요도 없었다. 😏

 

---

 

 

커스텀 이벤트 생성

https://ko.javascript.info/dispatch-events

커스텀 이벤트 디스패치

비슷하게 이벤트를 다룬다는 점에서 커스텀 이벤트라는 것도 매우 유용했다.

function reRender = () => {
    document.dispatchEvent(new CustomEvent('reRender', {}));
};

//main 혹은 app.js에

 document.addEventListener('reRender', () => {
    todoList.setState(todoData);
    todoCount.setState(todoData);
 });

예를 들어 해당 reRender 함수와 이벤트를 정의해두고 가장 최선단 (보통 index.js나 app.js 등)

에서 reRender 이벤트를 addEventListner로 읽는다.

이렇게 해두면 어떤 컴포넌트에서도 화면의 갱신과 더불어 자료를 업데이트할 때

단순히 reRender 함수만 불러와주면 내가 원했던 동작이 가능해진다. 🤡



굳이 상태를 따로 전달하던 이벤트 전파 등을 하며 전달하지 않아도

단순이 이벤트를 발생시키고 -> 이벤트를 읽어오는 최선단에서 제어 관리한다

라는 점은 이해하기도 편하고 사용하기 편한 기술처럼 느껴졌다. 😋

(단지 너무 많이 쓰면 성능상의 문제가 있다고..)

---

저번에 얻어먹은 아이스크림에 이어 이번에 또 다른 무언가를 얻어먹을 수 있을 것 같다. 😮

하던 거 마무리하고 다시 코드 리뷰 하러 갈 예정이다 🐽