윈도우의 경우에는 telnet-client 를 켜주면 되고, 맥에서도 brew 로 설치하면 되지만 더 좋은 내장 툴이 있다.

네트워크 유틸리티​

네트워크 유틸리티 > 포트 스캔 을 사용하자.

IP 를 입력하고 테스트할 포트 범위를 입력 후 스캔 버튼을 누르면 된다.

Ping, DNS, Netstat, Traceroute (MTR), Whois 등의 기능이 있어서 유용하게 사용할 것 같다.

프로토타입 오염​

이 공격은 JSON.parse 와 Object.deepCopy 를 사용하는 모든 로직에서 발생할 수 있다.

2019-04-17 에 발표된 이 취약점은 $.extends 구문 상에서 프로토타입 XSS 공격이 가능하다.

예시​

const myObject = '{"myProperty" : "a", "__proto__" : { "isAdmin" : true } }';
const newObject = $.extend(true, {}, JSON.parse(myObject));
console.log(newObject.isAdmin); // true

const temp = {};
console.log(temp.isAdmin); // true

패치​

취약점 패치는 아래 부분을 변경해준다.

jQuery.extend = jQuery.fn.extend = function () {
  // 사이 로직 생략
  for (; i < length; i++) {
    if ((options = arguments[i]) != null) {
      for (name in options) {
        src = target[name];
        copy = options[name];

        // [AS-IS]
        // if (target === copy) {
        // [TO-BE]
        if (name === "__proto__" || target === copy) {
          continue;
        }

        if (
          deep &&
          copy &&
          (jQuery.isPlainObject(copy) || (copyIsArray = jQuery.isArray(copy)))
        ) {
          if (copyIsArray) {
            copyIsArray = false;
            clone = src && jQuery.isArray(src) ? src : [];
          } else {
            clone = src && jQuery.isPlainObject(src) ? src : {};
          }

          target[name] = jQuery.extend(deep, clone, copy);
        } else if (copy !== undefined) {
          target[name] = copy;
        }
      }
    }
  }

  return target;
};

NARS Cosmetics​

François Nars가 런칭한 프랑스발 유명 색조 브랜드 나스는 남자라도 갖고 싶게하는 매력있는 디자인을 가진 제품들이 많다. 한국에 들어오면 1.5배정도 가격이 뛰던지, 한정판은 들어오자마자 못 구한다. 이번 2019 Orgasm Collection 도 마찬가질 것 같다.

특히 립스틱 4개를 모아야 하나의 NARS 문구로 완성 되는 건 상술이지만 아름답다.

이름의 유래​

나스 화장품 명칭은 대부분 섹슈얼한데 주된 명칭은 다음과 같다.

• 오르가즘 '99 에 런칭된 베스트셀러이다.
• 슈퍼오르가즘
• 섹스어필
• 섹스판타지
• 쓰리썸
• 게이어티
• 패티쉬즈드
• 딥쓰롯

왜 이런 이름을 지었는지에 대해 궁금해져서 여성도 성에 당당해지자 라는 카더라가 있는데, 카더라는 꺼무위키처럼 제껴두고 나스가 보그와 한 인터뷰를 확인해보자.

Q: I think it’s safe to say your products have some of the all-time best names—Orgasm, Jungle Red, Belle de Jour, Chinatown, Schiap. How do you name them?

네이밍은 상품에 개성을 부여하는 것과 같다고 생각했기에, 여성들이 뭔가 특별한 것을 입고 있는 것처럼 느끼게 하고 싶었습니다. 메이크업은 섹시 악세사리라고 생각하기 때문에 재밌있게, 섹시하게 만들길 원했습니다. 여성들은 섹시해보기 위해, 섹시함을 느끼기 위해 이걸 사용합니다.

A: You know, I always said we were either going to give them numbers, or interesting names. I didn’t want to go with boring names like Pink Peach. It had to be almost like giving each product its own personality, so that women could dream, could connect to the product, could feel like they were wearing something special. I wanted it to be fun. And sexy, too. Because makeup is a sexy accessory—women use it to look sexy and to feel sexy, for themselves and for the world. It gets difficult, because, you can imagine, we’ve been copied a lot. I have those little Hermès agendas, and 24 hours a day I keep writing names that come to my mind from books that I read, exhibits I go to, movies, places. I keep writing names. That’s how it works. I usually think about the name first, and then a color matches that name. Nothing is really planned.

구매하기​

공홈​

NARS 공식 홈페이지는 한국인이 한국카드를 쓰거나 배대지를 이용할 경우 구매 취소가 되어버린다. 이 것에 대해 카드, 페이팔, 배대지 변경까지 세 번의 도전을 모두 실패하고 결국 문의를 해서 이런 답변을 받았다.

