Skip to main content

· One min read
Gracefullight

Git 사용을 위해 ssh key 생성해 서버에 추가했는데도 비밀번호를 물어보는 경우가 있다.

원인

윈도우에서 ~/.ssh 경로를 인식하지 못해 발생한다.

해결

시스템 > 고급 시스템 설정 > 환경변수 메뉴로 들어가 HOME 변수로 %HOMEDRIVE%%HOMEPATH% 값을 추가 후 재부팅해주면 된다. image from hexo

· One min read
Gracefullight

패키지 설치​

Package Control을 열어 Terminal 패키지를 설치한다.

Git Bash 와의 연동​

Preferences > Package Settings > Terminal > Settings - User 메뉴에서 터미널 경로를 수정한다.

{
  // git-bash가 설치된 경로
  "terminal": "C:\\Program Files\\Git\\git-bash.exe",
  "parameters": []
}

단축키 추가

기본 단축키는 ctrl+shift+alt+t 라 어려우니 변경해주자. Preferences > Key Bindings 메뉴에서 단축키를 추가한다.

{ "keys": ["ctrl+alt+t"], "command": "open_terminal_project_folder" }

이제 ctrl+alt+t 키로 현재 프로젝트에서 깃 배쉬창을 바로 띄울 수 있다.

· 2 min read
Gracefullight

Git 은 설치되어 있고, 프로젝트를 clone 했다고 가정합니다.

작업흐름

프로젝트에서 git bash 실행​

서버 repository 의 최종 버전을 다운로드​

$ git pull origin master

오늘 작업 브랜치 설정 또는 선택​

# 작업 브랜치 설정
$ git checkout -b 브랜치명
# 작업 브랜치 선택
$ git checkout 브랜치명

즐거운 코딩​

console.log("코딩!!!");

브랜치 작업내역 저장 및 커밋​

$ git add .
$ git commit -m '커밋 메세지 (필수)'
# 또는 한방에 커밋
$ git commit -am '커밋 메세지'

master 브랜치로 이동​

$ git checkout master

작업한 브랜치 병합 후 테스트​

$ git merge 브랜치명

서버 repository 변경점 다운로드​

$ git pull origin master

서버 repository 변경점 업로드​

$ git push origin master

작업 브랜치 제거​

$ git branch -D 브랜치명

기타 자주쓰는 명령어

# 모든 브랜치 확인
$ git branch
# 원격 브랜치 확인
$ git branch -r
# master 브랜치에서 변경된 파일만 보기
$ git diff --name-status master
# 현재 브랜치 변경된 파일 정보 보기
$ git status
# 커밋 로그 한줄 보기
$ git log --pretty=oneline

· 4 min read
Gracefullight

javascript 에서 linter 의 역활은 중요하다. Sublime Text 나 VSCode 에서 jshint linter 를 설치하고, 기본 설정을 수정해보자.

설치

Sublime​

모듈 설치​

Sublime Linter 패키지가 선행되어야한다.

Package Control을 열어 Sublimt-Linter jshint를 설치한다. 간단히 jshint 로 검색해도 된다.

jshint 설치​

# 전역으로 jshint를 설치한다.
$ npm install -g jshint

설정 경로 변경​

Preferences > Package Settings > SublimeLinter > Settings - user 메뉴로 들어가, "users.linters.jshint.args"에 경로를 수정한다.

{
  "linters": {
    "jshint": {
      "@disable": false,
      "args": [
        // 여기에 경로를 적어준다.
        "--config=C:\\Users\\사용자\\npm\\node_modules\\jshint\\jshint_config.json"
      ],
      "excludes": []
    }
  }
}

VSCode​

내장되어있다. 파일 > 기본설정 > 설정에서 아래 속성을 만져주면 된다.

{
  "jshint.options": {}
}

설정 파일

소스​

