kentakang's blog

Prisma 2에서 Subscription 구현하기 요약 Prisma 2에서는 Subscription을 지원하지 않는다. (Issue 링크) 이슈 게시글을 보면 Subscription을 지원하기 위해 작업하고 있다고 적혀 있지만, Prisma 팀에서 공개한 로드맵에도 Subscription은 존재하지 않는다. 그러면 어떻게 하지? 직접 만들어야지 뭐 😮‍💨 작업 환경 필자가 작업하는 환경은 아래와 같다. 언어는 TypeScript 사용 제목과 같이 Prisma 2 ORM + nexus 웹 서버로 fastify + mercurius 사용 AWS Lambda 환경에 구축되어 있음 아이디어를 얻어보자 🧐 다행히, Prisma 2에서 Subscription을 지원하지 않아 곤란한 사람은 우리만 있는게 아니다. ..

IntersectionObserver로 구현하는 React 무한 스크롤 오늘은 React에서 IntersectionObserver를 통해 무한 스크롤을 구현해보려 합니다. 요즘 SPA에서는 보통 페이징을 무한 스크롤을 통해 구현하는 경우가 많은데, 무한 스크롤을 구현하는 방법으로는 여러가지가 있습니다. 이번에는 자바스크립트의 Intersection Observer API를 사용해서 구현해보겠습니다. Intersection Observer가 뭔데요? IntersectionObserver API는 element가 viewport, 다른 엘리먼트와의 관계에서 보이는지 안보이는지를 알 수 있도록 하는 API입니다. 많이 사용되는 경우는 지금 제가 구현하려고 하는 무한 스크롤이나, 이미지의 lazyload 등이 ..

Serverless 배포 시 Webpack과 Babel 사용하기 최근 프로젝트에 Serverless Framework를 사용하고 있습니다. GraphQL 백엔드를 AWS Lambda로 배포하기 위해 사용하는 데, 저는 Node.js 프로젝트를 진행할 때 Webpack, Babel을 통해 ES2016을 사용해서 작업하는 편입니다. 근데 보통 Serverless를 통해 배포하는 예제들의 경우 Webpack, Babel을 이용하는 방법이 나와있지 않아서 serverless-webpack 이라는 플러그인을 통해 Serverless에서 Webpack을 사용하는 방법을 정리해보려고 합니다. Requirements 패키지 매니저로 Yarn을 사용하고 있습니다. 기본적인 Serverless 환경이 구성되어 있음을 전제..

Electron 5 업데이트 이후 window.require is not a function 오류 발생 시 해결 방법 4월 25일, Electron 5.0.0 업데이트가 있었습니다. 최신 버전의 출시는 항상 좋은 일이지만, 메이저 버전 업데이트의 경우 많은 오류를 동반하는 경우가 많습니다. 특히 deprecated 예정 API를 사용하는 경우 해당 오류를 피할 수 없는 경우가 많습니다. 저 또한 개발 중이던 프로젝트의 Electron 버전을 5로 업데이트하자 첫 페이지부터 오류가 저를 반겼습니다. 처음에는 window.require is not a function 오류를 구글에 검색해서 해결 방법을 찾아보려 했습니다. 제 개발 환경이 CRA와 Electron인 만큼 react를 붙여 검색해보기도 했는데,..

[Expo] 앱 실행시 Network response timed out 오류 발생 시 저는 React Native 개발을 할 때 Expo를 자주 사용하는 편입니다.개발 시 정말 편리한 점이 많고, Expo 앱을 통해서 실행할 때 케이블이 없어도 가능해서 좋아합니다.하지만 가끔식 LAN으로 실행 시 Network Response timed out 오류가 발생하는 경우가 있습니다. 이런식으로 오류가 발생하게 되는데, 저는 방화벽 설정을 통해 해결했습니다.우선 Windows Defender 방화벽에서 고급 설정으로 가주세요. 그럼 이런식으로 현재 방화벽 설정을 확인할 수 있습니다.여기서 인바운드 규칙에 포트 19000, 19001을 추가해주시면 정상적으로 작동하는 걸 확인하실 수 있습니다.