Please be aware that at this time NARScosmetics.com can only bill and ship within the U.S. and both billing and shipping must be made to a U.S. residential address.

의역하면 응 안돼~ 가 되시겠다. 사은품도 많고, 정품 패키지도 엄청 예쁜데 구매하려면 미국 친구나 미국 공구를 알아봐야한다.

이 문제는 나에게 High Priority 이슈로 등록되어서 대안을 마련해야만 했다.

Sephora​

편집숍인 세포라엔 나스 신상이 바로바로 입고되고 있었다.

가입 후 배대지 주소를 넣어주고, 오르가즘 컬렉션을 추가한 뒤 사은품도 꼭꼭 챙기자.

블러셔	립

자주 이용할 듯 싶다.

여담​

• 도착하면 이 컬렉션을 한국의 어떤 뷰티 유튜버보다도 빨리 리뷰할 수 있을 것 같다.
• 시놀로지 나스도 구매도 해야하는데

앞서​

유튜브 광고가 많아졌다. 명색이 프로그래머인데 AdGuard를 정액제로 사용하고 싶지 않았다. 이 문서엔 없지만 피캡을 구현해보고 싶었다.

기기 구매​

라즈베리파이3 B+ 스타터킷을 구매한다. 아래 재료가 있을 경우 빼고 구매해도 된다.

• SD 카드 리더기
• 5핀 충전기
• 라즈베리파이용 방열판
• 라즈베리파이 케이스

환경설정​

포맷​

SD 카드를 비워주기위해 파워쉘이나 CMD를 관리자 모드로 접근한다.

PS > diskpart

DISKPART > list disk
DISKPART > select disk ${SD_CARD_DRIVE_NUMBER}

DISKPART > clean

라즈비안​

운영체제인 Raspbian Stretch Lite 버전을 다운로드한다. 데비안 기반이다.

etcher​

컴퓨터에 SD 카드용 이미지 굽는 프로그램을 설치한다.

다운로드된 라즈비안과 etcher로 이미지를 굽는다. 직관적이라 1, 2, 3 선택하듯이 설치하면 된다. 도중에 깨질 경우 다시 포맷한다.

ssh 접근​

이미지 설치 후 다시 USB 를 인식시키면 Boot drive 가 보이는데 접근 후 루트에 ssh 란 이름의 터치파일을 만들어준다.

touch ssh

이 파일이 있어야 ssh 접근이 가능하다. 공유기에 꼽고 내부아이피 확인하자.

## ssh 접근
$ ssh pi@YOUR_RASPBERRY_INTERAL_IP

## 초기 비밀번호는 raspberry 이다.

패키지 설치​

부팅 후 apt-get 을 사용할 시간이다.

sudo apt-get upgrade -y && sudo apt-get update

vim​

vim 도 없다.

sudo apt-get install vim

oh-my-zsh​

sudo apt-get install zsh
chsh -s $(which zsh)
sh -c "$(curl -fsSL https://raw.githubusercontent.com/robbyrussell/oh-my-zsh/master/tools/install.sh)"

agnoster theme, zsh-syntax-highlighting, zsh-autosuggestion 세팅해주자.

pi-hole​

이제 파이홀을 설치할 수 있다.

라즈베리파이를 유선연결했으니 eth0 인터페이스만 잘 체크해주면, 나머진 기본옵션으로 다음 다음만 해주면 된다.

$ sudo curl -sSL https://install.pi-hole.net | bash

## 비밀번호 변경
$ sudo pihole -a -p

dns-encrypt​

이왕 DSN 가로채는 거 암호화도 해주자. 매뉴얼 내용을 정리했다.

$ cd /opt

## 설치
$ sudo wget https://github.com/jedisct1/dnscrypt-proxy/releases/download/2.0.22/dnscrypt-proxy-linux_arm-2.0.22.tar.gz

## 폴더 생성
$ sudo tar -xf dnscrypt-proxy-linux_arm-2.0.22.tar.gz
$ sudo mv linux-arm dnscrypt-proxy && cd dnscrypt-proxy

## 기본 설정 복사
$ sudo cp example-dnscrypt-proxy.toml dnscrypt-proxy.toml

## 설정 변경
$ sudo vi dnscrypt-proxy.toml

## 이 세 옵션을 찾아서 변경해준다.
server_names = ['dnscrypt.nl-ns0']
## 기본 53번 포트는 pi-hole에서 쓰고 있다.
listen_address = ['127.0.0.1:54', '[::1]:54']
require_dnssec = true

## 서비스 등록
$ sudo ./dnscrypt-proxy -service install

## 시작
$ sudo ./dnscrypt-proxy -service start

dnscrypt.nl-ns0 Public DNSCrypt 서버이다. 다른 서버는 여기를 참조하자. 일본이나 싱가폴 쪽에 있으면 좋을텐데 아쉽다.

