[TIL] 2021.05.13 - class와 모듈

Facts

프로그래머스 과제형 테스트 문제풀이를 하였다.

Findings

아니 이건 뭐지... 하고 한참 생각했다.

나는 분명 js 파일을 보고 있는데 class에 constructor에 내부 함수까지..

마치 Java처럼 쓰이고 있는데 Java랑 완전히 똑같진 않아서

아니 이게 대체 뭐지...? 하고 심기불편인채로 계속 뜯어보았다.

이해가 되지 않았다. this.로 인스턴스의 field를 참조해야 하는데 현재 클래스의 field에는 없는 놈이 있었다.

접근제한자도 없다.. 뭐하자는 거지?

console.log("app is running!");

class App {
  $target = null;
  data = [];

  constructor($target) {
    this.$target = $target;

    this.searchInput = new SearchInput({
      $target,
      onSearch: keyword => {
        api.fetchCats(keyword).then(({ data }) => this.setState(data));
      }
    });

    this.searchResult = new SearchResult({
      $target,
      initialData: this.data,
      onClick: image => {
        this.imageInfo.setState({
          visible: true,
          image
        });
      }
    });

    this.imageInfo = new ImageInfo({
      $target,
      data: {
        visible: false,
        image: null
      }
    });
  }
  
  setState(nextData) {
    console.log(this);
    this.data = nextData;
    this.searchResult.setState(nextData);
  }
}

searchInput, searchResult, imageInfo 이 놈들은 따로 js 파일로 존재하는 놈들인데

import도 없이 어떻게 this.로 접근이 가능하냐고

App 클래스에는 저런 field를 선언 안해놨잖아. 뭐지??????

 

혼종이냐..

 

스프링 강의에서 javadoc을 작성하고 코드의 이해도가 높아진 경험이 있어서 모든 js 파일에 싹 javadoc을 작성했다.

거의 하루 종일 코드를 뜯어보고 있었다고 해도 과언이 아니다.

 

console.log("app is running!");

class App {
  $target = null;
  data = [];

  /**
   * target field에 인자로 받은 target을 할당합니다.
   * 
   * @param {*} $target 선택자
   */
  constructor($target) {
    this.$target = $target;

    /**
     * searchInput field에 SearchInput 인스턴스를 만들어 할당합니다.
     * 인스턴스가 생성될 때 인자는 target, onSearch함수입니다.
     * onSearch함수는 keyword를 받아 api에서 Cats를 fetch해오고 
     * 거기서 구조분해할당한 data로 state를 갱신합니다.
     */
    this.searchInput = new SearchInput({
      $target,
      onSearch: keyword => {
        api.fetchCats(keyword).then(({ data }) => this.setState(data));
      }
    });

    /**
     * searchResult field에 SearchResult 인스턴스를 만들어 할당합니다.
     * 인스턴스가 생성될 때 인자는 target, initialData, onClick입니다.
     * initialData는 현재 data field입니다.
     * onClick함수는 image를 받아 imageInfo field의 state를 
     * visible: true, image를 image로 갱신합니다.
     */
    this.searchResult = new SearchResult({
      $target,
      initialData: this.data,
      onClick: image => {
        this.imageInfo.setState({
          visible: true,
          image
        });
      }
    });

    /**
     * imageInfo field에 ImageInfo 인스턴스를 만들어 할당합니다.
     * 인스턴스가 생성될 때 인자는 target, data입니다.
     * data는 visible: false이고 image: null인 객체입니다.
     */
    this.imageInfo = new ImageInfo({
      $target,
      data: {
        visible: false,
        image: null
      }
    });
  }

  /**
   * 주어진 데이터로 data field를 갱신하고 searchResult의 state를 새 데이터로 갱신합니다.
   * @param {*} nextData 새로운 데이터
   */
  setState(nextData) {
    console.log(this);
    this.data = nextData;
    this.searchResult.setState(nextData);
  }
}

 

문득 아샬님이 코드숨 리액트 강의 첫부분에서 document.createElement();를 사용했던 기억이 나서 그 강의를 다시 한 번 보았다.

오늘 본 코드. 오늘 뜯어보고 mdn에서 공부했던 그 코드들이었다.

아.. 신이시여... 어찌 이런 명강을...

 

아니 왜 프로그래머스 코드는 이렇게 자연스럽게 안짜는거야? 라는 생각을 하는데 문제의 요구사항이 떠올랐다.

ES6 모듈 형태로 코드를 변경하세요. (내가 바라던 바였어요 ㅠㅠ 제기랄)

아 그렇구나, (샬멘)

 

후에 얕게 공부한 바로는 위 코드와 같은 형태에서는 this가 전역객체를 참조한다고 한다.

그럼 모든 js파일이 어디에서나 접근 가능하단 말인가? 정말로?? (섬뜩)

Feelings

코딩 공부 첫 시작과 함께 보았던 그 강의는 나에게 엄청난 절망감을 안겨주었던 강의였다.

리터럴리 1도 모르겠기 때문이었다. (하긴 javascript 문법 쌩기초 정도만 보고 들어갔으니 당연한 일이다.)

그런데 이제 JavaDoc을 작성하고, 문서를 찾아보고, 구글링을 하면서 이 코드가 뭘 뜻하는지 스스로 배울 수 있게 되었다.

그리고 다시 리액트 1강을 보니.. 아주 깔끔하게 이해가 잘되고 사이다가 절로 마셔지는 명강이었다.

신이시여... (샬멘)

7개월차, 난 그때보다 아주 많이 성장해있다. 기분이 매우 좋다.

Future Action Plans

어서 빨리 ES6 모듈 형태로 바꾸러 가야지~!