웹사이트를 운영중 이미지 및 css 또는 js를 수정해도 반영이 안되어있을 때가 있다. 브라우저 내에 저장되어 있는 캐시 때문인데, 이를 해결하려면 사용자가 직접 캐시를 지우거나 강력 새로고침을 해야하는 번거로운 상황이 있다. 이를 방지하려면 작업자가 수정된 파일의 url 뒤에 ?ver=1라고 쿼리스트링을 붙여주면버전 정보를 적어주면 브라우저가 새로운 파일로 인식하고 파일들을 다시 다운로드 한다.

html

<link type="text/css" href="./common.css?ver=1" />

위 방법은 수정될 때 마다 쿼리스트링을 변경해줘야되는데, 이것도 번거롭다면 자바스크립트를 이용하여 동적으로 랜덤한 쿼리스트링을 생성하여 붙여주는 방법이 있다.

javascript

var bust = Math.floor((Math.random() * 1000));
document.write('<link type="text/css" href="./common.css?bust=' + bust + '" />');

이 방법은 브라우저가 로딩될 때 마다 쿼리스트링 값이 다르기 때문에 항상 파일을 새로 불러오게 된다.

References

수정배포된 CSS/JS 파일 캐시 방지

Array.reduce메서드는 배열의 각 요소를 순회하며 콜백 함수를 실행하며 이전 리턴값을 넘겨 받는다. 이전 값을 넘겨 받아 현재 값과 어떠한 작업을 수행하고 싶을 때 적합한 메서드이다. 인자 값이 다른 메서드와 약간 다르며, 콜백 함수 뒤에 인자를 하나 더 줄 수 있다. 이 인자는 첫 콜백함수의 이전 값으로 주입된다.

Parameter

1. 이전 콜백 함수에서 리턴한 값
2. 현배 배열 요소의 값
3. 현재 배열 요소의 index
4. 현재 돌고 있는 배열 자체

예제

var arr = [1, 2, 3, 4, 5];

// 각 콜백 마다 리턴값을 previousItem로 넘겨받아 어떤 작업을 수행
var val = arr.reduce(function(previousItem, currentItem, index, array) {

    // 콜백의 리턴 값을 받아 현재의 값과 더하려 다시 리턴
    return previousItem + currentItem;

// 첫번째 콜백의 previousItem값
}, 0);

console.log(val);
// 15
// 위 결과를 수식으로 나타내면 0 + 1 + 2 + 3 + 4 + 5 이다.(0부터 5까지의 합)

References

[JavaScript] Array 객체에서 놓치기 쉬운 6개의 메서드
Array.prototype.reduce()

Array.every메서드는 Array.some와 비슷하지만 모든 요소가 조건을 만족해야 true를 반환한다.

Parameter

1. 현재 배열 요소의 값
2. 현재 배열 요소의 index
3. 현재 돌고 있는 배열 자체

예제

var arr = [1, 3, 5, 6, 7, 9, 11];

// 배열의 모든 요소가 10보다 작아야 true를 리턴
var val = arr.every(function (item, index, array) {
    return item < 10;
});

console.log(val);
// false

References

[JavaScript] Array 객체에서 놓치기 쉬운 6개의 메서드
Array.prototype.every()

Array.some메서드는 배열의 각 요소를 순회하며 콜백 함수를 실행하며 하나의 요소라도 조건을 만족할 때 true를 반환하며, 만족하지 않을 때 false를 반환한다. 특정 조건을 만족하는지 알고 싶을 때 적합한 메서드다.

Parameter

1. 현재 배열 요소의 값
2. 현재 배열 요소의 index
3. 현재 돌고 있는 배열 자체

예제

var arr = [1, 3, 5, 6, 7, 9];

// 배열 요소중에서 짝수가 있으면 메서드 수행을 중단하고 true를 리턴
var val = arr.some(function (item, index, array) {
    return item % 2 === 0;
});

console.log(val);
// ture

References

[JavaScript] Array 객체에서 놓치기 쉬운 6개의 메서드
Array.prototype.some()

Array.filter메서드는 배열의 각 요소를 순회하며 콜백 함수를 실행하며 특정 조건에 맞는 요소만 모아 배열로 리턴한다. 특정 케이스만 필터링해서 추출할 때 유용하다.

Parameter

1. 현재 배열 요소의 값
2. 현재 배열 요소의 index
3. 현재 돌고 있는 배열 자체

예제

var arr = [1, 3, 5, 6, 7, 9, 11];

