kkuma

[Review] 샤오미 로봇청소기 5세대 (Xiaowa E35)

sohyun_ — Mon, 16 Mar 2020 00:17:58 +0900

# 샤오와 로봇청소기 E35 (Xiaomi Xiaowa E35 Robot Vacuum Cleaner)

대륙의 실수 샤오미 샤오와 로봇청소기 6개월 사용 후기를 리뷰하려고 합니다 :)

우선 샤오와는 샤오미가 구축한 생태계 브랜드에 속해 있는 유통 브랜드 중 하나입니다

실제로 제가 구매 했을 때는 E35를 5세대라고 표기했는데, 6개월이 지난 지금 6세대라고 표기하더라구요

확실한 정보를 제공하기 위해서 찾아 봤습니다!

우선 결과를 먼저 알려드리자면 E20는 4세대, E35는 5세대가 맞습니다.

한 세대씩 높여서 최신형처럼 보이게 하는 눈속임이 있기 때문에, 최저가 순으로 정렬해서 그냥 구입하시지마시고 꼭 상세정보 확인 후에 구입하세요★

나무위키 - 샤오미 로봇 청소기

샤오미 로봇 청소기 - 나무위키

구매가격은 1, 2세대 중저가부터 3세대 저가형으로 포진되어있다. 정식 명칭로보락 S50 청소 로봇 (石头扫地机器人S50 Shítou Sǎodì Jīqìrén S50, 북미 정발명 Roborock S5)제조사Beijing Roborock Technology Co., Ltd. (北京石头世纪科技有限公司)출시일2017년 9월 19일크기350mm x 353mm x 96.5mm배터리14.4V / 5200mAh 리튬 배터리 2시간50분 연속사용중량3.5kg센서LID

namu.wiki

E35의 특징을 간단하게 설명하면, 듀얼 자이로스코프 관성 항법 시스템과 고정밀 듀얼 광학 모션 트래킹 센서를 결합하여 실시간으로 청소경로를 계획하며 식물학적 생체공학 물걸레 시스템과 2000Pa 흡입력으로 쓸고나서 걸레질이 가능하다.

자세한 스펙들을 살펴볼까요?

첫 번째, 5200mAh 배터리 탑재.

대용량 리튬 배터리를 사용하여 표준모드에서 평균 약 2.5시간의 사용이 가능하다

두 번째, 강력한 흡입력의 쓸기와 물청소 가능.

사이드 브러쉬, 수직 롤 브러쉬, 2000Pa의 강력한 흡입력, 물청소 기능으로 더욱 깨끗한 청소가 가능하다

세 번째, 서랍식 탈착방식 물탱크.

물청소에 필요한 물을 간단하고 쉽게 청소기의 바닥에 고정시켜 뒤집히는 것을 방지한다

네 번째, 자동구역 청소.

로봇청소기에 장착된 13종류의 센서가 실시간으로 주변환경을 지도로 만들어 구석구석 청소가 가능하다

다섯 번째, 배터리 자동충전.

배터리가 부족하면 자동으로 충전 스탠드로 복귀하고, 청소중이었다면 80% 충전 후 복귀 전 지점으로 돌아가 자동으로 재시작한다

그 외에도 2cm높이의 장애물 넘어가기, 대용량 먼지통 탑재 등 좋은 기능으로 가득가득!!

샤오미 한글판 로봇청소기

샤오미 한글판 로봇청소기 6세대 E35 블랙에디션 국내발송 국내AS Y

COUPANG

www.coupang.com

처음엔 이리 쿵 저리 쿵 치이는 로봇청소기를 보고 멍충이라고 부를 때가 있었는데, 요즘에는 얘 없이는 못살게 되어버렸어요

특히 도움이 많이 됐던건 가상벽 마그네틱 스트립인데요

기본적으로 낭떠러지 센서가 있어서 신발장같은 곳으로 떨어지지는 않지만,

워낙 똑똑해져서 2cm 높이의 장애물을 훌쩍 넘어가는데, 베란다나 화장실 문턱을 넘으려다가 바퀴가 빠지는 경우가 종종 있어서 집에 있을 때만 청소를 했었던 슬픈 기억이ㅠㅠ

지금은 청소를 원하지 않는 구역 문턱 앞에다 가상벽을 설치해서 맘편히 돌려놓고 외출 할 수 있게 되었어요!!

샤오미 가상벽 로봇청소기 마그네틱 스트립

샤오미 가상벽 로봇청소기 마그네틱 스트립 4M 범용 1팩

COUPANG

www.coupang.com

# Xiaowa E35 UNBOXING(언박싱)

두둥 드디어 샤오와 로봇청소기를 개봉하도록 하겠습니다 :)

다크그레이와 블랙 컬러의 조합인 블랙에디션이라서 기존보다 더 고급스러운 느낌이 있네요

자세한 내용은 설명서에서도 보겠지만, 버튼은 왼쪽부터 스팟청소 / 청소 종료 및 시작 / 재충전 역할 입니다

버튼 아래쪽의 넓은 부분을 열면 먼지통이 들어있어요

처음 열면 그림으로된 설명서가 또 부착되어있으니 어렵지 않게 사용하실 수 있습니다

얘가 바로 충전기, 로봇청소기의 집이에요

오래 사용하다보면 가끔 충전소에 먼지가 쌓였으니 청소해달라는 알림을 받을 수도 있습니다....

그리고 아래는 방수패드를 설치했을 때의 모습입니다

이게 5세대의 핵심, 물걸레 기능을 할 수 있는 물통과 걸레에요

물걸레를 사용할 때에는 꼭 충전기에 방수패드와 함께 사용하는게 좋습니다. 저처럼 목재바닥이라면 필수!

먼지통에 부착해야하는 필터 여분과 메인브러시 청소도구는 별도로 잘 보관해두고 있다가,

설명서에 있는 정기 유지 보수 청소기간과 교체 권장 기간을 참고해서 관리하면 됩니다.

본격적으로 사용설명서를 읽어봅시다!

제품은 단순하지만, 그 안에 기능과 역할이 많다보니 설명하는 양도 어마어마하네요

기본적으로 부품설명, 설치방법, 정기유지보수 방법 및 시기가 자세하게 설명되어있으니 꼭 한번은 제대로 읽어보셨으면 좋겠어요

# Mi Home Application 연동

Mi Home App에는 로봇청소기 외에도 다양한 가전기기를 연동할 수 있는데요, 저는 Xiaowa E35(E Series)를 선택한 후 사용중입니다.

현재 배터리량과 청소 상태, 예약 청소 기능까지 다양하게 제공하고 있어서 외부에서도 관리가 가능합니다

메뉴의 가장 오른쪽 표준부분을 누르면, 아래의 화면처럼 모드를 설정할 수 있어요

안정, 표준, 강도, 최대 흡입력이 점점 높아질 수록 소음도 심하니 참고하세요!

실제로 청소가 완료되었을 때 지도 버튼을 누른 화면입니다

어디를, 얼마나 청소했는지 한 눈에 볼 수 있고 침대 밑까지 구석구석 잘 다녔다는게 보여서 좋아요

# 실행영상

저희집에 처음 들어와서 이리저리 쿵쿵하면서 청소해야할 구역을 찾는 작업, 맵핑 중에 찍은 영상입니다 :)

[IT] Google, 크롬 UA스트링 (User Agent String) 사용 중지

sohyun_ — Tue, 21 Jan 2020 15:53:44 +0900

이 페이지는 이전에 포스팅했던 Get User Agent And IP Information 의 변화에 대해 설명하고 있다.

[JAVA] Get User Agent And IP Information

이 페이지에서는 IP, Agent, 브라우저, OS등의 접속자 정보를 가져오는 방법에 대해 설명하고 있다. # IP X-Forwarded-For (XFF) 헤더는 HTTP 프록시나 로드 밸런서를 통해 웹 서버에 접속하는 클라이언트의 원 IP..

kkumalog.tistory.com

약 일주일 전 쯤 ZDNet을 통해 구글이 크롬 웹 브라우저에서 'User agent string(사용자 에이전트 문자열)'의 사용을 중지하며 점진적으로 폐기한다는 계획을 발표했다는 내용을 전해들었다.

사용자 에이전트 문자열이란, 사용자를 대신하여 일을 수행하는 소프트웨어 에이전트로서 세션 개시 프로토콜에서는 통신 세션 양 쪽 끝을 말한다. 즉, 브라우저가 웹사이트에 연결을 시작할 때 사용자 기기 정보를 보내는 역할을 한다. 이 문자열에는 브라우저의 유형 및 운영체제 등의 정보를 가지고 있다.

인터넷 광고업체에서 웹 이용자 기기 정보를 파악하는데 활용되어 온 기능이기에 사라지게 된다면 디지털 마케팅 시장에 큰 변화가 예상된다.

이 기능은 1990년대 넷스케이프 브라우저의 요소로 개발되어 지금까지 쓰이고 있다. 웹사이트는 UA 스트링의 정보를 참조해 방문자의 기술적 명세표에 기반한 각종 서비스를 제공할 수 있다.

이에 구글은 "한번만 사용하는 메커니즘이 다른 측면의 골치거리가 됐다"며 UA 스트링의 문제를 지적하였고,

크롬재단에서 활동하는 요아브 바이스 구글 엔지니어는 "사생활침해 문제에서 유저 에이전트 누설은 비주류 브라우저의 호환성 문제, 브라우저 자체에 관한 허위 정보, 구글 자산을 포함해 좋지 않은 원인으로 일부 브라우저에서 장애 등의 많은 자원이 된다. 이런 문제들을 해결하기 위해 구글은 표준을 완전히 동결해 크롬에서 UA 스트링의 중요성을 단계적으로 철폐할 계획"이라고 밝혔다.

구글은 일단 크롬 브라우저의 신규 스트링에 대한 UA 요소의 업데이트를 중지할 예정이다. 장기적으로 너무 많은 사용자 정보를 드러내지 않는 일반값에 모든 크롬 UA 스트링을 통합한다. 새 스마트폰 모델이나 새 OS 같은 신규 플랫폼에 배포되는 향후의 크롬 브라우저는 일반 UA 스트링을 사용한다. 이는 특정 플랫폼에 맞춤화한 형태가 아니다.

예를 들면, 웹사이트는 방문자의 크롬이 어떤 기기, 어떤 OS 버전에서 구동되는지 알 수 없다. 단지 크롬 사용자란 정보만 파악할 수 있으며, 데스크톱과 모바일 환경 정도만 구분할 수 있다.

기존 사용자 환경의 호환성을 유지하기 위해 현존하는 크롬 UA 스트링은 계속 유지된다.

계획은 이러하다.

2020.03 크롬81 버전은 UA 스트링을 읽는 웹페이지 콘솔에서 경고문을 노출한다. 웹사이트 개발자는 이를 보고 웹사이트 코드를 조정할 수 있다.

2020.06 크롬83 버전은 UA 스트링에서 크롬 브라우저 버전을 동결하고 OS 버전을 통합한다.

2020.09 크롬85 버전은 UA 데스크톱 OS별 스트링을 데스크톱 브라우저의 일반값으로 통합한다. 구글은 이후 모바일 OS 및 기기의 스트링도 일반값으로 통합한다.

UA 스트링이 사라지면 온라인 광고 시장이 영향을 받는다.

인터넷 광고는 무료 웹사이트의 활력소이며 구글의 핵심사업이기 때문에 사생활침해요인을 제거하면서 시장의 충격을 줄이는 대안이 필요하다.

구글은 UA 스트링의 대체품으로 '클라이언트 힌트(CH)'이라 불리는 메커니즘을 제안했다.

클라이언트힌트는 웹사이트가 사용자에게 정보를 요청할 수 있지만, 사용 이력이나 핑거프린트는 파악할 수 없다. 웹사이트의 서버가 요청한 경우와 요청한 사항만 사용자의 정보를 알려주게 된다.

현재 클라이언트힌트 메커니즘은 구글의 프라이버시 샌드박스 프로젝트의 일부로 개발되고 있다. 이 프로젝트는 작년 8월 발표됐다.

프라이버시 샌드박스 기술은 사용자 정보를 과도하게 노출하지 않으면서, 필요한 정보만 웹사이트와 광고주가 브라우저에 질의할 수 있게 하는 기술이다.

브라우저가 광고주에게 공유하는 정보는 사용자 그룹화 수준만 만들 수 있고, 상세한 개인별 프로필을 조합할 수준은 아니다.

출처 - ZDNet Korea (지디넷 코리아)

[JavaScript] 배열 요소 수정/삭제 함수, splice()

sohyun_ — Fri, 3 Jan 2020 11:30:14 +0900

이 페이지는 자바스크립트의 배열에서 요소를 삭제 또는 교체, 추가할 때 사용하는 내장함수 splice()에 대해 설명하고 있다.

기본적으로 자바스크립트의 배열에는 요소를 제어하는 역할을 하는 splice() 메서드가 있다.

array.splice(start[, deleteCount[, item1[, item2[, …]]]])

기본 구조를 보면, start로 배열을 변경할 시작 인덱스를 지정하여 작업하고 변경된 요소를 담은 Array 객체를 반환한다.

(제거한 요소를 담은 배열로 반환한다는것은, 하나의 요소만 제거한 경우 길이가 1인 배열을 반환하고, 아무 값도 제거하지 않았으면 빈 배열을 반환한다는 뜻이다.)

start는 배열의 변경을 시작할 인덱스로, 음수인 경우 배열의 끝에서부터 센다.

deleteCount는 제거할 요소의 갯수로, 생략하거나 array.length - start보다 크면 요소를 제거한다.

item은 배열에 추가할 요소로, 지정하지 않으면 제거만 한다.

const months = ['Jan', 'March', 'April', 'June'];
months.splice(1, 0, 'Feb');
console.log(months);
// result: Array ['Jan', 'Feb', 'March', 'April', 'June']

months.splice(4, 1, 'May');
console.log(months);
// result: Array ['Jan', 'Feb', 'March', 'April', 'May']

ex1)

하나도 제거하지 않고, 2번 인덱스에 'drum' 추가

var myFish = ['angel', 'clown', 'mandarin', 'sturgeon'];
var removed = myFish.splice(2, 0, 'drum');

// myFish is ['angel', 'clown', 'drum', 'mandarin', 'sturgeon'] 
// removed is [], no elements removed

ex2)

하나도 제거하지 않고, 2번 인덱스에 “drum'과 'guitar' 추가

var myFish = ['angel', 'clown', 'mandarin', 'sturgeon'];
var removed = myFish.splice(2, 0, 'drum', 'guitar');

// myFish is ['angel', 'clown', 'drum', 'guitar', 'mandarin', 'sturgeon'] 
// removed is [], no elements removed

ex3)

3번 인덱스에서 한 개 요소 제거

var myFish = ['angel', 'clown', 'drum', 'mandarin', 'sturgeon'];
var removed = myFish.splice(3, 1);

// removed is ['mandarin']
// myFish is ['angel', 'clown', 'drum', 'sturgeon']

ex4)

2번 인덱스에서 한 개 요소 제거하고 'trumpet' 추가

var myFish = ['angel', 'clown', 'drum', 'sturgeon'];
var removed = myFish.splice(2, 1, 'trumpet');

// myFish is ['angel', 'clown', 'trumpet', 'sturgeon']
// removed is ['drum']

ex5)

0번 인덱스에서 두 개 요소 제거하고 'parrot', 'anemone', 'blue' 추가

var myFish = ['angel', 'clown', 'trumpet', 'sturgeon'];
var removed = myFish.splice(0, 2, 'parrot', 'anemone', 'blue');

// myFish is ['parrot', 'anemone', 'blue', 'trumpet', 'sturgeon'] 
// removed is ['angel', 'clown']

ex6)

2번 인덱스에서 두 개 요소 제거

var myFish = ['parrot', 'anemone', 'blue', 'trumpet', 'sturgeon'];
var removed = myFish.splice(myFish.length - 3, 2);

// myFish is ['parrot', 'anemone', 'sturgeon'] 
// removed is ['blue', 'trumpet']

ex7)

-2번(끝에서 두번째) 인덱스에서 한 개 요소 제거

var myFish = ['angel', 'clown', 'mandarin', 'sturgeon'];
var removed = myFish.splice(-2, 1);

// myFish is ['angel', 'clown', 'sturgeon'] 
// removed is ['mandarin']

ex8)
2번(중간) 인덱스를 포함해서 이후의 모든 요소 제거

var myFish = ['angel', 'clown', 'mandarin', 'sturgeon'];
var removed = myFish.splice(2);

// myFish is ['angel', 'clown'] 
// removed is ['mandarin', 'sturgeon']

[MySQL] Boolean vs tinyint(1) value in MySQL

sohyun_ — Tue, 3 Dec 2019 16:57:34 +0900

이 페이지는 MySQL에서의 Boolean형이 tinyint(1)으로 저장되는 혼란스러움에 대해 설명하고 있다.

우선 BOOLEAN 형태는 5버전대부터 사용이 가능하다.

실제로 자료형 BOOLEAN(또는 BOOL) 타입으로 정의하면 1비트의 공간을 할당하여 TINYINT(1) 타입으로 정의 된다.

데이터는 TINYINT형태에 맞게 TRUE는 1, FALSE 는 0 으로 저장된다.

Node.js에서 MySQL 테이블 모델을 정의할 때,

isCheck: {
  type: DataTypes.BOOLEAN,
  allowNull: false,
},

위에 코드를 입력하고 isCheck = true, isCheck = false 를 저장해보니, 아래 사진처럼 MySQL 테이블 필드 설정은 TINYINT(1)로 변경되어있는것을 확인했다.

클라이언트에 0/1이 아닌, true/false로 보내고 싶다면 어떻게 해야할까?

정답은 없다.

아무작업을 하지 않아도 Boolean 타입으로 정의해주었기때문에 true/false로 리턴값을 던지기 때문에 이슈 종료 - 끄읕!!

[JAVA] How to Generate Random String

sohyun_ — Tue, 15 Oct 2019 16:47:06 +0900

이 페이지는 문자, 숫자 등으로 이루어진 랜덤 문자열을 생성하는 방법을 설명하고 있다.

# 랜덤 숫자(난수) 생성

1. java.lang.Math.random() 함수
Math.random() 메서드는 0.0 과 1.0 사이의 double 값을 생성하기 때문에, 정수를 얻고 싶다면 반드시 int형으로 캐스팅시켜야한다.

import java.lang.Math;

double d = Math.random()*10;
System.out.println("double: " + d); // double: 7.241387938681597

int i = (int)(Math.random()*10);
System.out.println("int: " +i); // int: 3

2. import java.util.Random 클래스

import java.util.Random;

Random rand = new Random();

int i = rand.nextInt(10); // 0~9까지의 정수
System.out.println("int: " + i); // int: 2

float f = rand.nextFloat(); // 0.0f 에서 1.0f 까지의 실수
System.out.println("float: " + f); //float: 0.23841155

boolean b = rand.nextBoolean(); // true(참), false(거짓)
System.out.println("boolean: " + b); // boolean: false

# 랜덤 알파벳 문자 (A-Z, a-z) 생성

1. hard coding(bad example)