{
  "esnext": true,
  "asi": false,
  "boss": false,
  "curly": true,
  "eqeqeq": true,
  "eqnull": false,
  "evil": false,
  "expr": true,
  "forin": true,
  "funcscope": false,
  "jquery": true,
  "latedef": true,
  "lastsemic": false,
  "loopfunc": false,
  "maxerr": 10,
  "nocomma": true,
  "nonbsp": true,
  "node": true,
  "nonew": false,
  "plusplus": false,
  "regexdash": false,
  "shadow": false,
  "strict": false,
  "supernew": false,
  "trailing": false,
  "undef": false,
  "unused": false,
  "white": false,
  "withstmt": false,
  "worker": true
}

설명​

  • esnext : es6 의 구문을 사용할 수 있음
  • asi : 세미콜론이 없을 수 있음
  • boss : 비교문(lt, gt..)이 올 자리에 할당문(a = 1)이 올 수 있음
  • curly : 중괄호 생략할 수 없음
  • eqeqeq : ==를 사용할 수 없음 (===를 사용)
  • eqnull : null 비교를 사용할 수 있음
  • evil : eval 을 사용할 수 있음
  • expr : 할당이나 함수호출이 아닌 표현식 사용할 수 있음 (예제 참조)
  • forin : forin 반복문 사용시 if 으로 필터링을 해줘야함
  • funcscope : 조건문 내의 선언된 변수를 조건문 바깥에서 참조 가능
function test() {
  if (true) {
    var x = 0;
  }

  x += 1; // Default: 'x' used out of scope.
  // No warning when funcscope:true
}
  • jquery : jQuery 의 전역변수를 미리 정의
  • latedef : 호출보다 늦게 정의된 변수를 금지 (호이스팅 방지)
  • lastsemic : 한 줄짜리 블록 코드에서 마지막 세미콜론이 없을 경우만 오류
  • loopfunc : 반복문 안에서 함수 정의 가능
  • maxerr : 총 보여줄 오류의 갯수
  • nocomma : comma 연산자 사용 금지
  • nonbsp : non-breaking whitespace 금지
  • node : 노드 환경 사용 가능
  • nonew : new 생성자 사용 불가
  • plusplus : 단항 증감연산자 사용 불가
  • regexdash : 정규식에서 대괄호 안에 escape 처리 되지 않은 대쉬(-) 가능
  • shadow : 변수 재선언 가능 (inner 또는 false, outer, true 로 설정)
  • strict : "use-strict" 선언이 없을시 오류
  • supernew : 잘못 작성한 생성자의 오류 표시 안함
  • trailing : 라인 끝의 불필요한 공백이 있으면 오류
  • undef : 선언되지 않은 변수 사용시 오류
  • unused : 선언이 되었으나 사용되지 않는 변수에 대해 오류
  • white : jshint 가 더글락스 크락포드의 코딩 스타일 가이드에 따라 코드를 검사
  • withstmt : with 구문 사용 가능
  • worker : Web Worker 사용 가능

· One min read
Gracefullight

특정 포트가 열려있는지 확인하기 위해서 텔넷을 사용해야할 때가 있다.

설치

제어판 > 프로그램 추가/제거에 들어간다. image from hexo

Windows 기능 켜기/끄기 버튼 클릭 후 아래로 끝까지 내리면 텔넷 클라이언트가 보이는데, 체크한 후 확인 버튼을 눌러 설치한다.

사용법

cmd 창을 연 뒤

# telnet 아이피(호스트) 포트
$ telnet 111.222.333.444 3306

· 5 min read
Gracefullight

구글링을 통해 얻은 Openshift 자료들은 최신 버전이 아니라 사용할 수 없다.

Google Cloud나 Heroku, AWS를 사용하여 테스트용 서버를 만들 수 있지만 무료 기간이 모두 정해져 있다. RedHat에서 운영하는 100% 무료 클라우드인 오픈시프트의 최신 버전을 사용해보자.

가입

Github로 로그인​

openshift의 새로운 버전은 Github 아이디로만 가입이 가능하다. Github 아이디를 먼저 생성한 후 Login With GitHub 버튼을 클릭한다.

신청서 작성​

image from hexo

신청서 작성 후 입력한 Email 주소로 오는 승인 메일을 기다려야한다.

승인 및 로그인​

The OpenShift Team에게 Welcome to the OpenShift Online (Next Gen) Developer Preview 란 제목으로 메일을 받으면 openshift를 이용할 수 있다.

