CSS전처리기(CSS pre-processor)라 불리는 SASS(Syntactically Awesome StyleSheet)는 CSS의 단점을 보완한 CSS의 확장형이다. 전처리기란 자신만의 특별한 구문을 가지고 CSS를 생성하도록 하는 프로그램이다.

CSS 전처리기 종류

• SASS
• LESS
• Stylus
• PostCSS

SASS와 SCSS의 차이

SCSS는 SASS의 3버전으로 업그레이드 하면서 갖춰진 새로운 문법 체계이다.

SASS

{}(중괄호)와 ;(세미콜론) 사용 안하기 때문에 코드가 깔끔하고 간결함

.list
  float: left
  width: 100px
  li
    color: red
    background: url("./image.jpg")
    &:last-child
      margin-right: -10px

SCSS

인라인 코드(한 줄 작성)를 작성할 수 있고, CSS와 유사한 문법을 가지기 때문에 코드 통합이 훨씬 쉬움

.list {
  float: left;
  width: 100px;
  li {
    color: red;
    background: url("./image.jpg");
    &:last-child {
      margin-right: -10px;
    }
  }
}

SCSS를 추천

• 공식 문법: 공식 레퍼런스는 SCSS 문법을 기준으로 모든 문법을 설명하고 예시를 보여줌
• 더 넓은 사용자: 다수의 라이브러리, 프레임워크가 SCSS 문법을 활용하는 등 새로운 문법이 더욱 널리 쓰임
• CSS 호환성: 친근한 CSS 문법은 SASS와 CSS 사이의 심리적 틈을 줄여주고, 기능적으로도 확장성을 높임
• 여러 줄 쓰기 지원: SASS 문법은 들여쓰기와 줄 바꿈이 문법의 중요한 요소이기 때문에, 반대로 여러 줄 쓰기를 지원하지 않음

SASS를 더 편리하게 수정한 버전이 SCSS이기 때문에 파일 확장자명은 .scss를 사용한다.

컴파일 방법

SASS는 웹에서 직접 동작할 수 없다. 최종에는 표준 CSS로 동작해야 하며, 전처리기로 작성 후 CSS로 컴파일해야 한다. 다양한 방법으로 컴파일이 가능하여 여기서는 node-sass를 사용할 것이다. node-sass는 Node.js를 컴파일러인 LibSass에 바인딩한 라이브러리다.

NPM을 사용하여 전역에 설치해준다.

$ npm install -g node-sass

컴파일이 제대로 되는지 테스트를 해보겠다. 작업할 디렉토리로 가서 아래처럼 구문을 적은뒤 test.scss로 저장한다.

$red: #ff0000;
div{
    color: $red;
}

터미널로 들어가 해당 디렉토리로 이동한 뒤 아래를 참고하여 명령어를 입력한다.

sass 작성한scss파일명.scss 변환될css파일명.css

위 예제 파일을 컴파일 할려면 아래처럼 입력하면 된다.

sass test.scss test.css

명령어를 실행하면 해당 디렉토리에 test.css 및 test.css.map 파일이 정상적으로 생성된 것을 확인할 수 있다. .scss 파일은 컴파일이 진행된 파일이고, .map 파일은 scss와 css가 어떻게 연결되어 있는지에 대한 정보 파일이다.

div {
  color: #ff0000;
}

/*# sourceMappingURL=test.css.map */

하지만 매번 이렇게 컴파일을 할수 없기에 내가 작성하고 있던 파일을 변경(저장)되면 자동으로 컴파일 하도록 설정할 수 있다.

1. 작성된 scss파일만 변환

   
   

   $ sass --watch 작성된.scss
   

   
   

2. 디렉토리의 모든 scss 파일을 변환

   
   

   $ sass --watch .:.
   

   
   

위와 같이 해당 명령어를 입력하면 test.scss 변경 시 자동으로 test.css도 변경된다. 해당 명령어를 취소하고자 할 때는 ctrl + c 를 입력하면 취소가 된다.

References

Sass(SCSS) 완전 정복!
Sass 기초와 활용
[사스(Sass)] 2. Sass 사용법
CSS 전처리기
Sass는 SCSS로 쓰세요
[사스(Sass)] Sass 기본 사용법 (컴파일 및 명령어)