import java.util.Random;

Random rand = new Random();

String abc1 = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
char uc = abc1.charAt(rand.nextInt(abc1.length())); // 랜덤 대문자
System.out.println(uc); // Y

String abc2 = "abcdefghijklmnopqrstuvwxyz";
char lc = abc2.charAt(rand.nextInt(abc2.length())); // 랜덤 소문자
System.out.println(lc); // t

알파벳은 영대문자, 영소문자 각각 26개로 확실히 정의되어 있기 때문에 하드코딩으로 작업해도 무리없이 작성할 수는 있다.
하지만, 좋은 코드가 아니기 때문에 다른 함수나 클래스를 이용하려한다.

코딩에 앞서 아래 두 개의 예시에서 사용되는 기본적인 지식이 필요하다.
아스키코드에서 영대문자는 65-90, 영소문자는 97-122이다.
26까지의 난수를 구한 후 65를 더한 후 대문자를, 97을 더하면 소문자를 얻을 수 있다.
또한, int 타입의 숫자를 char 타입으로 변환하면 ASCII 코드 문자를 얻을 수 있다.

2.java.lang.Math.random() 함수

import java.lang.Math;

char uc = (char)((int)(Math.random()*26+65)); // 랜덤 대문자
System.out.println(uc); // E

char lc = (char)((int)(Math.random()*26+97)); // 랜덤 소문자
System.out.println(lc); // k

3.import java.util.Random 클래스

Random rand = new Random();

char uc = (char)(rand.nextInt(26) + 'A' ); // 랜덤한 대문자
System.out.println(uc); // H

char lc = (char)(rand.nextInt(26) + 'a'); // 랜덤한 소문자
System.out.println(lc); // f

이 코드를 사용할 때 주의해야 할 사항은 char 타입으로 처리가 되기 때문에, A와 a는 작은 따옴표로 감싸줘야한다.

큰 따옴표("")는 문자열 String, 작은 따옴표('')는 문자 char 타입이기 때문에 아래 에러를 리턴할 수도 있다.

error: incompatible types: String cannot be converted to char

참고로, char타입의 문자를 string으로 변환하고 싶을때는 String.valueOf(char) 또는 Character.toString(char)를 사용할 수 있다.

char c = 'a';

String s = Character.toString(c);
System.out.println(s.getClass().getName()); // java.lang.String

String ss = String.valueOf(c);
System.out.println(ss.getClass().getName()); // java.lang.String

# 영문, 숫자 혼합 랜덤 문자열 생성 예제 (10자리)

import java.util.Random;

Random rand = new Random();
StringBuffer sb = new StringBuffer();
for(int i = 0; i < 10; i ++) {
	int index = rand.nextInt(3);
	switch(index) {
		case 0:
			sb.append((char)(rand.nextInt(26) + 97));
			break;
		case 1:
			sb.append((char)(rand.nextInt(26) + 65));
			break;
		case 2:
			sb.append(rand.nextInt(10));
			break;
	}
}
System.out.println(sb); // X36Kq06S0G

for문을 이용하여 10자리를 생성한다.

10번을 도는동안 rand.nextInt(3)을 이용해 0, 1, 2 랜덤한 숫자를 출력하고 그에 맞게 대문자, 소문자, 숫자를 차례로 랜덤하게 추가한다.

[JavaScript] 배열 정렬 함수, sort()

sohyun_ — Tue, 8 Oct 2019 16:51:27 +0900

이 페이지는 자바스크립트에서 배열을 정렬할 때 사용하는 내장 함수 sort()에 대해서 설명하고 있다.

기본적으로 자바스크립트의 배열에는 정렬하여 반환하는 역할을 하는 sort() 메서드가 있다.

arr.sort([compareFunction])

기본 구조를 보면, compareFunction로 정의된 정렬 순서를 통해 arr라는 Array 객체를 정렬하여 반환한다.
compareFunction을 생략하면 기본적으로 각 요소의 유니코드 값에 따라 자동으로 정렬된다. (default 오름차순)

정렬되면서 기존의 배열 데이터가 변경되는 메서드이기 때문에 신중하게 사용해야한다.

const months = ['March', 'Jan', 'Feb', 'Dec'];
months.sort();
console.log(months);
// result: ['Dec', 'Feb', 'Jan', 'March']
const numbers = [1, 30, 4, 21, 100000];
numbers.sort();
console.log(numbers);
// result: [1, 100000, 21, 30, 4]

문자 정렬은 알파벳 순서대로 잘 정렬이 된 것을 확인할 수 있지만,

숫자는 ASCII 코드 순서로 정렬하기 떄문에 결과값이 우리가 생각했던 순서로 정렬되지 않음을 확인했다.

다음은 위의 오류를 개선하기 위한 코드이다.

1) 오름차순

numbers.sort(function(a, b) {
    return a - b;
});
console.log(numbers);
// result: [ 1, 4, 21, 30, 100000 ]

2) 내림차순

numbers.sort(function(a, b) {
    return b - a;
});
console.log(numbers);
// result: [ 100000, 30, 21, 4, 1 ]

해당 코드들은 화살표 함수를 사용하여 아주아주 짧고 간결하게 변환 가능하다.

numbers.sort((a, b) => a - b); // 오름차순
numbers.sort((a, b) => b - a); // 내림차순

참고 - 화살표 함수 (arrow function expression) in ES6

화살표 함수

화살표 함수 표현(arrow function expression)은 function 표현에 비해 구문이 짧고 자신의 this, arguments, super 또는 new.target을 바인딩 하지 않습니다. 화살표 함수는 항상 익명입니다. 이 함수 표현은 메소드 함수가 아닌 곳에 가장 적합합니다. 그래서 생성자로서 사용할 수 없습니다.

developer.mozilla.org

Object 객체를 가진 리스트도 각각의 속성을 기준으로 정렬이 가능하다.

const items = [
  { name: 'Edward', value: 21 },
  { name: 'Sharpe', value: 37 },
  { name: 'And', value: 45 },
  { name: 'The', value: -12 },
  { name: 'Magnetic', value: 13 },
  { name: 'Zeros', value: 37 }
];

// value 기준으로 정렬
items.sort(function (a, b) {
  if (a.value > b.value) {
    return 1;
  }
  if (a.value < b.value) {
    return -1;
  }
  // a must be equal to b
  return 0;
});

// name 기준으로 정렬
items.sort(function(a, b) {
  const nameA = a.name.toUpperCase(); // ignore upper and lowercase
  const nameB = b.name.toUpperCase(); // ignore upper and lowercase
  if (nameA < nameB) {
    return -1;
  }
  if (nameA > nameB) {
    return 1;
  }

  // 이름이 같을 경우
  return 0;
});

이 코드 또한 화살표함수를 통해 변환이 가능하다.

// value 기준으로 정렬
items.sort((a, b) => a.value - b.value);
console.log(items);
/* result:
	[{ name: 'The', value: -12 },
	{ name: 'Magnetic', value: 13 },
	{ name: 'Edward', value: 21 },
	{ name: 'Sharpe', value: 37 },
	{ name: 'Zeros', value: 37 },
	{ name: 'And', value: 45 } ]
*/

// name 기준으로 정렬
items.sort((a, b) => (a.name > b.name) ? 1 : -1);
console.log(items);
/* result:
[ { name: 'And', value: 45 },
  { name: 'Edward', value: 21 },
  { name: 'Magnetic', value: 13 },
  { name: 'Sharpe', value: 37 },
  { name: 'The', value: -12 },
  { name: 'Zeros', value: 37 } ]
*/

문자열이 아닌 숫자를 비교하기 위한 compareFunction에서는 a에서 b를 뺄 수 있다. (Infinity 및 NaN이 포함되어 있지 않은 경우)

문자는 해당 로직이 성립하지 않기 때문에 부등호를 통해 비교하여 1 또는 -1을 리턴했다.

만약 a.name - b.name같은 형태로 작성한다면 어떻게될까?

items.sort((a, b) => {
    console.log(a.name - b.name);
    return a.name - b.name;
});

/* result:
NaN
NaN
NaN
NaN
NaN
[ { name: 'Edward', value: 21 },
  { name: 'Sharpe', value: 37 },
  { name: 'And', value: 45 },
  { name: 'The', value: -12 },
  { name: 'Magnetic', value: 13 },
  { name: 'Zeros', value: 37 } ]
*/

NaN NaN NaN!!!

에러로 인해 배열의 순서가 변경되지 않고 기존 데이터 그대로 출력된것을 확인할 수 있다.

[JAVA] Get Orientation Metadata and Rotate Image

sohyun_ — Wed, 18 Sep 2019 08:24:37 +0900

이 페이지에서는 사진의 메타정보를 통해 각도를 얻어 회전시켜주는 방법에 대해 설명하고 있다.

모바일에서 사진을 찍어 업로드할 때, 아이폰 ios는 자동 회전을 지원하고 android는 사진이 돌아간 상태로 저장되는 이슈가 생겼다. 이를 해결하기 위한 방법으로 이미지의 메타정보를 통해 사진의 각도를 확인하고 그 각도에 맞게 회전시키는 방식으로 진행하려 한다.

해당 프로젝트에서 클라이언트가 보내주는 이미지 타입은 MultipartFile이기 때문에 편의를 위해 File로 변환한 후 진행한다.

참고) 타입 변환 및 userAgent 정보 가져오기

1. Converting MultipartFile to File

[JAVA] Converting MultipartFile to File

이 페이지에서는 멀티파트파일을 파일객체로 변환하는 방식에 대해 설명하고 있다. # MultipartFile vs File 변환하는 코드 작성에 앞서 두 객체에 대해 간단하게 설명하려한다. 1) MultipartFile 멀티파트파일이..

kkumalog.tistory.com

2. Get User Agent And IP Information

[JAVA] Get User Agent And IP Information

kkumalog.tistory.com

# 코드 구현

이슈가 발생한 안드로이드일 때에만 회전 로직을 수행하게 한다.
(마지막에 ImageIO.write 이용해 BufferedImage를 File객체로 변환하여 반환하는 부분에서 gif는 오류가 발생할 수 있기 때문에 예외처리를 해주었다)

이 로직을 완료한 후 리턴된 결과값 fileData를 원하는 곳에 활용하면된다.

File fileData = convert(file);
String origin = fileData.getName();
if (request.getHeader("User-Agent").contains("Android") && !origin.substring(origin.lastIndexOf(".") + 1).equals("gif")) {
	BufferedImage image = checkImage(fileData, getOrientation(fileData));
	ImageIO.write(image,"jpg", fileData);
}

orientation의 값으로 현재 이미지 회전 상태를 확인하고 각도에 맞는 회전을 적용시켜준다. (정방향인 1 일때에는 그대로 리턴)

아래 getOrientation함수에서 리턴하는 integer타입의 결과값을 파라미터로 받는다.

private BufferedImage checkImage(File file, int orientation) throws Exception {
	BufferedImage bi = ImageIO.read(file);
	if (orientation === 1) { // 정위치
    	return bi;
	} else if (orientation == 6) {
    	return rotateImage(bi, 90);
	} else if (orientation == 3) {
		return rotateImage(bi, 180);
	} else if (orientation == 8) {
		return rotateImage(bi, 270);
	} else{
		return bi;
	}
}

아래 함수는 checkImage의 파라미터인 orientation 값을 얻어오는 코드이다.

먼저 Metadata를 사용하기 위해서는 pom.xml에 metadata-extractor lib를 추가해야 한다.

변환시킨 File객체를 이용해 메타데이터를 추출하여 orientation을 반환한다.

<dependency>
	<groupId>com.drewnoakes</groupId>
	<artifactId>metadata-extractor</artifactId>
	<version>2.12.0</version>
</dependency>

private int getOrientation(File file) throws Exception {
	int orientation = 1;
	Metadata metadata = ImageMetadataReader.readMetadata(file);
	Directory directory = metadata.getFirstDirectoryOfType(ExifIFD0Directory.class);
	if (directory != null) {
		orientation = directory.getInt(ExifIFD0Directory.TAG_ORIENTATION);
	}
	return orientation;
}

아래 함수는 checkImage에서 조건에 맞게 회전 시켜주기 위해 호출하는 코드이다.

File객체를 BufferedImage로 변환시켜준 후, radians와 함께 파라미터로 받아서 사용한다.

private BufferedImage rotateImage (BufferedImage bimage, int radians) {
	BufferedImage newImage;
	if(radians == 90 || radians == 270) {
		newImage = new BufferedImage(bimage.getHeight(),bimage.getWidth(),bimage.getType());
	} else if (radians==180){
		newImage = new BufferedImage(bimage.getWidth(),bimage.getHeight(),bimage.getType());
 	} else{
		return orgImage;
	}
	Graphics2D graphics = (Graphics2D) newImage.getGraphics();
	graphics.rotate(Math.toRadians(radians), newImage.getWidth() / 2, newImage.getHeight() / 2);
	graphics.translate((newImage.getWidth() - bimage.getWidth()) / 2, (newImage.getHeight() - bimage.getHeight()) / 2);
	graphics.drawImage(bimage, 0, 0, bimage.getWidth(), bimage.getHeight(), null);

	return newImage;
}

[JAVA] Converting MultipartFile to File

sohyun_ — Tue, 17 Sep 2019 11:02:59 +0900

이 페이지에서는 멀티파트파일을 파일객체로 변환하는 방식에 대해 설명하고 있다.

# MultipartFile vs File

변환하는 코드 작성에 앞서 두 객체에 대해 간단하게 설명하려한다.

1) MultipartFile

멀티파트파일이란, 사용자가 업로드한 File을 핸들러에서 손쉽게 다룰 수 있게 도와주는 매개변수 중 하나이다.
매개변수를 사용하기 위해서는 MultipartResolver Bean이 등록되어 있어야 한다. 이는 springBoot에서는 자동 등록을 지원하지만, springMVC에서 기본으로 등록해주지 않으므로 꼭 확인해야한다.

2) File

하드디스크에 존재하는 파일에 대한 경로 또는 참조를 추상화한 객체로, new File()을 통해 디렉토리를 생성할 수 있다.

파일객체를 사용한 후에는 반드시 닫아줘야한다.

# 코드

1) File의 createNewFile()을 이용하는 방법

public File convert(MultipartFile mfile) {
	File file = new File(mfile.getOriginalFilename());
	file.createNewFile();
	FileOutputStream fos = new FileOutputStream(file);
	fos.write(mfile.getBytes());
	fos.close();
	return file;
}

2) MultipartFile의 transferTo() 메소드를 이용하는 방법

public File multipartToFile(MultipartFile mfile) throws IllegalStateException, IOException {
	File file = new File(mfile.getOrigianlFilename());
	mfile.transferTo(file);
	return file()
}

[JAVA] Get User Agent And IP Information

sohyun_ — Sun, 15 Sep 2019 21:44:57 +0900

이 페이지에서는 IP, Agent, 브라우저, OS등의 접속자 정보를 가져오는 방법에 대해 설명하고 있다.

# IP

X-Forwarded-For (XFF) 헤더는 HTTP 프록시나 로드 밸런서를 통해 웹 서버에 접속하는 클라이언트의 원 IP 주소를 식별하는 사실상의 표준이다.

(X-Forwarded-For 은 이메일 메시지가 다른 계정으로부터 포워딩되었음을 나타내는 이메일 헤더이기도 하다)

XFF를 사실상의 표준이라고 표현하는 이유는, 정식 RFC 에 포함된게 아니어서 다른 헤더를 사용하는 경우가 있기 때문이다.

그래서 WebServer, WAS, L4, proxy 종류에 상관없이 원하는 client IP를 가져오게 하려면 먼저 해당 헤더가 있는지 확인하는 방식을 추가하여 아래와 같은 방식으로 코드를 작성해야한다.

String ip = request.getHeader("X-FORWARDED-FOR"); 
if (ip == null || ip.length() == 0) { 
	ip = request.getHeader("Proxy-Client-IP"); 
}
if (ip == null || ip.length() == 0) { 
	ip = request.getHeader("WL-Proxy-Client-IP");
}
if (ip == null || ip.length() == 0) { 
	ip = request.getHeader("HTTP_CLIENT_IP");
}
if (ip == null || ip.length() == 0) { 
	ip = request.getRemoteAddr(); 
}

참고 사이트 - mozilla

X-Forwarded-For

X-Forwarded-For (XFF) 헤더는 HTTP 프록시나 로드 밸런서를 통해 웹 서버에 접속하는 클라이언트의 원 IP 주소를 식별하는 사실상의 표준 헤더다. 클라이언트와 서버 중간에서 트래픽이 프록시나 로드 밸런서를 거치면, 서버 접근 로그에는 프록시나 로드 밸런서의 IP 주소만을 담고 있다. 클라이언트의 원 IP 주소를 보기위해 X-Forwarded-For 요청 헤더가 사용된다.

developer.mozilla.org

# User Agent

사용자 에이전트란, 사용자를 대신하여 일을 수행하는 소프트웨어 에이전트로서 세션 개시 프로토콜에서는 통신 세션 양 쪽 끝을 말한다.

소프트웨어 에이전트가 네트워크 프로토콜 안에서 동작할 때, 식별 문자열을 피어에 제출함으로써 애플리케이션 유형, 운영체제, 소프트웨어 업체, 리비전을 식별할 수 있다. [출처 - 위키백과]

String agent = request.getHeader("User-Agent");

위에서 언급한 것처럼 사용자 에이전트를 통해 브라우저, 운영체제를 식별 할 수 있다. 원하는 항목이 포함되어 있는지 체크하는 방식으로 코드를 작성한다.

1) browser

String brower = null; 

if (agent != null) { 
 if (agent.indexOf("Trident") > -1) { 
	brower = "MSIE"; 
} else if (agent.indexOf("Chrome") > -1) { 
	brower = "Chrome"; 
} else if (agent.indexOf("Opera") > -1) { 
	brower = "Opera"; 
} else if (agent.indexOf("iPhone") > -1 && agent.indexOf("Mobile") > -1) { 
	brower = "iPhone"; 
} else if (agent.indexOf("Android") > -1 && agent.indexOf("Mobile") > -1) { 
	brower = "Android"; 
}

2) OS

String os = null; 

if(agent.indexOf("NT 6.0") != -1) os = "Windows Vista/Server 2008"; 
else if(agent.indexOf("NT 5.2") != -1) os = "Windows Server 2003"; 
else if(agent.indexOf("NT 5.1") != -1) os = "Windows XP"; 
else if(agent.indexOf("NT 5.0") != -1) os = "Windows 2000"; 
else if(agent.indexOf("NT") != -1) os = "Windows NT"; 
else if(agent.indexOf("9x 4.90") != -1) os = "Windows Me"; 
else if(agent.indexOf("98") != -1) os = "Windows 98"; 
else if(agent.indexOf("95") != -1) os = "Windows 95"; 
else if(agent.indexOf("Win16") != -1) os = "Windows 3.x"; 
else if(agent.indexOf("Windows") != -1) os = "Windows"; 
else if(agent.indexOf("Linux") != -1) os = "Linux"; 
else if(agent.indexOf("Macintosh") != -1) os = "Macintosh"; 
else os = "";

