thumbnail
리액트 - Portals 를 통한 부모 컴포넌트의 외부 DOM 에 컴포넌트 렌더링하기 Thumbnail

리액트 - Portals 를 통한 부모 컴포넌트의 외부 DOM 에 컴포넌트 렌더링하기

Portals 는 리액트 프로젝트에서 컴포넌트를 렌더링하게 될 때, UI 를 어디에 렌더링 시킬지 DOM 을 사전에 선택하여 부모 컴포넌트의 바깥에 렌더링 할 수 있게 해주는 기능입니다.

2018년 11월 2일3개의 댓글
리액트의 새로운 기능, Hooks 알아보기 Thumbnail

리액트의 새로운 기능, Hooks 알아보기

Hooks 는 리액트에 조만간 도입될 예정인 기능으로서, 함수형 컴포넌트에서도 상태 관리 및 클래스형 컴포넌트에서만 할 수 있는 다른 작업들을 구현 할 수 있게 해주는 기능입니다. 이 기능은 아직 정식 릴리즈 되어있지 않으며 React v16.7.0-alpha 버전에서

2018년 10월 28일12개의 댓글
리액트 프로젝트에 ESLint 와 Prettier 끼얹기 Thumbnail

리액트 프로젝트에 ESLint 와 Prettier 끼얹기

ESLint 와 Prettier 를 리액트 프로젝트에서 제대로 적용하여 코드를 깔-끔-하게 관리해보는 방법을 배워봅시다.

2018년 10월 25일18개의 댓글
다양한 방식의 리액트 컴포넌트 스타일링 방식 CSS, Sass, CSS Module, styled-components Thumbnail

다양한 방식의 리액트 컴포넌트 스타일링 방식 CSS, Sass, CSS Module, styled-components

리액트에서는 컴포넌트를 스타일링 할 때 다양한 방식을 사용 할 수 있습니다. 이 튜토리얼에서는 어떤 방식이 있는지, 자주 사용되는 것들을 하나하나 사용해보겠습니다. 저는 개인적으로 컴포넌트 하나마다 Sass 파일 하나씩 만들어서 관리를 하는것을 선호하고, 최근 만드는...

2018년 10월 21일9개의 댓글
내가 CockroachDB를 더 이상 사용하지 않는 이유 Thumbnail

내가 CockroachDB를 더 이상 사용하지 않는 이유