바닐라 자바스크립트로 만든 추억의 짱깸뽀 게임이다.
왜 이딴거나 만들고 있었는지..

게임 설명

• 시작 버튼을 눌러 게임 시작
• 게임을 한판 할 때 마다 하단의 코인이 하나씩 소모됨
• 룰렛 주변으로 게임 결과가 표시 됨
• 승리할 경우 랜덤으로 코인이 지급
• 짱깸뽀 사운드를 추가해야 하는데 구하기가 쉽지 않음

게임 하기

여기를 클릭하면 게임 화면이 나온다.

코드

여기를 클릭하면 코드를 확인할 수 있다.

변수, 함수명은 카멜 케이스를 사용한다.

첫글자는 소문자, 단위로 첫글자 대문자를 사용, 중간에 언더바(_)사용 금지한다. 대표적인 표기법으로 카멜 케이스, 파스칼 표기법, 헝가리안 표기법, 스네이크 표기법이 있으며 사용하는 언어에 따라 권장사항이 다르다.

var pageName;

상수는 영문 대문자 스네이크 표기법을 사용한다.

var SYMBOLIC_NAME;

여러 단어가 합쳐져 만들어진 약어(HTML, XML)의 경우는 전부 대문자로 사용한다.

var HTML;

생성자 함수는 대문자 카멜 케이스를 사용한다.

function Func() {
    ...
}

지역변수 혹은 private 변수는 언더바(_)로 시작한다.

var _private;

예약어를 사용하지 않는다.

// bad
var if;
var for;
var this;
...

전역 변수를 사용하지 않는다.

모든 컴파일 단위는 하나의 공용 전역 객체(window)에 로딩된다. 전역 변수는 언제든지 프로그램의 모든 부분에서 접근할 수 있기 때문에 편하지만, 바꿔 말하면 프로그램의 모든 부분에서 변경될 수 있고, 그로 인해 프로그램에 치명적인 오류를 발생시킬 수 있다.

var global = 'data';

암묵적 전역 변수를 사용하지 않는다.

// bad
function sum(x, y) {
  result = x + y;
  return result;
}

// bad
function foo() {
  var a = b = 0; // var a = (b = 0);와 같다. b가 암묵적 전역이 된다.
}

// good
function sum(x, y) {
  var result = x + y;
  return result;
}

// good
function foo() {
  var a, b;
  a = b = 0;
}

References

코딩 컨벤션

전체 시스템에서 하나의 인스턴스만 존재하도록 보장하는 객체 생성패턴을 의미한다. 대표적으로 $를 활용해서 DOM을 조작하고 이벤트도 다루는 jQuery가 있으며, 객체 리터럴도 싱글톤 패턴이라고 할수 있다.(자바스크립트에서 객체 리터럴로 생성한 객체는 다른 객체와 같을 수 없다. 객체 내부의 내용이 같더라도 참조하는 객체가 다르기 때문이다.) 객체 리터럴은 한계가 있는데 비공개 프로퍼티 및 함수를 선언할 수 없다.

var obj = {
    name: 'myName',
    get: function() {
        return this.name;
    }
}
console.log(obj.get()); // myName

비공개 프로퍼티 및 함수를 정의하려면 클로저(closure)를 활용해야 한다. 즉 제대로 된 싱글톤 패턴은 객체 리터럴 + 클로저의 조합이 필요하다고 할 수 있다. 아래 코드를 확인해보면

var singleton = (function() {

    // 비공개 프로퍼티 정의
    var instance;

    // 비공개 메서드 정의
    function init() {

        // singleton 인스턴스 정의
        return {

            // 공개 프로퍼티 정의
            prop: 'value',

            // 공개 메서드 정의
            method: function() {
                return 'hello'
            }

        };

    }

    // 공개 메서드인 getInstance를 정의한 객체, 비공개 프로퍼티 및 메서드에 접근 가능(클로저)
    return {

        getInstance: function() {

            // 인스턴스가 선언이 안되있는경우 인스턴스 생성
            if (!instance) {
                instance = init();
            }

            // 인스턴스가 선언이 되있는 경우 인스턴스 반환
            return instance;

        }
    }
})()

var singleton1 = singleton.getInstance();
console.log(singleton1.method());
var singleton2 = singleton.getInstance();
console.log(singleton1 === singleton2); // true