3) mobile OS

String[] mobileos = {"iPhone", "iPod", "Android", "BlackBerry", "Windows CE", "Nokia", "Webos", "Opera Mini", "SonyEricsson", "Opera Mobi", "IEMobile"};

if (agent != null && !agent.equals("")) {
	for(int i = 0; i < mobileos.length; i++) {
		if (agent.indexOf(mobileos[i]) > -1) {
			System.out.println(mobileos[i]);
		}
	}
}

[JavaScript] Hoisting

sohyun_ — Mon, 19 Aug 2019 14:32:21 +0900

이 페이지에서는 자바스크립트의 호이스팅의 정의와 예시를 설명하고 있다.

hoist: 들어올리다, 끌어올리다

Hoisting(호이스팅)이란, 변수의 사용 및 함수의 실행 코드가 선언보다 먼저 일어나도 정상 진행이 되도록 하는 것.

(흔히 선언코드가 끌어올려진다고 표현하지만, 실제 메모리에는 변화가 없다.)

함수선언식만 호이스팅이 일어난다. 함수표현식은 NONO!

할당구문은 런타임 과정에서 이루어지기 때문에 호이스팅되지않는다 - 함수를 끌어올리지만 변수의 값은 끌어올리지않는다!

+ 함수선언식

function foo() {}

+ 함수표현식 / 함수할당식

var foo = function() {}

# 예제1.

Name("sohyun");

function Name(name) {
  console.log("My name is " + name);
}

// 결과: "My name is sohyun"

# 예제2.

num = 6;
num + 7;
var num;

// 에러가 나지 않는다

# 예제3.

(초기화가 아닌 선언만 끌어올린다. 만약 변수를 선언한 뒤에 나중에 초기화시켜 사용한다면, 그 값은 undefined.)

var a = 1;
console.log(a + ' , ' + b); // '1 , undefined'
var b = 2;
console.log(a + ' , ' + b); // '1 , 2'

// 위의 코드는 아래와 같은 방식으로 동작합니다.
var a; // a 변수 선언
a = 1; // a 변수에 1 할당
var b; // b 변수 선언
console.log(a + ' , ' + b); // '1 , undefined'
b = 2; // b 변수에 2 할당
console.log(a + ' , ' + b); // '1 , 2'

# 예제4.

// 실행 전
logMessage();
sumNumbers();
function logMessage() {
  return 'worked';
}

var sumNumbers = function () {
  return 10 + 20;
};

호이스팅에 의해 자바스크립트 해석기는 코드를 아래와 같이 인식한다.
// 실행 시
function logMessage() {
  return 'worked';
}

var sumNumbers;

logMessage(); // 'worked'
sumNumbers(); // Uncaught TypeError: sumNumbers is not a function

sumNumbers = function () {
  return 10 + 20;
};

코드의 가독성과 유지보수를 위해 호이스팅이 일어나지 않도록 하는게 좋다

[IT] Naming Convention

sohyun_ — Thu, 8 Aug 2019 08:29:00 +0900

이 페이지에서는 프로그래밍에서 사용하는 변수 명명 규칙에 대해 설명하고 있다.

Naming Convention 이란, 변수명을 지을 때 관례적으로 사용하는 방법이다. 언어마다 권장하는 표기법이 다르고, 하나의 프로젝트에서 케이스를 섞어 쓰는것은 좋은 코드가 아니라고 한다.

# 카멜 표기법 (camel case).

1) 소문자 카멜 케이스 (lower camel case)
보통 카멜케이스라고 하면 소문자 카멜 표기법을 의미한다. 각 단어의 첫 문자를 대문자로 표기하지만, 전체에서의 첫 글자는 소문자로 표기하여, 단봉낙타 표기법이라고 불리기도 한다.
ex) camelCase, lowerCamelCase

2) 대문자 카멜 케이스 (upper camel case) / 파스칼 케이스 (pascal case)
파스칼 케이스는 카멜 표기법의 일부로 보기도 하고, 따로 분리된 개념으로 생각하는 경우도 있지만 여기서는 일부로 나타낸다.
전체 이름의 첫 글자와 각 단어의 첫 문자를 대문자로 표기하여, 쌍봉낙타 표기법이라고 불리기도 한다.
ex) CamelCase, UpperCamelCase, PascalCase

# 스네이크 표기법 (snake case)

각 단어의 사이를 ‘_’(언더바)로 구분하여 표기한다.
ex) camel_case, snake_case

# 케밥 케이스 (Kebab case)

각 단어 사이를 하이픈(붙임표, -)로 구분하여 표기한다.

ex) kebab-case

# 헝가리안 표기법 (hungarian notation)

이름앞에 변수의 타입을 접두어로 넣어주어 표기하는데, 접두어의 종류에는 ch-char, db-double, str-string, b-boolean 등이 있다.
ex) bCamelCase, strCamelCase

[Review] 캐논 인스픽S 포토프린터 (Cannon inspicS ZV-123A)

sohyun_ — Wed, 7 Aug 2019 08:29:14 +0900

즉석카메라와 포토프린터의 기능을 모두 갖춘 '인스픽S' 리뷰를 써보려합니다 :)

# 포토프린터 + 즉석카메라

두 가지 기능을 가진 제품의 장점에 대해 먼저 살펴볼까요?

우선 흔히 폴라로이드라고 말하는 즉석카메라의 역할로 놓치기 싫은 소중한 순간을 바로 찍어 출력할 수 있고,

이 기능에 더해진 포토프린터는 블루투스 기능으로 스마트폰 등 다양한 스마트기기의 사진을 원하는 만큼 출력할 수 있죠

# LG 포켓포토 스냅 즉석카메라 (PC389)

포토프린터가 너무너무 갖고 싶어서, 요기조기 여러 제품들을 비교한 후 구입하게 되었어요.

이건 그 중 가장 고민됐던 제품이에요

포토프린터하면 생각나는 가장 유명한 제품인 LG 포켓포토!

가장 최신 제품은 '포켓포토 스냅 즉석카메라'입니다. 포켓포토의 스펙을 살펴볼까요?

1. 가장 마지막에 촬영한 사진의 재프린트 기능

2. 카메라 자체의 흑백모드 지원 (카메라 셔터버튼을 5초간 누르면 흑백모드 자동전환)

3. 나만의 스타일로 편집할 수 있는 포켓포토 전용 앱

4. 변색없는 인화방식 - 긴 보관기간과 방수기능을 갖춘 염료승화방식 인화지

우와... 스펙이 이렇게 좋은데 왜 선택을 안했냐구요?

두가지이유때문이죠

첫번째는 출시년월이 2018년 4월이어서 신상이라기엔 너무 오래됐다는 점.

두번째는 보관기간입니다.

'자사실험기준: 물에 닿은 후 5일 이상 경과하여도 변색없음. 앨범에 보관시 최소 5년 이상 변색없이 보관가능' 이라고 설명하고 있습니다. 앨범에 보관해도 5년후엔 변색된다는 걸까요....?

출시후 5년이 되지않았기때문에 확인이 불가한것도 있지만, 아무리 찾아봐도 실제 제품 설명이 아닌 상업적인 리뷰밖에 안보이더라구요

혹시나 아래 캐논 인스픽S 리뷰를 보고도, 포켓포토가 더 끌리신다면 쿠팡에서 구입하는것을 추천합니다!

본품에 카트리지 36p + 3in1충전케이블 구성으로 짱짱한데,

쿠팡의 장점은 뭐다? 로켓배송★

아래 링크를 나눠놓은 이유는 색깔 때문인데요, 블루와 핑크 두가지 색상 선택가능합니다 :)

제가 비교하고 장바구니에 담아놨던 소듕한 링크에오

포켓포토 >

LG전자 포켓포토스냅 즉석카메라

COUPANG

www.coupang.com

# 캐논 인스픽S 즉석카메라

이제 본격적으로 인스픽S의 리뷰를 시작하겠습니다 :)

아직 사용기간이 짧아서 리뷰라기보다는 개봉기에 가깝겠지만 같이 분석해봅시다

2019년 6월 출시된 인스픽S의 가장 주목할만한 스펙은 네가지인것 같아요!

첫번째, 휴대성과 디자인.

17mm의 두께와 188g으로 가벼운 무게로 작은 핸드백에도 쏙 들어가는 사이즈!

컬러는 블랙과 화이트, 로즈골드 총 3가지 색상으로 다 예쁨★

두번째, 셀카 특화.

전면부에 다른 제품에서는 보지못한 큰 거울과 8개의 링 플래시 조명으로 대놓고 셀카에 강하다는걸 보여주고 있죠

이는 혼자찍는것 뿐아니라 친구들과 함께 찍을 때, 더 빛을 발휘할 것이다

반짝반짝 눈동자로 생기있는 사진을 찍어봅시다!

세번째, 저장공간.

마이크로 SD카드를 장착가능하고, 최대 256GB의 대용량을 지원하여 많은 사진 데이터를 저장할 수 있다.

하지만, 화질은 크게 기대하지 않는게 좋겠죠?

네번째, 해상도.

800만화소의 카메라를 탑재하고 있으며, 해상도는 314x600dpi라고 합니다.

다만 흰색 표현력이 다소 아쉬워, 채도높은 색감을 배경으로 한 사진 결과물이 좋다고 합니다!

배터리는 700mAh로 완충시 출력가능한 매수는 25매입니닷

비슷한 제품으로는, 즉석카메라의 역할만 하는 캐논사의 인스픽C도 있씁니다!

# 인스픽S UNBOXING(언박싱)

저의 사랑 쿠팡의 로켓배송을 통해 주문한 다음날 바로 겟했습니다 힛★

https://coupa.ng/bh72RI

캐논 인스픽S 즉석카메라 ZV-123A + 인화지 60p

COUPANG

www.coupang.com

방향에 따라 변하는 제품의 모습을 열지 않고도 상자를 통해 미리 볼 수 있는게 눈에 띄네요

크기는 대략 손바닥보다 조금 큰 정도, 손바닥이 좀 큰 남성분이라면 비슷할 것 같아욧

이렇듯 아담한 사이즈여서 장난감같은 느낌을 주네요 짱이쁨 죠아죠아!

모든 구성품은 포토프린터 본품 아래에 숨겨져있답니다

꼬깃꼬깃 저 안에 '본체 + 스트랩 + 간단매뉴얼 + 설명서 + 충전 USB + 인화지 10매'의 알찬 구성품들이 숨어있었다!!

인스픽은 잉크가 내장된 특수 인화지에 열을 가열하여 인쇄하는 Zink사의 열전사 인쇄용지를 사용한다. 열전사 방식의 인쇄 용지는 출력비용이 염료 승화방식에 비해 저렴하여 더 많이 찍고 뽑을 수 있다는 장점이 있다.

하지만, 물과 열에 약하니 주의해야하며 인화품질이 조금 떨어진다.

+ 저는 보관기간을 늘리기 위해 다이소에서 손코팅지를 사서 보완 작업했습니다★

처음에 신나서 여러장 뽑다보니 기본 10매는 금방이더라구요

불안한마음에 50매짜리 추가로 왕창 구입했오요

빨리 받고 싶어서 역시나 쿠팡 로켓배송.....로켓은 사랑입니다♡

https://coupa.ng/bh9ZNw

징크 캐논 인스픽 인화지

COUPANG

www.coupang.com

간단매뉴얼을 살펴볼까요?

1. 전자제품의 기본인 충전, 초록불이 반짝반짝하게 충전

2. 파란색 바코드 잉크지가 제품을 향하도록 넣기

3. 촬영버튼을 이용해 사진을 찍고 출력 or 어플을 이용해 출력

설명서는 영어, 한국어, 중국어로 되어있는데 제품 사용법에 관한 내용은 아니니 자세한 설명은 패스-

본격적으로 본체 탐구 시작!

시크한 블랙, 깔끔 그자체의 본체가 완전 내스타일★

가운데에는 둥근 거울이 있고, 그 주변에 LED램프가 켜지는데 이건 셀카를 위한 카메라?!

제품 상단에는 보이는 순서대로 상태표시 LED, 플래시 조절 레버, 전원, 촬영버튼이 있다. 플래시 레버가 있어 플래시 조절이 가능하다는게 특징!

제품 하단에는 충전단자와 sd카드 삽입하는 곳이 있다.

잠깐! LED 표시방식

흰색 - 출력준비완료
흰색깜빡임 - 출력중 / 블루스마트시트 진행중 / 펌웨어 업데이트
빨강 - 제품 온도 높음
빨강깜빡임 - 용지덮개열림 / 프린트 에러 / 용지없음 / 용지걸림
빨강>흰색 순환 - 배터리없음
파랑>파랑깜빡임 순환 - 부팅중
파랑깜빡임 - 스마트시트 오류
하늘색 - 제품 온도 낮음
하늘색깜빡임 - 프린터 헤드 열식힘 중
자주색 - 저장모드
자주색깜빡임 - SD카드 오류
노랑>자주>하늘>흰색 순환 - 프린팅 중

뷰파인더는 광학 뷰파인더로 창이 뚫려있는 형태이며, 위에서 보이는 버튼으로 인화비율을 선택하여 출력할 수 있다.

이제 찍은 사진을 기다려봅니다 두근두근

가장 처음에는 파란 잉크페이지가 나오는데 잘못된게 아니니 조금 더 기다려봅니다!

출력시간이 생각보다 오래걸려서,

요리조리 다양한 각도로 찍어보았습니다 히힛

제가 가장 먼저 뽑은 사진은 부모님 사진이에요

포토프린터를 사고 싶었던 이유가 부모님사진을 많이 남겨드리고 싶어서였거든요 :)

사진이 엄청 선명하지는 않지만, 추억을 기록하기엔 충분한거 같네요

# 모바일 앱과 기기 연결

구글 플레이스토어 또는 애플 앱스토어에서 'Cannon Mini Print'를 설치하여 사용하도록 하겠씁니다

그림으로 구성되어있어서 사용하는게 전혀 어렵지 않아요!

+ 참고로 어플에서 셀프타이머, 원격촬영, 자동꺼짐기능을 제공합니다

어플을 실행하면 아래처럼 간단한 설명을 다시 만날 수 있어요

프린터 본체 충전, 전원켜기, 용지 공급, 블루투스로 프린터 연결 등 주요한 사용설명서이니 건너뛰지않고 읽는것을 추천합니다!

기본 사진을 출력할 수도 있지만, 어플로 스티커 및 프레임 기능으로 꾸미거나 크기조절 해서 출력할 수 있어서 죠아요☆

오른쪽 상단에 표시되는게 블루투스 설정입니다.

연결이 됐을때는 아래의 화면처럼 배터리 잔량 표시 모양으로 변해요

+ 참고로, 제 기기를 블루투스 연결했을때의 이름은 'Cannon (EA:02) Instant Camera' 입니다

블루투스 연결상태확인하고, 대기목록 생성하고 인쇄하면 끝!

이만 개봉기 및 리뷰를 마치겠습니다 :)

[MAC] Microsoft Remote Desktop 10

sohyun_ — Tue, 6 Aug 2019 20:24:28 +0900

이 페이지는 맥에서 윈도우 환경에 원격 데스크톱 연결하는 방법에 대해 설명하고 있다.

맥북, 아이맥 등 맥을 사용하고는 있지만 맥에서는 처리하지 못하는 일들이 있어 종종 리모트로 Windows OS 환경을 사용해야 되는 경우를 대비해 알아 두면 좋을 것 같다.

우선, 원격 데스크톱을 사용하면 나타나는 장점과 단점에 대해 먼저 확인해 볼 필요가 있다. 원격을 이용해 윈도우를 사용하면 별도의 윈도우를 맥에 설치하지 않아도 되는 장점이 있지만, 별도의 윈도우 PC를 가지고 있어야 하며 그 PC는 항상 켜있는 상태여야 하는 단점도 존재한다.

본격적으로 실행방법에 대해 설명하려한다.
App Store를 통해 Microsoft사의 ‘Microsoft Remote Desktop 10’ 무료 앱을 다운받아 설치한다.
해당 프로그램은 해상도 및 CPU 점유율 등 이슈가 있지만, 4점이상으로 꾸준히 유지하고 있다.
현재 버전 10.2.13으로 3개월전 업데이트가 된 아이다.

프로그램을 실행하면 아무것도 없어서 리스트가 텅텅비어있다.
+버튼에서, Desktop을 선택하여 누르고 리모트 접속할 원격 컴퓨터를 추가한다.
PC name에는 placeholder로 나타나있는 것처럼, ‘Host name or IP Address’를 입력한다.
아래의 설정들은 본인의 필요에 따라 선택하면된다.

추가한 항목을 리스트에서 선택하여 connect 또는 클릭하면, 다음과 같은 화면이 뜬다.
접속하고자 하는 IP의 로그인 계정(Microsoft 계정)을 입력하라는 것이다.
입력한 후 continue 버튼을 누르면 접속 완료!

[Instagram] Customizing Instagram Font

sohyun_ — Wed, 24 Jul 2019 09:35:59 +0900

이 페이지는 인스타그램에서 폰트(글씨체)를 변경하는 방법을 설명하고 있다.

요즘 인스타그램이나 유튜브같은 SNS를 안하는 사람이 없을 정도인데요,

그 중 인스타그램 프로필에서 종종 보이는 귀여운 영문 폰트 쓰는법을 알려드릴게용

'영문 폰트가 거기서 거기지, 뭐가 달라?' 하시는 분들도 있겠죠

인스타그램에서 다른 사람들의 프로필을 보면 기본적으로 쓰는 영어 폰트가 아닌게 많이 보여요

이렇게 바꾸는 방법에는 어플도 있지만!!

설치가 필요없는 무료 웹사이트들도 많다는거★★

그 수많은 웹사이트들 중에서 제가 사용하는 사이트 두 군데를 소개시켜드릴게요

제가 두 군데를 사용하는 이유는, 글꼴이 다른 몇개가 있어서 비교하며 사용하기 위해서 입니다 :)

1. Sprezz Keyboard

https://www.sprezzkeyboard.com/

Sprezz Keyboard

Custom Keyboard Fonts & Themes for iOS8

www.sprezzkeyboard.com:443

'Enter text to stylize...' 부분에 원하는 문구를 써주면 완료!

아래쪽 폰트 리스트에서 텍스트를 드래그해서 복붙해서 원하는 곳에 사용하기

2. LingoJam - Discord Fonts

https://lingojam.com/DiscordFonts

Discord Fonts ( ) ― LingoJam

Welcome! This page allows you to generate Discord fonts that you can use in your chats. Discord doesn't allow you to change the font by default, but using this generator you can get around that so that you can post more than just bold and underlined text i

lingojam.com

'Normal text goes here...' 부분에 원하는 문구를 써주면 완료!

마찬가지로 오른쪽 폰트 리스트에서 텍스트를 드래그해서 복붙해서 원하는 곳에 사용하기

인스타그램 프로필 폰트 꾸미기 어렵지 않죠?

[JavaScript] Compare Version Numbers

sohyun_ — Fri, 21 Jun 2019 17:22:09 +0900

이 페이지는 자바스크립트를 이용한 버전비교를 설명하고 있다.

