17

React to the rescue

리액트(React) 관련 연재

팔로워

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

[React + GraphQL] Stack Stack 사이드 프로젝트를 통해 배운 것

회사의 신규 기능과 서비스 개편을 위해, 서버와 클라이언트를 GraphQL 기반으로 변경하고, 클라이언트 UI 기반을 머테리얼 디자인으로 변경하는 것이 큰 목표 였다. 큰 뼈대를 바꾸는 일이기 때문에 바로 서비...