// 배열 요소중에서 모두 7보다 작은 요소만 모아 배열로 리턴
var val = arr.filter(function (item, index, array) {
    return item < 7;
});

console.log(val);
// [1, 3, 5, 6]

References

[JavaScript] Array 객체에서 놓치기 쉬운 6개의 메서드
Array.prototype.filter()

Array.map 메서드는 Array.forEach와 마찬가지로 배열의 각 요소를 순회하며 콜백 함수를 실행한다. 다만, 콜백에서 리턴되는 값을 배열로 만들어낸다. 원본 배열은 건들지 않고 그 요소들을 사용해서 혹은 약간 변형해서 새로운 배열을 만들어야 할 때 유용하다.

Parameter

1. 현재 배열 요소의 값
2. 현재 배열 요소의 index
3. 현재 돌고 있는 배열 자체

예제

var arr = ['a', 'b', 'c'];

//배열의 모든 요소에 NEW라는 문자열을 더하기
//메서드 수행 후 리턴값은 새로운 배열
var newArr = arr.map(function (item, index, array) {
    return item + 'NEW';
});

//메서드 수행 후 원본 배열
console.log(arr);
// ["a", "b", "c"]

//메서드 수행 후 생성된 배열
console.log(newArr);
// ["aNEW", "bNEW", "cNEW"]

실용적인 예제

See the Pen 데이터 가져오기 by recordboy (@recordboy) on CodePen.

References

[JavaScript] Array 객체에서 놓치기 쉬운 6개의 메서드
자바스크립트 Array map

Array.forEach 매서드는 배열 전체를 돌때, 요소마다 콜백 함수를 실행한다. 배열의 요소에 직접 어떠한 작업을 수행하고 싶을 때 적합한 메서드이다. Array.forEach 메서드는 리턴 값이 없다.

Parameter

1. 현재 배열 요소의 값
2. 현재 배열 요소의 index
3. 현재 돌고 있는 배열 자체

예제

var arr = ["a", "b", "c"];

arr.forEach(function (item) {
  console.log(item);
});

// a
// b
// c

var arr = ["a", "b", "c"];

// 배열의 모든 요소에 EDIT라는 문자열을 더하기
arr.forEach(function (item, index, array) {
  array[index] = item + "EDIT";
});

console.log(arr);

References

[JavaScript] Array 객체에서 놓치기 쉬운 6개의 메서드

ECMAScript(ES)의 정의

ECMAScript(ES)는 Ecma 인터내셔널의 ECMA-262 기술 규격에 정의된 표준화된 스크립트 프로그래밍 언어이다. 자바스크립트를 표준화하기 위해 만들어졌고 지금도 자바스크립트가 제일 잘 알려져 있지만, 액션스크립트와 J스크립트 등 다른 구현체도 포함하고 있다. ECMA스크립트는 웹의 클라이언트 사이드 스크립트로 많이 사용되며 Node.js를 사용한 서버 응용 프로그램 및 서비스에도 점차 많이 쓰이고 있다.

ES5(ECMAScript 5)

자바스크립트는 계속해서 발전하며 기술이 추가되었고, 새로운 표준이 발표될 때 마다 ECMAScript 1, 2, 3, 4, 5, 6 … 뒤에 숫자를 붙여서 명명하였다. 우리가 기존에 쓰고 있는 JavaScript는 2009년에 발표된 ECMAScript 5(ES5)라고 생각하면 된다. ES5는 IE9에서 use strict를 지원하지 않는 것 빼고는 대부분의 브라우저 버전에서 ES5 문법을 지원한다.

ES5에서 추가된 메서드 및 키워드

• use strict
• String.trim()
• Array.isArray()
• Array.forEach()
• Array.map()
• Array.filter()
• Array.reduce()
• Array.reduceRight()
• Array.every()
• Array.some()
• Array.indexOf()
• Array.lastIndexOf()
• JSON.parse()
• JSON.stringify()
• Date.now()

References

[Javascript] ES5 (ECMAScript 5)
자바스크립트 Array forEach
ECMA스크립트

SASS는 기본적인 연산 기능을 지원한다. 레이아웃 작업시 상황에 맞게 크기를 계산하거나 정해진 값을 나눠서 작성할 경우 유용하다. 아래는 SASS에서 사용 가능한 연산자 종류이다.

산술 연산자

종류	설명	주의사항
+	더하기
–	빼기
*	곱하기	하나 이상의 값이 반드시 숫자(Number)
/	나누기	오른쪽 값이 반드시 숫자(Number)
%	나머지

비교 연산자

