PRGRMS 자바스크립트 스터디 1주차 회고

허상범·2022년 10월 20일

PRGRMS 자바스크립트 스터디 과정 기록

목록 보기

1/3

프로그래머스에서 진행하는 자바스크립트 스터디에 참여, 학습한 내용을 적은 글입니다.

참여 스터디: [17기] 프론트엔드 개발을 위한 자바스크립트(feat. VanillaJS), 2022.09 - 2022. 10 (4주)
https://school.programmers.co.kr/learn/courses/15244

스터디 회고

비전공자로 자바스크립트를 공부하던 중 이 스터디를 발견했다.

나에게 가장 매력적인 내용은 실시간 세션, 현직자 코드 리뷰 였다. 부트캠프에서 현직자분들과 활발하게 코드 리뷰를 했지만, 이후에는 아무래도 현업에 계신 분들의 리뷰 받거나 커피챗을 하는 활동을 하기 어렵다. 더욱이 요즘 제일 재밌게 학습 중인 자바스크립트가 주제라 바로 신청하게 됐다.

스터디 진행은 매주 미션이 제공되고 수강생은 그 주에 해당 미션을 완성하고 PR를 보내 피드백을 받는다. 그리고 매주 실시간 세션에서는 코드 리뷰, Q&A를 진행한다.

미션은 1주 차에서 4주 차까지 한 프로젝트를 계속 발전시켜가는 내용으로 이어져 있다. 그래서 1주 차는 조금 쉽게 느껴질 수 있지만 4주 차에는 꽤 고민할 거리가 많은 내용이 제공된다. 그리고 주차 별로 필수 구현사항, 보너스 구현사항이 따로 나뉘어 있어 매주 미션을 이어가는데 부담이 덜했다.

실시간 세션에서는 미션 관련 Q&A, 멘토 로토님의 강의도 있었지만 제일 좋았던 건 수강생들의 다양한 고민을 들어주셨던 게 아닐까 싶다. 수강생 중에는 나처럼 취준생도 있었지만, 현직자분들도 계셨는데 현직에서 겪는 어려움, 취업 준비할 때 겪는 어려움 등 다양한 고민 들을 들어주고 같이 고민하는 시간이 도움이 많이 됐다.

자바스크립트를 학습하시려는 분들에게 이 스터디를 추천한다.

1주차 스터디 주요내용

주요 미션 내용

1주차 미션은 더미 데이터로 간단한 투두리스트 컴포넌트를 만드는 것이다.
new 키워드로 생성해서 재사용이 가능하게 만들고 setState() 함수를 만들어 데이터가 변경됐을 때 컴포넌트가 다시 렌더링되도록하는 것이 주요 미션이다.

작성한 주요 코드

`Todolist.js`

에러 처리

컴포넌트가 new 키워드로 불리지 않았을 때
데이터 검증: 데이터가 배열인지, 데이터 내부 형식이 올바른지

// 데이터 구조
type Todolist = TodoItem[]
type TodoItem = {
  text: string;
  isCompleted: boolean;
};

export default function Todolist({ $target, data }) {
  // ...
  
  switch (true) {
    case !new.target:
      throw new Error('Todolist가 new로 호출되지 않았습니다.');

    case !Array.isArray(data):
      throw new Error('todolist의 데이터가 Array가 아닙니다.');

    case !data.every(
      todo =>
        hasOwnProperty(todo, TODOLIST_KEY.TEXT) &&
        hasOwnProperty(todo, TODOLIST_KEY.IS_COMPLETED)
    ):
      throw new Error(
        'data에 text 또는 isCompleted 프로퍼티가 없는 todo가 있습니다.'
      );
  }
  
  // ...
}

setState, 렌더링 처리

setState 함수에서 렌더링도 같이 처리. 렌더링은 변경된 최신의 state를 사용
렌더링은 직접 innerHTML로 작성하는 것보다 Element 메소드를 사용한는 것이 더 안전하다고 생각해서 메소드 사용

export default function Todolist({ $target, data }) {
  // ...
  this.setState = nextState => {
    this.state = nextState;
    this.render();
  };

  this.template = data => {
    const items = data
      .map(
        ({ text, isCompleted }) =>
          `${isCompleted ? `<li><s>${text}</s></li>` : `<li>${text}</li>`}`
      )
      .join('');

    return `<ul>${items}</ul>`;
  };

  this.render = () => {
    this.$element.replaceChildren();
    this.$element.insertAdjacentHTML(
      'beforeend',
      this.template(this.state.data)
    );
  };
  // ...
}

주요 피드백

1. 생성자 사용 여부, 데이터 검증 분리

review-1

수정 내용

state를 검증하는 함수를 따로 만들어서 분리

export default function TodoList({ $target, data }) {
  if (!new.target) {
    throw new Error('TodoStore는 new로 호출되지 않았습니다.');
  }

  this.validateState = (state) => {
    if (!Array.isArray(state)) {
      throw new Error('state 데이터 형식이 배열이 아닙니다.');
    }
    if (state.length === 0) {
      return;
    }
    if (
      !state.every(
        (item) =>
          Object.hasOwn(item, 'id') &&
          Object.hasOwn(item, 'text') &&
          Object.hasOwn(item, 'isCompleted')
      )
    ) {
      throw new Error(
        'state item의 데이터 형식이 잘못됐습니다. 올바른 형식 : { id, text, isCompleted }'
      );
    }
  };
 //... 
}

허상범

다음 포스트