아는만큼 보여요

모듈이란 메서드와 속성을 미리 정의해 놓은 것을 말합니다. 

모듈에는 기본 내장모듈과 외부 웹모듈이 있는데 외부 웹 모듈은 npm을 기반으로 아주 쉽게 사용할 수 있습니다.

우리는 이 모듈을 잘 활용하면 많은 기능을 쉽게 사용할 수 있습니다.

이에 관한 내용을 다음에 다루기로 하고 모듈을 생성하고 추출해 사용하는 방법에 대해 설명하겠습니다.

일단 모듈파일과 모듈파일을 사용할 파일을 생성합니다.

모듈파일을 먼저 작성하겠습니다.

모듈을 생성할 때는 exprots 객체를 사용합니다.

exports객체에 속성이나 메서드를 지정합니다.

다음으로 생성한 모듈 파일을 추출해 모듈에 속한 메서드를 사용해 보겠습니다.

추출에는 require()함수를 사용합니다.

다음과 같이 잘 출력되는걸 확인 할 수 있다.

일단 간단한 웹서버를 만들어 보면서 nodejs가 이런거구나 맛만보고 넘어 가겠습니다.

자세한 내용들은 뒤에 다루도록 하겠습니다.

그럼 자바스트립트 파일을 생성하고 다음과 같이 입력 합니다.

이렇게 입력후 터니널 창을 열고 해당 파일이 있는 폴더로 이동후 생성한 파일을 실행합니다.

실행 방법은 다음과 같습니다.

node 파일이름.js

그러면 다음과 같이 서버가 실행될 것 입니다.

브라우저를 열고 설정한 포트번호로 접속해 봅니다.

자세한 내용들은 점차 다루도록 하겠습니다.

자바스크립트의 유효범위는 기존 블록 유효범위와 다르다

유효 범위가 블록 안에 존재 하지 않고 함수 안에 존재 한다.

무슨말인지 잘 이해가 안갈수도 있는데 예를 보면서 설명해 보겠다.

보통 다른 언어를 생각한다면 if문안이니까 지역변수로 222가 저장되고

전역변수는 변화가 없다고 생각하지만 test변수값에는 222가 설정되었다.

다음 코드를 보자

위와 같이 함수안에 설정된 변수는 지역변수로 설정되고 출력값은 처음 설정한 111로 동일하다.

정리해 보면 자바스크립트는 유효범위가 블록(if, while, for ....)안에 존재하지 않고 함수안에 존재한다.

자바스트립트에서 함수 오버로딩 기능을 직접 제공하지 않지만 오버로딩을 가능하게 하는 방법이 있다.

일단 함수 오버로딩을 하려면 두가지 정보가 필요하다.

전달인자의 개수와 전달인자 타입을 알아야 한다.

우선 전달 인자의 개수로 오버로딩 하는 방법을 알아보자

arguments 변수를 활용하여 오버로딩을 할 수 있다.

arguments는 자바스트립트의 모든 함수 내부에 함수로 전달되는 모든 전달인자를 담은 배열같이 작동하는 변수다.

위와 같이 간단한 함수를 만들고 인자값을 전달하면 전달된 인자값이 출력되는걸 확인할 수 있다.

이제 어떻게 오버로딩 할지 감이 잡힐 겁니다.

간단한 예로 설명하겠습니다.

이렇게 arguments를 활용하여 전달인자 개수에 따라 구분해 줍니다.

다음으로 전달인자가 없을때 기본메시지를 출력하는 방법을 알아보겠습니다.

이때는 전달인자가 전달되지 않았을때 undefined라는 값을 이용합니다.

위와 같이 전달인자가 없을때 undefined를 활용하면 된다.

https://github.com/phonegap/phonegap-plugins

왠만한 phonegap plugin은 다 여기있다고 보시면 됩니다.

문자열의 일부만 잘라 사용할 경우가 있다.

예제를 보면서 바로 해보자

var string='2013-06-11';

위 문자열을 잘라보겠다.

문자열에 있는 '-'를 기준으로 자를려면 다시 만하면 특정 문자를 기준으로 문자열을 자를려면 split을 사용하면 된다.

var strArray=string.split('-');

이렇게 split함수에 잘라내는데 기준이 될 문자열을 넣으로 문자열을 잘라 배열로 넘겨준다.

console.log(strArray[0]+', '+strArray[1]+', '+strArray[2]); 출력해보면 각 배열에 2013, 06, 11이 담겨진걸 확인 할 수 있다.

다음으로 문자열에서 기준없이 사용하고 싶은 문자열만 골라 가져오고 싶다면

substring함수를 사용하면 된다.

substring함수는 문자열의 길이를 기준으로 자른다고 표현하기보다 일정 문자열을 반환한다.

substring(시작인덱스, 종료인덱스);

var year=string.substring(0,4) //2013

var month=string.substring(5,7) //06

var day=string.substring(8,10) //11

출력해 보면 원하는 값이 잘 출력될 것이다.

위와 비슷하지만 조금 다른 함수 substr이 있다.

substr(시작인덱스, 길이)

var year=string.substr(0,4) //2013

var month=string.substr(5,2) //06

var day=string.substr(8,2) //11

출력해보면 substring과 출력 결과가 같다

http://liquidslider.com/

http://www.benplum.com/formstone/boxer

http://stereobit.github.io/dragend/

다양한 색깔의 버튼을 만드는 방법도 scss파일을 사용하여 만듭니다.

이 scss파일을 다루는 방법을 조금만 익히면 sench touch잡업하는데 많은 도움이 될 것입니다.

간단한 코드 몇줄로 전체 theme을 수정하고 설정할 수 있습니다.

이 부분은 다음에 알아보기로 하고 오늘은 다양한 색깔의 button을 만드는 방법을 알아보겠습니다.

scss파일을 열고 아래와 같이 추가해 봅니다.

첫번째는 사용할 이름을 설정합니다. 여기서는 black이란 이름으로 설정했습니다.

두번째는 버튼의 color를 설정합니다.

세번째는 버튼의 효과를 설정합니다.

효과로는 bevel, glossy, matte, flat이 있습니다.

bevel

glossy

matte

flat

다음과 같이 추가한 후 scss파일을 컴파일 합니다.

컴파일 방법은 

터미널 창에서 sass폴더로 경로를 이동힙니다.

이동방법을 모르면 cd를 입력후 해당 폴더를 터미널 창에 끌어다 놓습니다.

그리고 compass compile <scss파일이름>을 입력해 컴파일 합니다.

컴파일이 끝나고

view class에서 다음과 같이 ui에 scss에서 설정한 이름을 넣어 사용합니다.