Upstream DNS 변경​

관리자 화면의 Settings > DNS > Upstream DNS Servers 탭에서 '127.0.0.1:54', '[::1]:54'를 넣어주고 저장한다.

Primary DNS Address 변경​

공유기 설정에 들어가서 라즈베리파이 내부 아이피를 기본 DNS 주소로 설정한다. IPTIME 의 경우 고급 설정 > 네트워크 관리 > 인터넷 설정 정보 에 있다.

BlockLists​

Settings > Blocklists 에서 추가하고 Save and Update 하면 차단할 주소가 추가된다. 아래는 참고할만한 링크다.

• 레딧
• Best blocking lists

확인​

Cloudflare Browsing Experience Security Check서 체크하자.

DNSSEC, TLS1.3에 초록불 들어오면 된다. 그리고 유튜브를 쾌적하게 즐기자.

여담​

• Query Log 메뉴에서 어느 도메인을 확인하려는지 알 수 있다.
• Instagram 광고 차단 필터를 찾아봐야겠다.
• 정작 내 블로그엔 애드센스 달려있는데..
• 세팅비 2만원 받아도 되지않을까? 😄

앞서​

보통 디렉토리 순회를 한다고하면 무슨 메소드를 쓸까?

<?php
// 쉘실행하고?
exec('find dir');

// 아니면 for문과 scandir?
scandir('dir');

위 방법은 간단하지만 /home/gracefullight/tmp/**/*.bak 와 같은 중첩된 디렉토리 파일의 데이터를 가져오려면 엄청난 if/else 처리가 들어갈 것이다.

RecursiveIterator​

RecursiveDirectoryIterator​

오토로딩을 하기 위해 필수로 들어가있는 Standard PHP Library엔 파일 순회에 사용할 수 있는 이터레이터 클래스가 들어가 있다.

<?php
// $path 하위를 가져오고 .. 와 . 는 제외한다.
$directory = new RecursiveDirectoryIterator($path, RecursiveDirectoryIterator::SKIP_DOTS);
$iterator = new RecursiveIteratorIterator($directory);

foreach ($iterator as $file) {
    $file->getPathname();
    $file->getMTime();
}
?>

$file은 SplFileInfo 이다.

RecursiveFilterIterator​

위의 foreach 문 안에서 조건을 줘서 필터링할 수 있지만 다른 깔끔한 방법이 있다.

<?php
class TextFilterIterator extends RecursiveFilterIterator
{
    public static $FILTERS = [
        'txt'
    ];

    public function accept() {
        // 순회하기위해 자식 트리가 있을 경우 true
        if ($this->hasChildren()) {
            return true;
        }

        $current = $this->current();
        if (!$current->isFile()) {
            return false;
        }

        // 확장자가 txt 인 파일만 필터링
        return in_array($current->getExtension(), self::$FILTERS);
    }
}

// 감싸주면 끝난다.
$iterator = new RecursiveIteratorIterator(
    new TextFilterIterator($directory),
    // 이 옵션은 하위 폴더만 순회하게 해준다.
    RecursiveIteratorIterator::LEAVES_ONLY,
    // 이 옵션은 Read 에 실패할 경우 오류를 스킵한다.
    RecursiveIteratorIterator::CATCH_GET_CHILD
);

RecursiveCallbackFilterIterator​

콜백으로 만들어 더 예쁘게 짤 수 있다.

<?php
$FILTERS = ['txt'];

$textFilterIterator = new RecursiveCallbackFilterIterator(
    $directory,
    function ($current, $key, $iterator) use ($FILTERS) {
        if ($iterator->hasChildren()) {
            return true;
        }

        if (!$current->isFile()) {
            return false;
        }

        return in_array($current->getExtension(), $FILTERS);
    }
);

$iterator = new RecursiveIteratorIterator($textFilterIterator);

여담​

쓸 수 있다면 symfony/finder 쓰자.

원인​

모하비 문제인지 최근 엣지 버전 Docker for Mac 이 문제인지 잘 모르겠지만, 부팅시에 Kubernates is starting 문구가 지속되며 CPU의 온도를 90도까지 올려버린다.

맥북이 트랜스포머가 되어 곧 제트기가 될 것처럼 굉음이 나는데 해결해보자.

해결​

• Docker > Prefereneces > Reset 에서 Reset to factory defaults 로 공장 초기화를 진행한다.
• ~/.kube 폴더를 강제로 삭제한다.
• 다시 쿠버네티스를 실행한다.

여담​

쿠버네티스 뿐 아니라 도커 자체가 맥에서 CPU 가 튀는 현상이 있는데, 여기 이슈에서 관리가 되고 있다.

file watch 기능을 끄거나, 볼륨을 해제하거나, 맥 디스크 암호화 기능을 꺼보라는데 신뢰할 수 있는 방법은 아니다.