상단 메뉴의 My Account를 클릭 후 (NEXT GEN) WEB CONSOLE 버튼을 클릭한다. image from hexo

다음 단계부터는 OpenShift의 승인이 나야지만 진행할 수 있다. 하루정도 안에 승인 메일이 오니 기다려보자.

프로젝트 생성

프로젝트는 하나의 클라우드를 신청한다고 보면 된다.

로그인 후 New Project 버튼을 클릭한다. image from hexo 고민하지 말고 적어도 된다.

웹서버 생성

프로젝트 생성이 끝나면 이미지를 선택하는 창이 나온다. 검색창에 원하는 이미지를 검색 후 선택한다. image from hexo

서버 이미지 추가​

mongodb를 사용시 nodejs-mongo-persistent 이미지를 사용하고, nodejs만 필요할 경우 nodejs:4 이미지를 사용하면 된다. 일단 nodejs 웹서버만 필요하기에 해당 이미지를 선택했다.

image from hexo Git Repository를 입력해야하는데, Github에 가지고 있는 자신의 nodejs application이 있다면 그 주소를 등록하면되고 그렇지 않은 경우 Try It버튼을 클릭해 Sample Repo를 추가하자.

샘플 소스는 express와 ejs를 사용하고 있다.

Show advenced routing... 버튼을 클릭하면 도메인 세팅, Webhook 등 고급 설정을 할 수 있는데 Resource Limit에서 메모리를 늘릴 수 있다. (기본 512MB)

추후 메모리 용량 확인은 가능하나, 확장하는 부분은 아직 못 찾았다. (없을지도) 미리 메모리를 1GB로 늘려주고 시작하자

Fork Sample Repository​

이제 node 서버를 수정할 수 있게 나의 Github로 옮기는 작업이 필요하다. Sample Repo에 접속해 프로젝트를 Fork한다. image from hexo

Change Source Repository​

Builds > Builds 메뉴로 들어가 내 application을 선택한 뒤 우측 Actions에서 Edit 버튼을 클릭한다. image from hexo

Source Repository URL에 위에서 Fork한 Git Repository를 등록한다. image from hexo 그리고 우측 GitHub Webhooks URL을 복사한 뒤 저장한다.

Webhooks URL 등록​

fork된 내 Repository로 와서 Settings > Webhooks 메뉴로 들어가 Add webhook 버튼을 클릭한다. image from hexo

Rebuild​

Builds > Builds 메뉴로 돌아가 Start Build 버튼을 클릭한다.

빌드가 완료되면 버전이 #2로 보이고, 내 Git Repo와 연결된 버전이 생성된다.

확인​

Overview 메뉴에서 내 링크를 클릭해보자 image from hexo

이 화면이 보인다면 성공이다. image from hexo

소스 수정

Git Repository를 Clone한 뒤 기존 Github 이용하듯 수정하면 된다.

$ git clone <git_url> <directory_to_create>

# Within your project directory
# Commit your changes and push to OpenShift
$ git commit -a -m 'Some commit message'
$ git push

여담

잘가 Google Cloud Platform!

· 3 min read
Gracefullight

서버에서 실행

# 서버에 로그인 후 원하는 위치에서 폴더를 만든다.
$ mkdir [이름].git

# 해당 폴더로 이동한다.
$ cd [이름].git

# Git 원격 저장소를 초기화한다.
$ git init --bare

SSH 생성

클라이언트에서 실행

Email 인증 방식​

Github 인증을 하려면 이 방식을 이용해야한다.

# 키 발급
$ ssh-keygen -t rsa -C "your@email.com"

# 클라이언트에 이메일 키 추가
$ eval "$(ssh-agent -s)"
$ ssh-add ~/.ssh/id_rsa

사용자 인증 방식​

# 키 발급
$ ssh-keygen -t rsa

SSH 폴더로 이동해 인증키 복사

클라이언트에서 실행

$ cd ~/.ssh
$ vi id_rsa.pub

# id_rsa.pub의 내용을 복사한다.

인증키 등록

일반 서버​

서버에서 실행

# ssh 폴더로 이동
$ cd ~/.ssh

