What have I been interested in this week?

2018.11.11 ~ 2018.11.18

이번 주에 관심 있었던 키워드를 정리하는 글입니다.
일주일 동안의 개발에 관련된 공부나 생각들의 키워드를 요약해놓고
앞으로 포스팅의 주제로 쓸려고 합니다. 😁

Keywords


Redux

  • 리덕스란?

    • 상태 관리의 로직을 컴포넌트 밖에서 처리하는 것.
  • 리덕스를 사용하는 이유

  • 리액트 프로젝트가 커지면 state 기능으로 상태 관리를 하기 번거로워 질 수 있다.
    • 상태 객체가 너무 복잡하고 커지거나
    • 최상위 컴포넌트에서 상태관리를 하는 메서드를 너무 많이 만들어 코드가 복잡해진다.
    • 하위 컴포넌트에 props를 전달하려면 여러 컴포넌트를 거쳐야 한다.
  • 용어

    • 스토어: 애플리케이션의 상태 값들을 내장하고 있음.

    • 액션: 상태 변화를 일으킬 때 참조하는 객체

      • 액션 타입을 반드시 정의해야한다.
      • 액션 타입은 대문자와 밑줄로 조합하여 만든다(ex: INCREMENT_NUMBER)
      • 타입 값만 필수이고 나머지는 선택이다.
      • 액션을 만들 때는 액션 생성 함수(action creator)를 사용해서 만든다.
    • 디스패치: 액션을 스토어에 전달하는 것을 의미.

    • 리듀서: 상태를 변화시키는 로직이 있는 함수.

      • 리듀서는 2개의 파라미터를 받는다.
        • 1번째 파라미터: 현재 상태
        • 2번째 파라미터: 액션 객체
        • 리듀서는 리듀서가 초기에 사용할 초기 상태 initialState 값을 설정해 줘야 리듀서를 만들수 있다.
    • 구독: 스토어 값이 필요한 컴포넌트는 스토어를 구독한다.

  • 구현 순서
  1. 액션 정의 순서
  2. 리듀서 정의
  3. 리덕스 스토어 생성
  4. 구독
  5. dispatch로 액션 전달

OOP

  • 객체 지향을 하고 있느냐 아니냐는 2가지를 만족해야 한다.

    1. 대체 가능성
    2. 내적 일관성, 내적 동질성
  • Polymorphism : 하위 형은 상위 형을 대신할 수 있다.
      const Parent = class{
          wrap(){ 
              this.action();
          }
          action(){console.log('Parent');}
      };
      const Child = class extends Parent{
          action(){console.log('Child');}
      };
      const a = new Child();
      console.log(a instanceof Parent); // 대체가능성을 의미
      a.action(); // child가 찍힘
      a.wrap(); // 'Child'가 찍힘.
    `
    
  • 상속보다는 확장이 좀 더 맞는 표현
    • 서양 개발자들이 inherit 놔두고 extends를 명령어로 채택한 이유는 확장이 맞는 의미라서(상속이면 멀쩡한 단어 놔두고 왜 확장이라는 뜻을 가진 명령어를 썼을까?)
  • 대체 가능성은 Polymorphism을 뜻함.

  • 자바스크립트는 프로토타입 체인으로 만족시킨다.(체인에서 하나만 걸려라!)

  • 자바스크립트에서는 형이 없기 때문에 내적 일관성을 표현하기 쉽지 않다.

  • wrap은 Child에 없기 때문에 프로토타입으로 부모의 wrap을 호출한다.

    • wrap 안의 this는 child를 가리키기 때문에 child가 호출된다.
    • 부모의 메서드에서 호출됐더라도 this가 가리키는 것은 Child이기 때문에 Child가 출력된다.(this가 내적 동질성을 구현하기 위한 기능인가?)
    • 부모의 메서드를 호출했더라도 호출의 주체는 자식이기 때문에 Child가 호출된다.

Web Component

  • 프론트엔드 개발의 패러다임 전환
    • 페이지 기반 개발 ⇒ 컴포넌트 기반 개발
    • DOM을 위한 OOP
  • 웹 컴포넌트는 웹 페이지와 웹 앱에 쓸 수 있는 새롭고 재사용 가능한데다, 캡슐화 할 수 있는 HTML 태그를 만들게 해주는 웹 플랫폼 API의 묶음입니다.

  • 웹 컴포넌트 API를 활용해서 만든 커스텀 컴포넌트와 위젯은 대부분의 모던 브라우저에서 동작하며 HTML과 함께 동작하는 모든 자바스크립트 라이브러리나 프레임워크와 사용할 수 있습니다.

  • Custom Elements

    • Reusable Web Components
    • 재사용 가능한 새로운 HTML
    • 태그를 만들고 다른 사람이 만든 태그를 확장도 하고 이 모든 것이 웹 표준이다.
  • Shadow DOM
    • Self-contained Web Components
    • Virtual DOM과는 다르다....
    • 기존의 태그는 Global 하다.
    • 스코프의 격리

Study of Developer

  • 공부는 누구나 하는 것이므로 공부한다는 사실만으로 엄살을 떨 필요는 없다.

  • 최신 개발 트렌드 예시

    • 두 개발자 모두 개발 경력이 20년이라고 가정하는 것인가?
    • 주니어 개발자와 시니어 개발자를 비교하는 것인가?
  • 개발자가 공부하는 것은 본질적인 능력을 키우는 것을 의미한다. 프로그래밍의 본질은 문제의 해결이다.

  • 트렌드를 대하는 자세

    • 트렌드에 필요한 것은 가벼운 눈팅이지 공부가 아니다. 공부는 본질에 다가서려는 노력이다.

나의 공부에 대한 태도는?

  • 사람마다 필살기 하나는 가지고 있어야 한다고 생각한다.

  • 지금은 신 기술들이 쏟아지는 시대이며, 이런 현상이 더 가속된다고 생각한다.

    • 도메인을 구현하기 위한 언어, 라이브러리, 프레임워크는 다양하며, 저마다의 철학이 있다.
    • 중요한 건 목적이며, 수단은 다양할 수 있다고 생각한다.
    • 일단 신기술은 왜 나왔는지 살펴보자.
  • 자신만의 철학을 가지자.