프로그래밍

웹 & 모바일 개발에 관련된 것들

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 라는

프로그래밍

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적인 관점에서는 좋지 않은 경험이기 때문에 이를 수정 할 필요가 있다.

Flutter

[Flutter] 사용자 지정 이미지와 폰트를 사용 할 수 있도록 설정하기

Flutter 앱에서 이미지와 폰트를 사용하기 위해서는 앱을 패키징 할 때 필요한 파일들이 같이 패키징이 되도록 설정을 해 주어야 한다. 이번 포스트에서는 어떻게 설정하는 지 알아본다. #pubspec.yaml 파일 수정 앱에 패키징 할 파일들과 라이브버리 설정은 pubspec.yaml에서 한다. 이 파일은 프로젝트의 루트 디렉토리에 존재하고 있다. 우선 pubspec.yaml을 수정하기 전에

Flutter

Flutter를 이용한 앱 개발 준비

본격적으로 Flutter를 이용한 앱 개발을 시작하기 전에 갖춰야 할 개발 환경과 알아두면 좋은 것들에 대하여 정리 해 보았다. # IDE 설정 Flutter 개발은 Flutter SDK만 컴퓨터에 설치 되어 있으면 어떤 IDE를 사용해도 개발 자체는 가능하지만, 개발을 편하게 하기 위해선 Android Studio를 추천한다. 그 다음으로 추천하는 건 Visual Studio Code. Android Studio를

앱 개발

앱을 만들 때 알아두면 좋은 것들

일반적으로 앱을 만들 땐 기획, 디자인, 개발 이렇게 나뉘는 경우가 많다. 보통 각 분야를 한명씩 맡아서 하게 된다. 혼자서 할 땐 이 3가지를 모두 스스로 해야하는데, 실제로 개발에 들어가기 전에 알아두면 좋은 것들을 정리해보았다. #간단한 기획 제대로 된 앱 디자인을 하기 전에 간단하게 기획서를 적는 것이 좋다. 처음부터 이것 저것

UI/UX

Adobe XD에 UI Kit 추가하기

Adobe XD는 무료로 사용할 수 있는 프로토타이핑 툴이다. 앱 디자인 툴은 Sketch나 Figma 같은 툴도 자주 사용되고 있지만 난 무료라는 이유 하나만으로 Adobe XD를 사용하고 있다. 앱을 개발할 때 iOS든 Android든 각각 애플과 구글에서 디자인 가이드를 배포하고 있다. 이번 포스팅에서는 Adobe XD에 UI Kit를 추가하는 방법을 간단하게 알아본다. #UI Kit

Flutter

Flutter로 Android앱을 개발하기 위한 설정

이번 포스트에서는 Flutter의 Android앱 용 설정에 대해 알아본다. #Android Studio 설치 우선 Android Studio가 설치되어있어야한다. 공식 홈페이지에서 자신의 os에 맞는 버전을 다운로드 하여 설치하자. #에뮬레이터로 실행하는 방법 설치가 끝나면 Android Studio를 실행하고 자신의 flutter 프로잭트가 있는 폴더안에 있는 android 폴더를 선택해서 열어준다. (사실 새로운 프로잭트 생성, 혹은 아무 다른 프로잭트를

Flutter

Flutter앱을 실제 iPhone에서 테스트하기 위해 필요한 설정

지난 포스팅에서는 iOS앱을 시뮬레이터로 돌리기 위한 설정에 대해 설명하였다. 이번 포스팅에서는 실제 아이폰에서 구동시키기 위해 필요한 설정에 대해서 알아보도록 한다. 우선 터미널을 열고 자신의 flutter 프로잭트가 있는 디렉토리에서 아래 커맨드를 실행한다. open ios/Runner.xcworkspace 그러면 xcode가 열린다. 우선 아이폰을 컴퓨터에 연결한다. 그 다음 왼쪽 위에 "Runner > iPhone xx" 부분을

Flutter

Flutter에서 iOS 앱 개발을 위한 설정

Flutter를 이용하여 iOS 앱을 개발하기 위해서는 Flutter의 기본적인 설치 외에 해야 하는 설정들이 있다. 이번 포스트에서는 필요한 설정에 대해 알아본다. # Xcode 설치 iOS 앱을 개발하기 위해서는 무조건 Xcode가 설치되어 있어야 한다. 앱스토어에서 다운로드 받을 수 있다. 다운로드 받고 설치가 끝났다면 터미널에서 아래 커맨드를 실행해주자. sudo xcode-select --switch /Applications/Xcode.app/

Flutter

Flutter를 설치해보자

