Web Frontend Developer

해당 포스팅은 프로그래밍 인사이트에서 출판한 (이브 포셀로, 알렉스 뱅크스 저)을 바탕으로 작성한 글임을 먼저 밝힙니다. 이번 포스팅에서는 클라이언트에서 GraphQL을 사용하는 방법에 대한 내용을 포스팅 해보려고 한다. 예를 들어 cURL을 사용한다고 했을 때 다음과 같은 값들을 요청 보낼 때 사용할 수 있다. 쿼리 : {totalPhotos, totalUsers} GraphQL 엔드포인트 : http://localhost:4000/graphql 콘텐츠 타입 : Content-Type: application/json 이렇게 요청을 보내면 JSON 형태로 다음과 같은 형태의 결과를 받을 수 있다. cURL이 아닌 다른 HTTP 요청 수단도 물론 사용할 수 있다. 브라우저에서 동작하는 간단한 클라이언트를 ..

해당 포스팅은 프로그래밍 인사이트에서 출판한 (이브 포셀로, 알렉스 뱅크스 저)을 바탕으로 작성한 글임을 먼저 밝힙니다. GraphQL 서비스를 만들 때는 여러가지 언어로 개발을 할 수가 있다. 그 중에서 아무래도 가장 많이 쓰이는 언어 중 하나는 자바스크립트이며 아폴로팀에서 만든 오픈 소스 apollo-server를 현업에서는 많이 사용하는 편이다. 아폴로 서버는 설정하기가 간편하고 프로덕션 레벨에서 사용할 수 있는 여러 가지 기능들을 제공한다. 여기에는 서브스크립션, 파일 업로드, 데이터 소스 API 등등이 포함된다. 그래서 이번 포스팅에서는 아폴로 서버를 가지고 코드를 짜 보려고 한다. 프로젝트 세팅은 다음과 같이 할 수 있다. apollo-server와 graphql을 설치해야 아폴로 서버 인스턴..

해당 포스팅은 프로그래밍 인사이트에서 출판한 (이브 포셀로, 알렉스 뱅크스 저)을 바탕으로 작성한 글임을 먼저 밝힙니다. GraphQL API에서 사용하는 데이터 타입의 집합을 스키마(Schema)라고 한다. 백엔드 팀은 스키마를 보고 어떤 데이터를 저장하고 전달해야 하는지 이해할 수 있으며, 프론트엔드 팀은 사용자 인터페이스 작업을 할 때 필요한 데이터를 정의할 수 있다. GraphQL은 스키마 정의를 위해 SDL(Schema Definition Language, 스키마 정의 언어)을 지원한다. 이번 포스팅에서는 GraphQL SDL에 대해서 알아보고자 한다. 이를 위해 간단한 사진 공유 어플리케이션 스키마를 만들어 보려고 한다. 타입 정의 사진 공유 어플리케이션의 주요 타입은 User와 Photo이다..

해당 포스팅은 프로그래밍 인사이트에서 출판한 (이브 포셀로, 알렉스 뱅크스 저)을 바탕으로 작성한 글임을 먼저 밝힙니다. 우리가 익숙하게 쓰던 SQL이라는 구조화된 영문 쿼리 언어가 있다. 이 언어는 오랜 시간 많이 사용되어오면서 REST와 궁합이 좋았고 나름대로의 장점을 가지고 있었지만, 한계도 분명히 존재헀다. 이를 보완하기 위해 만들어진 GraphQL은 쿼리 데이터베이스 용으로 만들어진 개념을 가져다가 인터넷에 적용해 만들어진 것이다. GraphQL 쿼리 하나로 여기저기 흩어져 있는 데이터를 한데 모아서 받는다. SQL과 GraphQL은 모두 쿼리 언어(Query Language)라는 공통점을 가지고 있다. 차이점은 SQL 쿼리는 데이터베이스로 보내는 반면, GraphQL 쿼리는 API로 보낸다. ..

