NOTICE 
Software Development/Web일반 에 해당하는 글 : 4 개
2014.05.02 :: node.js




  

Modernizr는 무엇인가?


Modernizr는 HTML5와 CSS3의 특성을 브라우저가 지원하는지의 여부를 알아내는 아주 작은 JavaScript 라이브러리이다.


http://modernizr.com/


웹 프로그래밍을 하면서 수많은 브라우저에 대해서 호환성을 확인하면서 작성하는 것은 매우 귀찮고 번거로운 일이다. 또한 이를 완벽하게 하기도 쉽지 않을 뿐더러 실수 할 가능성도 크다. 어떻게 하면 이를 간단하게 할 수 있을까?

답부터 말하자면 바로 Modernizr를 사용하는 것이다.^^


다운로드 받기


Modernizr은 이곳(http://modernizr.com/download/)에서 다운로드 할 수 있다. 다운로드 페이지에 들어가면 자신이 체크하고자 하는 CSS3, HTML5의 특성들이 리스트되어 있다. 여기에서 체크가 필요한 항목을 선택한 다음, 리스트 하단의 'GENERATE!' 버튼을 클릭하면 Modernizr JavaScript 파일이 만들어 진다. 그러면 'DOWNLOAD' 버튼이 활성화되는데 이를 클릭해서 다운로드받을 수 있다.


잘 모르겠으면 개발 버전을 받을 수 있는데, 이 안에는 Modernizr의 모든 체크가 들어가지만 압축되어 있지 않아 용량아 좀  편이다.(2.8.3 버전의 경우 42Kb)


사용하기


Modernizr를 사용하는 것은 매우 간단하다.

먼저 다음과 같이 head 태그 안에 다운받은 Modernizr JavaScript 파일을 지정한 script 태그를 추가한다.


<!DOCTYPE HTML>

<html>

<head>

  <title>Modernizr 테스트</title>

  <script src="modernizr.js"></script>

</head>

<body>

 ...

</body>

</html>


이렇게 지정해 놓으면 페이지가 브라우저에서 로딩될 때 Modernizr이 브라우저의 특성을 체크해서 JavaScript Object를 만들어 놓는다..


이렇게 만들어진 JavsScript Object를 이용해서 브라우저의 HTML5와 CSS3의 특성을 지원하는지를 확인할 수 있는데, 이를 활용하는 방법은 다음과 같다.


먼저 CSS 구문을 사용하는 방법이다.

.rgba div {

   알파 색상을 지원하는 브라우저의 경우 지정할 스타일들을 여기에 작성한다.

}

.no-rgba div {

  알파 색상을 지원하지 않는 브라우저의 경우 지정할 스타일들을 여기에 작성한다.

}


JavaScript를 사용하는 방법은 다음과 같다.

if(Modernizr.rgba) {

  알파 색상을 지원하는 브라우저의 경우 실행할 스크립트를 여기에 작성한다.

} else {

  알파 색상을 지원하지 않는 브라우저의 경우 실행할 스크립트를 여기에 작성한다. 

}


위와 같이 특성의 지언 여부에 따라 쉽게 분기 처리가 가능하다.  이런 체크를 일일이 한다고 생각하면 정말이지 하늘이 노래진다. Modernizr를 작성한 팀에게 정말이지 감사를 표하는 바이다. 복 받으실 꺼에요.


Modernizr는 사실 더 많은 기능을 제공하지만 설명은 여기까지만~


Modernizr의 사용법을 익히는 약간의 노력과 시간을 들인다면 어느 브라우저에서도 깨지지 않고 잘 보이고 동작하는 웹 어플리케이션을 작성할 수 있을 것이다.



  
트랙백   |  댓글   |




  

JQuery를 사용하여 현재 체크된 아이템 값을 가져오는 방법 / 값을 세팅하는 방법

아래와 같은 폼이 있다고 할 때



<form id="myform">

...

<input type="radio" name="myradio" value="myvalue1">One

<input type="radio" name="myradio" value="myvalue2">Two


...

</form>




현재 선택된 아이템의 값을 가져오는 방법


var selected = $('#myform input:radio[name=myradio]:checked').val();



특정 아이템에 값을 세팅하는 방법

가령 첫번째 아이템을 선택하고자 한다면 아래와 같이 하면 된다.


$('#myform input:radio[name=myradio]:input[value=myvalue1]').attr('checked',true);



위의 jQuery를 사용한 코드를 보면 알 수 있듯이 라디오 버튼을 액세스하기 위해선 라디오 버튼의 이름을 사용하고, check속성을 가지고 선택상태인지 아닌지를 알 수 있다.


'Software Development > Web일반' 카테고리의 다른 글

Modernizr 사용하기  (0) 2015.07.20
node.js  (0) 2014.05.02
JavaScript에서 객체(Object)만들기  (0) 2014.05.02
  
트랙백   |  댓글   |




  




Node.js


node.js는 간단히 말하면 서버사이드 자바스크립트이다.

즉 node.js로 서버사이드에서 프로그래밍이 가능하다.


node.js는 크롬 웹브라우저의 JavaScript runtime 엔진을 기반으로 만들어졌으며, 쉽게 빠르고 확장이 용이한 네트워크 어플리케이션을 만들기 위한 플랫폼이다. node.js는 분산 디바이스 환경에서 실행되는 가볍고 효율적이며 데이터 중심의 실시간 어플리케이션에 알맞은 이벤트 드리븐, 넌블러킹 I/O 모델을 사용한다.

공식 사이트 : nodejs.org



node.js는 라이언 달(Ryan Dahl)이 만들기 시작하여 현재는 오픈소스 프로젝트로 많은 개발자들이 참여하고 있다.


node.js의 특징

싱글 스레드 기반

이벤트 루프를 사용하는 비동기 I/O

자바스크립트 언어 사용


설치는 nodejs.org에서 제공하는 설치본을 이용하면 된다. 리눅스의 경우 소스코드를 다운로드하여 컴파일하거나 데비안 계열이라면 apt-get으로 설치할 수 있다. 설치에 대한 내용은 하단에 있는 참고자료를 참고할 것.


설치된 node.js의 버전 확인하기


$ node --version

v0.10.27




node.js맛보기


(1)콘솔 테스트


아래와 같은 내용의 helloworld.js를 만든다.


console.log('Hello World');


콘솔에서 다음과 같이 입력하여 실행시킨다.


$ node helloworld.js


콘솔에 "Hello World"가 출력된 것을 확인할 수 있다.


(2)웹서버 테스트


helloworld보다 본격적인 예제를 하나 더 해보자. 클라이언트로 부터 요청이 오면 "Hello World"로 응답하는 간단한 웹서버 예제이다.

아래와 같은 내용의 server.js를 만든다.


var server = require('http');


server.createServer(function(req, res) {

res.writeHead(200, {'Content-Type' : 'text/plain'});

res.end('Hello World\n');

}).listen(3000);


console.log('서버가 3000포트로 시작되었습니다');


소스의 내용은...

먼저 웹서버를 사용하기 위해 http모듈을 로드한다.

그리고 서버를 시작시키기 위해 server.createServer함수를 호출하는데 이때 요청이 왔을 때 호출되는 콜백함수를 지정한다.

콜백함수의 첫번째 인자는 http 요청 객체, 두번째 인자는 http 응답 객체이다.

콜백함수에서는 응답 헤더의 contents type을 text/plain으로 지정하고, 응답내용으로 Hello World를 지정한다.


이것으로 http요청을 처리할 수 있는 웹서버가 작성되었다.


서버를 실행해 보자.


$ node server.js


실행된 어플리케이션이 종료되지 않는 것을 알 수 있다.

이제 웹브라우저에서 로컬 머신의 3000번 포트로 접속해 보면 웹브라우저에 Hello World가 출력되는 것을 확인할 수 있다.



간단하지 않은가?



Coding Style


아래의 참고자료에서 소개한 nodeguide.com에 있는 가이드 중, 코딩 스타일에 관한 가이드의 내용 중 일부를 정리했다.


(1) Tabs vs Spaces

탭 대신 2개의 스페이스를 사용한다.


(2) Semicolons

세미콜론을 꼭 사용한다.

(3) Editors

어떤 에디터 프로그램을 사용해도 되지만 JavaScript Syntax highlighting이나 현재 열려있는 node.js 파일의 실행기능을 가진 에디터를 사용하면 편리하다. 


(4) Trailing whitespace

소스를 저장소에 커밋하기 전에 불필요한 공백을 제거하자. 이건 예의 아닌가?


(5) Line length

한 줄을 80자로 제한하자.


(6) Quotes

문자열을 사용할 때 쌍따옴표 보다는 한따옴표를 사용하자.

ex)

