전체 글

안녕하세요. 사진과 철학에 관심이 많은 웹 프론트엔드 개발자 오원종입니다. 시간이 지나도 꾸준히 읽힐 수 있는 글을 쓰고 싶습니다. 재미있는 일만 하면서 살고 있는 사람입니다.
해당 포스팅은 프로그래밍 인사이트에서 출판한 (이브 포셀로, 알렉스 뱅크스 저)을 바탕으로 작성한 글임을 먼저 밝힙니다. 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 스키마에서 사용할 타입을 정의해..
Frenchpod 101 레벨 1 레슨 32~36까지의 공부한 내용을 정리해 보았다. 어휘 sembler : to seem Il semble être heureux. : He seems to be happy. vieux, vieille : old J'ai jeté de vieux jouets dans la poubelle. : I threw away old toys in the garbage. un numéro : a number J'ai son numéro d'appartement, c'est le trente-six. : I have her apartment number; it's 36. chiffre : digit Mon numéro de compte bancaire contient douze ch..
리액트의 상태관리 라이브러리인 리코일(recoil.js)에 대해서 공식 문서를 정리한 내용을 포스팅 해 보려고 한다. 리코일은 기존의 리덕스와 MobX 같은 상태관리 도구들에 비해 가볍고 유연하게 사용할 수 있도록 페이스북에서 오픈소스로 공개한 라이브러리이다. 기존에 전역 상태를 관리할 수 있는 훌륭한 여러가지 방법들이 있는데 왜 페이스북은 새로운 라이브러리를 만들게 된 것일까? 기존의 리액트 상태관리 라이브러리는 Store 라는 곳에 상태를 저장한다. 여기서 Store는 외부 요인이기 때문에 리액트의 내부 스케줄러에 접근할 수가 없게 된다. 그리고 리액트에서도 동시성 모드(concurrent mode)가 등장하면서 리액트와 동시성 모드를 사용할 수 있는 방법을 고민하게 되었다. 덧붙여서, 리덕스와 같은..
이번 포스팅에서는 Next.js에서 지원하는 동적 라우트(Dynamic Route)에 대한 개념을 살펴보고 간단한 예제로 실습까지 해보는 시간을 가지려고 한다. 참고로 튜토리얼은 Next.js 공식 홈페이지에서 제공하는 자료 및 소스코드를 가지고 진행하였다. 예제는 간단한 블로그를 만드는 프로젝트이다. 블로그의 페이지 컨텐츠는 외부 데이터에 의존하는데, getStaticProps 함수를 통해서 데이터를 패치하고 렌더링한다. 이번에는 각각의 블로그 포스팅 페이지 경로가 외부 데이터에 의존하는 부분에 대해서 다뤄보려고 한다. Next.js에서는 경로를 바탕으로 정적으로 페이지를 생성할 수 있는 기능을 제공한다. 이 기능이 Next.js에서 동적 url을 가능하게 한다. 동적 라우트를 생성한다는 말은 만약에 ..
머릿말에서 저자는 독자에게 세계의 관한 사실을 알고 있는지를 테스트를 하는 13개의 문제를 낸다. 그리고 그 문제를 대부분의 세계인들이 틀린다는 것을 알려준다. 어느 정도로 틀리냐면 무작위로 찍는 침팬지보다 평균적으로 더 많이 틀린다. 놀라운 사실은 소위 말하는 지도자들, 지식인들도 예외가 아니라는 점이다. 오히려 그들이 점수가 더 낮은 경우도 많았다. 저자는 많은 사람들이 극적인 내용에 집중하고 이로 인해 극적인 세계관을 가지게 됨으로서 세상을 체계적으로 왜곡해서 보고 있다고 지적한다. 특히 사람들의 오답 비율이 쏠리는데 그 이유를 저자는 인간이 세상을 인지하는 본능에 기인했다고 판단한다. 그 본능이 체계적인 왜곡을 만들고 있다는것이다. 그렇게 이 책은 현재 인간이 머릿속 세상과 사실 세상이 어떻게 다..
DevOwen
오웬의 개발 이야기