Front End Developer

[Array] Array.prototype.join()

var myArray = [1, 2, 3];

myArray.join(“+”);

console.log(myArray);

“1+2+3”

join method 는 위 예제와 같이 배열의 요소를

인자로 넘겨준 값으로 배열의 요소를 

연결해주는 method 이다.

var myArray = [‘a’, ‘b’, ‘c’];

myArray.join(1);

console.log(myArray);

“a1b1c1”

배열이 문자 이고 인자값이 숫자 일경우에도

위 예제와 같이 배열의 요소값이 인자값으로

연결된 값이 반환된다.

나같은 경우엔 단순하게 html 을 자바스크립트에서 생성할때

자주 사용하게 된다.

예전에는 html 을 생성할때

var myHTML = “<div>”;

myHTML += “<p>예제입니다.</p>”;

myHTML += “<div>”;

위 예제와 같이 산술 연산자를 이용해서

변수에 추가해서 사용하곤 했다.

어디선가 봤는데 속도면에서 위의 방식보단 

아래 예제의 방식이 빠르다는 것을 보고

아래 예제와 같이 사용하고 있다.

var myHTML = [];

myHTML.push(“div”);

myHTML.push(“<p>예제입니다.</p>”);

myHTML.push(“</div>”);

myHTML.join(“”);

push method 를 이용해서 배열에 추가 해주고

마지막에 join method를 사용해서 배열 안에 값을

연결해주면 원하는 html값을 얻을 수 있다.

[Array] Array.prototype.concat()

var myArray = [1, 2, 3,];

var myArray2 = [4, 5, 6];

var allArray = myArray.concat(myArray2);

console.log(allArray);

[1, 2, 3, 4, 5, 6]

concat method  는 인자값으로 받은 배열을

기존의 배열과 합쳐주는 method 이다.

위 예제와 같이 myArray2를 인자값으로 넘겨주게 되면 

concat method를 호출한 배열 myArray 와 

합쳐진것을 볼수 있다.

당연한 결과지만 다음 형태로 인자값을 넘겨

줘도 하나의 배열로 합쳐 진다.

var myArray = [1, 2, 3];

var allArray = myArray.concat(4, [5, 6]);

[1, 2, 3, 4 , 5, 6]

결과를 보면 첫번째 예제와 같다. 

인자값을 보면 4 와 [5, 6] 을 넘겨 주는데

그냥 생각해보면 왠지 결과 값이

[1, 2, 3, 4, [5, 6]]  처럼 들어 갈꺼 같다는 생각을 

할 수도 있지만 첫번째 예제에서도 변수에 

담았을뿐 인자값은 [4, 5, 6,] 인 것이다.

그러므로 당연한 결과이다.

[Array] Array.prototype.unshift()

unshift method 는 인자값으로 넘어온 값을 배열의 앞부분에

추가해주는 method 이다.

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

myArray.unshift(6, 7, 8);

console.log(myArray);

[6, 7, 8, 1, 2, 3, 4, 5]

위 예제와 같이 배열의 앞부분에 인자값 6, 7, 8 이

추가 된것을 확인 할 수 있다.

[Array] Array.prototype.splice()

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

myArray.splice(0, 2);

console.log(myArray);

[3, 4, 5]

splice method 는 배열값을 추가, 변경, 삭제를

할 수 있는 method 이다.

인자값은 3개 이상을 넘겨 줄수 있다.

- 첫번째 인자는 배열의 위치 값이다.

- 두번째 인자는 삭제, 변경 하고자 하는 갯수를 의미한다.

- 세번째 이 후의 인자값은 배열에 추가, 변경

하고자 하는 요소값이 된다.

위 예제 처럼 인자값을 2개만 쓰게 되면 배열 요소를 삭제 해준다.

인자값을 읽어 보면 0 번째 부터 2개 의 배열 요소를 삭제하겠다.

결과를 보면 0, 1 번째 배열 요소가 삭제된 것을 볼 수 있다.

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

myArray.splice(5, 0, 6);

console.log(myArray);

[1, 2, 3, 4, 5, 6]

이번에는 배열에 요소를 추가해주는 방법이다.

첫번째 인자값은 추가 해주려는 배열 위치가 된다.

두번째 인자값은 위와 같이 첫번째 인자값이 배열의 끝일 경우에는

영향을 주지 않고 중간에 추가 하게 될때 두번째 인자값에

의해서 시작 위치 부터 두번째 인자값까지(갯수만큼) 

