개요 저번에 포스팅한 Git 메시지 컨벤션 문서에서 보면 HEAD와 BODY에 대한 소개가 간단하게 나옵니다. 해당 글을 요약하자면, “많은 개발자들이 커밋 메시지에 대해서 무신경하니까 컨벤션에 맞게 상세하게 작성하는게 좋다”라는 내용을 말하는 글이였습니다. 저는 Git을 사용할 때 별도의 GUI 툴을 사용하지 않고 CLI로만 처리하거나, Visua...
NodeJS 설치 및 NPM 사용 예시
개요 NodeJS는 Google이 제작한 Javascript 엔진인 V8 엔진을 이용하여 만들어진 Javascript 런타임입니다. 본래 Javascript라고 하면 브라우저 상에서만 동작하여 홈페이지를 만들 때 제외하고는 아예 쓸 수가 없는 언어 중 하나였습니다. 그런데 NodeJS라는 생태계가 생겨나면서 웹, 서버를 포함한 거의 대부분의 분야에서 ...
Puppeteer 라이브러리를 이용한 웹 크롤러 제작 방법
웹 크롤러 개발자라면 한번 쯤 특정 사이트의 자료들을 자동으로 탐색하고 긁어와야 하는 경우가 생깁니다. (아마도…) 예를 들어, 인기가 많은 어떤 쇼핑몰이 있습니다. 이 쇼핑몰은 신상품이 발매 될 때마다 공전의 히트를 치면서 신상품 공개 몇 분만에 매진이 되기 때문에 매 분 단위로 웹사이트를 봐야만 합니다. 내가 시간이 아주 많은 사람이라서 새로고침 ...
기술 블로그에 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 ...