# 인증키 파일을 연다.
$ vi authorized_keys

# id_rsa.pub에서 복사된 인증키를 하단에 추가한다.

Github​

Github에서 실행

이메일 인증 방식으로 인증키를 생성해야하고 이메일은 github 에 로그인하는 이메일과 같아야한다.

키 등록​

github 에 로그인 후 설정에 가서 복사한 키를 등록한다. image from hexo

인증여부 확인​

클라이언트에서 실행

# 등록 후 에 클라이언트에서 인증여부를 확인한다.
$ ssh -T git@github.com

# You've successfully authenticated 가 보이면 인증완료

Git Repositiory 초기화

클라이언트에서 실행

$ git clone 서버유저명@서버아이피:[이름].git
# ex ) git clone git@1.22.333.444:test.git

· One min read
Gracefullight

공식 문서에 따르면 image tag 의 사용법은 이렇다.

![image from hexo]([class names] /path/to/image [width] [height] [title text
[alt text]])

대괄호로 둘러 쌓인 부분은 생략이 가능하다.

문제점

Input​

test.png 에 test_title, test_alt 속성을 추가하고 싶은 경우 아래처럼 사용하면 되어야한다.

![image from hexo](/test.png test_title test_alt)

Output​

하지만 결과는 참담하다.

<img src="/test.png" title="test_title test_alt" />

해결

Input​

속성을 quotes 와 double quotes 로 두번 감싸줘야한다.

![image from hexo](/test.png "'test_title'" "'test_alt'")

Output​

<img src="/test.png" title="test_title" alt="test_alt" />

여담

공식 문서에 설명이 업데이트되면 좋겠다. 이미지에 캡션다는 법을 찾다가 결국 내 블로그에는 안 달기로 마음먹었다.

· 2 min read
Gracefullight

github의 예제 프로젝트나 라이브러리를 받을 때, 데모를 실행시키고 싶을 때가 있다. 그럴려면 node나 apache, nginx, iis 등의 웹서버에서 해당 폴더를 설정하고, hosts파일에서 열어줘야하는 번거로움이 있다.

Web Server for Chrome을 사용하면 몇 초 안으로 데모를 띄울 수 있다.

설치

image from hexo

  1. 크롬 설치 후 웹스토어 접속
  2. 검색란에서 Web Server for Chrome 검색
  3. 설치

사용법

Web Server 실행​

image from hexo chrome://apps/에 접속 후 Web Server 아이콘을 클릭한다.

설정 및 구동​

image from hexo Automatically show index.html 설정을 체크한 후 CHOOSE FOLDER로 웹서버를 돌릴 폴더를 선택해주자. 그리고 127.0.0.1:8887 (또는 localhost:8887)로 접속하면 끝!

여담

Html과 Javascript로 나만의 UI를 만들고 빠르게 확인하는데 좋을 것 같다. Service Worker 같은 Https가 필요한 기술도 실행이 가능하다.

· One min read
Gracefullight

Google Analytics, Facebook Pixel, Naver Analytics 등의 분석 스크립트 및 Google Adsence 를 차단하는 AdBlock 을 감지해보자

소스

/**
@author https://www.christianheilmann.com/2015/12/25/detecting-adblock-without-an-extra-http-overhead/
*/
(function (adBlockEnabled) {
  "use strict";
  var testAd = document.createElement("div");
  testAd.innerHTML = "&nbsp;";
  testAd.className = "adsbox";
  document.body.appendChild(testAd);

  setTimeout(function () {
    if (testAd.offsetHeight === 0) {
      adBlockEnabled = true;
    }
    testAd.remove();

    if (adBlockEnabled) {
      alert(
        "This Blog is made possible by displaying online advertisements\nPlease consider by disabling your ad blocker"
      );
    }
  }, 100);
})((window.adBlockEnabled = window.adBlockEnabled || false));

출처의 소스를 즉시실행함수로 변경하고, 문구를 추가했다.

설명

AdBlock 에 의해 차단되는 영역인 .adsbox div 의 생성유무를 확인해 AdBlock 의 adBlockEnabled 변수의 값을 정한다.

uBlock 도 잘 찾아낸다.