해당 포스팅은 프로그래밍 인사이트에서 출판한 (이브 포셀로, 알렉스 뱅크스 저)을 바탕으로 작성한 글임을 먼저 밝힙니다. GraphQL이란? 클라이언트의 종류가 다양해지고 복잡해지면서 서버로부터 데이터를 받아와서 빠르고 손실없이 클라이언트에 전송하는 기술은 끊임없이 발전해 왔고 현재도 진행 중에 있다. GraphQL은 이 과정에서 만들어진 쿼리 언어이다. GraphQL 쿼리는 실제로 필요한 데이터만 받도록 작성할 수 있다. 응답은 JSON 형태로 주어진다. 쿼리문을 중첩하여 실행하면 연관된 객체를 응답 데이터로 같이 받을 수도 있다. GraphQL 서버에서는 쿼리가 실행될 때마다 타입 시스템에 기초해 쿼리가 유효한지 검사한다. GraphQL 서비스를 만드려면 GraphQL 스키마에서 사용할 타입을 정의해..

리액트의 상태관리 라이브러리인 리코일(recoil.js)에 대해서 공식 문서를 정리한 내용을 포스팅 해 보려고 한다. 리코일은 기존의 리덕스와 MobX 같은 상태관리 도구들에 비해 가볍고 유연하게 사용할 수 있도록 페이스북에서 오픈소스로 공개한 라이브러리이다. 기존에 전역 상태를 관리할 수 있는 훌륭한 여러가지 방법들이 있는데 왜 페이스북은 새로운 라이브러리를 만들게 된 것일까? 기존의 리액트 상태관리 라이브러리는 Store 라는 곳에 상태를 저장한다. 여기서 Store는 외부 요인이기 때문에 리액트의 내부 스케줄러에 접근할 수가 없게 된다. 그리고 리액트에서도 동시성 모드(concurrent mode)가 등장하면서 리액트와 동시성 모드를 사용할 수 있는 방법을 고민하게 되었다. 덧붙여서, 리덕스와 같은..

CSS in JS 기존에 CSS는 .css 파일에 작성해서 사용하였다. 프로젝트의 규모가 커지면서 항상 큰 스타일 시트를 유지하는 것이 번거로워졌고 그래서 새로운 아이디어가 나왔다. 스타일시트를 문서레벨이 아닌 컴포넌트 레벨로 추상화 하여 마치 모듈처럼 사용하는 것이다. CSS-in-JS는 JS를 사용하여 스타일을 선언적이고 유지보수가 가능한 방식으로 설명한다. JS를 CSS로 전환하는 고성능 컴파일러로, 런타임 및 서버 사이드에서 작동한다. 참고로 인라인 스타일과 CSS-in-JS는 다르다. 차이점이 있다면 인라인 스타일은 DOM 노드에 속성으로 추가하였고, CSS-in-JS는 DOM 상단에 Hello CSS-in-JS 기존에 CSS는 컴포넌트 기반을 고려하여 만들어진 적이 없었다. CSS-in-JS는..

이번 포스팅에서는 리액트에서 코드 스플리팅이 무엇이고 어떻게 하는지에 대한 방법을 간단하게 설명해 보려고 한다. 우리가 리액트 프로젝트를 완성한 후 서비스를 사용자에게 전달하기 위해서는 빌드를 통해서 배포해야 한다. 이 과정에서 파일 크기를 가능하면 최소화 하는 것이 바람직한데, 그 이유는 이 파일 크기가 성능을 결정하고 결과적으로 사용자 경험에까지 영향을 미치기 때문이다. 또한 브라우저에서 JSX나 최신 자바스크립트 문법 등이 문제없이 잘 실행될 수 있도록 트랜스파일링 하는 작업도 해 주어야 한다. 일반적으로 이러한 작업은 웹팩(webpack)에서 담당하며, 웹팩을 따로 설정해 주지 않으면 프로젝트의 모든 자바스크립트 파일은 하나의 파일로 합쳐지고, CSS 역시 하나의 파일로 합쳐지게 된다. 하나의 파..