var foo = 'bar';    <- 한따옴표를 사용하자.


(7) Braces

괄호를 열 때는 동일 라인에서 열자.

ex)

if (true) {    <- 밑으로 내리지 말자!

  ...

}


(8) Variable declarations

하나의 var에 하나의 변수를 선언하자.

ex) 

var keys = ['foo', 'bar'];

var values = [23, 42];

var sum;


(9) Variable and property names

"lower camel case"를 사용하자. 즉, 소문자로 시작하고, 단어와 단어사이의 첫문자를 대문자로 사용한다.

ex)

lastYearProfit


(10) Class names

"upper camel case"를 사용하자. 즉, 대문자로 시작하고, 단어와 단어사이의 첫문자를 대문자로 사용한다.

ex)

BankAccount


(11) Constants

상수는 모든 문자를 대문자로 사용한다.

ex)

var SECOND = 1 * 1000;


(12) Object / Array creation

객체나 배열을 선언할 때 콤마는 동일라인을 사용한다. 


(13) Equality operator

Triple equality('===')를 사용하자.

이 연산자는 '=='와는 달리 타입과 값 모두 동일한지 체크한다.

※ '=='연산자는 타입이 다르더라도 값이 같으면 같다고 판단한다.


(14) Extending prototypes

JavaScript의 프로토타입 확장을 사용하지 말자.

