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

벌써 2주차가 되었다! ✨

이번 미션은 1주차에 만들었던 TodoList에 다양한 컴포넌트들을 추가해서 TodoApp으로 만드는 방식으로 진행되었다. 

---

 

TodoApp에 기능이 더 많아지고 컴포넌트들이 더 추가되면서 요구사항이 조금 더 복잡해졌다. 그래서 본격적으로 시작하기 전에 피그마를 통해 각 컴포넌트들의 구조를 짜면서 간단한 디자인 작업을 진행했다. 이렇게 요구분석 · 디자인 · 퍼블리싱에 반나절 정도의 시간을 썼는데, 퍼블리싱할 때 맨날 SCSS 쓰다가 오랜만에 CSS로 하니까 불편해서 SCSS가 정말 그리웠다..

 

피그마와 굿노트를 활용하여 요구사항에 맞는 전체적인 앱 구조를 그렸다.

 

---

구조를 짠 후에는 본격적으로 TodoApp의 각 컴포넌트들을 만들고, 기본적인 CRUD를 추가했다.

그중에서 수정/삭제 기능을 추가하기 위해서는 유니크한 id값이 필요했는데, 주어진 데이터를 최대한 변경하지 않기 위해서 배열의 index을 활용해서 구현했다.

// 📌 render 함수
render() {
  this.$element.innerHTML = this.state
    .map(
      ({ text, isCompleted }, idx) =>
        `
      <li class="todo-item" data-index=${idx}>
      <label class="form-check-group">
        <input class="form-check" type="checkbox" ${
          isCompleted ? 'checked' : ''
        } />
        <span>${text}</span>
      </label>
      <button class="btn delete-button" type="button">delete</button>
    </li>
      `
    )
    .join('');
 }

// 📌 addTodo 함수
addTodo(newText) {
  const newData = [...this.data, { text: newText, isCompleted: false }];
  this.setState(newData);
}

// 📌 deleteTodo 함수 : index 값을 사용해 값 삭제
deleteTodo(index) {
  const newData = this.data.filter((todo, i) => i !== parseInt(index));
  this.setState(newData);
}

// 📌 toggleTodo 함수
  toggleTodo(index) {
  const newData = this.data.map((todo, i) =>
    i === parseInt(index) ? { ...todo, isCompleted: !todo.isCompleted } : todo
  );
  this.setState(newData);
}

---

다음으로는 Custom Event, Local Storage를 사용하는 추가 구현 사항을 진행했는데, 이쯤부터는 이미 하루치 뇌 사용량을 초과한 느낌이 들고 너무 졸렸다😂  근데 여기서 멈추고 자면 잠을 제대로 못 잘 것 같아서 몇 줄 안 되는 대충이라도 손코딩해가면서 요구사항을 분석하고 로직을 짰다. 

 

커스텀 이벤트와 로컬 스토리지는 이번 미션에서 처음 알게 된 개념들이라서 어떻게 작동하는지 찬찬히 살펴보는 시간을 가졌다. 특히 커스텀 이벤트를 어떻게 쓰는지 파악하기 위해서 이벤트에 대해 전체적으로 다시 정리를 했는데, 덕분에 이 과정에서 matches 라는 함수도 알게 됐다! 지금까지 이벤트 위임 관련한 코드를 짤 때 $element.classList.contains('class')로 각 요소들을 확인했었는데 $element.matches('.class')를 활용하면 훨씬 가독성이 좋은 것 같다.

 

✔️ 커스텀 이벤트

커스텀 이벤트로 구현한 removeAll

 

// 📌 커스텀 이벤트 사용하여 removeAll 구현
setRemoveAll() {
    const $removeAllBtn = this.$root.querySelector('.remove-all-button');
    $removeAllBtn.addEventListener('click', () => {
      this.$root.dispatchEvent(new CustomEvent('removeAll'));
    });

    this.$root.addEventListener('removeAll', () => {
      this.setState([]);
    });
 }

 

✔️ 로컬 스토리지

LocalStorage를 사용하도록 리펙토링

  getState() {
    try {
      const storedState = JSON.parse(localStorage.getItem(this.name));
      return storedState ? storedState : null;
    } catch (e) {
      console.error(e);
    }
  }
 
 
 setState(nextState) {
    this.state = nextState;

    try {
      localStorage.setItem(this.name, JSON.stringify(nextState));
    } catch (e) {
      console.error(e);
    }

    this.todoCount.setState(this.state);
    this.todoList.setState(this.state);
  }

나 혼자 localStorage를 구현해봤을 때는 위에서 처럼 App안에서 모든 처리를 다 하도록 했는데, 로토님의 라이브코딩을 보니까 따로 분리를 시키는 게 확실히 사용하는 입장에서도, 가독성 측면에서도 훨씬 이득이었다! 한 번 제대로 구현하는 것을 보고 나서 연습하고 나니까 사람이 참 간사한 게 불과 며칠 전에 완성했던 내 코드가 굉장히 낯설었다..ㅎ...

 

export default function App({ selector, name }) {
  const storage = new Storage(name, []); // 👉 Storage로 분리한 모습 

  this.$root = document.querySelector(selector);
  this.name = name;
  this.state = storage.getItem();  // 사용하기 간편해졌다 ✨
  
  //...

  this.setState = function (nextState) {
    this.state = nextState;
    storage.setItem(nextState); // 사용하기 간편해졌다 ✨
    todoList.setState(this.state);
    todoCount.setState(this.state);
  };
  
 }

 

전체적으로 App에서 모든 일을 처리하고 각 컴포넌트들이 render만 해주는 방식으로 구현했던 것을 function 타입으로 다시 리펙토링해보면서 각 컴포넌트들이 책임을 나눠가지도록 구현하는 것에 익숙해지도록 연습했다. 1주차는 정말 워밍업이었던게, 2주차부터는 라이브세션에서도 배울게 정말 많았다. 코드리뷰로 정말 생각치도 못했던 부분들까지 세세하게 피드백을 받고, 바닐라 자바스크립트로 리액트와 흡사하게 구현해보면서 코드 습관이 예쁘게 정리되는게 실시간으로 느껴졌다.  좋은 코드를 보고 따라하는 것만으로도 정말 많이 배울 수 있는 것 같단 생각이 들었고, 그런 의미에서 이번 코드리뷰 스터디가 정말 많이 성장할 수 있는 기회인 것 같다 👍 

 

https://programmers.co.kr/learn/courses/14237

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