버전을 비교하기에 앞서 버전관리에 대해서 간단하게 설명하려한다.

Semantic Versioning (SemVer)는 버전 형식에 의미를 부여하여 체계적인 버전관리를 위한 제안이다. 명확한 버전 구분을 통해 변화량을 짐작할 수 있다.

보통 0.0.0 (Major, Minor, Patch) 같이 세부분으로 나눠진 형태의 버전을 많이 사용한다.

Major: 전체를 뒤엎을 정도로 큰 변화가 발생했을 경우, 이전버전과 호환되지 않는 API 변경시 버전 증가
Minor: 주요 기능의 추가나 변경 시 버전 증가
Patch: 버그 수정 등 작은 변화 발생 시 버전 증가

Q. 버전은 1.0.0 / 1.0.23 / 1.1 처럼 '.'으로 구분된 문자열이다. 두 개의 버전을 비교하는 프로그램을 작성하시오.
(버전 비교의 예시)

0.0.2 > 0.0.1

1.0.10 > 1.0.3
1.2.0 > 1.1.99
1.1 > 1.0.1

A1)

const compareVer = (versionA, versionB) => {
  const redex = /\./gi;
  const a = versionA.replace(redex, '');
  const b = versionB.replace(redex, '');

  if (a > b) {
    console.log(`${versionA} > ${versionB}`);
  } else if (a == b) {
    console.log(`${versionA} = ${versionB}`);
  } else {
    console.log(`${versionA} < ${versionB}`);
  }
};

위의 코드는 문자열로 변환하여 비교하는 방식이다.

예를 들면 '1.7.1' -> 171 vs '1.7.3' -> 173처럼 문자로 변환한 후 비교하여 '171' < '173' (true)의 결과를 낸다.

한번에 계산 되기떄문에 편리하기는 하지만, 1.7.13 vs 1.7.3 이를 문자열로 바꾸어 '1713' < '1.7.3' (true)의 결과를 내는 제대로 처리되지 못하는 예외의 경우가 발생할 수 있다.

버전관리에 대해 이해했으니, 이 경우가 왜 잘못된건지 알 것이라고 믿는다.

(13 < 3 은 당연히 틀리죠? false false false)

이러한 예외사항까지 처리하기위해 복잡하지만 아래의 코드를 사용하려한다.

A2-1)

const compareVer = (versionA, versionB) => {
  let compareResult = true;

  const splitVersionA = versionA.split('.');
  const splitVersionB = versionB.split('.');

  const length = Math.max(splitVersionA.length, splitVersionB.length);

  for (let i = 0; i < length; i += 1) {
    const a = splitVersionA[i] ? parseInt(splitVersionA[i], 10) : 0;
    const b = splitVersionB[i] ? parseInt(splitVersionB[i], 10) : 0;
    if (a > b) {
      compareResult = false;
      break;
    }
  }
  if (compareResult == true) {
      console.log(`${versionA} < ${versionB}`);
  } else {
      console.log(`${versionA} >= ${versionB}`);
  }
};

위의 코드는 ‘.’으로 나눠 앞에서부터 하나씩 자릿수별로 비교하는 방식이다.

A2-2)

A2-1과 같은 코드이지만, console 출력때문에 변수가 복잡해 보일 수 있어서 다시 정리한 실제 사용된 코드이다.

const compareVer = (versionA, versionB) => {
  let compareResult = true;

  versionA = versionA.split('.');
  versionB = versionB.split('.');

  const length = Math.max(versionA.length, versionB.length);

  for (let i = 0; i < length; i += 1) {
    const a = versionA[i] ? parseInt(versionA[i], 10) : 0;
    const b = versionB[i] ? parseInt(versionB[i], 10) : 0;
    if (a > b) {
      compareResult = false;
      break;
    }
  }
  return compareResult;
};

[JavaScript] Pass By Value / Pass By Reference

sohyun_ — Tue, 11 Jun 2019 08:13:45 +0900

이 페이지는 Pass By Value와 Pass By Reference를 설명하고 있다.

# pass vs call

Call By Value, Call By Reference 와 무슨 차이가 있을까?
보통 주어가 함수일 때 call by, 인수일 때 pass by를 사용하는 듯 하다.
> They are synonymous. The term 'call-by-value' means exactly the same as 'pass-by-value'.

# Pass By Value (Call By Value, 값에 의한 호출)

: 인자로 넘기는 값을 복사해서 새로운 함수에 전달하는 방식.
값에 의한 호출은 원본값이 변경될 가능성은 없지만, 고비용과 메모리의 문제점이 있다.

예제1.

const a = 1; 
const b = a; 

console.log(a, b);    // 1  1 
console.log(a === b); // true 

a = 10; 
console.log(a, b);    // 1  10 
console.log(a === b); // false

변수 a는 원시 타입인 숫자 타입 1을 저장하고 있다. 원시 타입의 경우 값이 복사되어 변수에 저장된다. 즉, 참조 타입으로 저장되는 것이 아니라 값 자체가 저장되게 된다.

변수 b에 변수 a를 할당할 경우, 변수 a의 값 1은 복사되어 변수 b에 저장된다.

예제2.

const callByValue = (varOne, varTwo) => {  
  console.log('Inside Call by Value Method');  
  const one = 100;  
  const two = 200;  
  console.log('varOne =' + varOne + 'varTwo =' + varTwo);  
}  
let varOne = 10;  
let varTwo = 20;  
console.log('Before Call by Value Method');  
console.log('varOne =' + varOne + 'varTwo =' +varTwo);  
callByValue(varOne, varTwo)
console.log('After Call by Value Method');  
console.log('varOne =' + varOne + 'varTwo =' + varTwo);  

output :  
———————  
Before Call by Value Method  
varOne =10 varTwo =20  
Inside Call by Value Method  
varOne =100 varTwo =200  
After Call by Value Method  
varOne =10 varTwo =20

# Pass By Reference (Call By Reference, 참조에 의한 호출)

: 주소값을 인자로 전달하는 방식.
참조에 의한 호출은 원본값의 변경이 일어날 수도 있다는 문제점이 있다.

예제1.

const bar = foo; 
console.log(foo.val, bar.val); // 10 10 
console.log(foo === bar);      // true 

bar.val = 20; 
console.log(foo.val, bar.val); // 20 20 
console.log(foo === bar);      // true

foo는 객체를 저장하고 있는 것이 아니라 생성된 객체의 참조값 주소를 저장하고 있다.

예제2.

const callByReference = (varObj) => {  
  console.log('Inside Call by Reference Method');  
  varObj.a = 100;  
  console.log(varObj);  
}  
let varObj = { a: 1 }; 
console.log('Before Call by Reference Method');  
console.log(varObj); 
callByReference(varObj)  
console.log('After Call by Reference Method');  
console.log(varObj); 

output will be :  
———————  
Before Call by Reference Method  
{ a: 1 }  
Inside Call by Reference Method  
{ a: 100 }  
After Call by Reference Method  
{ a: 100 }

[JavaScript] replace / replaceAll

sohyun_ — Sun, 9 Jun 2019 08:58:19 +0900

이 페이지는 JavaScript의 replace에 대해 설명하고 있다.

# replace

String.replace(oldValue, newValue)

const result = 'kkuma'.replace('k', a');
console.log(result);

result의 값은 무엇일까?

위의 코드는 ‘kkuma’의 ‘k’를 모두 ‘a’로 바꾸고 싶었던 생각을 반영한 코드이다.

그러나, result는 ‘akuma’로 생각했던 값이 아닌 가장 앞에 k 하나만 변경된 값이었다.

해결방안으로는 두 가지를 제안해본다.

1. 정규표현식

replace에 정규표현식을 이용하면 replaceAll의 역할을 할 수 있다. 정규표현식 참조

정규 표현식

정규 표현식은 문자열에 나타는 특정 문자 조합과 대응시키기 위해 사용되는 패턴입니다. 자바스크립트에서, 정규 표현식 또한 객체입니다. 이 패턴들은 RegExp의 exec 메소드와 test 메소드 ,그리고 String의 match메소드 , replace메소드 , search메소드 , split 메소드와 함께 쓰입니다 . 이 장에서는 자바스크립트의 정규식에 대하여 설명합니다.

developer.mozilla.org

const result = 'kkuma'.replace(/k/gi,'a');
console.log(result);

> 'aauma'

g: 전역 검색 (global)

i: 대소문자 구분 없는 검색 (ignore Case)

m: 다중행 검색 (multi-line)

u: 유니코드 (unicode)

2. replaceAll

그럼 혹시 replaceAll 이라는 메서드가 있나?

놉. 제공되는 것은 없으나 만들어 사용할 수는 있다.

const replaceAll = (str, a, b) => { 
  return str.split(a).join(b);
}

const result = replaceAll('kkuma', 'k', 'a');
console.log(result);

> 'aauma'

[Node.js] Password Security

sohyun_ — Fri, 31 May 2019 08:29:42 +0900

기존의 로그인 시스템에서 이슈가 생겨서 비밀번호 보안을 강화시키는 작업을 진행했고, 이 페이지는 그에 대한 설명하고 있다.
기존의 시스템은 웹 화면쪽에서 입력된 값을 패킷으로 바로 전송하여 bcrypt를 이용했는데, 이 과정에서 정보가 유출될 수 있어서 수정 보완하기로 한다.

암호화에는 크게 단방향 암호화와 양방향 암호화 두 가지가 있다.
단방향 암호화는 복호화할 수 없는 암호화 방법이며, 복호화란 암호화된 문자열을 다시 원래 문자열로 해독하는것을 의미한다.
단방향 암호화가 복호화 할 수 없다고 설명했지만, 최근 MD5나 SHA1 방식 등은 쉽게 해독이 가능하니 사용하지 않는것이 좋다. 자세한 내용은 MD5 파트에서 설명하고 있다.

# bcrypt

1) 설치

npm install bcrypt-nodejs

2) 코드

const bcrypt = require(‘bcrypt-nodejs’); 

// 로그인할 때에는 hash된 값과 입력된 값을 비교하는 작업이 필요하다. 
bcrypt.compareSync(data, encrypted) //bcrypt.compareSync(입력값, 비교값 hash)

위의 코드는 입력값을 hash한 후 값이 일치하는지 비교하는 로직이다.

bcrypt는 패스워드 저장 목적으로 설계되어, 현재까지는 강력한 암호화 방식 중 하나지만,

입력 값으로 72bytes character 사용해야 한다는 제약이 있다.

# md5

초반부에 단방향 암호화 방식 중 하나인 MD5가 쉽게 해독이 가능하다고 설명했는데, 이는 아래 사이트에 들어가보면 안다.

https://crackstation.net

CrackStation - Online Password Hash Cracking - MD5, SHA1, Linux, Rainbow Tables, etc.

Free Password Hash Cracker Enter up to 20 non-salted hashes, one per line: Supports: LM, NTLM, md2, md4, md5, md5(md5_hex), md5-half, sha1, sha224, sha256, sha384, sha512, ripeMD160, whirlpool, MySQL 4.1+ (sha1(sha1_bin)), QubesV3.1BackupDefaults How Crack

crackstation.net

22c14f311a60486b36f79f3bc962be66 해시값을 입력하면 md5방식이며, a1b2c3d4 라는 값을 쉽게 얻을 수 있다.
이 사이트에서 사용하고 있는 방식은 레인보우 테이블에서 비교하여 찾는 것이다. 레인보우 테이블이란, 해시된 값을 미리 변환해둔 테이블이다. 모든 값은 아니지만 엄청나게 많은 데이터들을 가지고 있기 때문에 해독이 쉽다.

굳이 사용한다고 하면, 아래 코드를 이용한다.

1) 설치

npm install md5

2) 코드

const md5 = require(‘md5’); 
const security = md5(pw);

# salt

단방향 암호화 방식을 어떻게 더 안전하게 할 수 있을까?
해커가 레인보우 테이블을 사용하지 못하게 하고 오랜시간을 들여야만 해독할 수 있게 하는 방법이 필요하다.
소금을 뿌려주는 일인데, salt라는 특수한 값을 이용해 단방향 암호화한 값을 변형시키는 것이다. salt는 보통 랜덤 문자열을 생성해서 비밀번호와 같이 DB에 저장한다.

같은 password를 사용하는 유저가 있다면 유출 시 다른 유저의 비밀번호 또한 유출될 수 있기때문에, 유저마다 다른 salt를 설정해야한다.

그래서 사용한 salt의 값은 아래와 같다. 오늘 날짜에 랜덤한 값을 곱하여 만든 랜덤랜덤한 값이다.

const salt = `${Math.round(new Date().valueOf() * Math.random())}`; 
bcrypt.hashSync(pw + salt);

random 메소드는 매번 다른 값을 반환하기 때문에 암호화 결과가 매번 달라지기때문에, 꼭 비밀번호와 함께 저장해두어야한다.

salt를 추가해도 시간을 들인다면 cracking 할 수 있겠지만, 오랜시간이 걸린다. 만약 더 좋은 방식이 나온다면 변경하도록하자.

[Node.js] Uploading image file to AWS S3

sohyun_ — Fri, 17 May 2019 08:20:07 +0900

이 페이지는 aws S3에 이미지를 업로드하는 방법을 설명하고 있다.

아래코드를 library에 따로 관리하여 호출하는것이 재사용성을 높이는 좋은 방법이다.

텍스트와 이미지 파일 업로드 함수를 따로 분리하였으니 필요에 따라 사용.

마지막 함수 deleteObject를 이용하여 s3에 있는 이미지도 삭제가능하다.

const fs = require('fs');
const S3 = require('aws').s3;

const errors = require('../libs/errors');

exports.putTextObject = (bucket, key, contentType, body) => new Promise((resolve, reject) => {
    const params = {
        Bucket : bucket,
        Key : key,
        ContentType : contentType,
        Body: body,
        ACL : 'public-read',
    };
    S3.putObject(params, (err, data) => {
    	if (err) return reject(new errors.AWSS3Error());
        return resolve(data);
    });
});

exports.putObject = (bucket, key, contentType, file) => new Promise((resolve, reject) => {
    const fileStream = fs.createReadStream(file.path);
    const params = {
        Bucket : bucket,
        Key : key,
        ContentType : contentType,
        Body: fileStream,
        ACL : 'public-read',
    };
    S3.putObject(params, (err, data) => {
        if (err) return reject(new errors.AWSS3Error());
        return resolve(data);
    });
});

exports.deleteObject = (bucket, key, callback) => new Promise((resolve, reject) => {
    S3.deleteObject({
        Bucket : bucket,
        Key : key,
    }, (err, data) => {
        if (err) return reject(new errors.AWSS3Error());
        return resolve(data);
    });
});

라이브러리에 작성된 코드를 아래의 형식처럼 호출하여 사용할 수 있다

await s3.putObject(bucket, key, 'image/png', file);

[Node.js] Get data from excel file

sohyun_ — Sun, 14 Apr 2019 20:59:37 +0900

이 페이지는 node.js를 이용하여 엑셀 파일을 다루는 방법을 설명하고 있다.

실제 코드 구현에 앞서 필요한 모듈인 node-xlsx와 fs를 설치한다.

npm install node-xlsx --save

npm install fs --save

# 예제 엑셀파일

예제로 사용한 엑셀파일은 아래와 같이 A1부터 바로 시작하는 형식이다.

# 코드구현

위의 엑셀파일 데이터를 가져와 처리하는 코드를 설명하고 있다.

const xlsx = require('node-xlsx');
const fs = require('fs');

exports.checkExcel = (excel) => {
  try {
    fs.exists(excel.path, (exists) => {
      if (exists) {
        const obj = xlsx.parse(excel.path);
        console.log(obj); // <1>
        console.log(obj[0]); // <2>
        console.log(obj[0].data); // <3>
        async.eachSeries(obj[0].data, async (data, done) => {
          console.log(data); // <4>
          console.log(data[0]); // <5>
          // data를 이용하는 작업 코드
          return done(null);
        });
      }
    });
  } catch (err) {
    return Promise.reject(err);
  }
};

# 결과값

처리과정에 따른 결과값을 따로 표기하였으니, 필요한 값을 이용하여 작업을 진행하시길 바랍니다.

<1> console.log(obj);
[ { name: '시트1', data: [ [Array], [Array], [Array] ] } ]

<2> console.log(obj[0]);
{ name: '시트1', data: [ [ 'test1' ], [ 'test2' ], [ 'test3' ] ] }

<3> console.log(obj[0].data);
[ [ 'test1' ], [ 'test2' ], [ 'test3' ] ]

<4> console.log(data);
[ 'test1' ]
[ 'test2' ]
[ 'test3' ]

<5> console.log(data[0]);
test1
test2
test3

[Tistory] Maximum call stack size exceeded Error

sohyun_ — Tue, 9 Apr 2019 09:30:35 +0900

이 페이지는 'Maximum call stack size exceeded' 에러 해결방법을 공유하고 있다.

새 에디터가 생겼길래 신나게 글을 써보려고했는데, 밑에 사진에 보이는 메뉴와 카테고리가 클릭이 되지 않았다.

당황스러워서 찾아보니 메뉴뿐만이 아니라 전체가 하얀화면으로 보이는 경우도 있다고 한다.

개발자 도구로 확인했더니, 아래와 같은 에러가...

원인은 shCore.js 때문이다.

shCore.js란, 다수의 개발블로그에서 사용되고 있는 코드블럭 테마인 SyntaxHighlighter를 설정할때 추가했던 파일이다.

'블로그관리 - 스킨편집 - html편집 - HTML 탭'에서 SyntaxHighlighter를 사용하기 위해 추가했던 스크립트들과 아래 코드를 전부 삭제한 후 저장하니 정상적으로 작동하는것을 확인했다.

[Node.js] Using multer to upload image

sohyun_ — Sat, 6 Apr 2019 11:27:59 +0900

이 페이지는 multer를 이용한 이미지 업로드 및 폼데이터 처리방식을 설명하고 있다.

(* 아래 코드는 React.js와 Node.js 언어로 구현되어있다)

# 설치

express와 함께 사용할 multer 모듈을 설치한다.

npm install multer --save

# React.js

multer는 multipart/form-data에서만 동작하니 주의해주세요.

const formData = new FormData();

formData.append("image", file);

Axios.post('/api/upload',
  formData, {
  	headers: {
  		'Content-Type': 'multipart/form-data'
  	}
  }
).then((res) => {
	console.log('SUCCESS!!');
}).catch((err) => {
	console.log('FAILURE!!');
});

# Node.js

1) 한개의 이미지 파일

const router = require('express').Router();
const multer = require('multer');
const upload = multer({ dest: 'uploads/' });

router.post('/upload', upload.single('image'), (req, res, next) => {
    console.log(req.file);
    // 이미지를 이용하는 작업 코드
});

module.exports = router;

2) 여러개의 이미지 파일 (array)

const router = require('express').Router();
const multer = require('multer');
const upload = multer({ dest: 'uploads/' });

router.post('/upload', upload.array('image'), (req, res, next) => {
    console.log(req.files);
    // 이미지를 이용하는 작업 코드
});

module.exports = router;

image의 갯수를 제한시켜주려면 아래코드처럼 array에 숫자를 지정해줄 수 있다.

