sy34

임시 전화번호

휴대폰 인증번호를 받기 위한 임시 전화번호를 무료로 제공하는 사이트들

요즘엔 어떤 서비스를 이용하던 휴대폰으로 인증번호를 받고 그 인증번호를 넣어야만 사용할 수 있는 서비스들이 많아졌다. 개인정보 보호를 이유로 내 전화번호를 직접 사용하기가 꺼려지는 서비스들이 있는 것도 사실. 그럴 때 사용할 수 있는 임시 전화번호를 회원가입 같은 절차 없이 무료로 제공하는 사이트들을 모아보았다. 주의 할 점은 요즘 많은 서비스들에 도입되고 있는

Flutter

[Flutter] TextField 바깥 영역을 터치 했을 때 키보드가 감춰지게 만들기

Flutter의 TextField는 유저의 인풋을 받기 위해 사용하는데 한번 Focus가 들어가면 키보드의 "완료" 버튼을 누르거나 키보드 감추기 버튼을 누르지 않으면 키보드가 화면에서 사라지지 않는다. 이번 포스트에서는 TextField의 바깥 영역을 사용자가 터치 했을 때 키보드가 감춰지게 만드는 법에 대해서 간단하게 알아본다. onTapOutside TextField 위젯에는 onTapOutside 라는 설정을 할 수가 있다. 말 그대로

Flutter

[Flutter] TextField의 값을 TextInputFormatter를 이용하여 내가 원하는 포멧으로 바꾸기

Flutter에서 사용자의 입력을 받을 때는 주로 TextField를 사용하게 되는데, 아무 값이나 아무 포멧으로 받아들이는게 아니고 내가 원하는 값을 원하는 포멧으로만 받아들일 수 있도록 설정하고 싶은 경우가 생긴다. 예를 들면 전화번호 입력창이나 카드번호 입력창의 경우, UX적인 부분에 있어서도 정해진 포멧으로 자동으로 입력이 되는 것이 사용자 입장에서도 알기 쉽다. 이번 포스트에서는 Flutter의

Flutter

Flutter에서 Locale을 적용하는 법에 대해 알아보자

Flutter로 개발을 하다보면 이미 기본적으로 탑재되어 있는 위젯들을 사용할 때 기본 설정으로 언어는 영어로 설정이 되어있다. 예를 들면 날짜를 선택 할 수 있게 도와주는 showDatePicker 같은 경우 locale 옵션을 따로 설정하지 않으면 영어로 나오게 된다. 그 외에도 여러 언어를 지원하는 앱을 만드는 경우 locale 설정은 필수이다. 이번 포스트에서는 Flutter에서 Locale을

프로그래밍

터미널에서 여러 파일 한거번에 옮기는 법

GUI가 없는 서버 상에서 파일을 옮겨야 되는 경우가 생긴다. mv 커맨드를 사용하여 파일을 옮길 수 있지만 많은 파일들을 한거번에 옮겨야 하는 케이스가 있다. 이번 포스트에서는 와일드카드를 사용해서 파일을 한거번에 옮기는 법에 대해 알아본다. *와일드카드 와일드카드(*)는 문자 앞뒤로 지정 할 수 있다.  abcdef.jpg 라는 이름의 파일과 cdef.jpg 라는

Stable Diffusion

Stable Diffusion을 Mac에서 직접 돌려보자

프롬프트를 넣으면 이미지를 생성해주는 AI 중 하나인 Stable Diffusion. 온라인에 이미 여러 서비스들이 있지만 무료 서비스는 한정적인 경우가 많다. 좀 더 제약 없이 이것저것 테스트 해보고 싶다면 본인의 컴퓨터에 설치해서 돌리는 것이 최선. 이번 포스트에서는 Stable Diffusion Web UI를 Mac에 설치해서 사용하는 법에 대해서 간단하게 알아본다. 필자는 Mac Mini M2

IT & 테크

나에게 맞는 USB-C와 썬더볼트 케이블을 고르는 법에 대해 알아보자

USB-C와 썬더볼트는 둘 다 단자가 똑같이 생겼기 때문에 일반 사람이 보기에는 똑같다고 생각하기 쉽다. 물론 USB-C 단자에 썬더볼트 케이블을 꼽아도 문제 없이 사용 할 수 있다. 하지만 스펙이 다르기 때문에 본인이 사용하고자 하는 용도에 맞는 케이블을 사용하지 않으면 원하는 기능이 구현이 되지 않을 수 있다. 이번 포스트에서는 용도에 맞는 케이블을

프로그래밍

FormSubmit을 이용해서 문의사항 폼을 만드는 법을 알아보자

블로그나 웹사이트를 운영하다 보면 이용자들이 운영자에게 연락을 할 수 있는 폼을 만들어야 할 때가 있다. 이 때 단순히 이메일 주소를 적어두고 이용자가 직접 그 이메일 주소로 메일을 보내게 끔 하는 방법도 있지만, 온라인에 이메일 주소를 텍스트로 적어두면 쉽게 스크레이핑의 대상이 되고 스팸 메일이 잔뜩 오는 원인이 될 수 있다. 이용자가

Flutter