React Native에서 블루투스 사용하기 사실 React Native는 디바이스를 제어하는 기능을 하기에 효율적인 솔루션은 아닙니다.기기의 디바이스적인 부분을 건드릴 때는 네이티브 코드로 작성하시는 것이 훨씬 간단하지만,사정상 React Native를 통해 모두 구현하게 되어, React Native에서 블루투스를 사용하는 과정을 정리해 블로그에 올려봅니다.우선 라이브러리가 필요합니다.제가 사용할 라이브러리는 react-native-bluetooth-serial 라는 라이브러리 입니다.NPM 또는 Yarn을 통해 설치 후, React-Native CLI를 통해 링크해주세요.저는 Yarn을 이용해 설치하겠습니다. yarn add react-native-bluetooth-serial react-nativ..

React Native에서 구글 지도 사용하기 1. API 키 발급2. 라이브러리 설치3. 적용 API 키 발급react-native-maps 라이브러리를 사용할 때는 구글 지도 API가 필요합니다.구글 지도 API 사이트에 들어가 키를 발급 받아주세요. 라이브러리 설치 NPM과 Yarn 설치 방법 모두 설명하겠습니다.NPM의 경우: npm install react-native-maps --save Yarn의 경우 : yarn add react-native-maps모듈 설치가 완료되면, 라이브러리를 링크해주셔야 합니다. react-native link react-native-maps 링크가 완료되면, android - app - src - AndroidManifest.xml 파일을 열어 구글 지도 API..

Vuetify + Electron 사용하기요즘 프론트엔드 라이브러리의 인기가 상당합니다. 페이스북에서 이끄는 React, 타입스크립트 기반의 Angular2, 항상 떠오르는 신예 취급을 받는 Vue.js 등의 라이브러리가 많은데요.저는 Pure Javascript + Electron을 통해 데스크탑 어플리케이션 작업을 하고 있었는데, Single-Page Application (SPA)로 구성하지 않았던 앱을 SPA로 변경하려니 상당히 어려움이 많았습니다.자바스크립트에서 SPA를 구현하려면 직접적으로 DOM을 건드려주기도 해야하구요.그래서 SPA 관련해서 정보를 찾아보니 React, Vue.js 등의 프론트엔드 라이브러리에 관한 정보가 많이 나와 프론트엔드 라이브러리를 사용해보고,라이브러리를 사용하는 게..

Node.js Electron 프레임 없는 윈도우 만들기 Discord는 Electron으로 개발 된 대표적인 앱이다.개인적으로는 Electron을 사용할 때 좋은 본보기가 될 수 있는 앱이라고 생각한다. 근데 처음 Electron을 사용할 때는 Windows의 기본 프레임이 거슬린다.해당 프레임을 제거하고, 드래그가 가능한 부분을 만들고 앱을 종료할 수 있는 버튼을 만드는 법을 적어보려고 한다.우선 Electron에서 프레임을 제거할때는 BrowserWindow 객체를 생성할 때 frame 속성에 false를 주면 된다.const {app, BrowserWindow} = require('electron')const path = require('path') function createWindow () {..

Node.js 에서 PostgreSQL 연동 저는 데이터베이스를 사용할 때 주로 PostgreSQL을 사용하고 있습니다.이번에는 Node.js 를 통해 프로젝트를 진행 중이라, PostgreSQL과 Node.js를 연동하는 방법을 정리하여 작성해봤습니다.Node.js의 가장 큰 장점은 npm이라 생각합니다.대부분의 모듈들을 npm으로 받을 수 있다보니 정말 편리했습니다.PostgreSQL 서버는 이미 설정되어 있다는 전제하에, 연동을 시작하겠습니다.우선 연동을 위해 'pg' 라는 모듈을 받겠습니다. npm i pg --save 기초적인 연결을 하는 코드를 작성해보겠습니다. const { Client } = require('pg'); const client = new Client({ user : 'DB 사..