3이라고 명시하면, 이미지를 3개까지만 허용하고 4개부터 ERROR!

router.post('/upload', upload.array('image', 3), (req, res, next) => {
    console.log(req.files);
    // 이미지를 이용하는 작업 코드
});

3) 여러개의 이미지 파일 (any)

전달된 모든 파일을 허용하여 req.files에 저장하고, 기타 텍스트파일은 req.body에 저장한다.

const router = require('express').Router();
const multer = require('multer');
const upload = multer({ dest: 'uploads/' });

router.post('/upload', upload.any(), (req, res, next) => {
    console.log(req.files);
    // 이미지를 이용하는 작업 코드
});

module.exports = router;

! req.file 과 req.files를 이용하는 코드를 구분시켜서 명시하였으니 꼭 체크해야한다.

[Node.js] Getting Metrics from Amazon AWS CloudWatch

sohyun_ — Sat, 30 Mar 2019 08:56:03 +0900

이 페이지는 Node.js 프로젝트에 Amazon AWS CloudWatch 데이터를 가져오는 방법을 설명하고 있다.

코드설명에 앞서 CloudWatch에 대해 간단하게 설명하자면,

개발자 / 시스템 운영자 / 사이트 안정성 엔지니어 및 IT관리자를 위해 구축된 모니터링 및 관리 서비스이다.

CloudWatch도 Amazon서비스이기때문에 코드작성에 앞서 연결하는 작업이 필요하다

(아래 코드에서는 region, accessKeyId, secretAccessKey를 하드코딩이 아닌 환경변수에 저장해두고 가져오는 형태로 사용하였다)

const AWS = require('aws-sdk')
AWS.config.update({
    region: config.AWSRegion,
    accessKeyId : config.AWSAccessKeyId,
    secretAccessKey: config.AWSSecretAccessKey
});

아래는 CloudWatch의 지표 중 하나인 'NumberOfMessagesPublished' 데이터를 가져오는 코드이다

period(요청할시간)를 60이상으로 설정한 이유는, cloudWatch가 집계하는데 필요한 최소시간 단위가 1분이기 때문이다.

또 확인할 것은 params에 있는 항목의 Key는 첫글자가 대문자이고, 빠지는 항목없이 작성해주어야한다는 것!

const cw = new AWS.CloudWatch();

exports.getCloudWatch = async (req, res, next) => {
    let { startDate, endDate, period } = req.query;
    if (period < 60) period = 60;
    const StartTime = new Date(startDate).toISOString();
    const EndTime = new Date(`${endDate}T23:59:59`).toISOString();
	const params = {
    	Namespace: 'AWS/SNS',
        Statistics: ['Sum'],
        Unit: 'Count',
        Dimensions: [{ Name: 'TopicName', Value: `${TopicNameValue}` }],
        MetricName: 'NumberOfMessagesPublished',
        StartTime,
        EndTime,
        Period: period,
    };
    
    cw.getMetricStatistics(params, (err, data) => {
        if (err) return console.log(err);
        data.Datapoints.sort((a, b) => (a.Timestamp > b.Timestamp) ? 1 : ((a.Timestamp < b.Timestamp) ? -1 : 0 ));
        return res.send({ result: data });
    });
};

getMetricStatistics의 결과값에는 순서가 없이 뒤죽박죽 섞여있어, sort함수를 이용해 Timestamp기준 오름차순으로 정렬해주었다.

정렬된 최종 데이터는 다음과 같다 :)

"NumberOfMessagesPublished": {
	"ResponseMetadata": {
    	"RequestId": ""
    },
  	"Label": "NumberOfMessagesPublished",
    "Datapoints": [
      {
      	"Timestamp": "2019-03-28T00:00:00.000Z",
        "Sum": 1,
        "Unit": "Count"
      },
      {
        "Timestamp": "2019-03-28T00:10:00.000Z",
        "Sum": 6,
        "Unit": "Count"
      },
      {
        "Timestamp": "2019-03-28T00:20:00.000Z",
        "Sum": 3,
        "Unit": "Count"
      },
      {
        "Timestamp": "2019-03-28T00:25:00.000Z",
        "Sum": 2,
        "Unit": "Count"
      },  
      ... 생략
	]
}

[Review] SAMSUNG Galaxy Buds(SM-R170)

sohyun_ — Thu, 28 Mar 2019 08:38:58 +0900

# Galaxy Buds

'갤럭시 버드 또는 갤럭시 버즈'라고 불리는 삼성의 새로운 블루투스 무선 이어폰 리뷰를 써보려 합니다 :)

아직 사용기간이 짧아서 리뷰라기보다는 개봉기에 가깝겠지만 같이 분석해봅시다

갤럭시 S10 사전예약시 증정품으로 제공해주는 제품이어서 퀄리티가 떨어지는 건 아닌가 하는 생각이 들었지만 일단 믿고 사용해보려 합니다

무선 이어폰을 살 때 고려할 가장 큰 세 가지를 갤럭시 버즈 스펙에서 살펴볼까요?

첫 번째, 사운드.

세계적인 음향 브랜드 AKG가 튜닝한 전문가 수준의 사운드!

이번에 갤럭시 버즈가 최고의 음질을 내세우는 이유가 있었군요

두 번째, 마이크.

주변 환경에 따라 내/외부 2개의 마이크로 시끄럽고 바람이 많이 부는 환경에서도 외부 소음의 방해 없이 또렷하게 목소리를 전달할 수 있다?

(전화통화의 경우는 아직 좀 더 테스트해봐야 할 것 같네요)

세 번째, 배터리.

한번 충전으로 최대 13시간, 고효율 배터리를 가지고 있으며 무선충전과 무선 배터리 공유 기능이 주목할만하다

이런 스펙을 가진 갤럭시 버즈의 가격은 159,500원.

한국에서는 화이트, 블랙, 옐로우로 출시되지만 사전예약 시 제공하는 컬러는 화이트 한 가지입니다

# 'Galaxy Buds Bluetooth Earphones' UNBOXING(언박싱)

두둥 드디어 갤럭시 버즈를 개봉하도록 하겠습니다 :)

사진도 있고, 가장 중요시하는 스펙들도 있어서 기존의 갤럭시 휴대폰 케이스보다는 정보가 많이 있는게 눈에띄네요

상자를 열면 심플 그 자체.

너무 심플해서 상자 윗쪽에 끼어있는 설명서를 보지 못할 뻔 했어요

작은 상자안에 들어있는 구성품은 충전을 위한 USB 케이블, 윙팁, 이어팁 세 가지다

드디어 이어버드를 만나다

충전케이스를 열었을땐 밥솥같이 생긴 느낌이었는데, 꺼내어 뒤집어보니 새같다 짹짹=

# 사용설명서

본격적으로 사용설명서를 읽어봅시다 :)

작은 이어버드가 하는일이 많아서 명칭도 많네요

배터리 충전하는 방법, 구성품과 명칭은 가볍게 읽고 이어버드와 모바일 기기 연결하는 방법은 아래에서 다시 설명하도록 할게요

빠르게 쭉쭉쭉 읽고 빨리 휴대폰과 연결을 해보도록하죠!

잠깐! 배터리정보

음악재생 - 한번 충전으로 최대 6시간 (충전 케이스 충전시 총 13시간)
통화 - 한번 충전으로 최대 5시간 (충전 케이스 충전시 총 11시간)

15분충전으로 100분사용가능하다고 합니다!

# 이어버드와 모바일 기기 연결

갤럭시 휴대폰에서는 기본 어플인 'Galaxy Wearable'를 사용하도록 하겠습니다

어플을 들어가면 아래와 같은 화면을 볼 수 있다.

블루투스를 켠 상태에서 충전케이스를 여는 순간 연결완료!

연결이 해제된 상태의 어플

연결이 되면 왼쪽, 오른쪽 이어버드 각각의 배터리 잔량도 확인가능하다

이퀄라이저도 설정 외에도 알림설정, 터치패드, 주변 소리 듣기, 내 이어버드 찾기, 이어버드 정보, Galaxy Wearable 정보가 있는데 하나하나 눌러볼게요

알림설정

터치패드 사용법은 크게 4가지로 나뉜다

한 번 누르기 - 곡 재생 또는 일시정지
두 번 누르기 - 다음 곡 재생, 전화받기 및 끊기
세 번 누르기 - 이전 곡 재생
길게 누르기 - 사용자 선택 동작 (설정에서 변경), 전화거절

아래쪽 화면처럼 터치패드 잠금도 제공하고 있으며,

그 밑에 있는 터치패드 길게 누르기에서 원하는 기능을 선택할 수 있다

왼쪽, 오른쪽 이어버드 셀렉트박스엔 공통적으로 음성명령 및 즉시 주변 소리 듣기가 있다

그리고 어느 한쪽에서 음량을 선택할 경우, 다른 한쪽도 음량으로 자동 변경된다 (왼쪽은 음량 내리기, 오른쪽은 음량 올리기)

이어버드 정보와 Galaxy Wearable 정보에는 다음과 같은 항목들이 있다

# 참고

블루투스 연결할때 '[Headphone] Galaxy Buds (EDFF)'라는 이름으로 보인다는 것을 참고하시고, 이만 개봉기를 마치겠습니다 :)

[Node.js] AWS DynamoDB - Create, Read, Update, Delete (CRUD)

sohyun_ — Sun, 17 Feb 2019 16:29:23 +0900

이 페이지는 Node.js 프로젝트에 Amazon AWS DynamoDB를 연결하여 CRUD를 작업하는 방법을 설명하고 있다.

DynamoDB와 연결하여 화면출력하는 내용은 지난 포스트를 참고한다.

참고) https://kkumalog.tistory.com/50

# Movies 테이블 데이터 예시

{

'year': '2013',

'title': 'Turn It Down, Or Else!',

'info': {

'directors': [

'Alice Smith',

'Bob Jones'

'release_date': '2013-01-18T00:00:00Z',

'rating': 6.2,

'genres': [

'Comedy',

'Drama'

'image_url; : 'http://ia.media-imdb.com/images/N/O9ERWAU7FS797AJ7LU8HN09AMUP908RLlo5JF90EWR7LJKQ7@@._V1_SX400_.jpg',

'plot' : 'A rock band plays their music at high volumes, annoying the neighbors.',

'rank' : 11,

'running_time_secs': 5215,

'actors': [

'David Matthewman',

'Ann Thomas',

'Jonathan G. Neff'

]

}

다음 링크에서 샘플 데이터 파일을 다운받을 수 있다.

https://docs.aws.amazon.com/ko_kr/amazondynamodb/latest/developerguide/GettingStarted.NodeJs.02.html

# Create Item (항목 생성)

항목을 생성할 때에는 반드시 기본 키가 필요하다.

다음 예제에서는 기본 키(year, title) 및 영화에 대한 자세한 정보를 가진 info속성을 추가하는 코드를 나타내고 있다.

const AWS = require('aws-sdk');



// TODO region, accessKeyId, secretAccessKey 입력필요

AWS.config.update({

region: region,

accessKeyId: accessKeyId,

secretAccessKey: secretAccessKey

});

const docClient = new AWS.DynamoDB.DocumentClient();



const params = {

TableName: 'Movies',

Item: {

'year': 2015,

'title', 'The Big New Movie',

'info': {

'plot': 'Nothing happens at all',

'rating': 0

}

}

};





docClient.put(params, function(err, data) {

if (err) {

console.error(err);

} else {

console.log('Add item');

}

});

# Read Item (항목 읽기)

다음 예제에서는 위에서 생성한 항목을 읽어오는 코드를 나타내고 있다.

get 메서드를 사용하는데, 키 값을 지정해야 Movies 테이블에서 항목을 읽어올 수 있다.

const AWS = require('aws-sdk');





AWS.config.update({

region: region,

accessKeyId: accessKeyId,

secretAccessKey: secretAccessKey

});

const docClient = new AWS.DynamoDB.DocumentClient();





const params = {

TableName: 'Movies',

Key: {

'year': 2015,

'title': 'The Big New Movie'

}

};





docClient.get(params, function(err, data) {

if (err) {

console.error(err);

} else {

console.log('Get Item');

}

});

# Update Item (항목 업데이트)

기존 속성의 값을 업데이트하거나 새로운 속성을 추가하거나 속성을 제거할 수 있다.

다음 예제에서는 기존 속성 info의 plot, rating을 수정하고, 새로운 actors 항목을 추가하는 코드를 나타내고 있다.

ReturnValues 파라미터는 DynamoDB에게 업데이트된 속성만 반환하도록 지시한다.

const AWS = require('aws-sdk');





AWS.config.update({

region: region,

accessKeyId: accessKeyId,

secretAccessKey: secretAccessKey

});

const docClient = new AWS.DynamoDB.DocumentClient();



const params = {

TableName: 'Movies',

Key: {

'year': 2015,

'title': 'The Big New Movie'

},

UpdateExpression: 'set info.rating = :r, info.plot=:p, info.actors=:a',

ExpressionAttributeValues: {

':r': 5.5,

':p': 'Everything happens all at once',

':a': ['Larry', 'Moe', 'Curly']

},

ReturnValues: 'UPDATED_NEW'

};





docClient.update(params, function(err, data) {

if (err) {

console.error(err);

} else {

console.log('Update Item');

}

});

조건에 맞는 항목만 업데이트를 하고 싶을 땐, ConditionExpression 파라미터를 추가한다.

ConditionExpression: 'size(info.actors) > :num',

# Delete Item (항목 삭제)

delete메서드를 사용해 기본 키를 지정함으로써 항목 1개를 삭제할 수 있다.

수정과 마찬가지로 조건을 만족하는 경우만 선택하려면 ConditionExpression 옵션을 선택할 수 있다.

다음 예제에서는 평점이 5 이하인 경우 특정 영화 항목을 삭제하는 코드를 나타내고 있다.

const AWS = require('aws-sdk');



AWS.config.update({

region: region,

accessKeyId: accessKeyId,

secretAccessKey: secretAccessKey

});

const docClient = new AWS.DynamoDB.DocumentClient();



const params = {

TableName: 'Movies',

Key: {

'year: 2015,

'title': 'The Big New Movie'

},
ConditionExpression: 'info.rating <= :val',

ExpressionAttributeValues: {

':val': 5.0

}

};





docClient.delete(params, function(err, data) {

if (err) {

console.error(err);

} else {

console.log('Delete Item');

}

});

[GA] 이탈률(Bounce Rate) vs 종료율(Exit Rate)

sohyun_ — Fri, 8 Feb 2019 09:30:00 +0900

이 페이지에서는 헷갈리는 용어 두가지인 이탈률과 종료율을 비교하여 설명하고 있다.

# 이탈률(Bounce Rate)

해당 페이지로 홈페이지를 처음 방문해 해당 페이지만 보고 나가는 비율. 다시 말해, 다른 페이지로 이동하지 않고 접속한 페이지 하나만 보고 나가버리는 비율.

→ 이탈률이 높게 나타난다는 것은 사용자가 홈페지이를 더 볼 것이 없다고 판단했다는 것을 의미하여, 사용자가 원하는 정보가 없는지 점검해야 한다.

# 종료율(Exit Rate)

해당 페이지에서 홈페이지를 종료한 비율.

→ 어떤 페이지에서 종료율이 높게 나타난다면 해당 페이지에 문제가 없는지 점검해야한다.

# 이탈률 vs 종료율

처음 방문한 페이지에서 다른 페이지로 이동하지 않고 종료했다면 이탈률에 포함.

다른 페이지로 이동했다가 다시 처음 방문한 페이지로 돌아와 종료했다면 종료율에 포함.

# Example 1

session1. A > B > C > Exit

session2. B > A > C > Exit

session3. A > Exit

session4. C > B > Exit

이탈률

A의 이탈률 : 50% (1/2)

→ A로 시작하는 세션 2개 中 A에서 종료된 세션 1개

B의 이탈률: 0%

→ B에서 시작하고 B에서 끝난 세션이 존재하지 않는다

C의 이탈률: 0%

→ C에서 시작하고 C에서 끝난 세션이 존재하지 않는다

종료율

A의 종료율: 약 33% (1/3)

→ A가 포함된 세션 3개 中 A에서 종료된 세션 1개

B의 종료율: 약 33% (1/3)

→ B가 포함된 세션 3개 中 B에서 종료된 세션 1개

C의 종료율: 약 66% (2/3)

→ C가 포함된 세션 3개 中 C에서 종료된 세션 2개

# Example 2

session1. B > A > C > Exit

session2. B > Exit

session3. A > C > B > Exit

session4. C > Exit

session5. B > C > A > Exit

이탈률

A의 이탈률 : 0%

→ A에서 시작하고 A에서 끝난 세션이 존재하지 않는다

B의 이탈률: 약 33% (1/3)

→ B로 시작하는 세션 3개 中 B에서 종료된 세션 1개

C의 이탈률: 100%

→ C로 시작하는 세션 1개 中 C에서 종료된 세션 1개

종료율

A의 종료율: 약 33% (1/3)

→ A가 포함된 세션 3개 中 A에서 종료된 세션 1개

B의 종료율: 50% (2/4)

→ B가 포함된 세션 4개 中 B에서 종료된 세션 2개

C의 종료율: 50% (2/4)

→ C가 포함된 세션 4개 中 C에서 종료된 세션 2개

[GA] 구글 애널리틱스(Google Analytics)란?

sohyun_ — Tue, 5 Feb 2019 08:30:00 +0900

# 분석의 시작

블로그를 시작하면서 여러 통계 정보를 확인하고 싶다는 생각을 하게되었다. 그러려면 어떻게든 데이터를 수집하고 수집된 데이터를 확인할 수 있는 통계 페이지가 있어야 하는데 어떻게 마련해야 하나 막막하기만 하다.

바로 이럴때 누구나 쉽게 홈페이지의 데이터를 분석하고 확인할 수 있게 도와주는 도구인 구글 애널리틱스(Google Analytics)이다.

https://www.google.com/analytics/web/?hl=ko&pli=1

# 웹로그

사용자가 어떻게 웹 서비스를 이용하고 있는지 분석하기 위해 수집하는 데이터로, 어떤 사용자가 어느 페이지에 언제 접속했는지 얼마나 오래 머물렀는지 등의 데이터를 말한다.

그렇다면 웹 로그는 왜 수집하는 걸까?

그 답은 웹 로그를 분석해 더 나은 웹 서비스를 제공하기 위해서다. 웹로그를 수집하고 분석하면 웹 서비스를 운영하는데 유용한 정보를 얻을 수 있기 때문이다.

# 웹로그 분석 과정

1) 웹 로그 분석의 목적을 정한다

2) 목적에 부합하는 데이터를 수집한다

3) 수집된 데이터를 분석한다

4) 분석 결과를 바탕으로 행동한다

5) 다시 목적, 수집, 분석, 행동을 반복한다

# 구글 애널리틱스의 정의와 역할

구글 애널리틱스는 앞서 설명한 웹 로그 분석을 쉽게 진행할 수 있도록 도와주는 도구이다.