Flutter에 Firebase를 연결하는 법

Flutter와 Firebase는 함께 자주 쓰는 일이 잦은데, 연결은 처음에 한번만 하면 그 다음부터 신경을 안써도 되다보니 기억을 잘 못하고, 매번 새로운 프로잭트를 실행 할 때마다 방법을 찾아보았다. 매번 찾기 귀찮아서 이번 포스팅에 정리를 해보았다. iOS, Android, Web 3가지 모두를 연결하는 법에 대해 알아본다. # iOS 우선 패키지명을 정하는 것부터 시작을 해야한다.

ghost

ghost를 컨테이너에 설치하는 방법

Google Compute Engine (GCE)에서 fly.io로 이사를 갔지만, fly.io에서 무료로 제공하는 메모리 용량이 256mb 밖에 되지 않아 자주 다운 되는 일이 발생하였다. 그래서 다시 GCE의 무료 인스턴스로 돌아가는 김에, 서버 자체에 설치하지 않고 Docker 컨테이너를 이용해서 설치하게 되었다. 지금 GCE의 무료 인스턴스는 E2-micro, 1GB Ram, 30GB 표준 SSD가

Flutter

Flutter에서 Responsive Layout 설정하는 방법

Flutter는 WebApp에도 대응하고 있기 때문에 responsive layout을 설정 할 수 있다. 이번 포스트에서는 어떻게 구현하면 되는지 설정 방법에 대해 간단히 알아본다. #Responsive Layout Widget main.dart에 있는 MaterialApp에 직접 코드를 작성하는 것도 좋지만 관리를 편하게 하기 위해 레이아웃용 위젯을 따로 만드는 것이 용이하다. responsive_layout_screen.dart import 'package:flutter/

프로그래밍

NextJS 스크롤 포지션 유지/복구하기

NextJS에서는 라우팅을 할 때마다 페이지 컴포넌트가 페기되고 리빌딩이 되기 때문에 그 때마다 스크롤 포지션이 리셋되는 현상이 나타난다. 예를 들어 검색 결과 리스트가 나오고 상세 페이지로 라우팅 했다가 다시 뒤로 가기를 했을 경우, 리스트가 리빌딩 되면서 스크롤 포지션이 리셋되고 만다. UX적인 관점에서는 좋지 않은 경험이기 때문에 이를 수정 할 필요가 있다.

배낭여행기

# 4-8 Don't Worry Be Hampi

Don't worry be hampi. 지형이 특이한 곳으로 유명한 인도의 함피. 클라이밍 하는 곳으로도 유명해서 클라이밍을 좋아하는 여행자들은 다른 곳은 안가고 무조건 바로 함피로 직행하는 사람들이 있을 정도. 특이한 사원들도 많아서 인도 학생들이 수학여행으로도 많이 오는 듯 하다. 한국으로 치면 경주로 소풍을 가는 느낌일 듯. 여기저기 발길이 가는대로 돌아다니다 보면 유적들

배낭여행기

#4-7 인도의 휴양지 고아

고아는 인도 사람들이 휴양으로 가는 주. 인도 사람들 뿐만이 아니라 러시아 사람들이 겨울에 추위를 피해서 장기적인 휴양을 즐기러 오기도 하는 곳이다. #아람볼 바다를 목적으로 오는 대부분의 사람들은 고아의 아람볼로 향한다. 휴양을 목적으로 오는 곳이기 때문에 크게 할 일이 많지는 않다. 그냥 해변가에서 빈둥대다가 밥 먹고 자고 배구하고 축구하고 그러면 되는

배낭여행기

#4-6 뭄바이

뭄바이는 도시라서 크게 볼거리가 많은 건 아니지만, 인도를 여행하면서 조금 지치고 속세가 그리워 질 때 쯤에 거쳐가며 쉬기에는 좋은 곳이다. 피자 파스타 커피 케익부터 영국식 바버샵까지 돈을 쓸 준비만 되어있다면 선진국 도시에서 볼 수 있는 왠만한 건 다 찾을 수 있는 곳이 뭄바이. 내가 묵은 침대가 2개 놓여있는 방. 700

여행

홋카이도 맥주공장 투어 비교

홋카이도에 짧게 놀러 갔다 왔다. 친구를 만나서 보드를 타는게 주된 목적이었지만, 하루 날을 잡고 이전에 홋카이도를 방문 했을 때 하지 못했던 기린과 삿포로 맥주 공장 투어를 오전과 오후로 나눠서 혼자 갔다 왔다. 두 공장 모두 삿포로 보다는 공항이 있는 치토세에서 가깝기 때문에, 삿포로까지 가기 전에 하루 치토세에 묶으며 다녀오면 좋다.

IT & 테크

nginx로 WebDAV 서버 구축하기

홈 서버를 운영 할 때 WebDav 서버를 구축해두면 파일을 관리하기가 편해진다. 이번 포스트에서는 nginx로 WebDav 서버를 구축하는 법에 대해서 알아본다. 환경은 Ubuntu22.04 LTS를 사용하였다. 필요한 모듈 패키징 일반적으로 apt를 이용하여 nginx를 설치할텐데, nginx의 기본 패키지에는 WebDav 서버를 구축하는데 필요한 일부 기능이 탑재되어 있지 않다. 그렇기 때문에 WebDav 확장 모듈을

