[TIL] 0129

storybook refactoring

• 포스트는 api에서 불러온 데이터가 아닌 더미를 넣어준다
• args는 props에 컨트롤을 달아줄 때 사용하고, 컨트롤이 필요 없는 경우에는 그냥 props처럼 넣어줘도 된다
• export default에 정의해주는 argtypes는 모든 스토리의 공통으로 args로 들어간다
• 버전이 2개 이상 필요할 땐 템플릿을 만들고 arg를 따로 지정한다
  -> 다른 중복 코드(마크업) 작성할 필요없이 딱 props만 작성할 수 있기 때문

스토리북 와장창의 이유를 알았다..

• 작은 단위의 컴포넌트들도 순수하게 props으로 받지 않고 외부 영향(api, context)을 받아서 그랬던 것.. 스토리북을 작성하려면 순수 컴포넌트여야만 한다
• 하지만 매번 page단위에서 받기엔 너무 깊이 들어가야하는 컴포넌트가 있다. 이럴 경우 wrapped컴포넌트를 만들자
• wrapped에 context와 api함수를 받아와서 실행코드를 선언한 후 likeToggle에 로그인 유무와 api함수를 props으로 전해준다
• storybook에 작성할 때에는 로그인 유무는 props으로 설정해주고 onClick함수(Api)를 전해주지 않으면 된다
  https://kciter.so/posts/effective-atomic-design
• context에서 서버 요청 되는지 확인해보기
• 해보고 지은 멘토님에게 질문하기

TypeScript Project

• 2번째 프로젝트인 randomQuotes구현
• constructor함수의 실행문의 순서가 좀 헷갈렸다
• this.render가 실행되면서 mount도 같이 실행되는데 button에 이벤트 핸들러 함수를 걸 당시에는 this.quote와 this.author가 선언되지 않은 상태이다
• 콜백함수는 실행되기 전까지는 실행코드가 유효한지 모르는 것 같다

  constructor($target: Element) {
    // 실행 순서가 궁금해짐 = 콜백함수는 실행되기 전까지는 실행코드가 유효한지 모른다
    super($target);
    this.render();
    this.$quote = document.querySelector('.quote'); // 비효율적인건가??
    this.$author = document.querySelector('.author');
    this.handleClickButton();
  }

  async handleClickButton() {
    // api실행
    const { data } = await axios.get('https://free-quotes-api.herokuapp.com/');
    this.$quote.innerHTML = `"${data.quote}"`;
    this.$author.innerHTML = data.author ? `- ${data.author}` : '';
  }

  mount() {
    // 왜 constructor에서 가져오면 안될까?? - 이벤트 거는게 먼저라서(mount함수가 먼저 실행)..
    const $button = document.querySelector('.change_button'); 
    $button?.addEventListener('click', () => {
      this.handleClickButton();
    });
  }

  render() {
    this.$target.innerHTML = '';
    this.$target.innerHTML = this.template();
    this.mount();
  }