종류	설명
==	동등
!=	부등
<	대소 / 보다 작은
>	대소 / 보다 큰
<=	대소 및 동등 / 보다 작거나 같은
>=	대소 및 동등 / 보다 크거나 같은

논리 연산자

종류	설명
and	그리고
or	또는
not	부정(반대)

숫자

일반적으로 절대값을 나타내는 px단위로 연산을 하지만, 상대적 단위(%, em, vw 등)의 연산의 경우 calc()로 연산 해야 한다.

width: 50% - 20px;  // 단위 모순 에러(Incompatible units error)
width: calc(50% - 20px);  // 연산 가능

나누기 연산의 주의사항 CSS는 속성 값의 숫자를 분리하는 방법으로 /를 허용하기 때문에 /가 나누기 연산으로 사용되지 않을 수 있다. 아래 예제를 보면 나누기 연산자만 연산 되지 않고 그대로 컴파일된다.

SCSS

div {
    width: 20px + 20px;  // 더하기
    height: 40px - 10px;  // 빼기
    font-size: 10px * 2;  // 곱하기
    margin: 30px / 2;  // 나누기
}

Compiled to

div {
  width: 40px;
  height: 30px;
  font-size: 20px;
  margin: 30px/2; // Error
}

따라서 /를 나누기 연산 기능으로 사용하려면 다음과 같은 조건을 충족해야 한다.

• 값 또는 그 일부가 변수에 저장되거나 함수에 의해 반환되는 경우
• 값이 ()로 묶여있는 경우
• 값이 다른 산술 표현식의 일부로 사용되는 경우

SCSS

div {
    $x: 100px;
    width: $x / 2; // 변수에 저장된 값을 나누기
    height: (100px / 2); // 괄호로 묶여있는 경우
    font-size: 10px + 12px / 3; // 더하기 연산자와 같이 사용
}

Compiled to

div {
  width: 50px;
  height: 50px;
  font-size: 14px;
}

문자

문자 연산에는 +가 사용된다. 문자 연산의 결과는 첫번째 피연산자를 기준으로 한다. 첫번째 피연산자에 따옴표가 붙어있다면 연산 결과를 따옴표로 묶는다. 반대로 첫번째 피연산자에 따옴표가 붙어있지 않으면 연산 결과도 따옴표를 처리하지 않는다.

SCSS

div::after {
    content: "hello" + world;
}
div::after {
    content: hello + "world";
}

Compiled to

div::after {
  content: "helloworld";
}

div::after {
  content: helloworld;
}

색상

색상도 연산이 가능하다.

논리

SASS의 @if조건문에서 사용되는 논리 연삭에는 그리고, 또는, 부정이 있다. 자바스크립트의 &&, ||, !와 같은 기능이라 보면 된다.

SCSS

$width: 90px;
div {
  @if not ($width > 100px) {
    height: 300px;
  }
}

Compiled to

div {
  height: 300px;
}

References

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

중첩(Nesting)

SASS는 중첩기능을 사용할 수 있다. 상위 선택자의 반복을 피할수 있어 좀 더 편리하게 복잡한 구조를 작성할 수 있다.

SCSS

.wrap {
    width: 100%;
    .list {
        padding: 20px;
        li {
            color: red;
        }
    }
}

Compiled to

.wrap {
  width: 100%;
}
.wrap .list {
  padding: 20px;
}
.wrap .list li {
  color: red;
}

상위 선책자 참조

중첩 안에서 &키워드는 상위(부모) 선택자를 참조한다.

SCSS

.wrap {
    width: 100%;
    &.active {
        color: red;
    }
}

Compiled to

.wrap {
  width: 100%;
}
.wrap.active {
  color: red;
}

& 키워드는 상위 선택자를 참조했기 때문에 아래와 같이 응용이 가능하다.

SCSS

.wrap {
    width: 100%;
    &-small { font-size: 12px; }
    &-medium { font-size: 14px; }
    &-large { font-size: 16px; }
}

Compiled to

.wrap {
  width: 100%;
}
.wrap-small {
  font-size: 12px;
}
.wrap-medium {
  font-size: 14px;
}
.wrap-large {
  font-size: 16px;
}

중첩 벗어나기

중첩에서 벗어나고 싶을 때 @at-root키워드를 사용한다. 중첩 안에서 생성하되 중첩 밖에서 사용해야 하는 경우에 유용하다.

SCSS

.list {
    width: 100px;
    li {
        width: 50px;
        @at-root .box {
            width: 10px;
        }
    }
}

Compiled to