Flutter는 구글에서 개발한 프레임워크로 모바일웹, 웹앱, 데스크탑앱을 모두 하나의 코드베이스로 만들 수 있다. 사용하는 프로그래밍 언어는 DART. 이번 포스팅에서는 MacOS에서 Flutter를 설치하는 법을 알아본다. 리눅스와 윈도우에서도 Flutter를 사용할 수 있지만 iOS앱을 만들 수 없다. iOS앱을 패키징 하는데는 Xcode가 필수인데 맥에서 밖에 지원이 안되는 것으로 알고 있다. # Flutter 파일 다운로드 공식

파이썬

pysftp로 파일 업로드 하기

최근에 sftp로 파일을 업로드 하는 파이썬 스크립트를 쓸 일이 있어서 코드 공유. 우선은 pip을 이용하여 pysftp 패키지를 설치 pip install pysftp 그 다음은 아래 코드를 사용해주면 된다. 유의 할 점은 해당 호스트에 처음 접속을 시도 하는거라면 스크립트를 실행하는 서버에 호스트에 대한 호스트키가 없기 때문에, 따로 설정을 해주지 않으면 호스트에 접속이

자바스크립트

[자바스크립트 기초-8] Array 기본 메소드-2

지난 포스팅에 이어 이번 포스팅에서도 기본 메소드에 대해 알아보도록 하겠습니다. #알파벳 순서대로 정렬 Array의 아이템들을 알파벳 순서대로 정렬할 땐 sort()를 쓰면 됩니다. var arr = ["Bear", "Cat", "Ant", "Elephant", "Dog"]; arr.sort(); console.log(arr); // 결과 -> ["Ant", "Bear", "Cat", "Dog", "Elephant"] 한글도 가나다 순서로 정렬 할 수 있을까요? var

자바스크립트

[자바스크립트 기초-7] Array의 기본 메소드

개발을 하다보면 반드시 사용하게 될 Array (배열). 이번 포스팅에서는 기본적으로 사용할 수 있는 array의 메소드들에 대해 알아보도록 하겠습니다. 이런게 가능하구나 정도로만 알고 있으면, 나중에 개발할 때 솔루션을 생각할 때 도움이 됩니다. #Array의 기초 자바스크립트에서 array는 []로 표현합니다. var arr = []; // 아이템이 없는 빈 array var arr = ["Hello", "Bye", "World", "Good", 100,

자바스크립트

[자바스크립트 기초-6] 변수를 생성하는 법

자바스크립트에서 변수를 생성하는 방법은 3가지가 있습니다. 이번 포스트에서는 각각의 변수 생성법에 어떤 차이가 있는지 알아보도록 하겠습니다. #var 우선 가장 기본적인 형태는 var를 이용하는 것입니다. 영어 "Variable"의 약자로 변수를 뜻합니다. 특징으로는 생성한 변수의 값을 바꾸는 것이 가능하고, 다시 같은 이름의 변수를 재정의 하는 것이 가능하다는 점입니다. var a = "Hello"; console.

MongoDB

MongoDB 검색 기능 활용하기

어플리케이션을 만들다 보면, 검색 기능은 빠질 수 없는 기능 중 하나이다. 하지만 실제로 구글처럼 키워드나 문장을 넣어서 검색되는 기능을 구현하려면 매우 복잡해진다. 일반적으로 검색엔진에서 검색 기능은 다음과 같이 구현된다. 1. 이용자가 넣은 키워드 혹은 문장을 읽어들인다. 2. 문장이라면 키워드를 뽑아서 나눈다 3. 데이터베이스에서 해당 키워드와 문장을 이용하여 검색을 돌린다. 4.

자바스크립트

자바스크립트의 모듈화와 표준에 대하여

자바스크립트는 기본적으로 모듈화 기능이 없었다. 여러 .js 파일로 쪼개서 모든 파일들을 일일이

자바스크립트

[자바스크립트 기초-5] this에 대해 알아보자

자바스크립트 코드를 읽다보면 this가 자주 언급되는 것을 볼 수 있습니다. this는 함수 안에서 사용되는데, 처음엔 그 사용법이 헷깔릴 수 있습니다. 간단하게 말하면 this는 해당 함수를 실행한 오브젝트를 뜻합니다. var a = "Hello" function test() { var a = "Bye"; console.log(this.a); } test(); // 결과 -> "Hello" 위 코드를 실행해보면 결과가 test 함수

자바스크립트

[자바스크립트 기초-4] 함수 (Function) & 콜백 (Callback)

함수는 프로그램의 특정 동작을 수행하는 코드를 말합니다. 다른 말로는 메소드(method)라고 불리우는데, 오브젝트 안에 있는 속성들 중, 값이 primitive data types가 아니고 함수인 경우를 해당 오브젝트의 속성이 아닌 메소드라는 식으로 표현합니다. var obj = { name: "John", age: 20, say_hello: function () { console.log("Hello"); } } obj.say_hello(); // 결과 -> Hello