프로그래밍 코드를 작성하고, 수집한 주소를 데이터베이스에 저장한 뒤 데이터베이스에서 SQL로 데이터를 추출하는 과정을 생략할 수 있다.

1) 자동으로 데이터를 수집하고 저장한다 - 데이터 수집 계획 없이, 데이터 수집 프로그래밍 코드없이도 데이터 분석에 자주 사용되는 기본적인 정보를 자동으로 수집하여 데이터베이스에 저장한다

2) 데이터 확인을 위한 보고서와 검색 기능을 제공한다

# 구글 애널리틱스, 누가 사용할까

1) 마케터

마케터는 구글 애널리틱스의 각종 요소를 이용해 어떤 상품을, 어떤 대상에게, 어디에 마케팅을 진행할 것인지 확인하여 마케팅의 효율을 극대화할 수 있다.

2) 기획자

기획자는 사용자가 실제로 홈페이지를 어떻게 사용하는지 확인하여, 자신이 담당하는 서비스의 사용자 경험을 개선할 수 있다.

3) 디자이너

디자이너는 기본적으로 기획자와 같은 목표로 구글 애널리틱스를 사용한다.

어떤 부분이 사용성에 안 좋은 영향을 끼치는지 확인하여 자신의 디자인이 실제 사용자 행동을 불러일으키는지, 비즈니스 목표에 부합하는지 알 수 있다.

4) CEO

CEO는 DAU, MAU같은 사용자 지표를 확인할 수 있다. 원하는 데이터를 원하는 시점에 확인해 의사 결정을 하기 위해서는 다른 어느 직군보다도 구글 애널리틱스를 잘 다루어야 한다.

[Node.js] Login Authentication With Passport

sohyun_ — Sat, 2 Feb 2019 08:30:00 +0900

이 페이지에서는 passport.js 패키지를 이용하여 로그인을 구현하는 방법을 설명하고 있다.

# 패키지 설치

우선 아래의 코드를 이용해서 패키지를 설치한다.

npm install passport passport-local express-session

passport passport-local은 로그인을 구현할 때, express-sesion은 로그인 후 세션에 유저정보를 입력할 때 사용될 것이다.

# 화면구현 Code

api를 호출해서 화면에 출력하는 과정에 대해서는 지난 포스트에서 설명했다.

참고) https://kkumalog.tistory.com/49

이번에는 폼을 출력하고 폼에 입력한 데이터들을 post로 넘겨주는 과정을 설명하려한다.

form action="/login" method="post"를 해석하면, /login 주소로 form data를 post방식으로 넘겨준다는 뜻이다.

1) api/test.js

function  templateHTML() {

return  `

<!DOCTYPE html>

<html>

<head>

<title></title>

</head>

<body>

<form action=“/login” method=“post”>

<div>

<label>UserId:</label>

<input type=“text” name=“username”/><br/>

</div>

<div>

<label>Password:</label>

<input type=“password” name=“password”/>

</div>

<div>

<button type=“submit”>Submit</button>

</div>

</form>

</body>

</html>

`;

}

exports.loginForm =   function  getLoginForm(req, res, next) {

res.send(templateHTML());

}

2) router/test.js

const  router = require(‘express’).Router();

const  test = require(‘../api/test’);



router.get(‘/‘, test.loginForm);



module.exports = router;

3) 로그인 화면 실행

https://localhost:3000/test

# 로그인구현 Code

로그인폼에서 받아온 username, password를 passport.js를 이용해서 로그인 인증을 구현한다.

코드 설명에 앞서, 흐름을 간단하게 설명하면 다음과 같다.

- admin테이블에 있는 유저들과 입력된 값을 비교한다

- username이 존재한다면, 암호화되어있는 유저 비밀번호를 해독(복호화, decryption)하여 비교한다

- 로그인 후에는 세션에 유저정보를 저장한다

1) database/dynamodb/admin.js

const  router = require(‘express’).Router();

const  test = require(‘../api/test’);



router.get(‘/‘, test.loginForm);



module.exports = router;

2) passport.js

const passport = require(‘passport’),

LocalStrategy = require(‘passport-local’).Strategy;

const bcrypt = require(‘bcrypt-nodejs’);



const adminDB = require(‘../database/dynamodb/admin’);



exports.setup = async function() {

passport.use(‘login’, new LocalStrategy({

usernameField: ‘username’,

passwordField: ‘password’,

session: true,

passReqToCallback: true,

},

async function (req, username, password, done) {

try {

const users = await adminDB.getAdmin();

for ( const user  of users) {

if (username === user.id) {

if (bcrypt.compareSync(password, user.pw)) {

return done(null, user);

}

}

}

return done(null, false, {message: ‘Not found user’})

} catch (err) {

return Promise.reject(err);

}

}

));



passport.serializeUser(function (user, done) {

done(null, user);

});



passport.deserializeUser(function (user, done) {

done(null, user);

});

}

serializeUser는 로그인 성공 시 실행되는 done(null, user)에서 user 객체를 받아 req.session.passport.user 세션에 저장한다.

저장된 세션은 페이지 이동 시에도 로그인 정보가 유지된다.

deserializeUser는 서버로 들어오는 요청마다 세션 정보를 실제 DB의 데이터와 비교한다. 해당하는 유저 정보가 있으면 done의 두 번째 인자를 req.user에 저장하고, 요청을 처리할 때 유저의 정보를 req.user를 통해서 넘겨준다.

passport를 동작시키게하기위해서는 이 두 메서드는 꼭 필요하다

3) api/login.js

const passport = require(‘passport’);



require(‘../libs/passport’).setup();



exports.getLogin = async (req, res, next) => {

let isValid = true;

if (!req.body.username){

isValid = false;

}

if (!req.body.password){

isValid = false;

}

try {

if (isValid) {

passport.authenticate(‘login’, {

successRedirect: ‘/login/success’,

failureRedirect: ‘/login/failure’

})(req, res, next);

};



catch (errors) {

return next(errors);

}

};



exports.loginSuccess = async (req, res, next) => {

res.redirect(“success”);

}



exports.loginFailure = async (req, res, next) => {

res.send(“fail”);

}

4) router/login.js

const router = require(‘express’).Router();

const login = require(‘../api/login’);



router.post(‘/‘, login.getLogin);

router.get(‘/success’, login.loginSuccess);

router.get(‘/failure’, login.loginFailure);



module.exports = router;

5) app.js

const express = require(‘express’);

const app =  express();

const bodyParser = require(‘body-parser’);

const passport = require(‘passport’);

const session = require(‘express-session’);



const main = require(‘./router/main’);

const admin = require(‘./router/admin’);

const test = require(‘./router/test’);

const login = require(‘./router/login’);



app.use(bodyParser.json());

app.use(bodyParser.urlencoded({ extended:  false }));



app.use(session({

secret: ‘!@#’,

resave:  false ,

saveUninitialized:  true 

}));



app.use(passport.initialize());

app.use(passport.session());



app.use('/', main);

app.use('/admin', admin);

app.use('/test', test);

app.use('/login', login);



app.listen(3000, function() {

console.log(‘Example app listening on port 3000!’);

});

# 로그인 코드 실행

https://localhost:3000/login/success

https://localhost:3000/login/failure

[Node.js] Connecting to Amazon AWS DynamoDB

sohyun_ — Wed, 30 Jan 2019 15:46:29 +0900

이 페이지는 Node.js 프로젝트에 Amazon AWS DynamoDB를 연결하는 방법에 대해 설명하고 있다.

폴더 구조에 관련한 내용은 지난 포스트를 참고한다.

참고) http://kkumalog.tistory.com/49

# 설치

$ npm install aws-sdk

# Code

여기서는 AWS DynamoDB의 'version'테이블에서 version 필드값이 'a'인 데이터를 가져오는 과정에 대한 코드를 나타내고 있다.

(코드는 DB와 직접 연결하는 database폴더 → 서버를 실행하는 app.js 순서로 설명한다. 또한 예시를 위해 aws 설정 관련 코드를 같은 파일에 작성했으나, 실제로는 코드의 재사용성을 위해 다른 파일로 분리하여 사용하고 있다)

1) database/version.js

const AWS = require(‘aws-sdk’);

const doc = new AWS.DynamoDB.DocumentClient();


//TODO region, accessKeyId, secretAccessKey 입력필요

AWS.config.update({

region: region,

accessKeyId : accessKeyId,

secretAccessKey: secretAccessKey

});

const TableNameTree = {
version: ‘version’
};

const getVersion = async function getVersion() {

try {

 let data = await doc.query({

TableName: TableNameTree.version,

KeyConditionExpression: '#version = :version',

ExpressionAttributeValues: { ':version': 'a' },

ExpressionAttributeNames: { '#version': 'version' },

}).promise();



if (data && data.Items) data = data.Items;

return data;

} catch (err) {

return Promise.reject(err);

}

};



module.exports = {

getVersion

};

2) api/version.js

const versionDB = require(‘../database/version’);


const printVersion = async function getVersion(req, res, next) {

try {

const v = await versionDB.getVersion();

res.send(v);

}  catch (e) {

res.send(e);

}

}



module.exports = {

printVersion

};

3) router/version.js

const router = require(‘express’).Router();

const version = require(‘../api/version’);


router.get(‘/‘, version.printVersion);


module.exports = router;

4) app.js

const express = require(‘express’);

const version = require(‘./router/version’);

const app =  express();


app.get(‘/‘,  function (req, res) {

res.send(‘Hello World!’);

});


app.use(‘/version’, version);


app.listen(3001,  function () {

console.log(‘Example app listening on port 3001!’);

});

# 서버실행

https://localhost:3001/version 을 실행하면 obejct타입으로 결과를 얻을 수 있다.

[Node.js] Create Node.js Project in IntelliJ IDEA(2)

sohyun_ — Mon, 28 Jan 2019 12:30:00 +0900

이전에 IntelliJ에서 Node.js 프로젝트를 생성해보았는데, 이 페이지에서는 Terminal을 통해 생성하는 방법과 폴더 구조에 대해 알아본다.

참고) http://kkumalog.tistory.com/48

# Terminal을 통한 Node.js 프로젝트 생성

원하는 디렉토리에 폴더를 생성한다. (ex-TestProject)

$ cd TestProject/

$npm init

이 명령을 실행하면 애플리케이션의 이름 및 버전과 같은 몇 가지 정보에 대해 프롬프트한다. 대부분의 항목에서 ENTER 키를 눌러 기본값을 수락할 수 있다.

This utility will walk you through creating a package.json file.

It only covers the most common items, and tries to guess sensible defaults.



See `npm help json` for definitive documentation on these fields

and exactly what they do.



Use `npm install <pkg>` afterwards to install a package and

save it as a dependency in the package.json file.



Press ^C at any time to quit.

package name: (testproject) 

version: (1.0.0) 

description: 

entry point: (index.js) 

test command: 

git repository: 

keywords: 

author: 

license: (ISC) 

About to write to /Users/kkuma/TestProject/package.json:



{

“name”: “testproject,

“version”: “1.0.0”,

“description”: “”,

“main”: “index.js”,

“scripts”: {

“test”: “echo \”Error: no test specified\” && exit 1”

},

“author”: “”,

“license”: “ISC”

}



Is this OK? (yes)

$ pwd

pwd (print working directory, 현재 작업 중인 디렉터리의 이름을 출력)

$ npm install express —save

express를 임시로 설치하고 종속 항목 목록에 추가하지 않으려면, —save 옵션 생략 → npm install express

$ npm install body-parser

# app.js 파일 생성

- 이전 포스트로 이미 시작을 했다면, app.js는 이미 존재할 것이다. 아래의 package를 설치한 후 다음단계부터 진행하면된다.

# api, router 폴더 생성

구조는 app.js → router → api 순으로 호출을 하여 사용할 것이다.

# Code

이 페이지는 Node.js로 프로젝트를 생성하고, router를 이용하는 방법을 설명하고있다.

(추후에 로그인페이지를 구현하고자해서 파일의 이름은 login.js를 사용한다.)

1) app.js

const express = require(‘express’);

const login = require(‘./router/login’);

const app =  express();

app.get(‘/‘, function(req, res) {
res.send(‘Hello World!’);
});

app.use(‘/login’, login);

app.listen(3001, *function*() {
console.log(‘Example app listening on port 3001’);
});

2) router/login.js

const router = require(‘express’).Router();
const login = require(‘../api/login’);

router.get(‘/‘, login);

module.exports = router;

3) api/login.js

const login = function getLogin(req, res, next) {
res.send(‘Login Page’);
}
module.exports = login;

함수의 파라미터 순서는 req, res, next 이다. 파라미터의 순서가 바뀌면 에러가 생겨 진행할 수 없을 수도 있다.

만약 정의된 함수가 여러개라면 module.exports = { login, logout, signup} 형태로 사용할 수 있는데, 이 경우에는 라우터에서도 객체 형태로 받게된다.

ex) const api = require(‘../api/login’);
router.get(‘/‘, api.login);

# 서버실행

app.js를 실행한다 (Run ‘app.js’ 또는 Debug ‘app.js’)

https://localhost:3001

https://localhost:3001/login

[Node.js] Create Node.js Project in IntelliJ IDEA

sohyun_ — Sat, 26 Jan 2019 10:30:00 +0900

# 프로젝트 생성

이 페이지는 IntelliJ IDEA (인텔리제이)에서 프로젝트를 생성하고, Node.js 개발환경을 구축하는 방법에 대해서 설명하고 있다.

File - New Project 선택
Node.js and NPM → Node.js Express App
Project name 작성 후, options/Template 변경 Pug(Jade) → EJS

# 플러그인 설치

Preferences → Plugins → Marketplace에서 EJS, NodeJs 설치

설치가 완료되면 Installed에서 EJS와 NodeJS를 확인할 수 있다

# 서버실행

app.js파일을 실행한다 (Run ‘app.js’ 또는 Debug ‘app.js’)

기본적으로 세팅된 Node.js Express App은 www로 실행되며, 기본 포트는 3000으로 설정되어있다

http://localhost:3000을 실행해서 아래의 화면을 만났다면, 이제 Node.js로 공부할 준비가 끝난거다

"Welcome to Express"

[IT] Linux Crontab

sohyun_ — Wed, 23 Jan 2019 08:30:00 +0900

# 기본개념
소프트웨어 유틸리티 cron은 유닉스계열 컴퓨터 운영체제의 시간 기반 잡 스케줄러이다. 소프트웨어 환경을 설정하고 관리하는 사람들은 작업을 고정된 시간, 날짜, 간격에 주기적으로 실행할 수 있도록 스케줄링하기 위해 cron을 사용한다.
Cron은 셸 명령어들이 주어진 일정에 주기적으로 실행하도록 규정해놓은 crontab파일에 의해 구동된다. crontab파일들은 잡 목록 및 cron 데몬에 대한 다른 명령들이 보관된 위치에 저장되어 있다.

# 형식

 ┌────────분 (0 - 59)
 │ ┌──────── 시 (0 - 23)
 │ │ ┌───────── 일 (1 - 31)
 │ │ │ ┌────────── 월 (1 - 12)
 │ │ │ │ ┌─────────── 요일 (0 - 7) (0:일요일, 1:월요일, 2:화요일, …, 6:토요일, 7:일요일)
 │ │ │ │ │
 │ │ │ │ │
  * * * * *  수행할 명령어

# 명령어

$ crontab -e

편집할 수 있는 곳이 로딩되는데, 여기서 크론탭을 설정할 수 있다. 각종 크론탭 명령어를 입력한 후 콜론(:) wq 를 입력해 크론탭을 갱신시킨다.

$ crontab -l

현재 크론탭에 어떤 내용이 들어있는지 확인한다.

$ crontab -r

위 명령어로 크론탭을 지울 수 있다.

# 예시
다음은 cron 사용자의 기본 셸이 본 셸 호환이라는 가정 하에 매일 자정 이후 1분 째에 아파치 오류 로그를 삭제한다.

1 0 * * *  printf > /var/log/apache/error_log

아래의 예는 매일 20시 (오후 8시)에 export_dump.sh라는 셸 프로그램을 실행한다.

0 20 * * * /home/oracle/scripts/export_dump.sh

*Linux기반이 아닌 Java/Spring에서도 cron을 사용할 수 있는데, schedule task를 생성하고 아래의 어노테이션(annotation)을 이용하여 수행할 수 있다.
@Scheduled(cron = “* * * * * ?”)

# 참고
위키백과, 우리 모두의 백과사전 (https://ko.wikipedia.org/wiki/Cron)

[Spring] Get data from excel file

sohyun_ — Sun, 20 Jan 2019 11:00:00 +0900

이 페이지는 Excel에 있는 데이터를 가져와서 이용할 수 있는 방법에 대해 설명하고 있다.

# excel file format

	A
1	test1
2	test2
3	test3

# Get data from excel file

public void ExcelTest(MultipartFile excel) {
List<String> list = new ArrayList<>();
try {
Workbook workbook = WorkbookFactory.create(excel.getInputStream());
Sheet sheet = workbook.getSheetAt(0);
DataFormatter dataFormatter = new DataFormatter();
sheet.forEach(row -> {
String data = dataFormatter.formatCellValue(row.getCell(0));
list.add(data);
});
} catch (IOException | InvalidFormatException e) {
e.printStackTrace();
}
System.out.println(list);
}

→ output

["test1", "test2", "test3"]

위의 코드를 실행하면 엑셀파일에 입력된 데이터들을 얻어낼 수 있고, 사용에 따라 출력이 아닌 다른 작업으로 수정하면 된다.

[IT] Request SMS Vertification on the Server

sohyun_ — Thu, 17 Jan 2019 09:30:00 +0900

이 페이지는 문자 인증서비스를 할 수 있는 google SMS Retriever API를 서버측에서 이용하는 방법을 설명하고 있습니다.

SMS Retriever API는 Play 서비스 버전 10.2 이상이 설치된 Android 기기에서만 사용할 수 있다.

참고페이지)

Automatic SMS Verification with the SMS Retriever API

Perform SMS Verification on a Server

1) Obtain the user's phone number in Android

안드로이드에서 사용자 전화번호를 E164 형식으로 얻을 수 있는데, 경우에 따라 전화번호를 가져오지 못하는 경우가 있을 수 있다. 이 경우 사용자가 수동으로 입력하는 방법으로 진행해야 한다.

→ E164 format : 국제 표준화기구에서 정의한 국제 전화번호 형식.

ex) +821012345678

2) Construct a verification message

안드로이드에서 서버에게 확인 요청을 하면, 서버는 확인 메세지를 생성하고 전송받은 전화번호로 메시지를 보내게 된다.

→ 사용자의 장치로 보낼 “확인 메시지”는 다음 조건들을 충족해야한다.

140 바이트 이하여야 한다.
접두어로 시작해야한다. <#>
검증을 완료하기 위해 클라이언트가 서버로 다시 보내는 일회성 코드를 포함해야한다. (2-1 참조)
앱을 식별하는 11자의 해시 문자열로 끝납니다 (2-2 참조)

일회성 코드는 쉽게 추출할 수 있게 만드는 것이 좋은데, 위의 조건을 만족하는 확인 메시지는 다음과 같다.

<#> ExampleApp 코드 : 123ABC78

