Chapter 1-1. 프레임워크 없이 SPA 만들기 :회고

회고 작성 전...

대학 졸업 후...
혼자 오픈 api를 사용하며 프로젝트를 하다 도저히 어떻게 취업 준비를 해야할 지 막막함을 느껴 부트캠프를 알아보게 되었고, 어쩌다보니 항해 플러스 프론트엔드 6기에 참여하게 되었다. 능력자들 사이에서 잘 섞여나갈 수 있을 지 걱정이 되었지만... 아무것도 안하고 있을 바엔 뭐라도 하자는 마음으로 신청했다.
살짝 후회될 지도

매주 개인 과제가 진행되고, 챕터 별로 회고를 작성해보려고 했으나 WIL (Weekly I Learned)을 작성한 후 제출하는 것까지가 과제의 마무리이기 때문에 급하게 1주차 회고를 작성해본다. 👊

---

1-1. 프레임워크 없이 SPA 만들기

1주차 과제는 라이브러리의 도움 없이 복잡한 spa 페이지 구현하기였다.

라우터와 전역 상태 관리가 이번 과제의 중점이었다고 생각하는데, 전역 상태라고는 redux 라이브러리를 사용하여 로그인 토큰을 관리해본 것이 전부였기 때문에 처음부터 너무 막막하게 느껴졌다. 처음에 순수 자바스크립트로 전역 상태를 관리하는 방법에 대해 서치해보는 데에 시간을 많이 쓴 것 같다.

WIL

✅ Observer Pattern

export function createStore(initialState) {
  let state = { ...initialState };
  const listeners = new Set();

  function subscribe(listener) {
    listeners.add(listener);
    listener(state);

    return () => listeners.delete(listener);
  }

  function getState() {
    return state;
  }

  function setState(newState) {
    state = { ...state, ...newState };
    listeners.forEach((listener) => listener(state));
  }

  return {
    subscribe,
    getState,
    setState,
  };
}

전역 상태 관리에 사용했던 옵저버 패턴 기반의 함수이다.

• createStore()
  상태(state)와 상태 변경을 구독할 수 있는 기능을 가진 store 객체를 만들어서 반환, state 변수에 initialState를 복사하여 setState 함수로 상태를 업데이트한다.
• subscribe()
  상태가 바뀔 때 실행될 콜백(listener)을 등록한다.
• getState()
  현재 상태를 가져오는 함수, 외부에서 상태를 읽을 때 사용한다.
• setState()
  상태를 업데이트하는 함수, state를 newState로 덮어쓰고, listeners에 등록된 모든 콜백을 실행한다.

✅ Router

사실 난 이번 과제를 하며 라우터를 따로 구현하지 않았는데, 이 부분이 가장 후회됐다. 지금 생각해보면 가장 기본적이면서도 당연한 기능인데 아무래도 어떻게 구현해야할 지 감이 안잡혔기에 구현을 안한게 아닌가 싶다.

MDN popstate
popstate도 이번 과제를 하며 처음 알게 된 개념 중 하나이다.

popstate 이벤트는 사용자의 세션 기록 탐색으로 인해 현재 활성화된 기록 항목이 바뀔 때 발생하며, pushState() 메서드는 세션 기록에 새 항목을 추가하고, replaceState() 메서드는 현재 페이지의 세션 기록 항목을 업데이트한다.

export const navigate = (path) => {
  history.pushState(null, "", path);
  window.dispatchEvent(new PopStateEvent("popstate"));
};

위의 코드는 내가 뭣도 모르고 작성한 후 남용한 함수이다...

다음엔 navigate 함수 내에서 직접적으로 history를 사용하지 않고, router를 직접 생성한 후, navigate 함수 내에서는 router를 호출하는 방식으로 구현할 것 같다.

---

KPT

Keep

아직 없다고 본다...
첫 과제라 시간 분배도 잘 못한 것 같고, 발제와 함께 주어지는 학습 자료를 처음부터 정독하지 않았던 것이 후회됐다. 과제 양이 많아 일단 뭐라도 하자라는 생각에 아무것도 모르는 상태에서 코드를 작성한 탓에 뒤로 갈수록 코드가 엉망이 됐다.

Problem

위에서 말한 것 처럼 일단 기본적인 공부를 하고나서 틀을 잡고 시작하기!
한번 시작한건 마무리 하고 진행하기!
컴포넌트 분리 조금 하다가 갑자기 기능 건드리고.. 기능 구현하다가 갑자기 다른 테스트 코드 실행하고.. 침착하게 차근차근 구현하자..

Try

AI 활용을 덜 하자... 학습 자료를 제대로 읽지도 않고 AI에게 폭풍질문하는 내가 너무 한심하게 느껴졌었다. 그리고 막혔을 땐 질문을 하는 자세가 필요할 것 같다. 부트캠프에 참여해놓고 혼자 끙끙대고 있는 고집부렁...

그리고 이번 과제 때는 페이지에서는 실행되지만 직접 테스트 코드를 실행하면 통과하지 못하는 부분이 많았기 때문에, 2주차부터는 테스트 코드를 돌려보며 기능을 구현해야겠다고 생각했다.