프로그래밍 공부하기

일반적으로 적은 양의 데이터는 모든 데이터를 화면에 렌더링 하는데 큰 리스크가 없지만, 너무 많은 양의 데이터가 있는 경우 데이터 전체를 렌더링 하기 위해 많은 시간이 걸려 사용자 경험을 해치는 상황이 발생한다. 이러한 상황을 극복하기 위한 대표적인 방법이 페이지네이션(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 함수가 호출되고, ..

JS에는 일정 시간 후에 실행할 작업을 등록하는 몇가지의 메서드가 있다. 이들의 동작에 대해 정리해보자. 1. setTimeout & setImmediate setTimeout는 일정 시간 후에, setImmeiate는 일정 시간 간격으로 특정 작업을 반복하는 함수이다. 하지만, 실제로 작업이 동작한 시간을 살펴보면 실제 시간과는 약간의 차이가 있기도 하다. 그 이유는 무엇일까? 첫 번째로 타이머 함수들은 일정 시간 후에 해당 작업을 실행시키는 것이 아니라 작업 큐에 넣는 것이기 때문이다. 작업이 실행되기 위해선 작업 큐에서 꺼내져야 하므로, 작업의 등록 시간과 실행 시간은 차이가 발생한다. 두 번째로 타이머 스펙 때문이다. 타이머의 간격이 좁다는 것은 그만큼 CPU가 브라우저의 동작을 자주 살펴보아야하..

브라우저의 렌더러 프로세스가 서버로부터 받은 HTML, CSS, JS 등의 데이터를 조합하여 화면을 그리는 과정을 브라우저 렌더링이라 한다. 해당 과정은 렌더링 엔진(Webkit > Blink)과 엔진 내의 JS 인터프리터(V8)를 통해 이루어진다. 브라우저별로 렌더링 과정이 조금씩 다르다. 이 글에선 크롬 브라우저 렌더링 과정에 대해 정리해보고자 한다. 1. 데이터 파싱 렌더러 프로세스는 우선 HTML, CSS와 같은 문서를 브라우저가 이해하고 사용할 수 있는 구조로 변환한다. 파싱은 크게 토큰화와 트리 생성 2단계로 이루어진다. 토큰은 어휘 분석의 단위이다. 예를 들어 HTML 태그를 토큰화해보자. 우선 '' 문자를 만날 때까지 유지한다. 이런 식으로 새로운 문자 탐색 > 상태 변경 > 처리(Stac..

크롬 브라우저의 주소 표시줄에 URL을 입력하면 해당 페이지로 이동하게 된다. 이 과정에서 브라우저가 어떤 작업을 수행하는지 알아보자. 1. URL 입력 주소 표시줄에 URL을 입력하면 User Interface를 담당하는 브라우저 프로세스의 UI 스레드가 이를 감지하고 처리한다. 입력하는 도중에는 검색 기록에 기반하여 드롭다운 박스로 입력 값에 대한 제안을 주기도 한다. 입력 값에 대해 UI 스레드는 검색어인지 URL인지 판단한다. 검색어라면 사용자가 선택한 검색 엔진의 URL과 조합하여 새로운 URL 형태로 변환한다. URL인 경우 프로토콜과 포트와 같은 기본 요소들이 생략된 경우 이들이 기본 값인 것으로 가정한다. 만약 URL이 HSTS 목록에 있다면 https로 요청이 보내진다. 2. DNS 쿼리..