※프로토타입 확장은 Class가 존재하지 않는 JavaScript에서 객체를 확장하기 위해 사용하는 방법이다.


(15) Conditions

사소하지 않은 조건문은 알기 쉬운 이름의 변수를 사용한다.

ex)

var isAutorized = (user.isAdmin() || user.isModerator());

if(isAutorized) {

  ...

}


(16) Function length

함수는 되도록 짧게 만들어야 한다.


(17) Return statements

중첩 if문 사용을 자제하고, 항상 가능한한 빨리 리턴한다.

ex)

if(val < 0) {

return false;

}


if(val > 100) {

return false;

}


return true;

}


(18) Named closured

클로저란 생성한 함수의 반환값을 그대로 변수처럼 사용하는 것이다. (자바스크립트에서 함수는 곧 객체이므로)

클로저를 사용할 때 이름을 지정하는 것에 대해 부담을 갖지 마라. stack trace할 때 편하다.

ex)

req.on('end', function onEnd() {        <--- onEnd라고 클로저에 이름을 지정하고 있다.

console.log('winning');

}


(19) Callbacks

node.js는 넌블러킹 I/O를 사용하므로 함수는 일반적으로 결과를 콜백함수에 전달한다. 관습적으로 node core는 콜백함수의 첫번째 인자에는 에러 객체 위해 사용한다. 사용자가 만드는 콜백 함수도 동일한 어프로치를 할 것. 


(20) Object.freeze, Object.preventExtensions, Object.seal, with, eval

사용하지 말 것.


(21) Getters and setters

setter를 사용하지 말 것. setter는 당신의 소프트에어를 사용하려는 사람들에게 문제를 일으킬 수 있다.

getter는 사용하는데 부담을 갖지 말 것.


(22) EventEmitters

node.js는 EventEmitter라는 클래스를 가지고 있다. node.js에서 이벤트를 처리하는 클래스를 만들 때 EventEmitter를 상속하여 만든다. 그러나 사용자가 만든 객체로 부터의 이벤트를 자신이 리슨하는 것은 하지 않기를 권장한다.



참고자료


nodeguide.com사이트에는 Felix Geisendorfer라는 분이 node.js를 배우려는 사람들을 위한 가이드를 정리해 놓으셨다.

이곳에는 node.js의 설치부터 시작해서 Hello World예제, 디버깅 방법, 배포, 코딩 스타일 등 여러가지 가이드들이 있다.

node.js를 배우려는 사람에게는 매우 유용한 곳이다.








  
트랙백   |  댓글   |




  

JavaScript에서 객체를 생성하는 방법은 몇가지 있다고 하는데 가장 일반적인 방법인 함수를 이용하는 방법이다.



function Abc(a, b, c) {

this.a = a;

this.b = b;

this.c = c;


this.Sum = function() {

alert("a+b+c = " + (a+b+c));

};

}


객체를 만들기 위해서 함수를 사용하는 이유는 사실 함수를 객체이기 때문이다.

일반적인 함수와 다른점은 객체 자신을 나타내는 this키워드를 사용해서 속성이나 메서드를 선언한다는 점이다. 

(변수 선언에는 var키워드를 사용한다)


위의 예에서는 Abc객체의 a,b,c 속성과 Sum메서드를 정의하였다.


객체를 생성하고 사용하는 방법은 아래와 같다.


var abc = new Abc(1,2,3);

alert(abc.a);

abc.Sum();


new키워드를 사용해서 객체를 생성하고 나서 속성이나 메서드를 사용한다.

위의 예에서는 a속성을 참조하고, Sum메서드를 호출하고 있다.




















'Software Development > Web일반' 카테고리의 다른 글

Modernizr 사용하기  (0) 2015.07.20
jQuery로 radio의 체크된 아이템 값 가져오기, 값 세팅하기  (0) 2014.07.10
node.js  (0) 2014.05.02
  
트랙백   |  댓글   |
 이전  1   다음 

최근댓글
최근트랙백
fotowall :: ncloud RSS Feeds today :    yesterday :
total :