세번재 인자값으로 변경되게 된다.

요부분은 다음 예제에서 확인해 보겠다.

세번째 인자는 추가 해주고자 하는 배열 요소값이 된다.

(세번째 인자 이후로 써주는 인자값은 추가 되는 요소들이 된다.)

인자값을 읽어보면 배열 5번째 위치 부터

세번째 인자값 6을 추가 해주겠다 라고 읽을 수 있겠다.

결과를 보면 인자값 6이 추가되어

배열요소가 [1, 2, 3, 4, 5, 6] 이 된 것을 볼 수 있다.

여러개의 요소를 추가 해주려면 

myArray.splice(5, 0, 6, 7, 8);

위와 같이 세번째 인자값 이 후의 인자값을 써주면

여러개의 배열 요소가 추가 된다.

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

myArray.splice(1, 0, 6, 7, 8);

console.log(myArray);

[1, 6, 7, 8, 2, 3, 4, 5]

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

myArray.slice(1, 3, 6, 7, 8);

console.log(myArray);

[1, 6, 7, 8, 5]

위 예제는 배열 요소를 변경해주는 방법이다.

첫번째 예제를 보면 두번째 인자 값이 0인 것을 볼 수 있다. 

두번째 인자값이 0이면 변경해주려는 갯수가 0이기 때문에

결과값 처럼 첫번째 인자값 (즉 배열의 위치) 부터

세번재 이후의 인자값이 배열에

추가 된것을 확인 할 수 있다.

두번째 예제는 두번째 인자값이 3이다.

3개의 배열 요소를 변경 하겠다는 것이다.

인자값을 읽어보면 배열의 1번째 요소에서 부터 3개의 요소를

6, 7, 8 의 값으로 변경하겠다.

그래서 결과를 보면 배열에서 [2, 3, 4] 는 사라지고

배열의 1번째 부터 3개의 요소값이 3번째 이후의

인자값으로 변경된 결과를 확인 할 수 있다.

[Linux] Sublime Text2 설치

Ubuntu 에서 Sublime Text2 를 사용하는 방법

sudo add-apt-repository ppa:webupd8team/sublime-text-2

sudo apt-get update

sudo apt-get install sublime-text-2

해서 설치 하고 나면 Applications > Accessories > Sublime Text2 실행해서 바로 사용할 수 있다.

[RUBY] gem install bundler problem

octopress 설치시에 gem install bundeler 을 하게 되면 

“ERROR: LOADING COMMAND:INSTALL (LOADDEROR) ZLIB” 라고 에러 메시지가 나온다.

내용을 봤을때 zlib 가 없다는거 같은데… 검색해보니

rvm 으로 ruby 를 설치할때 옵션을 주어서 같이 설치를 해야 하는거 같다.

기존에 rvm 으로 ruby 가 설치 되어 있다면

rvm remove 1.9.2

해서 삭제 한후에

rvm install 1.9.2 —with-zlib-dir=$rvm_path/us

로 설치 하고 나서

gem install bundler 

이 정상적으로 진행 된다.

[Array] Array.prototype.sort()

var myArray = [40, 1, 5, 200];

var sortResult1 = myArray.sort();

var sortResult2 = myArray.sort(function(a, b){

return a - b;

});

console.log(sortResult1);

console.log(sortResult2);

[1, 200, 40, 5]

[1, 5, 40, 200]

sort method 는 배열값들을 정렬을 해주는 method 이다.

sort methdo 는 전달인자 없이 호출하게 되면 알파벳 순서로 정렬이된다.

function(a, b){

return a - b;

}

위와 같은 전달인자(*전달인자는 함수만 가능하다*) 통해서 두 인자값을 비교해서 숫자를 오름차순으로 정렬할수 있다.

[Array] Array.prototype.shift()

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

var shiftValue = myArray.shift();

console.log(myArray);

console.log(shiftValue);

[2, 3, 4, 5]

shift method 는 배열에서 첫번째 값을 삭제해주는 기능을 하는 method 이다.

[Array] Array.prototype.reverse()

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

myArray.reverse();

console.log(myArray);

[5, 4, 3, 2, 1]

reverse method 는 배열의 값을 반대로 뒤집어 주는 기능을 하는 method 이다.

[Array] Array.prototype.push()

var myArray = [1, 2, 3, 4];

myArray.push(5);

console.log(myArray);

[1, 2, 3, 4, 5]

push method 는 배열에 인자로 넘겨준 값을 추가 해주는 method 이다.