도커 켜놓고 잠자기 해놓으면 과열로 맥북 켜지지도 않을 수 있어서 해결될 때까진 윈도우에서 돌려야할 듯 싶다.

document.querySelectorAll('.class') 와 같이 엘레먼트를 받았는데, for문을 돌리면 오류가 발생한다.

해결​

// 이 방법이나
let classes = Array.from(document.querySelectorAll(".class"));
// 이렇게 가능하다
classes = [...document.querySelectorAll(".class")];

// 구버전 브라우저를 지원해야한다면
classes = Array.prototype.slice.call(document.querySelectorAll(".class"));

여담​

puppeteer 로 크롤링할 때 항상 헷갈린다. 삽질로 찾았는데 stackoverflow 에 정리된 게 있는 듯..

PWA의 캐싱과 푸쉬 기능은 익히 알려져 있지만, 홈 설치에 대해선 제대로 되어있는 문서가 거의 없다. 기능은 기존 바로가기의 전체화면 버전이라 간단해보이지만 구현해보면 빙산의 일각인 걸 절실히 깨닫게 된다.

A2HS​

Add To Home Screen, 홈 설치, 웹 앱 설치

사전지식​

아래 사전지식이 없으면 이 문서가 읽기 힘들 수 있다.

• es6
• 서비스워커
• 캐싱 전략

조건​

홈 설치가 되려면 다음과 같은 조건이 필요하다. 크롬 측 설명인데 다른점이 많아서 하나씩 까보자.

• HTTPS
• 서비스워커 설치
• start_url 이 오프라인 사용가능
• 최소 192px 아이콘 지원
• manifest.json 에 name 과 short_name 값 등록

HTTPS​

HTTPS 를 통해 서비스가 제공되어야한다고 나오는데, 도메인 뿐아니라 페이지의 모든 리소스가 HTTPS 프로톨콜로 전송되어야한다.

서비스워커 설치​

PWA 를 시작하는데 필수 요소니 자세한 설명은 생략

start_url 오프라인 사용가능​

어느 캐싱전략을 사용해도 상관없으나 오프라인 모드로 연결이 되어야한다. 국내 서비스일 경우 크게 느리지 않으므로 Network First Strategy 로 캐싱하는 걸 추천한다. 국외 서비스일 경우 로드되는 리소스까지 캐싱전략을 세워야될 수 있다.

여기서 start_url 에 querystring 을 추가해 사용하는 경우가 대부분일텐데 캐싱되는 URL 은 querystring 이 없다는 걸 감안해야한다.

예를 들어보자.

{
  // 보통 fetch request 로 접근되는 경로는 다음과 같다.
  "start_url": "/",
  // 검색 파라미터가 달려있다면 이런 모양일 것이다.
  "start_url": "/?NaPm=",

  // 하지만 manifest.json 에 들어있는 경로는 다음과 같을 것이다.
  "start_url": "/?pwa=1&utm_source=pwa"
}

유저가 접근시 ['NaPm', 'pwa', 'utm_source'] 등의 파라미터를 제거해야 경로가 캐시처리되며 오프라인 접근이 될 것이다.

아이콘 지원​

크롬에선 최소 192px 의 아이콘을 지원하라고 나와있지만 스플래시 스크린에서 사용되는 아이콘은 512px 이 우선이다. 게다가 엣지 등의 다른 브라우저는 512px 도 있어야한다.

큰 사이즈의 이미지가 있을 경우 설치시에 네이티브 코드에서 이미지를 리사이징해서 아이콘을 만드므로 512px 하나만 있어도 되지만 홈 설치 시간이 느려지는 원인이 되므로 최소 192px, 512px 두 개는 지원해주자.

여력이 된다면 더 많은 사이즈의 이미지를 지원해줘도 된다. 이미지 업로드 하는 페이지의 리사이징 비용과 이미지별 트래픽 비용도 추가되겠지만 항상 유저의 속도가 중요한 것 아닌가?

이미지가 많을 경우 아래 쪽에 언급할 compatible 기능에서 문제가 생길 수 있다.

앱 이름​

name 속성은 스플래시 스크린에 사용되며, short_name 은 바로가기 앱 명에 사용된다. name 속성에 빈 값이 들어갈 경우 (빈 값엔 space 및 'ㄱ' 한자 1키도 포함된다.) short_name 으로 대체된다. 두 속성이 모두 빈 값일 경우 홈 설치가 비활성화 된다.

이 기능은 스펙에 명시되어 있어서 변경 불가능하다.

크롬에선 스플래시 스크린 하단에 앱 이름이 노출되며 기타 브라우저에선 중앙에 노출된다. 최근에 하단으로 변경된 것으로 보인다.

고려 대상​

필수 조건에는 없지만 고려해야할 대상들은 아래와 같다.

