항해플러스 1주차 회고

개강 OT

7월 5일 기대하던 항해플러스 OT가 시작됐다. 역삼에서 하기에 지하철을 탈까했지만 너~무 더운 날씨에 차를 끌고갔다.
차가막혀서 늦을까 걱정했지만 다행히 잘 도착했고 OT부터 참석할 수 있었고 앞으로 어떻게 10주간의 항해를 보낼지에 대한 내용을 들었다.

1주차 발제

매니저분들과 학습메이트 분들의 소개, 팀원분들과 간단히 인사를 마치고 1주차 과제에 대한 발제가 시작됐다.
자바스크립트로 SPA를 만드는 과제 였는데 지난 기수보다 비즈니스 로직들이 추가되고, 더 많은 테스트와 기능들이 추가되었다고 하셨는데 정말,, 양이 많았다^^...
이후 네트워킹 파티에도 참석하여 이런저런 얘기를 나누다 1차만 참석하고 집으로 와서 바로 과제를 시작했다. (I라서 낯가려서 그런 거 아님 진짜 아님)

과제

과제 제출 하루 전 새벽

팀원분들과 매일 퇴근 후 ZEP에서 모여서 과제를 진행하고 가끔 얘기도하고 서로 해결 안 되는 문제에 대해 공유도 하고 도움도 주고받고..
이런 부분이 매일 새벽까지 달릴 수 있게 하는 요인 중 하나가 아닐까? 생각한다. 2팀 파이팅🔥🔥🔥
6분들도 모두 파이팅🔥🔥🔥

이번 과제의 목표 및 요구사항

목표

• 프론트엔드 개발자가 발견하고 해결한 문제를 이해하고 있다.
• 리액트가 해결하고자 하는 문제를 이해하고 있다.
• 리액트없이 문제를 해결할 수 있다.

요구사항

• 기본과제 (통합테스트) 통과 (과제 통과 조건)
• 심화과제 (E2E) 테스트 통과 (과제 BP 조건)

과정

오랜만에 바닐라 자바스크립트를 보니 옛날 처음 개발 시작할 때 문법을 보고 뭔가를 만들려 할 때 뭐부터 만들어야 할지 몰랐던 그때로 돌아간 기분..

사실 이번 과제에 참고할 수 있는 많은 자료들을 제공해주셨고 자료에는 DOM 조작부터 프로그래밍 기법까지 다양한 자료들이 있었지만 특히 SPA만들기에 유용한 디자인 패턴들이 담긴 자료들도 있었다.

나름 React 내부 구조를 이해하려 노력했기에 자료를 보지않고 내가 가진 지식만으로 시도를 해봤는데 이게 실수였던거 같다..🥲
SPA를 만들 때 핵심적인 구조가 상태변화의 감지를 통한 일관적인 업데이트 였는데 이를 옵저버 패턴과 Store를 만들어 구현해야 했는데
사전 지식 없이 뇌의 흐름을 따라 코드를 만들어가다 보니 리렌더링을 일으키는 Update 부분이 일관적이지 못해 많은 리렌더링이 일어났고 점점 코드가 추가 될수록 어디서 문제가 생긴지 잡아낼 수 없어 더욱 꼬여 건드릴 수 없는 코드가 되었다..⭐️

옵저버 패턴과 Store

export const createObserver = () => {
  // 변화를 감지하는 리스너들을 저장하는 Set
  const listeners = new Set();
 
  // 변화를 감지해야 할 리스너를 등록
  const subscribe = (listener) => listeners.add(listener);
 
  // 등록된 모든 리스너들에게 변화를 알림
  const notify = () => listeners.forEach(listener => listener());
 
  return { subscribe, notify };
}
 
export const createStore = (initialState, reducer) => {
  // 옵저버 사용
  const { subscribe, notify } = createObserver();
 
  // 초기 상태 설정
  let state = initialState;
 
  // 현재 상태를 반환
  const getState = () => state;
 
  // 상태 변화를 일으키는 액션을 전달
  const dispatch = (action) => {
    const newState = reducer(state, action);
 
    if (newState !== state) {
      state = newState;
      // 상태 변화를 알림
      notify();
    }
  };
 
  return { getState, dispatch, subscribe };
}
 
const store = createStore(initialState, reducer);
 
// 렌더링하는 함수를 전달
store.subscribe(render);

이런식으로 처음부터 구조를 잡았다면 SPA의 자연스러운 플로우인 상태변화 -> 리렌더링이 해결되어 이후 기능들을 만들 때 훨씬 수월하게 만들 수 있지 않았을까 생각한다.

후기

BP는 무슨 간신히 통과만했다.. 코드는 진짜 리얼 스파게티를 만들었기에 패스
다음 과제부터는 제공되는 자료를 꼼꼼히 살펴보고 더 좋은 방향으로 만들자 생각하는 1주차였다.

멘토링 시간

중간에 테오에게 멘토링도 받았는데 다들 새벽 2시가 넘어도 집중해서 들을 정도로 유익했다. 예전 스프린트 할때가 많이 생각났다.
정말 많은 얘기를 했지만 가장 기억에 남는건 "과제에 고통받았다면 저희의 의도대로 잘 흘러갔네요" 라는 말이었다.😄

이 과제들은 React라는 기술로 output을 만들어내는건 누구나 할 수 있기에 중간 레이어와 그보다 더 아래에있는 core를 경험 하고,
중간레이어와 코어를 고민하며 만들어가는게 고급 개발자로 향하는 길! 이라는 좋은 말도 기억에 남는다.

이제 2주차 과제가 시작이니 또 열심히 달려야지..⭐️

KPT 회고

Keep

• 더 성장하기 위해 계속 도전하기
• 오늘 할 일 미루지 않고 바로 시작하기
• AI를 활용하더라도 원리 이해하고 넘어가기

Problem

• 할일이 많고 급해도 자료들 꼼꼼히 보기^^..
• 어려워도 코드 리뷰 하기
• AI 의존성 줄이기

Try

• 레퍼런스 한 번 정독하고 시작할 것.
• 별거 아니더라도 일단 달기.
• AI와 함께하기 전에 먼저 만들고 개선할 방향 체크하기