위 코드는 비공개 메서드인 init()의 return문에서 객체 리터럴로 정의되는 인스턴스가 싱글톤 객체이며, 전체 시스템에서 하나만 존재하게 된다. 순서대로 보면 익명함수의 return문에는 싱글톤 객체를 구하는 공개 메서드(getInstance)를 포함한 객체를 반환하며, getInstance메서드는 instance값을 확인해 인스턴스가 선언이 안되있는 경우 비공개 메서드인 init를 호출하여 singleton인스턴스를 생성하여 instance에 할당하게 된다.

이렇게 일반적으로 싱글톤 패턴에서는 이미 객체가 생성되었는지 여부를 알려주는 instance와 같은 내부 변수가 필요하다. 그리고 싱글톤 패턴에서는 내부 변수에 접근할 수 있는 객체를 반환하는 클로저를 이용해야 한다.

정리를 하면 내부의 getInstance메서드에서 비공개 프로퍼티인 instance에 접근할 수 있다는 것과, getInstance메서드의 호출이 끝나더라도 instance의 값은 계속 유지되는 특성(클로저)를 이용해 prop, method()이 포함된 객체를 유일하게 생성하게 된다. 그래서 singleton.getInstance()를 몇번이나 호출하더라도 얻는 객체는 모두 동일한 싱글톤 객체를 가리키게 된다.

References

싱글톤(singleton) 패턴

모듈 패턴이란?

모듈이란 전제 어플리케이션의 일부를 독립된 코드로 분리하여 만들어 놓은 것이다.

모듈화를 했을 때 장점

• 자주 사용되는 코드를 별도의 파일로 만들어서 필요할 때마다 활용할 수 있다.
• 코드를 개선하면 이를 사용하고 있는 모든 애플리케이션의 동작이 개선된다.
• 코드 수정 시에 필요한 로직을 빠르게 찾을 수 있다.
• 필요한 로직만을 로드해서 메모리의 낭비를 줄일 수 있다.
• 한번 다운로드된 모듈은 웹브라우저에 의해서 저장되기 때문에 동일한 로직을 로드할 때 시간과 네트워크 트래픽을 절약할 수 있다.(브라우저에서만 해당)

객체 리터럴을 사용한 모듈 패턴

자바스크립트에서 모듈을 구현하는 가장 쉬운 방법은 객체 리터럴을 사용하는 방법이다.

var module = {
    key: 'data',
    publicMethod: function() {
        return this.key;
    }
}

console.log(module.key); // data
console.log(module.publicMethod()); // data

객체 리터럴은 모듈 패턴이기도 하며, 하나의 객체라는 점에서 싱글톤 패턴이라고도 할 수 있다. 동일한 코드를 어떠한 관점에서 보느냐에 따라 다양한 패턴이 될 수 있다. 객체 리터럴은 간단하지만 모든 속성이 공개되어있다는 단점이 있다. 독립된 모듈은 자체적으로 필요한 내부 변수 및 내부 함수를 모두 갖고 있어야 하므로 클로저를 이용해야 한다.

아래는 클로저를 활용한 모듈패턴이다.

클로저를 활용한 모듈 패턴

var module = (function() {

    /**
        * -----------------------
        * 모듈 패턴을 구현할 클로저 코드
        * -----------------------
        */

    // 은닉될 멤버 정의
    var privateKey = 0;
    function privateMethod() {
        return privateKey++;
    }

    // 공개될 멤버(특권 메서드) 정의
    return {
        publicKey: privateKey,
        publicMethod: function() {
            return privateMethod();
        }
    }

})();

console.log(module.publicMethod()); // 0
console.log(module.publicMethod()); // 1

모듈 패턴의 반환값은 함수가 아닌 객체이다. 위의 코드를 순서대로 보면 익명함수가 자동으로 실행되고 반환된 객체를 module 변수에 할당한다. 따라서 module.publicMethod()처럼 메서드를 호출할 수 있다. 자동 호출되는점을 제외하고 클로저와 유사하다.

클로저 경우

function func() {
    var private = 0;
    return function() {
        private++;
        return private;
    }
}
var val = func();
console.log(val()); // 1
console.log(val()); // 2

그리고 인스턴스를 여러개 만들어 낼 수 있는 구조라는 점에서 싱글톤 패턴과 차이가 있다.