ghost

Gmail을 Ghost의 메일 서비스로 사용하는 법

Ghost의 최신버전에서는 예전처럼 구독 할 때 이메일을 등록하면 되는게 아니고, 스펨방지를 위해 실존하는 이메일인지 확인메일을 보내는 과정이 추가되었다. 구독 서비스를 제공하거나 Ghost의 자체 코멘트 기능을 사용하기 위해서는 확인메일 전송이 필수이며, 그러기 위해서는 메일서비스를 필수적으로 설정해야한다. Ghost에서 권장하고 있는건 Mailgun인 듯 하지만, Mailgun은 일단 무료 티어가 없어졌고, Mailgun이 필수인건 뉴스레터 기능을

IT & 테크

Gmail을 자기가 가진 도메인 주소로 사용하기

어떠한 이유로 홈페이지를 운용하고 있어도, 이메일로 여러사람들과 소통 할 일이 생긴다. 그럴 때 실제로 자신이 사용하고 있는 Gmail 주소를 사용하기 보다는, 자신의 도메인이 들어간 이메일 주소를 사용하는 것이 조금 더 전문적으로 보일 수 있다. 대외적으로는 자신의 도메인이 들어간 이메일 주소를 전송과 수신 모두에서 사용하지만, 실제로 관리하는 건 기존에 이미 사용하고

ghost

Ghost 업그레이드 & 이사

오랫동안 ghost v2를 사용하다가 Google Cloud에서 fly.io로 이사하는 김에 최신버전인 ghost v5로 업그레이드 하였다. 편리한 기능이 추가 된 거 같으면서도 대부분이 개인 블로그에서는 필요 없는 기능들이라 크게 좋아졌다는 체감은 아직 없다. 멤버쉽이나 커머스 기능이 중점적으로 추가 된 듯 한데, 템플릿 작업(한글화)을 어떻게 해야하는지 공식 사이트 포럼이나 문서들을

Docker

Docker Compose를 사용하여 여러 컨테이너를 한번에 관리해보자

웹 앱을 개발 할 때 대부분의 경우는 앱과 데이터베이스의 두가지가 필요하다. 데이터베이스 부분을 DaaS와 같이 외부 서비스로 이용하는 경우도 있겠지만 자신의 서버에 직접 돌리는 경우도 많을 것이고, 데이터베이스를 컨테이너 안에서 돌리고 싶은 경우도 있을 것이다. 이번 포스트에서는 앱과 데이터베이스의 컨테이너를 동시에 관리 할 수 있는 docker compose에 대해 알아본다. 예제로

Docker

Docker Image를 만들어보자

이번 포스트에서는 간단한 앱을 예제로 Docker Image를 만드는 법을 알아본다. 사용 할 앱은 React의 샘플 앱인 counter-app (github, live demo) 이다. git clone https://github.com/arnab-datta/counter-app.git 소스 코드를 다운 받으면 준비 완료. #Dockerfile 작성 우선 소스코드가 있는 디렉토리로 이동한 다음 Dockerfile을 작성해 준다. sudo nano Dockerfile 내용은

Docker

Docker의 기초를 알아보자

간단히 혼자서 사용 할 앱이라면 그냥 서버에 직접 모든 세팅을 해두고 실행하면 되지만, 규모가 좀 되는 앱의 경우는 트레픽 부하를 여러 곳으로 나눠줘야 한다. Docker 이전이라면 VM (Virtual Machine)을 여러가지 만들어서 관리하는게 일반적이었지만, Docker가 나온 이후로는 컨테이너로 관리하는 것이 일반적이게 되었다. 컨테이너 안에 앱을 실행하는데 필요한 모든 걸 담아두면,

IT & 테크

nginx의 기본적인 설정들을 알아보자

웹 서비스를 운영하기 위해선 필수적으로 apache 혹은 nginx가 필요하다. 이번 포스트에서는 nginx의 기본적인 설정에 대해 알아본다. #sites-available & sites-enabled nginx의 폴더 안을 들여다 보면 sites-available과 sites-enabled라는 폴더가 존재한다. 이 폴더들은 한 웹서버에서 여러가지 웹 서비스를 다른 도메인으로 운영 할 때를 대비해서 있는 폴더라고 이해하면 된다. sites-available에는 각 도메인의 고유 설정 파일을

IT & 테크

우분투 서버에 와이파이 설정 하는 법

일반적으로 서버는 안정적인 연결을 위해 유선랜을 사용하지만 집에서 간단하게 홈 서버 용으로 사용할 때는 와이파이로 연결하고 싶을 때도 있을 것이다. 이번 포스트에서는 우분투 서버에서 와이파이로 인터넷에 연결하기 위한 방법에 대해 알아본다. #필수 패키지 설치 와이파이 연결엔 비밀번호가 필요한데, 우분투 서버에는 WPA 형식의 패스워드가 걸려있는 와이파이에 연결하기 위한 기본적인 패키지가 설치되어