What have I been interested in this week?
2018.11.11 ~ 2018.11.18
이번 주에 관심 있었던 키워드를 정리하는 글입니다.
일주일 동안의 개발에 관련된 공부나 생각들의 키워드를 요약해놓고
앞으로 포스팅의 주제로 쓸려고 합니다. 😁
Keywords
- Redux - 리액트를 다루는 기술
- OOP - 코드스피츠 3rd-4 ES6+ 디자인패턴과 뷰패턴 2회차
- Web Component - 11월 원데이이모콘 안도형님 발표
- 개발자 공부 - 임백준님 칼럼
Redux
-
리덕스란?
- 상태 관리의 로직을 컴포넌트 밖에서 처리하는 것.
-
리덕스를 사용하는 이유
-
리액트 프로젝트가 커지면 state 기능으로 상태 관리를 하기 번거로워 질 수 있다.
- 상태 객체가 너무 복잡하고 커지거나
- 최상위 컴포넌트에서 상태관리를 하는 메서드를 너무 많이 만들어 코드가 복잡해진다.
- 하위 컴포넌트에 props를 전달하려면 여러 컴포넌트를 거쳐야 한다.
- 용어
- 스토어: 애플리케이션의 상태 값들을 내장하고 있음.
- 액션: 상태 변화를 일으킬 때 참조하는 객체
- 액션 타입을 반드시 정의해야한다.
- 액션 타입은 대문자와 밑줄로 조합하여 만든다(ex: INCREMENT_NUMBER)
- 타입 값만 필수이고 나머지는 선택이다.
- 액션을 만들 때는 액션 생성 함수(action creator)를 사용해서 만든다.
- 디스패치: 액션을 스토어에 전달하는 것을 의미.
- 리듀서: 상태를 변화시키는 로직이 있는 함수.
- 리듀서는 2개의 파라미터를 받는다.
- 1번째 파라미터: 현재 상태
- 2번째 파라미터: 액션 객체
- 리듀서는 리듀서가 초기에 사용할 초기 상태 initialState 값을 설정해 줘야 리듀서를 만들수 있다.
- 리듀서는 2개의 파라미터를 받는다.
- 구독: 스토어 값이 필요한 컴포넌트는 스토어를 구독한다.
- 구현 순서
- 액션 정의 순서
- 리듀서 정의
- 리덕스 스토어 생성
- 구독
- dispatch로 액션 전달
OOP
-
객체 지향을 하고 있느냐 아니냐는 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년이라고 가정하는 것인가?
- 주니어 개발자와 시니어 개발자를 비교하는 것인가?
-
개발자가 공부하는 것은 본질적인 능력을 키우는 것을 의미한다. 프로그래밍의 본질은 문제의 해결이다.
-
트렌드를 대하는 자세
- 트렌드에 필요한 것은 가벼운 눈팅이지 공부가 아니다. 공부는 본질에 다가서려는 노력이다.
나의 공부에 대한 태도는?
-
사람마다 필살기 하나는 가지고 있어야 한다고 생각한다.
-
지금은 신 기술들이 쏟아지는 시대이며, 이런 현상이 더 가속된다고 생각한다.
- 도메인을 구현하기 위한 언어, 라이브러리, 프레임워크는 다양하며, 저마다의 철학이 있다.
- 중요한 건 목적이며, 수단은 다양할 수 있다고 생각한다.
- 일단 신기술은 왜 나왔는지 살펴보자.
- 자신만의 철학을 가지자.