싱글톤 패턴 경우

var singleton = (function() {

    var instance;
    var private = 0;
    function init() {
        return {
            publicKey: private,
            publicMethod: function() {
                return publicKey;
            }
        }
    }
    return function() {

        // 싱글톤 패턴은 아래 조건문에서 처음 인스턴스가 선언되면 다시 인스턴스를 만들지 않고 기존의 인스턴스를 리턴한다.
        if (!instance) {
            instance = init();
        }
        return instance;
    }
})()

var singleton1 = singleton();
var singleton2 = singleton();
console.log(singleton1 === singleton2); // true

하나의 인스턴스를 선언하지 않고 여러개의 인스턴스를 생성하려면 익명함수를 사용하지 않고 생성자 함수 방식으로 만들면 된다.

var Module = function() {

    var privateKey = 0;
    function privateMethod() {
        return privateKey++;
    }

    return {
        publicKey: privateKey,
        publicMethod: function() {
            return privateMethod();
        }
    }

}

var obj1 = Module();
console.log(obj1.publicMethod()); // 1
console.log(obj1.publicMethod()); // 2

var obj2 = Module();
console.log(obj2.publicMethod()); // 1
console.log(obj2.publicMethod()); // 2

위처럼 Module 함수를 정의하여 함수를 호출하면 여러개의 인스턴스를 생성할 수 있다. 클로저 인스턴스와 유사하지만, 한가지 차이점은 내부의 익명함수에서 반환값이 함수가 아니라 객체를 반환한다는 점이다.

모듈 패턴과 네임 스페이스 패턴을 함께 사용하면 더욱 깔끔한 코드가 완성된다.

var app = app || {};
app.module = (function() {

    var privateKey = 0;
    function privateMethod() {
        return privateKey++;
    }

    return {
        publicKey: privateKey,
        publicMethod: function() {
            return privateMethod();
        }
    }
})();

console.log(app.module.publicMethod()); // 0
console.log(app.module.publicMethod()); // 1

References

module pattern (모듈패턴) #1
[JS_Design Pattern] 2. 모듈 패턴 (Module Pattern)

정의

중첩함수에서 내부함수가 외부함수의 환경을 기억하는것을 클로저라고 한다.

function func() {
    var foo = 'data';
    return function() {
        return foo;
    }
}

func라는 함수를 선언하고 foo변수에 ‘data’문자열을 추가한 뒤 foo변수를 리턴하는 익명함수를 선언하였다.

var closure = func();
console.log(closure());
// 'data'

func함수의 리턴값을 closure변수에 할당한 뒤 closure를 실행한 값을 콘솔로 찍어보았다. 결과는 ‘data’라는 문자열이 출력되었다. func의 지역변수로 있는 foo는 func함수가 끝나면서 소멸되어야하지만 값을 잃지 않고 ‘data’값을 가지고 있다. 이 현상을 클로저라 한다. 다른 구문도 살펴보겠다.

function count() {
    var num = 0;
    return function() {
        num++;
        return num;
    }
}

var closure = count();
console.log(closure());
console.log(closure());
console.log(closure());
// 1
// 2
// 3

count함수의 지역변수인 num값이 소멸되지 않고 계속 카운트되는 것을 확인해 볼 수 있다.

특징

변수의 은닉화

자바스크립트에서는 인스턴스를 생성할때 Private Variables에 대한 접근 권한 문제가 있다.

function Create(name) {
    this._name = name;
}

var obj = new Create('민수');
console.log(obj._name);
// 민수

위에서 생성된 obj객체의 _name프로퍼티는 변수명 앞에 _를 포함하였기 때문에 Private Variables로 쓰고싶다는 의도를 알 수 있다. 하지만 _name프로퍼티는 동적으로 변경될 수 있다.

obj._name = '인성';
console.log(obj._name);
// 인성

이 경우 클로저를 사용하여 외부에서 내부변수에 접근하는것을 제한할 수 있다.

function create(name) {
    var _name = name;
    return function() {
        console.log(_name);
    }
}

var hello = create('민수');
hello();
// 민수

여기서는 외부에서 _name에 접근할 방법이 전혀 없다. 이렇게 클로저를 활용하여 은닉화를 해결할 수 있다.

