자바스크립트는 참 편리한 스크립트 언어이지만 다른 한편으로는 이해하기 힘든 녀석이기도 합니다. 이유인 즉선 너무 유연하게 사용할 수 있다보니 가끔 일반적인 언어, 컴퓨터 상식으로는 "왜 이렇게 동작하지?" 하는 경우들이 있기 때문입니다. 가장 대표적인 것이 조건 비교문을 이용하여 변수나 객체를 비교할때 입니다. 잘 동작할 것으로 생각했던 구문들이 정상적인 동작을 하지 않거나 예상치 못한 반응을 한다면 혹시 아래 표에 나온 경우중 하나가 아닌지 잘 살펴봐야 합니다. 아래 표는 http://dorey.github.io/JavaScript-Equality-Table/ 에서 업어왔습니다

 
Boolean 값인 True 와 1은 같은 값일까요? 그리고 True 와 "1"은 같은 값일까요? 조금 더 나아가 True 와 [1] 을 비교하면 어떻게 될까요? 두개의 이퀄 연산자(==)를 사용하여 자바스크립트에서 값을 비교하는 경우 위의 표에서 초록색으로 표시된 것처럼 결과가 리턴된다고 합니다. "" 와 0 이 같다는 생각을 해보셨나요? 혹은 "" 와 [[]] 가 같은 값으로 식별된다는 상상을 누가 해봤을까요? 

때문에 자바스크립트에서는 각 객체와 객체를 비교했을 때 값을 정확하게 예측하기 힘들다면 이퀄 연산자를 두개 이어쓰는 대신 세개(===)를 쓰는 것이 좋습니다. 세개의 이퀄 연산자를 사용하는 경우 엄격한 규칙에 의거하여 값을 비교하게 되고 이로 인한 조건 비교문의 오동작을 효과적으로 막을 수 있습니다. 세개의 연산자에 대한 부정형은 !== 이니 참고하시면 될 것 같습니다


훨씬 상식(?)에 가까운 결과를 보실 수 있습니다. 같은 형태의 자료형들간에 비교를 했을때 정확한 값이 나오는 것을 볼 수 있습니다. 자바스크립트를 쓰면서 뭔가 이해할 수 없는 동작이 발생하고 있다면 표를 참고하시고 연산자를 바꿔보는 것을 검토해 보세요. 우리의 시간은 소중하니까요. :-)

 

저작자 표시
신고
Posted by 노피디
Development2013.12.26 15:23
웹의 세상이 되면서 웹 개발자들이 각광받는 시대입니다. 서버사이드 개발을 하던 프론트엔드 개발을 하던 웹 개발은 이제 어느 회사에서도 없어서는 안되는 중요한 역할을 해내고 있습니다. 그런데 웹을 그냥 하는 것과 웹을 잘 하는 것은 분명 차이가 있을 것 같습니다. 고작 10년여의 경력인지라 모르는 것들이 정말 많고 계속 변하는 웹 관련 기술에 혀를 내두를 지경이지만 결국 기본이 탄탄하다면 두려울(?)것이 없다는 생각을 늘 하고 있습니다.

웹을 이해하기 위해서는 웹을 소화하는 주요 주체인 브라우저에 대해서 잘 이해할 필요가 있습니다. 내가 만든 자바스크립트가 브라우저에게 어떤 영향을 줄 것인지? 내가 만든 서버사이드 스크립트 메서드 한개가 사용자에게 어떤 경험을 주게 될지를 고민하는 것이 필요하다는 이야기입니다. 브라우저가 행하는 기본적인 동작을 이해하는 것에서 웹 튜닝이나 웹 가속에 대한 논의가 시작될 수 있을 것 같습니다.

사진 출처 : www.internetretailer.com


