kentakang's blog

안녕하세요, 오랜만입니다 kentakang입니다. 저는 현재 인베스티라는 스타트업에서 CTO로 근무하고 있습니다. 제가 근무하고 있는 스타트업에서 개발자를 모집하고 있어 공고 내용을 블로그에 공유드립니다. 제 블로그에 오시는 분들은 개발자 분들이 많아서 한 번 올려봅니다. 무슨 일을 하나요? 저희는 boundary라는 앱/웹 플랫폼 개발 에이전시를 운영 중입니다. Frontend Engineer / Backend Engineer 두 직종 개발자 분들을 모시고 있습니다. 들어오시게 되면, 새로운 프로젝트에 들어가시게 됩니다. 어떤 사내 문화를 갖고 있나요? 우선 저희는 형식적인 업무보다, 구성원들이 효율적으로 성과를 만들 수 있는 업무를 추구하고 있습니다. 형식적인 문서 작업, 일을 만드는 일들은 과감히 ..

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

BTT 카카오톡 프리셋 개발 후기 macOS 유저들이 많이 사용하는 BetterTouchTool이라는 트윅이 있습니다. 저는 터치바 관련 트윅을 위해 BTT와 GoldenChaos-BTT 프리셋을 이용하고 있는데, 페이스북 메신저 등의 알림수를 표시해주는 아이콘이 마음에 들어서 카카오톡도 이렇게 볼 수 있으면 좋겠다 싶어 해당 아이콘을 개발했습니다. 갑자기 확 꽂혀서 만들었는데, 기존 아이콘들을 참고하니 생각보다 만들기 간단했습니다. 만든 김에 해당 프리셋을 공유하려고 글을 작성했습니다. https://gist.github.com/kentakang/7852bf52201ff5c40e53828b7008f9ac 프리셋은 위 링크에서 다운로드 하실 수 있습니다.

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 환경이 구성되어 있음을 전제..

React Native 앱에 Splash 스크린 추가 개요 많은 어플리케이션에서는 앱이 실행될 때 Splash 스크린을 띄워, 미리 데이터를 가져오거나 백그라운드 작업을 처리한 뒤 앱을 실행하는 경우가 많습니다. 오늘은 react-native-splash-screen 라이브러리를 통해 Splash 스크린을 구현하겠습니다. 개발 환경 React 버전 16.8.3, React Native 버전 0.59.9 버전을 사용하고 있습니다. 패키지 매니저로 Yarn을 사용하고 있습니다. 라이브러리 설치 우선 react-native-splash-screen을 설치하겠습니다. yarn add react-native-splash-screen react-native link react-native-splash-screenS..

React Native 에서 Firebase Cloud Messaging 이용하기 개요 저는 현재 Kotlin으로 작성된 안드로이드 네이티브 앱을 React Native로 포팅하고 있습니다. 기존 어플리케이션에서는 점심 시간이 되면 푸시 알림을 통해 당일 급식 식단을 알려주는 기능이 있었는데, 해당 기능을 React Native로 포팅해야 했습니다. 해당 기능을 구현하면서 구현 방법을 블로그에 올려보면 좋을 것 같아, 해당 방법을 자세하게 알려드리려고 합니다. 주의사항 저는 이미 구현되어 있는 FCM 서버를 이용하기 때문에, 해당 방법은 게시글에 포함되어 있지 않습니다. Firebase 프로젝트 생성 또한 게시글에는 포함되어 있지 않습니다. 개발 환경 React 버전 16.8.3, React Native..

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를 붙여 검색해보기도 했는데,..

Default FirebaseApp is not initialized 오류 발생 시 안드로이드에서 Firebase를 사용할 때, 종종 발생하는 오류입니다. 오류 메세지 자체에서는 FirebaseApp.initializeApp(context)를 호출하라고 보내는데, 이렇게 해도 오류가 해결되지 않는 경우가 많습니다. 해당 상황은 Firebase의 초기 설정에서 놓친 부분이 있는 경우가 대다수입니다. 일단 제 프로젝트에서 초기 설정을 살펴보면서 문제를 해결해보도록 하겠습니다. // Top-level build file where you can add configuration options common to all sub-projects/modules. buildscript { ext.kotlin_versio..

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