고유한 환경

클로저는 고유한 환경을 가지고 있다.

function func(name) {
    var txt = name;
    return function() {
        return txt;
    }
}

var closure01 = func('민수');
var closure02 = func('인성');
var closure03 = func('한나');

console.log(closure01()) // 민수
console.log(closure02()) // 인성
console.log(closure03()) // 한나

위의 구문을 보면 txt변수가 동적으로 변화하는 것처럼 보이지만, 실제로는 txt변수 자체가 여러번 생성된 것이다. 즉, closure01(), closure02(), closure03()은 서로 다른 환경을 가지고 있다. 서로 다른 환경을 가지고 있다는것은 그만큼 메모리면에서 큰 비효율을 낳는다.

function Func(input) {
    this.name = input;
    this.get = function() {
        return this.name;
    }
    this.set = function (rename) {
        this.name = rename;
    }
}

var obj = new Func('민수');
console.log(obj.get());

위 코드는 생성자함수를 사용하여 인스턴스를 생성하는 구문인데, 클로저가 두번(get, set)이나 생성되었다. 이 상태에서 인스턴스를 계속 만들면 같은일을 하는 클로저가 중복으로 생성되고 메모리낭비가 심해질 것이다.
따라서 클로저는 객체의 prototype안에 저장함으로써 같은 기능을 모든 인스턴스가 공유하는 형태로 코드를 만들어야한다.

function Func(input) {
    this.name = input;
}
Func.prototype.get = function() {
    return this.name;
};
Func.prototype.set = function(rename) {
    this.name = rename;
};

var obj = new Func('민수');
console.log(obj.get());

이렇게 prototype안에 클로저를 넣으면, 인스턴스가 생성되더라도 중복으로 메모리를 낭비하지 않고, 생성자 내부의 prototype안의 클로저를 참조하기 때문에 메모리낭비를 방지할 수 있다.

정리

• 클로저는 독립적인(자유) 변수를 가리키는 함수 또는 클로저 안에 정의된 내부함수는 만들어진 환경을 기억한다.
• 클로저는 외부함수의 스코프 영역에 접근할 수 있고, 그것을 기억하고 있어야 한다.
• 외부함수가 종료된 후에도 내부함수는 외부함수를 계속 참조하고 있어야 한다.
• 데이터의 캡슐화 및 정보은닉에도 사용 가능하다.

References

JavaScript 클로저(Closure)

크롬 개발자 도구의 Sources패널로 디버깅을 할 수 있다.

예제

function hello() {
    return 'hello';
}

function world() {
    return 'world';
}

function greetinf() {
    var h = hello();
    var w = world();
    document.getElementById('msg').setAttribute('value', h + w);
}

<input type="text" id="msg" />
<button type="button" onclick="greetinf()">click</button>

버튼을 클릭하면 greetinf함수가 실행되며, h, w변수에 차례대로 값이 할당된 후 인풋 태그에 결과 값(helloworld)이 출력되는 구문이다.

결과

디버깅

크롬 개발자 도구의 소스탭을 들어가면 아래 처럼 확인할 수 있다.

개발자 도구는 특정 라인이 아닌 글로벌한 이벤트에 대해 중단점을 만들 수 있다. 좌측 하단의 Event Listener Breakpoints탭으로 들어가 Mouse > click를 체크해준다. 화면으로 넘어가 버튼을 클릭하면 이벤트가 실행되면서 이벤트가 실행된 코드를 소스탭에서 확인할 수 있다.

1. Breakpoints

중단점을 이용하면 실행이 중지된 시점에 변수가 어떤 값을 담고 있는지 알 수 있다. 또한 실행이 중지된 시점을 기준으로 명령어를 실행할 수도 있다.

2. Pretty Print

압축 파일(min)을 보기 좋게 정렬하여 볼 수 있다.

3. Resume Script Execution(단축키: F8)

스크립트 실행을 다시 시작한다. 추가 중단점이 없는 경우, 실행이 쭉 이어지고 디버거는 동작하지 않는다.

4. Step (단축키 F9)

다음 명령어를 실행한다. Step버튼을 계속 누르면 스크립트 전체를 문 단위로 하나하나 실행할 수 있다.

5. Step over next function call(단축키 F10)

