이번 포스팅에선 Twilio를 이용해 Node.js에서 개인 번호를 발급받지 않고, 핸드폰 번호 인증을 매우 간단하게 구현하는 방법에 대해 소개해드리겠습니다.
또 다시 돌아온 회고록이다. 아, 올해는 마스크 좀 벗길 기대했는데 언제쯤 실내 마스크를 해제할지 모르겠다. 겨울 야외 온수 풀 올초 겨울에 그 동안 정말 해보고 싶었던 것을 해봤다. 겨울에 야외 온수 풀에 가보는 것이었다. 얼굴은 춥고 몸은 따뜻한 일본 겨울 온천 같은 느낌을 경험하고 싶었다.
저번 사이드 프로젝트 만들기 - 기획편의 다음 편입니다. 이번엔 nuxt3의 주요 변경사항 일부를 알아보고, 쾌적한 개발 환경을 위해 몇 가지 세팅을 해보도록 하겠습니다. 일단 새로운 Nuxt3 프로젝트를 생성합시다. 터미널을 열고 아래 명령어를 입력합시다. 저는 웹 애플리케이션이면 프로젝트 이름을 보통 도메인 이름과 매칭해서 만듭니다. www 도메인은 이미 사용 중이니, app.drawbeat.com 이라는 이름으로 만들겠습니다. 여러분들은 아무거나 하셔도 됩니다. bashnpx nuxi init app.drawbeat.com cd app.drawbeat.com yarn && yarn dev -o 이렇게 하면 개발 서버가 열리게 되고, nuxt3의 첫 화면이 보이게 됩니다.
올해 첫 개발 관련 주제를 뭘로할까 고민하다가 사이드 프로젝트 아이디어가 떠올라서 그걸 같이 만들어볼까 합니다. 하지만 이미 잘 알고 있던 기술을 사용해서 만들면 재미없겠죠. 사이드 프로젝트는 역시 신기술을 이용해서 만드는게 가장 좋습니다. 나만의 프로젝트를 만들면서 최신 기술도 마음껏 써볼 수 있으니까요. 신기술로 알아볼 것은 바로 Nuxt 3입니다. 아직 베타 버전이기는 하지만, 클라우드 플랫폼인 Vercel과 조합해서 사용해보니 아주 쉽게 서버 없이 서버 사이드 렌더링을 구현할 수가 있더라구요. 서버 없이 서버 사이드 렌더링을 한다는 게 이해가 안가실 수도 있어서 간단히 설명해드리면, 그냥 서버리스 함수 1개로 기존 서버를 대체한다는 말입니다. 뭐 이해 안가셔도 괜찮습니다.
다들 새해 다짐 잘 실천하고 계신가요? 전 아직 다짐을 못했습니다. 약간의 업무 슬럼프가 오는 것 같아서 뭘 해야할지 아직 계획이 없네요. 날 좀 풀리면 운동부터 다시 시작해야할 것 같습니다. 코로나가 얼른 끝났으면 좋겠습니다. 개인 블로그 이 블로그를 운영한지 1년 조금 넘었습니다. 처음에는 정보 공유 + 추억 소장용으로 작성하기 시작했는데, 트래픽이 점점 늘어나서 이제는 글을 써야한다는 기분 좋은 스트레스와 압박감이 생겼습니다.
저는 이메일을 데스크톱과 모바일 환경에서 매일매일 확인합니다. 그런데 아직도 모바일 디스플레이에 최적화되지 않은 이메일을 받을 때가 많습니다. 어차피 확대해서 보면 되니까 크게 상관 없긴하지만, 누군가는 이메일 열었는데 잘 안보이면 짜증나서 이메일을 바로 닫아버릴 수도 있겠죠. 안그래도 내가 보낸 이메일 열게 하는 것도 힘든데 말이죠. 그래서 준비했습니다. 이메일을 좀 더 있어보이게 만들고 싶은 분들을 위해 이번엔 무료로 반응형 이메일 템플릿을 무한으로 즐기는 방법을 소개해드리려고 합니다. (명륜진사메일)
재직 중인 회사가 여름쯤 장기 재택 근무로 전환했습니다. 저는 입사한지 2년 정도 되었는데 대표님이 위워크를 좋아하셔서 그 동안 위워크 선릉, 종로지점으로 출근했습니다. 재택근무가 길어지니까 아무래도 일 효율이 떨어질 수 밖에 없었고, 회사 일은 둘째 치더라도 집에서 허송세월하는 시간이 많아져서 이대로는 안되겠다 싶어서 집 근처 공유오피스를 등록했습니다. 제가 검색했을 땐 용산, 종로쪽은 사실 파이브스팟 말고는 갈만한 곳이 딱히 없었습니다. 저는 주로 혼자서 일을 하기 때문에 굳이 패스트파이브나 위워크같이 너무 비싼 메이저 공유오피스로 갈 이유는 없기도 하구요.
매년 11월 마지막 금요일은 블랙 프라이데이입니다. 원래 무슨 xx데이 하는 것들은 다 마케팅 술수라고 생각해서 일부러 더 클릭을 안하지만, 이번에는 벼르고 있던 제품이 있었습니다. 바로 마샬 액톤 2 입니다!
올해 초 가상화폐 투자가 유행하면서 코인 시세 1초만에 보는 크롬 확장 프로그램 만들기 라는 글을 작성했고, 가상화폐 관련 확장 프로그램을 크롬 웹 스토어에 게시했습니다. 중간에 다른 사이드 프로젝트를 하느라 업데이트를 2-3개월 정도 안하긴 했지만, 꾸준하게 사용해주시는 유저분들 덕분에 꾸준히 업데이트를 진행했습니다. 초기 버전이 꽤 쓸만했기 때문에 유저분들이 계속 재방문하지 않았을까 생각합니다.
안녕하세요. 또 다시 찾아온 평생 무료 시리즈입니다. 저는 틈만나면 1인 사이드 프로젝트를 진행하기 때문에, 어떻게든 공짜로 서버를 돌리기 위해 온갖 노력을 하고 있습니다. 그래서 무료로 이용하는 방법에 관한 글을 몇 개 올렸는데 GA를 살펴보니 다른 주제보다 조회수가 높더군요. 역시 공짜가 좋네요.
저는 이 블로그를 운영하면서 가장 귀찮은 일이 하나 있습니다. 바로 이미지 주소를 만드는 일인데요, 저는 @nuxt/content 모듈을 이용해 마크다운 포맷을 이용하는 정적 블로그를 운영 중이라 글 작성 중에 원격 이미지 주소를 삽입하는 기능을 사용하지 않습니다. 그래서 이미지를 삽입할 땐 클립보드에 저장된 이미지나 가지고 있는 이미지를 제 GitHub Issue 아무거나 골라 댓글에 붙여넣기해서 만들어진 URL을 사용하고 있습니다. 이런 식으로 블로그에 삽입할 이미지 주소를 무료로 만들어서 사용 중입니다 이렇게 하는 이유는 이 블로그 리파지토리에 이미지 리소스를 저장하기 싫고, 외부 저장소를 사용하는 비용을 지불하고 싶지 않기 때문입니다. (참고로 깃허브 저장소는 용량이 무제한이 아니다)
서버를 운영하다보면 예상치 못한 서버 다운이나 응답 속도 저하를 반드시 겪게 됩니다. 원인은 둘째 치구요. 근데 문제는 서버 장애를 원천 차단할 방법이 사실상 없기 때문에, 우리 개발자들이 24시간 눈을 뜨고 지켜볼 수 밖에 없겠습니다.
이전 포스팅에서는 Vite을 이용해 크롬 확장 프로그램을 만들기 위한 기본적인 프로젝트 환경 설정까지 마쳤습니다. 본격적으로 Vue.js 코드를 작성해보도록 합시다.
우리가 Docker를 사용해야하는 가장 큰 이유는, 어떤 컴퓨터에서든 똑같은 개발 환경을 보장해주기 떄문입니다. 로컬 컴퓨터에서 열심히 개발하고 AWS에 코드를 올렸는데, 에러를 마주하며 스트레스를 받았던 경험이 한 번쯤은 있을겁니다. 내 컴퓨터랑 클라우드 컴퓨터의 환경이 100% 똑같지 않기 때문이죠. 근데 이 어려움을 한 번에 해결해준다? 쓰지 말아야 할 이유가 없습니다.
예전에 회사 프로젝트를 진행할 때, 지도에 실시간으로 사용자의 위치를 보여주는 기능이 필요해서 socket.io 를 사용해서 구현했던 적이 있습니다. 여태까지 저는 그냥 무지성으로 실시간이면 무조건 socket.io 써야지~ 했었는데, 이번에 코인 시세 모니터링 앱을 만들 때 소켓 기술을 이용해서 실시간으로 데이터를 받아와야 할 일이 있었습니다.
이전 포스팅에서 index.html과 manifest.json 파일을 이용해서 확장 프로그램을 개발자 모드로 실행시키는 것 까지 진행했습니다. 이번 포스팅에서는 Vue.js와 Vite을 사용해서 프로젝트를 재설계해보도록 하겠습니다. Vue.js Vue.js는 웹사이트를 만들기 위해 고안된 프레임워크입니다. 그냥 순수 HTML을 작성하는 것 보다 개발자에게 훨씬 더 많은 이점을 가져다주기 때문에 사용합니다.
제가 최근 우연히 크롬 확장 프로그램을 개발했는데, 이게 생각보다 꽤 괜찮은 시장이라는 걸 알게 되었습니다. 크롬 확장 프로그램은 이미 여러분들에게 익숙한 웹 기술로 쉽게 개발할 수 있고, React와 Vue같은 SPA 방식의 프레임워크에 매우매우 잘 어울립니다. 심지어 최초 한 번만 5달러를 지불하면, 평생 무료로 앱 배포가 가능합니다.
이번 포스팅은 떠오르는 차세대 자바스크립트 번들러 esbuild에 대한 내용입니다. 작년 Github에서 떠오르는 번들링 프로젝트 중 1위를 차지했고, 오늘을 기준으로 20만개의 가까운 Github Star를 받았습니다.
지난 포스팅에서 rollup.js 를 이용해 두 개의 자바스크립트 파일을 하나로 묶고, rollup.config.js 파일을 구성해서 CLI가 아닌 스크립트로 설정 파일을 관리하는 것 까지 진행했습니다. 이번 시간에는 rollup 에 날개를 달아줄 플러그인들을 살펴보고 나아가 요즘 핫한 typescript 까지 적용해보도록 하겠습니다.
번들링 이라는 말을 프론트엔드 개발자라면 많이 들어보셨을겁니다. 번들링은, 파일을 하나로 묶는 것을 말합니다. 그럼 왜 굳이 파일을 하나로 묶어야 할까요? 바로 HTTP 통신의 특성 때문입니다.
가상화폐 거래소 API를 활용해 브라우저에서 단축키로 빠르게 코인 시세를 확인할 수 있는 툴을 크롬 확장 프로그램으로 만들어보았다.
웹 사이트의 완성도를 결정하는 가장 중요한 요소 중 하나는 바로 폰트 입니다. 폰트는 한국어로 서체 정도로 해석할 수 있겠고, 비슷한 활자의 모음이라고 생각하면 됩니다. 이 폰트는 같은 Family라면 (Serif, Sans-serif 등) 얼핏보면 구분하기 어려울 정도로 미세하게 다릅니다. 하지만, 이 미세한 차이가 독자의 피로도를 크게 좌우하기 때문에 신중하게 선택해야합니다.
거의 대부분의 개발자들이 개인 블로그를 운영하라고 얘기한다. 나도 그렇게 생각한다. 왜냐면 분명히 내가 작성했던 코드인데도, 일주일만 지나도 기억이 안나기 때문이다. 그리고 웬만하면 공개해서 작성하라고 하고 싶다. 이미 우리는 누군가가 옛날에 썼던 글을 보고, 문제를 해결한 경험히 굉장히 많기 때문이다. 나는 이런 개발자들의 문화가 너무 좋다. 이런 개발자들의 문화가 다른 업종에도 접목된다면 정말 좋으련만.
Supabase는 구글 Firebase를 엔터프라이즈 레벨에서도 사용 가능하도록 만든 오픈소스 프로젝트이다. 현재는 베타 서비스이다. 컴퓨터에 직접 설치하는 방식은 아니고, Firebase처럼 클라우드로 제공되는 서비스이다. 내가 Firebase를 사용하면서 아쉬웠던 건, 데이터가 많아졌을 때 인덱싱을 쉽게 적용시켜서 빠르게 레코드를 읽어오는 기능이 강력하진 않아서 데이터가 많은 앱에서는 사용하기 힘들다는 점이다.
작년 말에 이직했으니 이제 곧 입사한지 1년이 다 되어간다. 근데 체감상 나에게 올 한 해는 "나 뭐 했지" 인 것 같다. 분명 기술적으로 굉장히 많이 성장했다.