• background_color
• theme_color
• display
• related_applications

background_color​

이 속성은 스플래시 스크린의 배경색을 담당하는데, 배경색은 스플래시 스크린 상의 앱 이름 (name 속성)의 색상에 영향을 미친다.

앱 이름은 배경색이 거므스름한지의 여부에 따라 흰색 또는 검정색으로 노출된다. 이 공식은 contrast ratio 란 스펙으로 정의되어 있으며, 안드로이드 내부에 구현되어있는 소스는 다음과 같다.

private static final float CONTRAST_LIGHT_ITEM_THRESHOLD = 3f;

/**
 * Calculates the contrast between the given color and white, using the algorithm provided by
 * the WCAG v2 in http://www.w3.org/TR/WCAG20/#contrast-ratiodef.
 */
private static float getContrastForColor(int color) {
    float bgR = Color.red(color) / 255f;
    float bgG = Color.green(color) / 255f;
    float bgB = Color.blue(color) / 255f;
    bgR = (bgR < 0.03928f) ? bgR / 12.92f : (float) Math.pow((bgR + 0.055f) / 1.055f, 2.4f);
    bgG = (bgG < 0.03928f) ? bgG / 12.92f : (float) Math.pow((bgG + 0.055f) / 1.055f, 2.4f);
    bgB = (bgB < 0.03928f) ? bgB / 12.92f : (float) Math.pow((bgB + 0.055f) / 1.055f, 2.4f);
    float bgL = 0.2126f * bgR + 0.7152f * bgG + 0.0722f * bgB;
    return Math.abs((1.05f) / (bgL + 0.05f));
}

/**
 * Check whether lighter or darker foreground elements (i.e. text, drawables etc.)
 * should be used depending on the given background color.
 * @param backgroundColor The background color value which is being queried.
 * @return Whether light colored elements should be used.
 */
public static boolean shouldUseLightForegroundOnBackground(int backgroundColor) {
    return getContrastForColor(backgroundColor) >= CONTRAST_LIGHT_ITEM_THRESHOLD;
}

theme_color​

이 속성은 주소창의 색상 또는 standalone 모드 시의 상단 상태바의 색상으로 노출된다. 하지만 IOS Safari 에서는 ['black', 'black-translucent'] 두 가지 색상으로만 선택이 가능하다.

이 것도 위의 Contrast 알고리즘을 활용해 거므스름한 여부에 따라 설정하면 된다.

display​

크롬 문서엔 standalone, fullscreen, minimal-ui 모두 A2HS 의 기능을 활용할 수 있다고 설명되어 있으나, 실제로는 앞의 두 속성만 가능하다. 삼성브라우저는 minimal-ui 속성을 지원하지 않는다.

related_applications​

앱을 가지고 있을 경우 앱 다운로드를 유도할 수 있는데, manifest 에 아래 속성만 넣으면 된다. id 는 apk 업로드할 때 그 것과 같다.

{
  "prefer_related_applications": true,
  "related_applications": [
    {
      "platform": "play",
      "id": "com.google.samples.apps.iosched"
    }
  ]
}

Install Banner​

App Install Prompt 또는 각각 브라우저마다 불리는 용어가 다른 이 기능은 PWA 접속시 홈 화면에 추가하라는 유도 배너를 말한다. 이 기능은 브라우저별로 이벤트 및 노출 유무가 천차만별이다.

스펙​

크롬 빼고는 지원되는 브라우저에서 홈 설치시에 브라우저 아이콘이 모두 노출된다. 이러면 웹 푸쉬를 받을 시에 원래 브라우저에 뱃지가 생긴다고 보면 된다.

배너를 닫을 시에 재노출 기간이 비상식적으로 길다. 배너는 prompt() 메소드로 강제 노출이 불가능하며, 버튼을 클릭하는 액션이 있어야만 한다. 재노출일을 초기화할 시에는 브라우저의 데이터를 모두 삭제해야한다. (서비스워커 삭제로 불가능, 계정 또는 브라우저에 저장되는 값으로 추정됨)

UC 브라우저는 문서도 있고 설치가 되었던 것 같은데 최근 설치가 되지 않는다. Whale 는 크로미움 기반이라 설치가 되었던 것 같은데 최근 설치가 되지 않는다.

IOS Safari​

모바일계의 IE인 사파리는 Web App Manifest 기능을 아직 개발 중에 있다. 그리고 매우 불친절한 개발자 문서1 와 불친절한 개발자 문서2만 가지고 있다.

사파리 버그​

사파리에서만 나타나는 크리티컬한 버그가 몇 가지 있다.

OAuth 인증 불가​

정확히 말하면 타 도메인 또는 새 창을 사용하는 SSO 와 OAuth 인증이 불가능하다. 사파리 자체 버그로 IOS 12.2.0 버전에 수정되었다.