.list {
  width: 100px;
}
.list li {
  width: 50px;
}
.box {
  width: 10px;
}

중첩된 속성

font-, margin- 등과 같이 동일한 네임 스페이스를 가지는 속성들은 아래와 같이 사용할 수 있다.

SCSS

.wrap {
    font: {
        weight: bold;
        size: 12px;
        family: sans-serif;
    };
    margin: {
        top: 10px;
        left: 20px;
    };
    padding: {
        bottom: 20px;
        right: 10px;
    }
}

Compiled to

.wrap {
  font-weight: bold;
  font-size: 12px;
  font-family: sans-serif;
  margin-top: 10px;
  margin-left: 20px;
  padding-bottom: 20px;
  padding-right: 10px;
}

변수(Variables)

반복적으로 사용되는 값을 변수로 지정할 수 있다. 변수 이름 앞에는 항상 $를 붙인다.

$변수이름: 속성값;

SCSS

$color-code: #000;
$url: "/common/images/";
$w: 200px;

.wrap {
    color: $color-code;
    background-image: $url;
    width: $w;
}

Compiled to

.wrap {
  color: #000;
  background-image: "/common/images/";
  width: 200px;
}

변수의 유효범위

변수는 사용 가능한 유효범위가 있다. 선언된 블록({}) 내에서만 유효범위를 가진다.

SCSS

.wrap {
    $w: 100px;
    .box {
        width: $w;
    }
}

// Error
.box2 {
    width: $w;
}

변수 $w는 .wrap의 블록 안에서 설정되었기 때문에, 블록 밖의 .box2에서 사용할 수 없다.

변수 재 할당

아래처럼 변수에 변수를 할당할 수 있다.

SCSS

$red: #FF0000;
$color-code: $red;

.box {
    color: $color-code;
}

Compiled to

.box {
  color: #FF0000;
}

전역 설정

!global 플래그를 사용하면 변수의 유효범위를 전역(Global)로 설정할 수 있다. 대신 기존에 사용하던 같은 이름의 변수가 있을 경우 값이 덮어져 사용된다.

SCSS

.box {
    $w: 100px !global;
    width: $w;
}
.box2 {
    width: $w;
    $w: 200px !global;
}
.box3 {
    width: $w;
}

Compiled to

.box {
  width: 100px;
}

.box2 {
  width: 100px;
}

.box3 {
  width: 200px;
}

초기값 설정

!default 플래그는 할당되지 않은 변수의 초깃값을 설정한다. 즉, 할당되어있는 변수가 있다면 변수가 기존 할당 값을 사용한다.

SCSS

$w: 100px;

.box {
    $w: 200px !default;
    width: $w;
}

Compiled to

.box {
  width: 100px;
}

변수와 값을 설정하겠지만, 혹시 기존 변수가 있을 경우 현재 설정하는 값은 사용하지 않겠다는 의미로 쓸 수 있다.

문자 보간

#{}를 이용하여 코드의 어디든지 변수 값을 넣을 수 있다.

SCSS

$family: unquote("Droid+Sans");
@import url("http://fonts.googleapis.com/css?family=#{$family}");

Compiled to

@import url("http://fonts.googleapis.com/css?family=Droid+Sans");

가져오기(Import)

CSS에는 현재 파일에 다른 CSS를 불러오는 @import라는 속성이 있다. 이 속성을 사용하면 의도에 따라 코드를 잘게 쪼개어 효율적으로 유지 보수할 수 있지만, @import로 선언되어 있는 CSS마다 http 요청을 발생하므로 웹페이지 성능 저하의 원인이 된다 하여 사용을 지양하고 있다. SASS에서도 다른 파일을 불러올 수 있는 @import가 있다. CSS의 @import와 다른 점은 여러개의 SASS파일은 @import해도 최종적으로 하나의 CSS로 컴파일해주기 때문에 성능에 영향을 주지 않고 코드를 여러 파일로 나누어 관리할 수 있다. 물론 @import된 파일에서 정의된 내용은 부모 SASS 파일에서도 사용할 수 있다.

// 작성 방법 : @import "파일명.scss" 또는 @import "파일명";
@import "reset";
@import "reset.scss";

참고로 .scss파일을 @import할 경우, .scss 확장자를 써주지 않아도 된다.

Partials

만약 .scss파일 앞에 언더바(_)로 시작하면 CSS파일로 따로 컴파일 되지 않는다. html에서 해당 CSS파일을 불러올일이 없고, @import만 필요한 경우에는 이 기능을 사용하면 된다.

References

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