FA + 9qCX9VSu

** 맨 앞에 <#> 값과 맨 뒤에 11자리의 해쉬값이 무조건 들어가야 한다.

2-1) Generating a one-time code

여러 가지 방법으로 일회성 코드를 구현할 수 있으며, 클라이언트가 코드를 서버로 다시 보낼 때 이 코드를 사용자 또는 전화 번호에 연결할 수 있다. 사용자가 직접 코드를 입력해야하는 상황이 생길수도 있으니 코드를 쉽게 입력해야한다.

다양한 방법 중 일회성 코드를 구현하는 한 가지 방법은 데이터베이스 테이블에서 키로 사용하는 난수로 생성하는 것이다.

2-2) Computing your app's hash string

Google Play 서비스는 해시 문자열을 사용하여 앱에 보낼 확인 메시지를 결정하는데, 해시 문자열은 앱의 패키지 이름과 앱의 공개 키 인증서로 구성됩니다. 해시 문자열을 생성하려면 다음과 같은 방식으로 진행한다.

앱의 공개 키 인증서를 소문자 문자열로 사용한다. keystore에서 16진수 문자열을 가져 오려면 다음 명령을 입력하면 된다.

$ keytool -alias MyAndroidKey -exportcert -keystore MyProduction.keystore | xxd -p | tr -d "[:space:]"

하나의 공백으로 구분하여 앱의 패키지 이름에 16 진수 문자열을 추가한다.

결합 된 문자열의 SHA-256 합계를 계산한다. SHA-256 합을 계산하기 전에 문자열에서 공백을 제거해야한다.

Base64- SHA-256 합계의 이진 값을 인코딩하는데, 먼저 출력 형식에서 SHA-256 합계를 디코딩 해야 할 수도 있다.

앱의 해시 문자열은 base64 인코딩 해시의 처음 11자.

다음 명령은 앱의 프로덕션 키 저장소에서 해시 문자열을 계산하게 한다.

(또는 SMS 검색기 샘플 응용 프로그램 의 AppSignatureHelper 클래스를 사용하여 응용 프로그램의 해시 문자열을 가져올 수 있는데, helper 클래스를 사용하는 경우 해시 문자열을 얻은 후 앱에서 해당 클래스를 제거해야한다. 확인 메시지에서 클라이언트에서 동적으로 계산 된 해시 문자열을 사용하지 않는다.

3) send SMS

서버가 기존에 구축한 SMS 서비스를 사용하여 지정한 전화번호로 위에서 생성한 확인메시지를 보낼 수 있다.

(그 이후는 클라이언트측에서 메시지가 수신되면 일회성 코드를 캐치할 것이다.)

4) Verify the one-time code when it's returned

전화 번호 확인 서버에서 클라이언트 응용 프로그램로부터 받은 일회성 코드를 수신하는데 아래와 같은 flow로 진행한다.

코드가 유효하고 만료되지 않았는지 확인한다.
코드에 링크 된 사용자가 전화 번호 확인을 완료했음을 기록한다.
코드의 데이터베이스 레코드를 제거하거나 다른 방법으로 같은 코드를 다시 사용할 수 없도록 해야한다.
사용자의 확인 상태를 기록하고 데이터베이스에서 코드를 제거하면 확인이 완료된다.

[Spring] How to get AWS S3 bucket list

sohyun_ — Mon, 14 Jan 2019 09:16:41 +0900

이전에 S3 버킷을 지정하고 그 안의 객체를 가져오는 내용에 대해서 작성했는데, 이번에는 S3 리스트를 가져오는 내용에 대해 작성하려한다.

AWSConfig.java는 이전에 작성했던 게시글에서 작성했던 코드를 그대로 이용한다. (이전에도 언급했듯이, 저는 하나의 파일을 만들어두고 필요한 경우 불러오는 형태로 작업하고 있습니다)

Reding S3 text file as a string - http://kkumalog.tistory.com/39

Uploading String to Amazon S3 - http://kkumalog.tistory.com/38

#AWSConfig.java

@Value(“${AWS_ACCESS_KEY_ID}”)
private String accessKey;


@Value(“${AWS_SECRET_KEY}”)
private String secretKey;


@Value(“${spring.aws.region}”)
private String region;


@Bean
public BasicAWSCredentials basicAWSCredentials() {
return new BasicAWSCredentials(accessKey, secretKey);
}


@Bean
public AWSCredentialsProvider awsCredentialsProvider(AWSCredentials awsCredentials) {

return new AWSCredentialsProvider() {
@Override
public AWSCredentials getCredentials() { return awsCredentials; }
@Override
 public void refresh() {} 
}; 
}


@Bean
public AmazonS3 amazonS3Client(AWSCredentialsProvider awsCredentialsProvider) {
return AmazonS3ClientBuilder
.standard()
.withCredentials(awsCredentialsProvider)
.withRegion(Regions./fromName/(region))
.build();
}

# Get AWS S3 bucket list

AmazonS3 s3Client = awsConfig.amazonS3Client(awsConfig.awsCredentialsProvider(awsConfig.basicAWSCredentials()));
List<Bucket> buckets = s3Client.listBuckets();
for (Bucket bucket : buckets) {
System.out.println(bucket.getName());
}

위의 코드를 실행하면 S3 버킷리스트를 출력할 수 있고, 사용에 따라 출력이 아닌 다른 작업으로 수정하면 된다.

[Spring] How to get list objects in AWS S3 bucket

sohyun_ — Sat, 12 Jan 2019 10:00:00 +0900

이 페이지는 S3 버킷을 지정하고 그 안의 객체를 가져오는 내용을 설명하고 있다.

AWSConfig.java는 이전에 작성했던 'Reading S3 text file as a string '에서 작성했던 코드를 그대로 이용한다. (저는 하나의 파일을 만들어두고 필요한 경우 불러오는 형태로 작업하고 있습니다)

# AWSConfig.java

S3 파일에 접근하기 위해서는 aws 설정이 필요합니다.

우선 보안상 / 코드의 효율성을 위해 다른 곳에 설정되어 있는 AWS ACCESS KEY, SECRET KEY, region 을 가져오는 코드를 포함하고 있습니다.

@Value(“${AWS_ACCESS_KEY_ID}”)
private String accessKey;


@Value(“${AWS_SECRET_KEY}”)
private String secretKey;


@Value(“${spring.aws.region}”)
private String region;


@Bean
public BasicAWSCredentials basicAWSCredentials() {
return new BasicAWSCredentials(accessKey, secretKey);
}


@Bean
public AWSCredentialsProvider awsCredentialsProvider(AWSCredentials awsCredentials) {

return new AWSCredentialsProvider() {
@Override
public AWSCredentials getCredentials() { return awsCredentials; }
@Override
 public void refresh() {} 
}; 
}


@Bean
public AmazonS3 amazonS3Client(AWSCredentialsProvider awsCredentialsProvider) {
return AmazonS3ClientBuilder
.standard()
.withCredentials(awsCredentialsProvider)
.withRegion(Regions./fromName/(region))
.build();
}

# Get list object in AWS S3 bucket

AmazonS3 s3Client = awsConfig.amazonS3Client(awsConfig.awsCredentialsProvider(awsConfig.basicAWSCredentials()));
ObjectListing objectListing = s3Client.listObjects(BucketName, prefix); //prefix가 필요하지 않은 경우 다음과 같이 사용할 수도 있다. => ObjectListing objectListing = s3Client.listObjects(BucketName); 
for(S3ObjectSummary s : objectListing.getObjectSummaries()) {
System.out.println(s.getKey());
}

위의 코드를 실행하면 s3 버킷에 들어있는 파일리스트를 출력할 수 있고, 사용에 따라 출력이 아닌 다른 작업으로 수정하면 된다.

[Python] 날짜로 요일구하기

sohyun_ — Thu, 10 Jan 2019 08:57:25 +0900

시간, 날짜와 관련된 내용들을 이전에 포스팅 했었는데, 그 중 요일 반환에 관련된 부분만 따로 자세하게 정리하려합니다.

시간모듈 - http://kkumalog.tistory.com/15

date - http://kkumalog.tistory.com/16

time - http://kkumalog.tistory.com/17

datetime - http://kkumalog.tistory.com/18

# 시간모듈(time)

>>> t = ['월', '화', '수', '목', '금', '토', '일']
>>> import time
>>> n = time.localtime().tm_wday
>>> print(t[n])
수

# 날짜시간모듈(datetime)

>>> t = ['월', '화', '수', '목', '금', '토', '일']
>>> import datetime
>>> r = datetime.datetime.today().weekday()
>>> print(t[r])
수

# 내장함수 사용

>>>dt = datetime.datetime.now()
>>>dt
datetime.datetime(2019, 1, 9, 23, 23, 58, 180470)

now(): 현재 시각을 datetime.datetime 클래스 객체로 반환

weekday(): 요일 반환 (0:월, 1:화, 2:수, 3:목, 4:금, 5:토, 6:일)

이 중 특히 많이 사용되는 날짜와 시간 정보를 문자열로 바꿔주는 strftime() 메서드, 이 메서드는 어떤 형식으로 문자열을 만들지 결정하는 형식 문자열을 인수로 받는다.

strftime(): 문자열 반환

ex) 토요일 / 일요일 체크

>>>dt.strftime(‘%A’) == ‘Saturday’ or dt.strftime(‘%A’) == ‘Sunday’

참고) 날짜 및 시간 지정 문자열 - http://kkumalog.tistory.com/15

%Y 4자리 연도 숫자

%m 2자리 월 숫자

%d 2자리 일 숫자

%H 24시간 형식 2자리 시간 숫자

%M 2자리 분 숫자

%S 2자리 초 숫자

%A 영어로 된 요일 문자열

%B 영어로 된 월 문자열

https://docs.python.org/2/library/datetime.html#strftime-and-strptime-behavior

예를 들어 dt의 시간 정보를 원하는 포맷의 문자열로 바꿀 수도 있다.

>>>dt.strftime(“%A %d. %B %Y”)
‘Wednesday 09.January 2019’
print(dt.strftime(“%H시 %M분 %S초”))
23시 23분 58초

[Node.js] Node.js 시작하기

sohyun_ — Mon, 7 Jan 2019 09:26:24 +0900

# NVM(Node Version Manager) 설치하기

$ curl https://raw.githubusercontent.com/creationix/nvm/v0.30.2/install.sh | bash

그 다음, 쉘을 재시작하거나, 아래의 명령어를 실행한다.

$ source ~/.bash_profile

제대로 설치되었는지 버전 정보를 확인해본다.

$ nvm --version

# Node.js 설치하기

가장 최신의 stable 버전을 설치하려면 아래의 명령어를,

$ nvm install stable

원하는 특정 버전 있다면 아래의 명령어를 실행한다.

$ nvm install v0.0.0 //특정버전입력

설치할 수 있는 버전 목록을 보려면 아래의 명령어를 실행한다.

$ nvm ls-remote

여러 버전의 노드를 설치하셨다면, 아래의 명령어로 원하는 버전을 선택하여 전환할 수 있습니다.

$ nvm use v0.0.0 //특정버전입력

[Java] Collections.sort()를 이용한 List 정렬

sohyun_ — Sun, 30 Dec 2018 11:47:15 +0900

# Collections.sort(), Collections.reverse()

다양한 데이터들을 처리하는 경우에 정렬은 필수적으로 사용되는데, 다양한 정렬 방식 중 "컬렉션(Collections)"을 사용하는 방법을 알아보도록 하겠습니다.

import java.util.ArrayList;
import java.util.Collections;
ArrayList<Integer> list = new ArrayList<Integer>();
list.add(1);
list.add(5);
list.add(3);
list.add(2);
list.add(9);


System.out.println("정렬하기 전");
System.out.println(list);


Collections.sort(list);
System.out.println("\n오름차순 정렬");
System.out.println(list);


Collections.reverse(list);
System.out.println("\n내림차순 정렬");
System.out.println(list);

→ output

정렬하기 전
[1, 5, 3, 2, 9]


오름차순 정렬
[1, 2, 3, 5, 9]


내림차순 정렬
[9, 5, 3, 2, 1]

[Spring] Reading S3 text file as a string

sohyun_ — Wed, 19 Dec 2018 09:34:14 +0900

지난 포스팅에서는 string을 S3에 저장하는 방법을 작성하였고, 이번 포스팅에서는 저장된 S3 텍스트파일을 가져오는 방법에 대해 작성해보도록 하겠습니다.

참고_ http://kkumalog.tistory.com/38

#AWSConfig.java

S3 파일에 접근하기 위해서는 aws 설정이 필요합니다.

우선 보안상 / 코드의 효율성을 위해 다른 곳에 설정되어 있는 AWS ACCESS KEY, SECRET KEY, region 을 가져오는 코드를 포함하고 있습니다.

@Value(“${AWS_ACCESS_KEY_ID}”)
private String accessKey;


@Value(“${AWS_SECRET_KEY}”)
private String secretKey;


@Value(“${spring.aws.region}”)
private String region;


@Bean
public BasicAWSCredentials basicAWSCredentials() {
return new BasicAWSCredentials(accessKey, secretKey);
}


@Bean
public AWSCredentialsProvider awsCredentialsProvider(AWSCredentials awsCredentials) {

return new AWSCredentialsProvider() {
@Override
public AWSCredentials getCredentials() { return awsCredentials; }
@Override
 public void refresh() {} 
}; 
}


@Bean
public AmazonS3 amazonS3Client(AWSCredentialsProvider awsCredentialsProvider) {
return AmazonS3ClientBuilder
.standard()
.withCredentials(awsCredentialsProvider)
.withRegion(Regions./fromName/(region))
.build();
}

#Reading S3 text file

위에서 설정된 aws 정보를 호출하고, 이를 이용하여 bucket에 접근해 데이터를 가져오는 코드입니다.

AmazonS3 s3Client = awsConfig.amazonS3Client(awsConfig.awsCredentialsProvider(awsConfig.basicAWSCredentials()));
S3Object s3object = s3Client.getObject(new GetObjectRequest(buckets, key));
BufferedReader reader = new BufferedReader(new InputStreamReader((s3object.getObjectContent())));


String line = null;
try {
line = reader.readLine();
} catch (IOException e) {
e.printStackTrace();
}

[Spring] Uploading String to Amazon S3

sohyun_ — Wed, 12 Dec 2018 10:10:40 +0900

# JAVA String to ByteArrayOutputStream

DataOutputStream 파라미터에 String ByteArray 값을 넣어주고, byteArrayOutputStream이 가지고 있는 ByteArray값을 리턴한다

public byte[] getByteArray(String data) {

ByteArrayOutputStream byteArrayOutputStream = new ByteArrayOutputStream();
DataOutputStream out = new DataOutputStream(byteArrayOutputStream);
try {
out.write(data.getBytes());
byteArrayOutputStream.flush();
byteArrayOutputStream.close();
} catch (IOException e) {
e.printStackTrace();
}
return byteArrayOutputStream.toByteArray();
}

참고
https://gist.github.com/kykkyn2/052382599134adf504abfa096282b816

# uploading file to Amazon S3 (S3에 파일 업로드, S3Helper)

입력받은 byteArray값을 ByteArrayInputStream으로 변환한 뒤 저장한다

import com.amazonaws.services.s3.AmazonS3;
public PutObjectResult putObject(
byte[] bytes,
Buckets buckets,
String key, 
String fileContentType,
CannedAccessControlList cannedAccessControlList
) {
ObjectMetadata objectMetadata = new ObjectMetadata();
objectMetadata.setContentType(fileContentType);
PutObjectRequest putObjectRequest = new PutObjectRequest(
buckets.getBucketName(),
key,
byteArrayToFileInputStream(bytes),
objectMetadata
);
putObjectRequest.withCannedAcl(cannedAccessControlList);
return amazonS3.putObject(putObjectRequest);
}


private InputStream byteArrayToFileInputStream(byte[] bytes) {
return new ByteArrayInputStream(bytes);
}

# Uploading String to Amazon S3

저장할 String 문자열을 위의 코드들을 이용해 변환한 뒤 text file로 S3에 저장하게 된다

ByteArrayOutputStream byteArrayOutputStream = new ByteArrayOutputStream();
DataOutputStream out = new DataOutputStream(byteArrayOutputStream);


String word = "kkuma"
try {
out.write(word.getBytes());
byteArrayOutputStream.close();
} catch (IOException e) {
e.printStackTrace();
}
byte[] bytes = byteArrayOutputStream.toByteArray();
s3Helper.putObject(
bytes,
Buckets.TEST, // Bucket
test", // key
“txt/plain”, // fileContentType
CannedAccessControlList.PublicRead
);

[IT] REST API

sohyun_ — Sun, 9 Dec 2018 10:00:00 +0900

# REST(Representational State Transfer)

REST는 웹의 창시자 중의 한 사람인 로이 필딩(Roy Fielding)이 2000년에 발표한 박사학위 논문에 의해서 소개되었다. 현재의 아키텍처가 웹의 본래 설계의 우수성을 많이 사용하지 못하고 있다고 판단했기 때문에 웹의 장점을 최대한 활용할 수 있는 네트워크 기반의 아키텍처를 소개했는데, 그것이 바로 Representational Safe Transfer (REST)이다. 간단한 의미로는, 웹 상의 자료를 HTTP위에서 SOAP이나 쿠키를 통한 세션 트랙킹 같은 별도의 전송 계층 없이 전송하기 위한 아주 간단한 인터페이스를 말한다. REST 원리를 따르는 시스템은 종종 RESTful이란 용어로 지칭된다.

# REST API의 구성

REST API는 다음 3가지 구성으로 이루어져있다.

1) 자원(Resource) - URI

2) 행위(Verb) - HTTP Method

3) 표현(Representations), 메시지

# HTTP 메서드

HTTP에는 여러가지 메서드가 있지만, REST에서는 CRUD(Create Read Update Delete)에 해당하는 4가지의 메서드를 사용한다.

메서드	Idempotent	의미
POST	X	Create, 생성
GET	O	Select, 조회
PUT	O	Update, 수정
DELETE	O	Delete, 삭제

위의 테이블에서 Idempotent(멱등성)이란, 매번 결과가 달라지지 않는다는 뜻이다.

# REST API의 특성

1) 유니폼 인터페이스(Uniform Interface) : HTTP 표준에만 따른다면 어떠한 기술이든지 사용할 수 있는 인터페이스 스타일이다. 특정언어나 기술에 종속 받지 않고 사용할 수 있는 느슨한 결합 형태의 구조이다.

2) 무상태성(Stateless) : 클라이언트의 컨텍스트를 서버 쪽에 유지하지 않는다는 의미로, 세션 정보나 쿠키 정보를 별도로 저장하고 관리하지 않기 때문에 서버에서는 들어오는 요청만을 단순히 처리하면 된다.

3) 캐시가능(Cacheable) : HTTP 라는 기존 웹표준을 그대로 사용하기 때문에 웹에서 사용하는 기존 인프라를 그대로 활용이 가능해 HTTP가 가진 캐싱 기능이 적용 가능합니다.