제스처 사용 불가​

뒤로가기 제스처 사용이 불가능하다. 이를 위해 하이브리드 웹앱처럼 하단 네비게이션 바를 만들어줄 수 있다. 이 버그도 IOS 12.2.0 버전에 수정되었다.

전용 속성​

홈 화면 아이콘과 스플래시 스크린, 테마 색상을 meta, link 태그로 만들어줘야한다. 이를 위해 manifest.json 의 값을 가져와 canvas 를 통해 프론트에서 이미지를 만들어야한다.

<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-title" content="AppTitle" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<meta name="apple-itunes-app" content="app-id=myAppStoreID" />
<link rel="apple-touch-icon" href="touch-icon-iphone.png" />
<link rel="apple-touch-startup-image" href="icon.png" />

Compatible​

Chrome, Safari, Edge 등 호환성을 맞추다보면 머리에 쥐가 날지도 모른다. 이럴 때 브라우저별 호환성을 맞춰주는 google 에서 제공되는 라이브러리가 있다.

pwa.compat 으로 다음과 같이 로드하면 된다.

<link rel="manifest" href="manifest.json" />
<script async src="path/to/pwacompat.min.js"></script>

다음과 같은 호환성이 해결된다.

• Safari 전용 속성
• Safari 홈 화면 아이콘과 스플래시 이미지
• Edge, IE 전용 속성
• meta 태그로 추가되지 않은 manifest.json 속성

단점​

manifest.json 과 icon 배열의 수만큼 request 수가 증가한다. static resource 이므로 HTTP Cache 로 해결 가능하다.

버그​

삼성브라우저에서 앱 이름에 " 큰따옴표가 들어간 경우 설치가 실패한다. Manifest JSON 을 파싱하면서 브라우저 내에서 오류가 발생한다.

통계​

홈 설치를 한 뒤에 유저가 얼마나 설치했을지 통계를 내는 것 또한 중요한데, beforeInstallPrompt 나 appInstalled 이벤트는 브라우저 호환성이 보장되지 않는다.

따라서 위 이벤트로 로깅하는 건 무의미하고, start_url 에 들어온 파라미터로 통계를 내면 된다.

테스트​

크롬 개발자도구의 application > Manifest > Add to homescreen 으로 이벤트를 발생시킬 수 있다고 하나 잘 되진 않는다.

홈 설치 조건을 만족시킬 경우, 크롬 설정 아이콘에서 "앱 명 추가" 라는 설정 메뉴가 하나 더 보이는데 이 기능으로 조건을 만족하는지와 브라우저 PWA 정도는 테스트 가능하다.

모바일 디버깅용으론 eruda를 사용하자.

여담​

IE7-8 호환성 맞추던 시절이 떠올랐다. 아직 픽스될 버그가 많으며, 안정될 때까지 최소 1년은 더 필요할 것으로 보인다. 추가되고 고쳐져야할 기능도 몇 가지 있다.

• 브라우저 호환성 (주소창 옆 아이콘으로 통일될 듯)
• 이벤트 호환성
• manifest href 에 blob 형태 지원 (현재 json decode 하면서 경로 오류 발생)
• manifest가 변경될 경우 업데이트알림 (이슈)

개인 홈페이지에 적용할 경우 Web App Manifest Generator 를 이용하는게 속 편하다.

Desktop PWA 나 TWA 는 다루지 않았다.

레퍼런스​

• W3C Spec
• Progressive Web Apps Book
• 브라우저별
  • Chrome, App Install Prompt
  • Safari, Safari App Banners
  • Samsung
  • Edge
  • Firefox
  • UC
  • Opera
• 웹문서
  • Progressive Web Apps on iOS are here
  • PWAs on iOS 12.2 beta
  • A2HS for PWAs Is Big
• github
  • github/pwa-bugs
  • github/awesome-meta-and-manifest
  • github/pwa-tips-tricks

개요​

여기 저기 흩어져있는 전세자금 대출 정보를 하나로 모으고 싶었다. 필요한 서류도 엄청나고, 준비할 것도 많은데 다들 자기 할말만하고 끝나는 느낌이였다. 집 구하는 걸 무서워하지 말고 한 단계씩 실행해보자. 중고나라인데 집을 사는 것 뿐이다.

사전 작업​

먼저 회사에 요청해 원천징수영수증과 재직증명서를 발급받는다. 둘 다 직인이 찍혀있는 서류여야한다.

원천징수영수증에 연봉이 3500만 이하면서 중소기업에 취업중이면 어마어마한 저리(低利)로 대출을 받을 수 있다. 이 조건에 들 경우, 중소기업취업청년 전월세보증금대출 대출을 받을 수 있는데 된다면 무조건 대출받아야한다. 조건이 안 되면 차선책으로 버팀목 전세자금 대출이 있다.

