프로그래밍 공부하기

Render Props패턴이란 JSX를 반환하는 함수 prop을 사용하여 React 구성 요소 간의 코드를 공유하는 패턴이다. HOC와 같이 컴포넌트를 재사용하기 위해서 즉, 여러 컴포넌트가 공통된 논리/데이터를 포함할 때 Render Props 패턴을 사용할 수 있다. Render Props 패턴이 어떤 것인지 알아보자. 1. Simple Example const Title = props => props.render(); // 2. render prop을 호출하여 렌더링 I am a render prop!} /> // 1. render prop을 내린다. 아주 간단한 render props 패턴이다. 먼저 두 번째 줄을 보자. render라는 이름의 prop으로 Title에 함수를 내려주고 있다. 이것..

리액트의 모든 컴포넌트는 생성-업데이트-제거라는 생명주기를 가지며, 각 생명주기에 실행되는 생명주기 메서드들을 가진다. 즉, 리액트 컴포넌트가 생성되고 제거될 때까지의 과정 안에서 특정 시점에 이에 매칭 되는 특정 메서드가 호출된다. 생명주기 메서드들은 개발자가 재정의하여 개발자가 원하는 시점에 원하는 로직이 실행되게 만들 수 있다. 이번 포스팅에선 제거 단계에 호출되는 단 하나의 메서드 componentWillUnmount() 에 대해 알아보자. 1. 생성 단계 2. 업데이트 단계 3. 제거 단계 (now) componentWillUnmount() componentWillUnmount() { element.onClick = null; } componentWillUnmount()는 컴포넌트의 언마운트(D..

리액트의 모든 컴포넌트는 생성-업데이트-제거라는 생명주기를 가지며, 각 생명주기에 실행되는 생명주기 메서드들을 가진다. 즉, 리액트 컴포넌트가 생성되고 제거될 때까지의 과정 안에서 특정 시점에 이에 매칭 되는 특정 메서드가 호출된다. 생명주기 메서드들은 개발자가 재정의하여 개발자가 원하는 시점에 원하는 로직이 실행되게 만들 수 있다. 이번 포스팅에선 업데이트 단계의 메서드에 대해 알아보자. 1. 생성 단계 2. 업데이트 단계 (now) 3. 제거 단계 1. getDerivedStateFromProps() static getDerivedStateFromProps(nextProps, preState) { if(nextProps.color !== preState.color) return { color: nex..

The state of JavaScript & FE, 2021 Edition (2021년 FE 동향, 한방에 끝내기) NAVER Engineering | 박재성 - The state of JavaScript & FE, 2021 Edition (2021년 FE 동향, 한방에 끝내기) tv.naver.com JavaScript ECMAScript 2021 명세 Promise.any : 여러 개의 Promise 모음 중, 첫 번째로 fulfilled되고 resolved 된 Promise 반환 WeakRefs : 약한 참조를 갖는 객체를 저장. 참조되지 않으나, GC에 포함되지 않는 상황 예방 Numeric Separators : 긴 숫자 값의 가독성을 위해 _로 구분자 사용 1_000_000_000 ECMAS..

지금까지 새로운 리액트 프로젝트 개발을 시작할 때 create-react-app을 사용해왔다. create-react-app은 리액트 개발에 필요한 웹팩, 바벨, 테스트 라이브러리 등 다양한 환경을 한 번에 제공해준다. 그러나 내 프로젝트에 맞춤인 개발환경을 구축하고 싶다면 리액트 개발환경을 직접 구성해보는 시도를 해보는 것이 좋다. 이 포스팅에선 리액트 개발 환경의 기본인 웹팩과 바벨 설정을 하여 리액트 개발 환경을 직접 구축해볼 것이다. 1. 프로젝트 초기화 npm init -y 프로젝트를 시작하기 전, npm init을 통해 프로젝트 패키지를 초기화 해주자. 이 명령어의 결과로 package.json 파일이 생성될 것이다. 그 외에도 저장소 초기화(git init) 등을 필요에 따라 진행할 수 있다..

리액트의 모든 컴포넌트는 생성-업데이트-제거라는 생명주기를 가지며, 각 생명주기에 실행되는 생명주기 메서드들을 가진다. 즉, 리액트 컴포넌트가 생성되고 제거될 때까지의 과정 안에서 특정 시점에 이에 매칭되는 특정 메서드가 호출된다. 생명주기 메서드들은 개발자가 재정의하여 개발자가 원하는 시점에 원하는 로직이 실행되게 만들 수 있다. 이번 포스팅에선 생성 단계의 메서드에 대해 알아보자. 1. 생성 단계 (now) 2. 업데이트 단계 3. 제거 단계 1. constructor() class Item extends React.Component { constructor(props){ super(props); this.state = { // state 초기화 name: 'ihl', gender: 'female' ..

React의 컴포넌트는 props 혹은 state가 변경될 때 해당 컴포넌트를 재 렌더링 한다. 그러나 경우에 따라선, 특정 props나 state가 변경되어도 컴포넌트를 재 렌더링 할 필요가 없을 경우도 있다. 이러한 케이스에서 재 렌더링을 효율적으로 수행하게 하는 방법들을 알아보자. 1. shouldComponentUpdate(sCU) shouldComponentUpdate(sCU)는 컴포넌트의 렌더링 여부를 결정하는 함수이다. 현재 props나 state 변화에 영향을 받아야 하는지 를 결정하는 함수라고 말할 수도 있다. 위 LifeCycle 그림에서 보듯이, props나 state 업데이트시, render 호출 직전에 sCU가 호출되며, sCU가 true를 리턴하면 render 함수가 호출되고, ..

SW 산업과 개발자 Software is eating the world : 모든 산업의 혁신이 SW에서 일어나고 있는 세상 SW 개발자에 대한 수요 SW 업계는 개발자만 있으면 뭐든 만들어낼 수 있다. 그 외의 업종에서도 디지털 인프라 구축, 자율주행 등 SW 전문가가 필요한 시대가 되었다. 현재 SW 개발자는 많은 분야에서 큰 이익을 창출해내고 있다. SW 전문화 프론트 엔드, 백엔드, 오픈소스, 보안, 기술교육 등 다양한 분야로 세분화되었다. 개발자 공급의 어려움 개발을 배우는 것은 쉽지 않고, 중도에 포기하는 사람들도 많다. 기업이 원하는 개발자의 소양 단순 코딩 > 최신 트렌드와 상황에 맞는 코딩 > 적절한 기술선택 > 문제를 찾고 기술로 해결 결론 SW는 많은 이익을 창출하고 많은 분야에서 필요..

1. Access Property of Primitive Type JS은 객체(Object) 값(Reference Type)과 그렇지 않은 값(Primiteve Type)으로 나뉜다. 여기서 객체란 key-value로 구성된 프로퍼티들의 정렬되지 않은 집합이라 말할 수 있으며, 이때 value가 함수라면 해당 프로퍼티는 메서드라 부른다. // primitive Type의 메서드 사용 'abc'.toUpperCase(); // 'ABC' 1 .toString(); // '1' // primitive Type의 프로퍼티 접근 '123'.length; // 3 1 .x; // undefined 그런데 JS에선 Primitive Type도 메서드를 사용하거나 프로퍼티에 접근가능하다 이것이 가능한 이유는 Prim..

function* generator() { yield 1; yield 2; } const g = generator(); // what is this? javascript에서 함수를 선언할 때 *을 붙이는 경우를 종종 볼 수 있다. 이런 함수가 어떻게 동작하는지 알아보고 어떻게 활용할 수 있는지 살펴보자. 1. Generator & Iterateration MDN에서는 function* 선언은 generator function을 정의하는 데 사용하며, 이 함수는 Generator 객체를 반환한다고 정의되어 있다. 그렇다면 Generator란 무엇일까? Generator 객체란 반복자(Iteration) 프로토콜을 준수하는 객체이다. 그리고 Iteration Protocol은 iterable과 iterato..