4) 자체표현구조(Self-descriptiveness) : REST의 가장 큰 특징 중의 하나는 REST API 자체가 쉬워서 API메시지만 보고도 이를 이해 할 수 있는 자체 표현 구조로 되어있다는 것이다.

5) 클라이언트 서버 구조 (Client-Server) : 서버는 API를 제공하고 제공된 API를 이용해서 비즈니스 로직 처리 및 저장을 책임진다. 클라이언트는 사용자 인증이나 컨텍스트(세션, 로그인 정보를 직접 관리하고 책임지는 구조로 역할이 나누어지고 있다. 이렇게 각각의 역할이 확실하게 구분되면서 개발 관점에서 클라이언트와 서버에서 개발해야 할 내용이 명확해지고 서로의 개발에서 의존성이 줄어들게 된다.

6) 계층형 구조(Layered System) : 클라이언트로서는 REST API 서버만 호출하고, 서버는 다중 계층으로 구성될 수 있다. 다중 계층으로 구성된 서버는 보안, 로드 밸런싱, 암호화 계층을 추가해 구조상의 유연성을 둘 수 있고 PROXY, 게이트웨이같은 네트워크 기반의 중간매체를 사용할 수 있게 한다.

[Review] MINISO 블루투스 이어폰(MINISO-K6H)

sohyun_ — Thu, 29 Nov 2018 10:00:00 +0900

'MINISO-K6H Bluetooth Earphones' UNBOXING(언박싱)

가격은 위안화 단위로 199元, 한화 약 32000원. (1위안 ≒ 160원)

박스안에는 제품 설명서, 본품, 충전케이스, 이어팁(이어캡)이 들어있습니다.

제품설명서는 중국어, 영어로 되어있습니다 (그래서 언젠간 한국어로 번역해보려합니다^__^)

충전은 케이스에 이어폰을 쏙쏙 집어넣고, 위에 버튼을 눌러주시면 됩니다.

그럼 케이스는 어떻게 충전할까?

케이스의 뒤쪽에 있는걸 열면 나오는 usb타입의 충전단자로 충전합니다.

이어폰 본품에는 이렇게 L / R 이 명확하게 적혀있고, 옆모습은 뚠뚠하고 짧아서 귀여운 모습입니다.

Product Manual (제품설명서)

# Specification

Model: K6H

Bluetooth version: v4.2

Battery type: rechargeable polymer lithium battery

Rated voltage: 3.7V

Input: DC5V-500mA(pedestal)

Support agreement: A2DP/HFP/HSP/AVRCP

This product can receive voice frequency from phone, lap top and other Bluetooth devices.

Once paired with PC Bluetooth DONGLE, it can play various voice documents.

# Function Introduction

Multi-function button("MFB" in short)

Start-up: press the MFB button for 5 seconds, the blue light flashes for 3 times, and the earphones start up.

Shutdown: press the MFB button of the earphones for 5 seconds while the product is not connected with other devices and under starting up status. When the earphones are connected to the peer device after starting up, press the MFB button of any device for 5 seconds, and the two headphones are off. Put it back on the charging seat to charge, it will turn off.

Pairing mode: when it is not connected, double-click the MFB button to enter matching mode.

The searching time is 2 minutes. Red and blue lights flicker alternately.

Search peer device: in the shutdown state, press the MFB button for 7 seconds to enter the peer device searching state.

The searching time is 2 minutes. Red and blue lights flicker alternately.

Connect peer device: the peer devices is in searching mode(red and blue lights flicker alternately), automatically connect.

First pairing of single earphone: in the shutdown state, press the MFB button for about 7 seconds, the red and blue lights flicker alternately. Turn on the Bluetooth function of the phone and search the device. When the phone find the "MINISO-K6H", click it to connect. After connection, the light flashes off.

Double earphones pairing for the first time: when used for the first time, press the MFB for both earphones about 7 seconds at the same time in the shutdown state, until the red and blue lights flicker, the right and left earphone will pair automatically. About 10 seconds later, one earphone lights fade out while another keeps flashing(the main earphone), open the phone's Bluetooth immediately, find "MINISO-K6H", and connect, after connection, lights flash out.

Voice dialing: in standby mode, press the host MFB key for 1 seconds and release.

Final redial: in standby or listening mode, double-click the host MFB button to dial the last dialing-number.

Hang up: while answering or calling, press the host MFB button shortly to end the call.

Reject: long press the MFB key and release to refuse the call.

Answer: press the host MFB button briefly to answer the call.

Play/pause: in standby of listening mode, 1. If connected with a peer device, press the host MFB button. 2. If connected with a peer device, press the MFB key on any headset.

Three-way call: 1. Click the host MFB button to answer or hang up the call. 2. When the second call comes during a dialog, double-click the host MFB button to answer the second call and keep the first call.

IOS power display: Bluetooth headphone power can be displayed on iPhone.

Reset: in charging state, double-click MFB key to clear all paired information.

Reconnect: within the connection range, automatically connect the paired Bluetooth device after starting up.

In standby mode, press the main device briefly reconnect. If it is beyond the available range during call, answer, standby or listening, return to the accessible range (within 3 minutes), it will reconnect automatically.

Low power alarm: when the battery voltage is lower than 3.3V, low power voice prompt, red light flash.

Automatic shutdown: 1. No connection after starting up, and the earphones will off after 3 minutes.

2. When the battery voltage is lower than 3.0V, the Bluetooth headset turns off.

Charging: red light on and earphones off while charging.

Full Charge: about 1-2 hours. when charged, the blue light will be on for 15 minutes before it goes off.

# Caution

1. Store and use this product in room temperature.

2. Avoid exposing to rain and moisture environment.

3. Throw or drop will damage the product.

4. Do not self-disassemble or modify it.

5. Please dispose the battery according to the local rules, recycle it if possible. It cannot be disposed as household waste, it can cause environmental pollution.

Review

중국 칭다오 여행 중에 미니소에서 구매한 이 낯선아이.

다른 블루투스 이어폰을 사용해보지 않아서 비교할 수는 없지만, 이 제품의 첫 리뷰인만큼 객관적으로 리뷰하겠습니다!

우선 줄이 없는 코드프리 이어폰 처음 써봤는데 굉장히 편하다.

가격도 에어팟에 비해 훨씬 저렴하고, 샤오미의 에어닷보다도 저렴하다.

그러나!

싸게 파는데는 이유가 있는듯하다.

막귀인 나에게도 '미니소 블루투스 이어폰'의 음질은 나쁘다.

음량을 크게 키우면 안들리는데, 음량을 작게 했을 경우 거슬리는 기계음이 노래와 함께 들린다.

또 다른 단점은, 마이크가 있는지 잘 모르겠다는 것이다.

휴대폰 녹음기로 테스트하는데, 휴대폰과 조금 떨어진상태에서도 녹음이 되지 않았다.

전화도 해보려했는데,

녹음과 마찬가지로 휴대폰과 조금 떨어진 상태에서는 상대방이 안들린다고 짜증을 냈고,

휴대폰 근처에서는 스피커폰으로 통화하는듯하다고 하여 종료했다.... (후에 다시 테스트해볼 예정이다)

국내에서는 보지 못한 것 같아 선물용까지 구매했으나, 선물하고도 욕먹을까봐 조금 더 테스트 해보려한다.

cf. 막귀: 이어폰, 헤드셋 등의 음향기기로 노래를 감상할 때 음질이 좋고 나쁨을 잘 구별하지 못하는 귀

[MAC] DockBar Delay

sohyun_ — Tue, 20 Nov 2018 09:12:17 +0900

# 딜레이 제거

defaults write com.apple.dock autohide -bool true && defaults write com.apple.dock autohide-delay -float 0 && defaults write com.apple.dock autohide-time-modifier -float 0 && killall Dock

# 딜레이 조정

defaults write com.apple.dock autohide -bool true && defaults write com.apple.dock autohide-delay -float 0.3 && defaults write com.apple.dock autohide-time-modifier -float 0.3 && killall Dock

# 딜레이 원상복구

defaults delete com.apple.dock autohide && defaults delete com.apple.dock autohide-delay && defaults delete com.apple.dock autohide-time-modifier && killall Dock

[Python] 공휴일체크

sohyun_ — Wed, 14 Nov 2018 09:52:23 +0900

pip install tox

pip install workalendar==2.4.0

class SouthKorea(WesternCalendar, ChineseNewYearCalendar):
FIXED_HOLIDAYS = WesternCalendar.FIXED_HOLIDAYS + (
(3, 1, "Independence Day"),
(5, 5, "Children's Day"),
(6, 6, "Memorial Day"),
(8, 15, "Liberation Day"),
(10, 3, "National Foundation Day"),
(10, 9, "Hangul Day"),
(12, 25, "Christmas Day")
)
chinese_new_year_label = "Korean New Year's Day"
include_chinese_new_year_eve = True
chinese_new_year_eve_label = "Korean New Year's Day"
include_chinese_second_day = True
chinese_second_day_label = "Korean New Year's Day"


def get_variable_days(self, year):
days = super(SouthKorea, self).get_variable_days(year)
days.extend([
(ChineseNewYearCalendar.lunar(year, 4, 8), "Buddha's Birthday"),
(ChineseNewYearCalendar.lunar(year, 8, 14), "Midautumn Festival"),
(ChineseNewYearCalendar.lunar(year, 8, 15), "Midautumn Festival"),
(ChineseNewYearCalendar.lunar(year, 8, 16), "Midautumn Festival")
])
 return days

사용하는 방법을 예를 들면, 공휴일인지 아닌지 체크를 할 때 core.py에 있는 아래의 함수를 이용한다.

def is_holiday(self, day, extra_holidays=None):
"""Return True if it's an holiday.
 n addition to the regular holidays, you can add exceptions.
By providing ``extra_holidays``, you'll state that these dates **are**
holidays, even if not in the regular calendar holidays (or weekends)."""
# a little exception: chop the datetime type
if type(day) is datetime:
day = day.date()
if extra_holidays and day in extra_holidays:
return True


return day in self.holidays_set(day.year)

실제 사용할 때

calendar = SouthKorea()
calendar.is_holiday(확인하고싶은날짜)

참고

https://github.com/peopledoc/workalendar

[MAC] 마우스 속도조절

sohyun_ — Mon, 12 Nov 2018 16:35:00 +0900

환경설정 - 마우스 - 이동속도 에서 지정할 수 있는 최대 속도는 3

그 이상을 사용하기 위해서는 터미널에서 설정한다.

$ defaults write -g com.apple.mouse.scaling {원하는 속도}
// defaults write -g com.apple.mouse.scaling 5

변경된 속도 확인하는 방법은 아래와 같다.

$ defaults read -g com.apple.mouse.scaling

적용하기 위해서는 반드시 재부팅 또는 로그아웃을 해야한다.

[Git] git 명령어(2)

sohyun_ — Wed, 7 Nov 2018 14:59:02 +0900

stash / pop 기능은 여럿이 업무를 할 때 유용하며, 최근 자주 사용하게 되어 따로 정리한다.

# stash 란?

사전적 정의: (안전한 곳에) 넣어두다

# stash하기

$ git stash

어떤 작업 중에 급한 일이 생겨 다른 브랜치로 변경해야한다. 그런데 현재 하던 작업이 진행중이어서 커밋을 하기에는 애매하다.

커밋하지 않고, 나중에 다시 돌아와서 작업을 이어서 하고 싶을 때는 git stash 명령을 사용해서 해결

워킹 디렉토리에 Unstaged - git add 는 수행됨 파일들을 백업하고 워킹디렉토리를 HEAD - 이전 커밋 상태로 만드는 명령이다.

stash 명령 적용대상

Modified + Tracked 상태인 파일 (한번이라도 add를 한 적이 있는 파일)

Staging Area에 있는 파일

# save

$ git stash save

현재 작업을 저장해두고 branch를 head로 돌린다

# list

$ git stash list

저장되어있는 stash보기

#pop

$ git stash pop

stash들은 stack에 저장되기때문에, 가장 최근에 저장된 stash가 현재 branch에 적용된다.

이 명령은 Stash를 적용하고 나서 바로 스택에서 제거해준다.

# apply

$ git stash apply

git stash pop 과 비슷한 명령어지만 stash list에서 삭제하지 않는다는 점이 다르다.

git stash apply 명령을 실행하여 Stash 내용을 다시 적용할 수 있다.

git stash apply stash@{2} 처럼 원하는 Stash 를 골라서 적용하는 것도 가능하다. (이름이 없으면 가장 최근 Stash 적용)

git stash apply --index 옵션을 통해서 Staged 상태까지 적용할 수 있다.

# stash 적용한 브랜치 만들기

$ git stash branch

git stash branch 명령을 실행하면 Stash 할 당시의 커밋을 Checkout 한 후 새로운 브랜치를 만들고 여기에 적용한다. 이 모든 것이 성공하면 Stash를 삭제한다.

# 필요없는 stash 삭제

$ git stash drop

#전체 stash list 삭제

$ git stash clear

# git clean

$ git clean

워킹 디렉토리 안의 추적하고 있지 않은 모든 파일을 지운다.

git clean -n 옵션을 통해서 가상으로 실행해보고 어떤 파일들이 지워질지 알 수 있다.

git clean 명령은 추적 중이지 않은 파일만 지우는 게 기본 동작이다. .gitignore`에 명시했거나 해서 무시되는 파일은 지우지 않는다.

[Git] git 명령어(1)

sohyun_ — Tue, 6 Nov 2018 17:10:55 +0900

# git 저장소 만들기

$ git init

# 기존 저장소 가져오기 (Clone)

$ git clone http://github.com/test/test.git

# 파일 상태

$ git status

# 브랜치(Branch)

$ git branch { 브랜치명}  // 브랜치 생성
$ git branch -r // 원격 브랜치 목록
$ git branch -a // 로컬 브랜치 목록

# Commit

커밋은 의미있는 한 단계의 작업을 나타내며, 매 커밋당 로그가 남아 나중에 되돌아갈 수 있게 한다

$ git commit -m "로그메세지"

매번 커밋을 해줄 때마다 add를 통해 staging area에 넣어야 한다.

tracked 상태인 파일이 자동으로 추가되기를 원한다면 \-a를 추가하자

$ git commit -a -m “로그메시지”

$ git commit -am “로그메시지”

# Pull

$ git pull

git서버에서 최신 코드 받아와 merge 하기

# Push

add하고 commit한 코드 git server에 보내기 (git push origin master)

$ git push

# 파일 삭제하기

$ git rm {파일명}
$ git rm index.html

git rm 명령어는 파일 삭제와 git rm을 순차적으로 진행한다.

만약 파일 삭제를 하고싶지 않다면 –cached 옵션을 붙인다

$ git rm {파일명} –cached

$ git rm index.html –cached

rm 이후에는 커밋

# 파일명 변경하기

$ git mv {대상파일} {바꿀이름}
// $ git mv index.html main.html  -- index.html 을 main.html로 변경

# 커밋 히스토리, 로그

$ git log

커밋로그가 많으면 많을 수록 보기 힘드니 아래 명령어를 사용하자

git log –oneline(한줄로) –decorate(이쁘게) –all(모든브랜치를) –graph(그래프형태로) 보여주세요

git log –oneline –decorate –all –graph

# git 별명(Alias)

$ git alias

$ git config --global alias.co checkout

$ git config --global alias.br branch

$ git config --global alias.ci commit

$ git config --global alias.st status

[Spring] AOP(Aspect Oriented Programming)

sohyun_ — Sun, 28 Oct 2018 22:42:38 +0900

# AOP(Aspect Oriented Programming)

AOP는 문제를 바라보는 관점을 기준으로 프로래밍하는 기법을 의미한다.

문제를 해결하기 위한 핵심 관심 사항과 전체에 적용되는 공통 관심 사항을 기준으로 프로그래밍함으로써 공통모듈을 여러 코드에 쉽게 적용할 수 있도록 한다

- 공통 관심 사항 : 공통 기능으로 어플리케이션 전반에 걸쳐 필요한 기능

- 핵심 관심 사항 : 핵심 로직, 핵심 비즈니스 로직

# 용어

- Joinpoint : Advice를 적용 가능한 지점을 의미한다. 메서드 호출, 필드 값 변경 등이 이에 해당한다.

- Advice : Joinpoint의 부분 집합으로서 실제로 Advice가 적용되는 조인포인트를 나타낸다.

- Pointcut : 언제 공통 관심 기능을 핵심 로직에 적용할 지를 정의하고 있다.

- Weaving : Advice를 핵심 로직 코드에 적용하는 것을 말한다.

- Aspect : 여러 객체에 공통으로 적용하는 기능을 말한다.

# Advice의 종류

Before Advice : 대상 객체의 메서드 호출 전에 공통 기능을 실행한다.

After Returning Advice : 대상 객체의 메서드가 익셉션 없이 실행된 이후에 공통 기능을 실행한다.

After Throwing Advice : 대상 객체의 메서드를 실행하는 도중 익셉션이 발생한 경우에 공통 기능을 실행한다.

After Advice : 대상 객체의 메서드를 실행하는 도중에 익셉션이 발생했는지의 여부에 상관없이 메서드 실행 후 공통 기능을 실행한다.

Around Advice : 대상 객체의 메서드 실행 전, 후 또는 익셉션 발생 시점에 공통 기능을 실행하는데 사용된다.

[Spring] 응답보안헤더

sohyun_ — Thu, 25 Oct 2018 11:05:04 +0900

# HTTP 응답 보안 헤더

응답헤더에 특정 내용을 기입함으로써 웹브라우저에 지시를 내리게 된다.

Cache Control : 악의적인 사용자가 브라우저 히스토리를 악용할 수 있기 때문에 브라우저가 웹페이지 컨텐츠를 캐싱하지 않도록 설정
Content Type Option : 컨텐츠 스니핑을 하지 못하도록 설정
HTTP Strict Transport Security (HSTS) : 어떤 사이트가 웹브라우저의 HSTS 호스트 목록에 저장되면, 다음에 해당하는 사이트에 접속 할 때에는 자동으로 https:// 를 붙여 보안상으로 안전하게 접속할 수 있다
Frame Options : 웹사이트에 프레임을 허용하는 것은 클릭재킹과 같은 공격에 취약한데, Frame Option을 DENY로 설정하면 프레임 내부에서 페이지가 렌더링되는 것을 막는다
XSS Protection : 웹 브라우저의 내장 XSS filter를 사용하도록 하는 옵션
Content Security Policy : XSS와 같은 공격의 피해를 최소화하기 위해, 스크립트를 허용할 URL을 헤더에 설정하는 옵션

cf. 클릭재킹(Clickjacking): 감춰진 링크를 사용자가 클릭함으로써 의도되지 않은 행동을 수행하게 하는 악의적인 기법으로, 공격자는 비밀정보나 컴퓨터에 대한 제어를 얻을 수 있다.

cf. P3P(Platform for Privacy Preferences): 프라이버시 보호 관련 표준 기술, P3P를 적용한 사이트에서는 HTTP 헤더 또는 링크된 XML 파일을 통해 해당 사이트에서 취급하는 개인정보의 레벨이나 성격을 웹브라우저에게 알려준다. (압축된 정책 중 PHY는 physical의 약자로, 연락처 또는 위치정보를 의미한다)