중소기업 여부는 여기서 확인할 수 있다. 법인 번호는 여기서 찾을 수 있다.

주소 확인​

어차피 문 밖의 전단지 매물은 허위매물이니 부동산에 들어가 다음과 같이 말한다.

전세집을 찾고 있고, 어느정도의 금액을 생각하고 있다. 대출 한도를 확인하려하니 주소를 하나 알려주시오.

그럼 공실클럽 이란 중개업자용 직방 웹에서 매물을 찾아서 보여주고 주소를 알려줄 것이다. 안 보여준다면 주소만 하나 알아오면 된다. 혹시 부동산과 연결되어있는 은행이 있는지 확인하고 나온다.

불친절하다면 다음에 온다고 말하고 바로 나오자 시간 아깝다. 어차피 원룸촌이라면 그 지역 매물 다 거기서 거기이다.

근린시설, 다중주택, 다세대주택이 아닌지를 꼭 확인한다. 대출이 안 나올 수 있다.

대출 한도 확인​

주거래 은행이 아니여도 상관없다. 월급 통장이 있는 은행일 경우 빠른 처리가 가능하고, 우리은행이 주택도시기금의 주 거래은행이라 빠른 서류처리가 된다. 부동산에서 추천한 은행이 제일 좋긴하다.

은행에 가서 대출상담창구로 간 뒤 전세자금 대출을 한도 확인하러 왔다고 말한 뒤 원천징수영수증과 재직증명서, 그리고 주소를 준다. 원천징수영수증 + 재직증명서 + 주소 <=> 한도 로 교환한다고 보면 된다.

나의 한도를 확인하고 다시 부동산에 방을 보러간다.

방 확인​

전세자금대출이 가능하며, 버팀목 대출일 경우 미리 전입신고가 가능한 방만 보여달라고 한다. 한도에 맞는 방을 보고, 중개업자와 함께 돌아다닌다. 사진보다 실물로 봐야 훨씬 방이 크니 꼭 그 집에 가보자.

내가 생각하는 집의 조건은 다음과 같다.

• 낑긴 층
• 창문 및 결로현상 확인
• 가벽 여부 확인
• 온수 확인
• 수압 및 물샘 확인
• 에어컨, 인덕션, 세탁기, 냉장고, 전자레인지 옵션 확인
• 가스, 수도, 전기가 개별요금인지 확인
• 집 냄새 확인
• 장판 및 벽지 들추고 곰팡이 확인
• 엘리베이터 확인

최소 5군데 이상은 돌아보자. 2년 살 집이다.

계약서 작성​

집을 선택하고 건물주의 등기부등본을 확인한다. 이건 건물주가 빚이 얼마나 있는지, 실제 판매하면 얼마정도로 가격을 받을 수 있는지가 나오며 내 전세자금이 안전할 수 있는지에 대한거라 꼭 확인이 필요하다.

그리고 부동산이 보증보험증권에 가입되어있는지도 확인한다.

마음에 드는 집이 있다면 전세가격의 5% 를 계약금으로 걸고, 계약서를 쓴다. 대출이 생각보다 길어질 수 있으므로 넉넉하게 3주 이상으로 잡자.

대출 사전 작업​

중소기업취업청년 전월세보증금대출​

• 나이제한: 만 19세 ~ 만 34세
• 연봉제한: 3500
• 세대주제한: 없음
• 평수제한: 25평
• 금액제한: 1억
• 이자: 1.2%

1억을 빌려도 한달 이자가 10만원인 대출이다. 10만원이 비싸다고 생각하면, 월급쟁이가 10년 일해야 1억모은다는 걸 생각해보자.

버팀목 전세자금 대출​

• 나이제한: 만 25세 ~
• 연봉제한: 5000
• 세대주제한: 세대주만 가능
• 평수제한: 25평
• 금액제한: 1.2억
• 이자: 2.5~2.9%

1억을 빌리면 한달 이자가 30만원 언저리로 나온다. 관리비를 포함한다면 월세집을 사는 게 나을 수 있다.

세대주 작업​

버팀목 전세자금의 경우 무주택 세대주여야한다. 조부모님 사촌, 친구을 활용해 전입신고를 하자. 그렇게 못한다면 내가 집의 세대주가 되거나 세대 분리로 세대주가 되어야하는데, 세대주 변경의 경우 부모님 명의로 된 집이 있다면 대출 조건에서 걸린다. 부모님 집의 명의를 돌리고 돌려서, 무주택자 부모님 밑에서 사는 서류가 된다 하더라도 대출시 은행으로 부모님이 직접 가서 무주택자라고 자필 서명을 해야한다.

