프로그래밍 공부하기

JavaScript의 기본이 되는 6개의 원시 타입은 Number, String, Boolean, null, undefined, Symbol이다. 이 중 Symbol(심볼)에 대해 알아보자. 1. Symbol과 기존 JS 객체의 문제점 // 1. No Symbol const arr = [1,2,3,4,5]; console.log(arr.length); // output: 5 arr.length = 10; console.log(arr.length); // output: 10 심볼이란 ES6에서 도입된 원시 타입으로, 유일무이한 값, 고유한 값을 지정하기 위해 사용된다. 위 코드에 나타난 JS의 문제점은 무엇일까? 바로 객체의 내장 속성과 같은 이름으로 속성을 재정의 하면 속성의 값이 덮어쓰기 되어버린다는 ..

일반적으로 적은 양의 데이터는 모든 데이터를 화면에 렌더링 하는데 큰 리스크가 없지만, 너무 많은 양의 데이터가 있는 경우 데이터 전체를 렌더링 하기 위해 많은 시간이 걸려 사용자 경험을 해치는 상황이 발생한다. 이러한 상황을 극복하기 위한 대표적인 방법이 페이지네이션(Pagenation), 무한 스크롤(Infinity Scroll)과 가상화 목록(Virtualized List)이다. 가상화 목록은 전체 데이터를 모두 렌더링하는 대신, 유저 스크롤에 따라 현재 보이는 데이터만을 렌더링 하는 방법이다. 사용자가 볼 때 무한 스크롤과 유사할 수 있으나, 무한 스크롤은 스크롤이 발생할수록 화면에 렌더링 되는 항목도 많아지기 때문에 속도가 느려질 수 있으나, 가상화 목록은 현재 보이지 않는 항목은 unload ..

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..

지금까지 새로운 리액트 프로젝트 개발을 시작할 때 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 함수가 호출되고, ..

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..