18

React to the rescue

리액트(React) 관련 연재

팔로워

리액트(React) 버전 16+ 총정리

리액트(React) 15버전이 나온지(2016년 4월 7일) 꼬박 1년 반 만(2017년 9월 26일)에 16 버전이 릴리즈 되었다. 그리고 글을 쓰고 있는 현재 최근 릴리즈된 버전은 16.3.2이다. 0.14...

7편 - React + GraphQL + Flowtype으로 트렐로 클론 웹앱 만들기 - 로그인/회원가입

이전편에서 우리는 카드 상세 뷰를 구현해봤다. 이번편에서는 이전편에서 예고했듯이 사용자 인증 관련 로직(로그인/회원가입)을 추가 할 것이다. 이전 계획에서 변경된 부분이 있는데, auth0 서비스를 이용하지 않...

6편 - React + GraphQL + Flowtype으로 트렐로 클론 웹앱 만들기 - 카드(Card) 상세 뷰

이전편에서 우리는 graphql의 가장 큰 장점 중 하나인 relational data를 graphcool에서 다루는 방법에 대해서 알아 보았다. 이번편에서 우리는 이렇게 만들어진 데이터를 카드 상세 뷰에 표...

5편 - React + GraphQL + Flowtype으로 트렐로 클론 웹앱 만들기 - 리스트(List), 카드(Card)

이전 편에서 우리는 graphql mutation 후에 스토어를 업데이트 할 수 있는 방법에 대해 다루고, 이 중 refetchQueries 옵션을 사용하여 스토어를 업데이트 하는 방법을 적용 했다. 또한, F...

4편: React + GraphQL + Flowtype으로 트렐로 클론 웹앱 만들기 - Apollo 스토어 업데이트, Flow

이전 편에서 우리는 graphql mutation을 이용해서 보드(Board)를 만들어 보았다. 하지만, 보드 생성 후 데이터가 바로 반영이 안되는 문제가 있었다. 이번 편에서는 이 문제를 해결 할 수 있는 다...

3편: React + GraphQL + Flowtype으로 트렐로 클론 웹앱 만들기 - Trello Board 생성

우리는 이전 편에서 graphcool 서버를 만들었고, 기본적인 graphql에 대해 다뤘다. 이번 편에서는 트렐로의 보드를 만들어 볼 것이다. 참고: 이번 튜토리얼을 진행 하기 위해 진행 되는 코드를 깃...

2편: React + GraphQL + Flowtype으로 트렐로 클론 웹앱 만들기 - graphcool (GraphQL 서버 만들기)

참고: 이번 튜토리얼을 진행 하기 위해 진행 되는 코드를 깃헙에 업로드 해놨으니, 이 튜토리얼을 진행하고 싶다면 아래에서 소스를 클론 받은 후 아래의 내용을 따라가기를 추천 드립니다. 이전 편: 0편: Re...

1편: React + GraphQL + Flowtype으로 트렐로 클론 웹앱 만들기 - 프로토타입

참고: 이번 튜토리얼을 진행 하기 위해 진행 되는 코드를 깃헙에 업로드 해놨으니, 이 튜토리얼을 진행하고 싶다면 아래에서 소스를 클론 받은 후 아래의 내용을 따라가기를 추천 드립니다. 이전 편: 0편: Re...

0편: React + GraphQL + Flowtype으로 트렐로 클론 웹앱 만들기 - 소개

이 튜토리얼은 트렐로(Trell0) 앱의 가장 기본적인 기능들(보드, 리스트, 카드)을 리액트(React), GraphQL(Apollo)과 Flowtype(자바스크립트 타입 지원 라이브러리)을 이용해 구현해보는...

리액트(React) 이해 4 - Higher Order Component(HOC)로 컴포넌트 재사용 하기

리액트에서 컴포넌트를 만들 때 가장 많이 사용되는 패턴은 컴포지션(composition) 패턴이다. 컴포지션을 활용하여 리액트 컴포넌트를 만드는 방법은 다양하지만, 이 중에서 이번 글에서는 Higher Orde...