세대 변경은 부모님 공인인증서와 내 공인인증서 설치가 모두 있는 경우에 한해 온라인으로 가능하고, 아니면 부모님의 도장으로 서류를 작성해야한다. 세대 분리는 동사무소에 전화해서 분리하고 싶다고 문의를 할 수 있는데, 상담해주시는 분에 따라 케바케라 힘들다고 보면 된다.

결국 집을 구할 때 이사 전 전입 신고가 가능한 집주인을 찾아보는 게 속 편하다. 그리고 등본을 발급하기 전 이사할 집에 전입신고를 한다.

서류 작업​

공인인증서와의 긴 싸움이 시작된다.

• 확정일자가 있는 전세계약서
• 계약금 납입 영수증
• 가족관계증명서
• 4대보험가입내역확인서
• 건강보험자격득실확인서
• 주민등록등본
  • 버팀목의 경우 세대주로 찍혀야함
  • 주민번호 뒷자리까지 모두 노출
• 주민등록초본
  • 태어날 때부터 모든 주소변경이력 포함

위 서류에 중소기업 대출일 경우 아래 서류가 추가로 필요하다.

• 사업자등록증 사본
• 주업종코드확인서
• 고용보험피보험자격이력내역서

서류 준비가 완료되면 대출심사를 진행하고 (보통 3영업일 이상) 전세계약서를 들고 이사할 지역의 동사무소를 찾아가 전입 확정일자를 찍어달라고 말한다. (600원 필요)

대출 확인​

대출심사 진행 중 은행에서 해당 건물이 진짜 원룸인지 확인을 나간다. 다 될 경우 어마어마한 대출 서류에 싸인한 뒤 대출 보증세, 이자, 중도상환에 대해 확인한다.

그러면 계약일에 집주인 계좌로 은행에서 바로 송금을 해준다. 계약일이 주말일 경우 이전 영업일에 송금되니 참고하자.

계약​

계약은 꼭 공인중개사, 집주인과 하자. 공인중개사는 휴대폰 대리점처럼 중개인을 두고 출근하지 않는 경우가 많고 집주인도 멀리 산다고 오지 못 한다는 경우가 많은데 계약시엔 대리인을 두지 말고 담당자들과 거래하는 것이 좋다.

이사​

이삿짐 센터 확인​

원룸 이사를 용달로 할 경우 견적전화를 돌리고, 모든 게 있는 풀옵션일 경우 자차로 이사할지에 대해 정한다. 인건비는 명 당 십만원 정도로 생각하자.

입주​

박스를 구해다가 포장하고 이삿날에 잘 입주하기만 하면 된다. 굳이 계약날이 입주일은 아니여도 된다.

팁​

• 입주 후 생필품을 사는데에 100만원정도 지출이 필요할 수 있다.
• 가능하다면 대출한도를 전부 대출받아 청약 당첨이나 재계약등에 대비할 수 있다.
• 부동산 관련 서류(등기 등)은 여기서 출력 가능하다.
• 해당 공인중개사가 인증된 사람인지 확인은 여기서 가능하다.

GA Client JS API​

문서가 있는데 생각보다 사용하기가 어렵다. 하나하나 시작해보자.

인증 토큰 발급​

Cridentials page에서 Create credentials 를 눌러 OAuth Client ID 를 발급받는다.

예제​

받은 Client ID 를 메타태그에 넣어준다.

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Hello Analytics Reporting API V4</title>
  <meta name="google-signin-client_id" content="OAuth 2.0 Client ID">
  <meta name="google-signin-scope" content="https://www.googleapis.com/auth/analytics.readonly">
</head>
<body>
<h1>Analytics Reporting API V4</h1>
<p>
  <div class="g-signin2" data-onsuccess="queryReports"></div>
</p>

<!-- The API response will be printed here. -->
<textarea cols="80" rows="20" id="query-output"></textarea>

<script>
  // Replace with your view ID.
  var VIEW_ID = '136416454';

  // Query the API and print the results to the page.
  function queryReports() {
    gapi.client.request({
      path: '/v4/reports:batchGet',
      root: 'https://analyticsreporting.googleapis.com/',
      method: 'POST',
      body: {
        reportRequests: [
          {
            viewId: VIEW_ID,
            dateRanges: [
              {
                startDate: '7daysAgo',
                endDate: '6daysAgo'
              }
            ],
            metrics: [
              {
                expression: 'ga:sessions'
              }
            ]
          }
        ]
      }
    }).then(function (response) {
      var formattedJson = JSON.stringify(response.result, null, 2);
      document.getElementById('query-output').value = formattedJson;
    }, console.error.bind(console));
  }
</script>
<script src="https://apis.google.com/js/client:platform.js"></script>
</body>
</html>

파라미터 확인​

문서의 내용을 확인하기 보다 Query Explorer에서 테스트 후에 그 값들을 Body 로 옮겨 적는 게 확인하기 쉽다.