웹 크롤러 개발자라면 한번 쯤 특정 사이트의 자료들을 자동으로 탐색하고 긁어와야 하는 경우가 생깁니다. (아마도…) 예를 들어, 인기가 많은 어떤 쇼핑몰이 있습니다. 이 쇼핑몰은 신상품이 발매 될 때마다 공전의 히트를 치면서 신상품 공개 몇 분만에 매진이 되기 때문에 매 분 단위로 웹사이트를 봐야만 합니다. 내가 시간이 아주 많은 사람이라서 새로고침 ...
기술 블로그에 Clap을 추가했습니다! (feat. Applause Button)
개요 Github Pages와 같은 정적 웹사이트는 기본적으로 사용자에게 이미 결과가 정해진 콘텐츠를 보여주기 위해 탄생한 솔루션이라서 사용자와의 상호작용이 상대적으로 덜 중요합니다. 하지만 그렇다고 해서 “사용자와의 상호작용이 완전 불필요한가?” 생각해보면 그건 또 아닙니다. 내가 작성하는 게시물이 옳은 게시물인지, 얼마나 많은 호응을 얻고 있는...
프론트엔드 개발자가 알아야 할 Mobile UI 이름들
원문 Nomenclature of mobile app visual elements — Android vs iOS 해당 문서에 나오는 용어 이름과 사진을 참고하여 제 방식대로 간단하게 설명하였습니다. 개요 프론트엔드 개발자는 개발자이기도 하면서 디자이너이기도 합니다. 사용자에게 어떻게 하면 보다 클릭 횟수가 적고 부드러운 사용자 경험을 줄지 ...
[React Native] 유저 위치 트래킹
개요 가끔 어플리케이션을 만들 때 사용자의 위치를 추적해야 하는 경우가 있습니다. 주변 맛집을 찾아주거나, 운전 중 도로 상황을 알려주기 위한 어플리케이션을 제작할 때를 예로 들 수 있는데요. 사용자의 위치 정보를 추적하는 방법을 아래에 기재합니다. 패키지 설치 사용자의 위치 정보를 손쉽게 추적하기 위한 패키지를 설치합니다. yarn add react...
[React Native] 네이버 지도 연동
개요 웹, 앱을 불문하고 사용 될 정도로 지도 서비스는 굉장히 범용적이고 유용한 서비스입니다. 전세계적으로 구글 지도를 사용하지만 국내에서는 구글 지도의 한계 때문에 국내에서 서비스하는 지도를 사용해야 하는데, 보통 네이버 지도와 카카오 지도를 사용합니다. 이 문서에서는 네이버 지도를 연동하는 방법에 대해서 기술합니다. 패키지 설치 네이버 지도를 이용...
Firestore Database 데이터 읽기
개요 Firestore는 NOSQL Base의 데이터베이스입니다. 프론트엔드 및 백엔드 개발자가 직접 구현하기에는 까다롭고 시간도 많이 걸리는 데이터 캐싱, 실시간 조회 등을 아주 간단하게 사용할 수 있는 솔루션입니다. 단일 데이터 읽기 import { doc, getDoc } from "firebase/firestore"; const docRef ...
Firestore Database 개요
개요 Firebase의 Firestore Database는 NoSQL 기반의 Database입니다. 아마존과 같은 Serverless 플랫폼에서 지원하는 일반적인 Database이며, 사용법이 간단하여 많은 주니어 개발자 혹은 서버 개발에 익숙하지 않은 사람들이 많이들 사용하는 서비스입니다. 초기 화면 위 화면이 Firestore Database의 ...
Svelte 가볍게 찍먹 해본 후기
Svelte Svelte는 새롭게 웹 개발 생태계의 강자로 떠오르고 있는 개발 도구입니다. 특징 Svelte가 주장하는 자신들의 세 가지 특징이 있습니다. 적은 코드 가상 DOM을 사용하지 않는다 진정한 반응성 적은 코드 Svelte를 이용하여 직접 Todo 앱을 만들어 본 결과, Hook처럼 다른 프레임워크에서 사용할만한 부분들을 사...