Front End Developer @j2p-fedev-blog - Tumblr Blog

Posts

[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 이

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

#javascript #Array

[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번째 이후의

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

#javascript #Array

[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 실행해서 바로 사용할 수 있다.

#Linux #Ubuntu #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

이 정상적으로 진행 된다.

#ruby #octopress install

[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;

}

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

#javascript #Array

[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 이다.

#javascript #Array

[Array] Array.prototype.reverse()

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

myArray.reverse();

console.log(myArray);

[5, 4, 3, 2, 1]

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

#javascript #Array

[Array] Array.prototype.push()

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

myArray.push(5);

console.log(myArray);

[1, 2, 3, 4, 5]

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

#javascript #Array

[Array] Array.prototype.pop()

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

myArray.pop();

console.log(myArray);

[1, 2, 3, 4]

pop method 는 배열에서 마지막 값을 삭제 해주는 기능을 하는 method 이다.

#javascrip #Array

[Word] REPL (Read-Eval-Print-Loop)

#word

[Node.JS] NVM 사용하기

nvm은 Node Version Manager 이다.

말 그대로 Node.JS 버전을 따로 관리 해주는 쉘? 프로그래밍? 이라고 해야하나...

그냥 라이브러리? 라고 해야 하나... 어떻게 불러야 할지 그건 잘모르겠다.

암튼 버전이 올라 가거나 혹은 다른 버전을 사용해보고 싶을때

일일이 따로 귀찮게 받아서 사용할 필요 없이 nvm 을 통해서

사용 하고자 하는 Node.JS 버전을 받아서 설치하고 사용할 수 있다.

설치 방법은 github 에서 clone 받아서 사용하면 된다.

1. github clone

git clone git://gigthub.com/creationix/nvm.git ~/.nvm

2. nvm.sh 실행

-[osx]

~/.nvm/nvm.sh

[ubuntu]

. $HOME/.nvm/nvm.sh

설치는 위와 같이 간단하다.

설치가 끝났으면 사용 방법을 알아보자.

명령어는 다음과 같다.

- nvm help

명령어를 보여준다.

- nvm install <version>

선택한 Node.JS 버전을 설치한다.

- nvm use <version>

선택한 Node.JS 버전을 사용한다.

사용하고 하는 버전이 설치 되어 있어야 한다.

nvm use stable

nvm use latest

stable, latest 버전을 사용할 수 도있다.

nvm ls 로 확인 하면 current : <version> 에서 사용하는 버전을 확인 할 수 있다.

- nvm ls

버전 리스트를 보여준다. (인스톨된 버전을 파란색으로 표시된다.)

- nvm ls <version>

버전 리스트에서 선택한 버전을 보여준다.

- nvm deactivate

/Users/jjp5023/.nvm/*/bin removed from $PATH

/Users/jjp5023/.nvm/*share/man removed from $MANPATH

실행 하면 위와 같이 나오는것을 보아

Node.JS PATH 연결을 끊는거 같다.

요것을 실행하고 나면 Node.JS를 바로 사용 할 수 없게 된다.

다시 사용 하려면 nvm use <version> 하면 사용 할 수 있게 된다.

- nvm sync

로컬의 버전 리스트를 업데이트 한다.

Node.JS 버전이 업데이트 되면 요것을 실행해주면

로컬에 버전 리스트에 새로운 버전이 나타난다.

- nvm alias [<pattern>]

alias 설정한 것을 보여준다. pattern 값으로 검색해서 보여줄수도 있다.

- nvm alias <name><version>

선택한 버전을 원하는 이름으로 alias 걸어 주는 명령어 이다.

nvm ls 에서 확인 할 수 있다.

nvm use <name> 하면 alias 한 이름으로 간단하게 원하는 버전을 사용 할 수있다.

#nodejs #nvm

[etc.] MACVIM 설치

* homebrew로 설치

brew install macvim

설치가 끝나면 다음과 같은 안내 문구를 보여준다.

MacVim.app installed to:

/usr/local/Cellar/macvim/7.3-61

To link the application to a normal Mac OS X location

brew linkapps

ln -s /usr/local/Cellar/macvim/7.3-61/MacVim.app /Applications

위 내용은 Applications 에 심볼릭 링크를 추가해서 mvim을 Applications에서

실행 할수 있게 해주는 것이다.

*macports로 설치

sudo port install MacVim

MACVIM 의 colorscheme를 바꿔주기 위해서 파일을 넣어주는 경로는

/usr/local/Cellar/macvim/7.3-61/Macvim.app/Contents/Resources/vim/runtime/colors

Vim 의 colorscheme를 바꿔줄려면

/usr/share/vim/vim73/colors

인줄 알았다...

간편하게 계정 디렉토리에 .vim 디렉토리 안에 colors 디렉토리를 생성해서

파일을 넣어주면 MACVIM, Vim 다 설정된다. plugin, syntax 등

.vim 디렉토리 안에 넣어주면 된다. 설절은 계정 디렉토리 안에 .vimrc에

설정하면 된다. 이것 파일도 없으면 만들어서 사용하면된다.

디레

#mvim #vim

[CSS] webkit hack?

마크업 작업을 하다 보면 가끔 webkit만 다르게 보일때가 있다.

이런 경우 css 에서 처리 해줄수 있는 hack 이 없을까 하다가

검색해서 나온것이 media query를 이용한 것이였다.

사용 방법은 다음과 같다.

- 직접 CSS 파일에 입력할 경우

@media screen and(-webkit-min-device-pixel-ratio:0){

/* 이곳에 webkit용 CSS 를 작성하면 됩니다. */

}

- CSS 파일을 따로 만들어서 include 시킬 경우

#css

[Word] IaaS (Infrastructure as a Service)

- 컴퓨터 시스템 HW 자원 (CPU, Disk 등)

- IaaS는 서버 인프라를 서비스로 제공 하는 것으로

저장 장치(storage) 또는 컴퓨팅 능력(compute)을

인터넷을 통해 제공하는 서비스이다.

#word

[Word] PaaS (Platform as a Service)

- SW 개발 환경을 서비스로 제공

- PaaS는 사용자가 소프트웨어를 개발 할 수 있는

환경을 제공해 주는 서비스이다.

컴파일 언어, 웹 프로그램, 제작툴 등을 포함하며,

개발자들은 플랫폼 상에서 제공되는

자원을 활용하여 새로운 어플리케이션을 만들어 사용할 수 있다.

#word

Trending Blogs

Recently Viewed Blogs

Front End Developer