웹은 서버가 내려주는 HTML 을 읽고 사용자에게 표현하는 역할을 합니다. 브라우저는 HTML 의 여러가지 구성요소를 어떻게 해석하고 받아들이고 이해한 내용을 표현하는 것일까요? 렌더링 단계(화면에 컨텐츠를 보여주는 단계) 이전에 일어나는 일들과 하지 않아야 하는 것들을 간략하게 설명한 동영상이 있어서 소개해 봅니다. 브라우저의 동작을 이해하기 위해서 TCP 도 잘 알아야 하지만 일단은 그렇구나~ 하고 넘어가면 좋을 것 같습니다!


- NoPD -


 
저작자 표시
신고
Posted by 노피디
HTTP 2.02013.12.10 15:54
팀 버너스리경이 인터넷에 엑세스 하는 방법의 하나로 월드 와이드 웹(World Wide Web)을 주창한 이래 웹은 이제 인터넷의 핵심이 되었습니다. 일상에서 일어나는 정말 많은 네트워크 연결은 인터넷을 통해서 일어나고 있습니다. 트위터에서 새로운 소식을 듣고 페이스북에 친구들과 사진을 공유하는 것 뿐만 아니라 부모님과 영상통화를 하고 동영상으로 인기있는 TV 프로그램을 보는 것도 모두 인터넷을 통해 이루어지고 있습니다.

그런데, 이런 인터넷의 폭발적인 사용을 뒷받침 해주고 있는 HTTP 프로토콜(Hyper Text Transfer Protocol)은 그다지 효과적인 프로토콜이 아닙니다. HTTP 의 첫 버전이었던 HTTP/1.0 은 단순히 서버와 사용자간에 하나의 연결만을 맺어주는 수준이었고 단일 서버에서 복수의 가상 웹 사이트를 운영할 수 있는 기능도 없었습니다. 이러한 단점을 개선한 HTTP/1.1 은 동시에 여러개의 연결을 맺을 수 있고 가상 호스트에 대한 지원이 가능해졌지만 너무 단순하게 만들어진 나머지 효율적인 웹 트랜잭션의 처리를 위해서는 추가적인 많은 작업들을 해주어야 했습니다