다음 명령어를 실행하되, 함수 안으로 들어가진 않는다. Step과 유사하지만, 다음 문이 함수 호출일 때 Step과는 다르게 동작한다.(alert 같은 내장함수에는 해당하지 않고, 직접 작성한 함수일 때만 동작이 다르다.) Step은 함수 내부로 들어가 함수 본문 첫 번째 줄에서 실행을 멈춘다. 반면 Step over next function call은 보이지 않는 곳에서 중첩 함수를 실행하긴 하지만 함수 내로 진입하지 않는다. 함수 호출 시 내부에서 어떤 일이 일어나는지 궁금하지 않을 때 유용하다. 실행은 함수 실행이 끝난 후에 즉시 멈춘다.

6. Step into next function call(단축키 F11)

Step과 유사한데, 비동기 함수 호출에서 Step과는 다르게 동작한다. Step은 setTimeout(함수 호출 스케줄링에 쓰이는 내장 메서드)같은 비동기 동작은 무시한다. 반면 Step into next function call는 비동기 동작을 담당하는 코드로 진입하고, 필요하다면 비동기 동작이 완료될 때까지 대기한다.

7. Step out of current function(단축키 shift + F11)

현재 실행 중인 함수의 실행을 계속 이어가다가 함수 본문 마지막 줄에서 실행을 멈춘다. 실수로 Step을 눌러 내부 동작을 알고 싶지 않은 중첩 함수로 진입했거나 가능한 한 빨리 함수 실행을 끝내고 싶은 경우 유용하다.

8. Deactivate breakpoints

모든 중단점을 일시적으로 활성화/비활성화한다.(실행에는 영향이 없음)

9. Pause on excepoints

활성화되어 있고, 개발자 도구가 열려있는 상태에서 스크립트 실행 중에 에러가 발생하면 실행이 자동으로 멈춘다. 실행이 중단되었기 때문에 변수 등을 조사해 어디서 에러가 발생했는지 찾을 수 있게 된다. 개발하다가 에러와 함께 스크립트가 죽었다면 디버거를 열고 이 옵션을 활성화한 후, 페이지를 새로고침하면 에러가 발생한 곳과 에러 발생 시점의 컨텍스트를 확인할 수 있다.

10. Scope

현재 정의된 모든 변수를 출력한다. Local은 함수의 지역변수를 보여준다. 지역 변수 정보는 소스 코드 영역에서도 확인(강조 표시)할 수 있다. Global은 함수 바깥에 정의된 전역 변수를 보여준다. Local 하위 항목으로 this에 대한 정보도 출력된다.

11. Watch

표현식을 평가하고 결과를 보여준다. Add watch expression 버튼을 클릭해 원하는 표현식을 입력한 후 Enter를 누르면 중단 시점의 값을 보여준다. 입력한 표현식은 실행 과정 중에 계속해서 재평가된다.

Call Stack

코드를 해당 중단점으로 안내한 실행 경로를 역순으로 표시한다.

References

Chrome으로 디버깅하기
Chrome DevTools에서 자바스크립트 디버깅 시작하기
크롬 개발자 도구를 이용한 자바스크립트 디버깅
생활코딩 – Sources

윈도우에서는 Putty라는 프로그램으로 ssh접속을 하였지만 맥에서는 터미널로 바로 접속이 가능하다.

$ ssh [ID]@[HOST]

예를들어 webapp이 아이디이고 127.0.0.1가 호스트 번호 라면

$ ssh webapp@127.0.0.1

라고 입력한 뒤 패스워드를 입력하면 된다.

명령어	Windows 커맨드	Mac OS 터미널
현재 디렉토리	cd	pwd
현재 디렉토리 파일 리스트 보기	dir	ls
디렉토리 이동	cd	cd
디렉토리 생성	mkdir	mkdir
디렉토리 삭제	rmdir	rmdir
화면 클리어	cls	clear
null 파일 생성	type NUL >	touch
파일 삭제	del	rm
파일 이동	move	mv
디렉토리 이름 바꾸기	ren	mv
Explorer/Finder 에서 열기	start	open

명령어	동작
# systemctl status nginx	상태 확인
# sudo systemctl stop nginx	웹서버 정지
# sudo systemctl start nginx	웹서버 재시작
# sudo systemctl reload nginx	설정 리로드