CockroachDB는 단연컨데 horizontally scale (확장하기 위하여 서버의 성능을 고성능으로만 올리는것이 아니라, 여러 인스턴스로 하는 것) 하기에 가장 쉬운 RDBMS 일 것이다. image.png (출처:\[Live Demo\] Inside C

2018년 10월 18일3개의 댓글
Create-react-app V2 릴리즈! 무슨 변경 사항이 있을까? Thumbnail

Create-react-app V2 릴리즈! 무슨 변경 사항이 있을까?

리액트 개발자라면 애용하고 계실 도구인 create-react-app 의 v2 버전이 릴리즈되었습니다! 기존에 만든 자료들을 업데이트해야 한다는 점 (특히 책... 따흑... )은 조금 귀찮긴 하지만, 좋아하는 도구가 더 멋져졌으니까, 정말 듣기좋은 소식인데요! 이

2018년 10월 2일26개의 댓글
리액트 프로젝트 코드 스플리팅 정복하기 Thumbnail

리액트 프로젝트 코드 스플리팅 정복하기

코드 스플리팅, 뭐 별거있나요? 그냥 웹팩에서 하라는대로 하면 되는걸요. 하지만! 리액트에서 코드 스플리팅이랑 서버사이드 렌더링을 함께 해보신 경험이 있으시다면, 이 두가지 작업을 함께 하는 경우, 굉장히 번거로워질 수도 있다는 것을 아실 것 입니다. 이 포스트에서는,...

2018년 9월 28일9개의 댓글
MobX (3) 심화적인 사용 및 최적화 방법 Thumbnail

MobX (3) 심화적인 사용 및 최적화 방법

지난 포스트에서 MobX 의 기본적인 사용 방법과, 리액트에서는 어떻게 사용하는지 알아보았습니다. MobX 를 조금 더 복잡한 프로젝트에서 사용을 한다면 어떻게 해야 할까요? 추가적으로, 어떻게 해야 컴포넌트의 업데이트 성능을 최적화 하면서 프로젝트를 구성 할 수 있는

2018년 9월 8일6개의 댓글
MobX (2) 리액트 프로젝트에서 MobX 사용하기 Thumbnail

MobX (2) 리액트 프로젝트에서 MobX 사용하기

MobX 는 리액트 종속적이진 않지만, 리액트에서 쓰려고 만들어졌기 때문에 함께 사용하면 엄청난 시너지가 발생합니다. 더 쉬운 글로벌 상태 관리는 물론이고, setState 도 쓸 필요가 없게 됩니다. 2-1. MobX 가 리액트를 만나면 우리가 이전 섹션에서 d...

2018년 9월 8일4개의 댓글
MobX (1) 시작하기 Thumbnail

MobX (1) 시작하기

MobX 는 또 다른, 하나의 인기있는 리액트 상태 관리 라이브러리입니다. 저는 MobX 는, 사실상 라이브러리 그 이상의 가치를 하는, 리액트의 개발 흐름 자체를 많이 바꿔주는 강력한 도구라고 생각합니다. "MobX 는 최소한의 공수로 여러분들의 상태관리 시스템을 설...

2018년 9월 8일4개의 댓글
Redux (4) Immutable.js 혹은 Immer.js 를 사용한 더 쉬운 불변성 관리 Thumbnail

Redux (4) Immutable.js 혹은 Immer.js 를 사용한 더 쉬운 불변성 관리

Immutable.js 사용하기 Immutable.js 는 불변성을 유지해줘야 하는 객체의 값을 더 쉽게 업데이트 할 수 있게 해줍니다. Immutable.js 의 사용법은 여기서 더 자세히 보실 수 있습니다. 우선, 설치를 해주겠습니다.

2018년 9월 8일2개의 댓글
Redux (3) 리덕스를 리액트와 함께 사용하기 Thumbnail

Redux (3) 리덕스를 리액트와 함께 사용하기

3-1. 리덕스의 3가지 규칙 리덕스를 프로젝트에서 사용하게 될 때 알아둬야 할 3가지 규칙이 있습니다. 1. 하나의 애플리케이션 안에는 하나의 스토어가 있습니다. 하나의 애플리케이션에선 단 한개의 스토어를 만들어서 사용합니다. 여러개의 스토어를 사용하는것은 사...

2018년 9월 8일3개의 댓글
Redux (2) 리액트 없이 쓰는 리덕스 Thumbnail

Redux (2) 리액트 없이 쓰는 리덕스

리덕스는 리액트에 종속되지 않습니다. 리액트에서 사용하려고 만든거긴 하지만, 실제로 다른 UI 라이브러리나 프레임워크와 함께 사용 될 수도 있습니다 (예: angular-redux, ember-redux...) 물론, 바닐라 자바스크립트와도 함께 사용할 수도 있겠죠. ...

2018년 9월 8일0개의 댓글
Redux (1) 소개 및 개념정리 Thumbnail

Redux (1) 소개 및 개념정리

리덕스 소개 리덕스는, 가장 사용률이 높은 상태관리 라이브러리입니다. 리덕스를 사용하면, 여러분이 만들게 될 컴포넌트들의 상태 관련 로직들을 다른 파일들로 분리시켜서 더

2018년 9월 8일0개의 댓글
상태 관리 라이브러리의 미학: Redux 또는 MobX 를 통한 상태 관리 Thumbnail

상태 관리 라이브러리의 미학: Redux 또는 MobX 를 통한 상태 관리

리액트 생태계에서 사용되는 상태 관리 라이브러리는 대표적으로 Redux 와 MobX 가 있습니다. 이 둘의 특징을 배워보고 직접 사용하면서 알아가봅시다. 상태 관리 라이브러리의 필요성 상태 관리 라이브러리란게, 과연 필요할까요? 무조건 필요하지는 않습니다. 하지만...

2018년 9월 8일2개의 댓글