출처 : The Telegraph (http://goo.gl/gVQw3)



시간이 흘러 바야흐로 21세기로 접어들면서 인터넷은 이제 단순히 컴퓨터를 위한 기술이 아니라 수많은 스마트 기기들과 사물들까지 연결하는 하이퍼커넥티드(Hyper Connected) 세상을 만들어 가고 있습니다. 사물인터넷(IoT, Internet of Things)이라는 용어는 그런 네트웍의 복잡성과 연결된 기기의 수를 이야기 해주고 있고 빅 데이터(Big Data)는 이런 네트웍을 통해서 발생되고 있는 데이터의 규모를 발해주는 대표적인 단어들입니다

우리가 웹을 통해 요청을 하나 만들때 마다(HTTP Request) 전력이 소모되고 있다는 사실을 인지해 본 적이 있나요? 불필요한 트랜잭션 처리를 위해서 서버와 클라이언트의 브라우저 혹은 스마트 기기에서 동작하는 앱이 전기 혹은 베터리를 소모하고 있다는 생각을 해본적 있나요? 더 많은 기기들(스마트폰, 패드, 컴퓨터, 센서 등)이 더 많은 방법으로(브라우저, 스크립트, 앱 등) 인터넷에 연결되고 있는 작금의 트래픽 폭발을 효율적으로 조정하고 더 빠른 사용자 속도를 제공하는 것에 대한 고민에서 HTTP/2.0 은 출발했습니다.

구글이 추진하고 있는 SPDY 와 이를 근간으로 마이크로소프트가 SPDY 혹은 Web Socket 기반으로 준비중인 Microsoft S+M 은 HTTP/2.0 의 기본 골격이 되어 결국 최종적으로 만들어질 표준에 전체 혹은 일부가 녹아들어갈 것입니다. 이들의 노력으로 만들어지고 있는 HTTP/2.0 은 앞으로 우리의 인터넷, 웹웹을 어떻게 바꿔 나갈까요? IETF 에서 공개한 프로토콜 Draft (http://tools.ietf.org/html/draft-ietf-httpbis-http2-04) 를 바탕으로 어떤것들이 바뀌고 어떤 변화가 생길 것인지를 하나씩 알아보도록 하겠습니다.

- NoPD -
저작자 표시
신고
Posted by 노피디
웹 사이트 혹은 웹 서비스를 글로벌 사용자들을 대상으로 제공하고자 할 때 가장 걸리는 것이 바로 속도문제입니다. 내 서버가 어디에 위치하고 있느냐에 따라 엔드유저가 접근하는 시간이 달라질 수 밖에 없기 때문입니다. 아마존과 같은 클라우드 인프라 서비스는 세계 여러곳에 지역(Region) 센터를 두고 있어 이런 문제점을 어느정도 해결할 수 있게 해주고 돈을 조금 들인다면 아카마이와 같은 CDN 서비스를 통해 손쉽게 웹 트레픽의 속도를 보장할 수 있습니다.

그렇지만 개인 개발자라던가 아직 서비스에 대한 클라우드 인프라 투자, CDN 전송망의 사용이 힘든 상황이라면 얘기가 조금 다릅니다. 이런 경우라면 최대한 웹 사이트를 최적화하여 HTTP 세션이 맺어지는 불가피한 오버헤드를 제외한 나머지 웹 컨텐츠, 오브젝트에 대해서는 최대한 최적화를 하는 것이 필요합니다. 그런데 최적화를 하려면 현재 상태를 알아야 합니다. 도대체 미국, 프랑스, 영국, 호주 등 외국에서 내 웹사이트에 접근했을 때 속도는 어떻게 측정해야 할까요?

 
해외로도 발이 아주 넓어 각지에 친구가 있는 경우라면 웹 사이트 접속해보면서 시간을 재달라고 하면 되겠지만 현실적으로 그러기는 너무 힘이들죠. 이런 노고를 위해 착한 사람들이 만든 착한 웹 사이트, 웹페이지 테스트(http://www.webpagetest.org)를 이용하면 어렵지 않게 세계 각지에서의 속도 측정을 할 수 있습니다.

여러가지 심도있는 테스트는 Advanced Settings 를 통해서 할 수 있습니다만 간단하게 URL 을 입력하고 테스트 지역을 선택하는 것 만으로도 기본적인 데이터를 모두 뽑아볼 수 있습니다. 브라우저 User-Agent 값을 변경시켜 가면서 웹 사이트를 테스트 할 수 있는 기능도 제공되기 때문에 여러가지로 유용한 서비스라 하겠습니다. 어차피 HTTP Request / Response 로 분석을 해주는 서비스이기 때문에 우리가 흔히 아는 웹 사이트를 가지고 속도 테스트를 해봐도 상관 없습니다.  트위터를 가지고 한번 해보니 아래와 같은 결과가 나오네요. 지역은 브라질 상파울로를 선택하고 브라우저는 크롬을 가지고 테스트 요청을 했습니다.


상세 화면으로 들어가면 파이어버그나 크롬 웹 개발자 도구를 이용하는 것과 같은 뷰를 볼 수 있습니다. 상세한 내용은 직접 보시면서 확인하면 될 것 같구요, 처음 테스트 결과가 나오는 화면에서 두번의 테스트를 하는 이유를... 혹시 아시나요? 아신다면 그대는 웹 사이트 튜닝 세계로 들어올 준비가 된 것입니다 ^^ 정답은 댓글로 물어보시면 답변해 드리는 것으로...

웹 페이지 성능 측정 서비스, WebpageTest 방문하기 [바로가기


- NoPD - 
저작자 표시
신고
Posted by 노피디
Development/node.js2013.07.16 09:06
Node.js 가 등장한 이후 간단히 테스트 목적의 웹 서버를 만드는 일이 손쉬워졌습니다. 단순한 Static 컨텐츠의 노출이 아닌 이상 닷넷을 이용하던 자바를 이용하던 뭔가 무거운 개발도구를 실행하고 코드 몇 줄을 넣은 후 컴파일 해야 했다면 Node.js 는 그런 번거로움과 불필요함을 한방에 날려주고 있습니다.

새롭게 옮긴 직장에서 고객사의 PUT Request 에 대한 처리를 해야 할 일이 생겼는데 고객사의 API 에 대고 신나게 테스트를 할 수 있는 것도 아니고 해서 간단하게 가상머신에 Node.js 와 Express 모듈을 이용하여 RESTful API (..라고 적었지만 그냥 PUT Request 를 처리하는...) 를 만들어 봤습니다. 혹시나 RESTful API 의 CRUD 액션을 간단히 구현할 필요가 있으신 분들 참고하시라고 올려둡니다. Node.js 와 Express 모듈을 설치하신 뒤 소스코드를 참고해서 보시면 됩니다. REST 호출 이외에도 처리를 위해 Jade 모듈도 설치후 설정이 들어가 있는데요, 이 부분은 필요하신 경우 선택적으로 쓰시면 되겠습니다.

(참고로 현재 시점에서의 Node.js 와 Express 최신 버전을 따르고 있기 때문에 보시는 시점에 따라 해당 엔진과 모듈의 행동양태가 변경되면 동작하지 않을 수도 있습니다 ^^;;)

// express_server.js
var express = require('express');
var app = express();

app.configure(function() {
	app.set('views', __dirname + '/views');
	app.set('view options', { layout: false });
	app.use(express.methodOverride());
	app.use(express.bodyParser());
	app.use(app.router);
	app.use(express.static(__dirname + '/public'));
	console.log('configure successful...');
	console.log('view directory is ' + __dirname + '/views');
	console.log('static directory is ' + __dirname + '/public');
});

app.get('/hello', function(req, res) {
	res.render('index.jade', {
			message:'hello world'
	});
});

// TYPE 1 (RESTful) : call "/puttest/3"
app.put('/puttest/:id', function(req, res) {
	res.send('received id :' + req.params.id);
});

// TYPE 2 (Traditional) : call "/puttest" with body parameter "id=9" then
app.put('/puttest', function(req, res) {
	res.send('received id :' + req.body.id);
});

app.configure('production', function() {
	app.use(express.logger());
	app.use(express.errorHandler());
});

app.configure('development', function() {
	app.use(express.errorHandler({ dumpExceptions: true, showStack: true }));
});

app.listen(81);

위의 소스코드에서 사용한 Jade 템플릿은 아래와 같이 간단하게 되어 있습니다. 그냥 그렇구나 하시면 될 것 같습니다.
// Jade 렌더링 테스트용 : /views/index.jade
#{message}

[ Node.js 의 기초를 위한 추천 도서 ]
인기 저자 윤인성 작가의  "모던 웹을 위한 Node.js 프로그래밍" [자세히보기]


- NoPD -
저작자 표시
신고
Posted by 노피디
Development2010.12.20 14:23
트위터를 보고 있으면 정말 주옥같은 트윗들이 참 많이 올라옵니다. 시간내서 찾으려고 해도 찾기 힘든 소중한 정보들을 필터링해서 올려주시는 여러 전문가들의 자발적인 트윗은 정말 큰 힘이됩니다! 오늘 소개해드리는 링크들도 아마 여러 분들이 좋아하실 것 같습니다!

이 세상 대부분 Mobile 기기들의 에뮬레이터!

첫번째 소개해드리는 사이트는 Mobile Web Programming 이라는 블로그입니다. 오라일리에서 나온 Mobile Web 이라는 책을 쓴 저자의 블로그 이기도 합니다. 넘쳐나는 모바일 기기들을 하나하나 구입하는 건 사실상 불가능한 일. 에뮬레이터와 시뮬레이터로 기기 없이 왠만한 것은 테스트가 가능한 시대이지요! 하지만 그걸 찾는것도 번거롭다면 아래 링크를 참조해 보세요!



개발자와 디자이너를 위한 바탕화면 8종

포토샵, jQuery... 개발자와 디자이너라면 다들 한번씩 들어 봤음직한 이름들입니다. 이 도구들은 여러 전문 서적이나 레퍼런스를 통해서 배우고 사용할 수 있지만 단축키, 정리된 API 문서가 있으면 더욱 힘을 발휘하곤 합니다. 이런 정보를 바탕화면에 깔아두고 작업한다면 더욱 편리하겠지요? 개발자와 디자이너를 위한 바탕화면 8종 셋트는 바로 여러분을 위한 자료들입니다!


>>> 바로가기 : http://bit.ly/i1mBmn

- NoPD -
신고
Posted by 노피디
Cloud & Dev. Story2009.11.17 10:51
하이컨셉님 (http://highconcept.tistory.com/1263) 블로그에 올라온 동영상을 업어왔습니다. 구글이 생각하는 미래의 캐시카우가 유튜브(YouTube)라는 점이 참 놀랍고, 구글OS 에 대한 그들의 집념(다들 예상한 거지만!)이 대단하다는 걸 한번 더 느낄 수 있는 영상입니다.

* 담아두고 여러번 볼까 싶어서 업어왔습니다.

신고
Posted by 노피디
Cloud & Dev. Story2009.11.13 08:35

웹브라우저 시장의 전쟁은 운영체제 시장의 전쟁과는 사뭇 다른 양상으로 전개되고 있다는 것은 이미 많이들 알고 계실겁니다. 지속적인 마이크로소프트 IE 의 점유율 하락과 FireFox 의 약진, Safari 의 느리지만 지속적인 행보, 구글의 가볍고 강력한 브라우저 Chrome 의 선전. 춘추 전국 시대라 해도 무방할 만큼 다양한 브라우저들이 사용자의 입맛과 손맛(!)을 잡기위해 노력하는 모습이 눈에 선합니다.

10월 기준으로 IE 는 64.64% 로 지속적인 하락세를 이어가고 있는 모습입니다. 어느새 시장의 1/4 점유율을 목전에 두고 있는 FireFox 가 참 장하다는 생각도 듭니다. 기타 브라우저들은 아직까지 시장에서 큰 영향력을 행사하기에는 역부족입니다. 다만 Opera Mini 가 0.35%로 6위에 랭크되어 있다는게 이색적입니다. 윈도우 모바일로 출시되는 단말들 까지 Opera Mini 탑재가 대세이니, 아무래도 Saferi Mobile 버전과의 일전이 불가피해 보입니다.

이 결과의 뒤에는 조금더 안습인 상황이 자리잡고 있습니다. 64.64%로 나타난 IE 의 시장점유율은 IE 렌더링 엔진을 차용하는 호환 브라우저의 사용율이 포함된 수치입니다. 순수하게 IE 의 점유율은 이미 60%가 깨진 59% 대로 나타나고 있습니다. Maxthon 과 같은 호환 브라우저들이 5% 정도의 점유율을 가져주고 있기 때문에, 통계적으로 위와 같이 나타날 뿐인 것 같습니다.

- NoPD -


신고
Posted by 노피디
Cloud & Dev. Story2009.09.10 14:43

마이크로소프트의 최신 웹 기술의 향연, Remix 2009 행사 공지가 떴습니다.
본사에서 근무하는 시즌이라면 큰 무리 없이 (본사 바로 뒤편의 호텔이라...) 갈 수 있을텐데,
강남에 있다보니 영... 참석이 쉬워보이지가 않군요 ㅜ.ㅜ

* 참석 사전등록 : http://www.visitmix.co.kr/remix09/default.asp

- NoPD -
신고
Posted by 노피디

티스토리 툴바