Cache vs Cookies: 웹브라우저 캐시와 쿠키의 차이 점

Cache와 Cookies는 특정 웹사이트의 접속 속도 개선을 위해 클라이언트의 컴퓨터에 임시로 저장되어 있는 데이터란 개념은 같지만 아래와 같은 다른 점들이 있습니다.

Cookies란?
Cookies란 넷스케이프의 Netscape Navigator란 자사의 웹브라이저를 통해 소개된 기술로 특정 웹페이지에 대한 유저의 행동 패턴을 주로 저장하는 작은 사이즈의 텍스트 파일입니다. 주로 저장되는 정보로는 특정 웹사이트나 웹페이지에 얼마나 자주 또는 몇 번 방문했는지 그리고 특정 배너를 클릭을 했는지 했으면 얼마나 자주 했는지 검색 시 어떤 키워드를 사용했는지 등의 정보들입니다. 또한 웹서버 쪽에서 유저를 식별하기 위한 Session Tracking의 방법으로 사용되기도 합니다. Cookies 정보는 오직 그 Cookies를 작성한 웹서버만이 Access 가능하며 대부분의 Cookies는 Expiration Date (사용기한)이 정해져 있어서 기한이 만료되면 자동으로 삭제됩니다.

Cache란?

Cache란 웹페이지 Resource 파일들 (오디오, 비디오, 이미지 등)의 임시 저장소로 다음에 같은 웹페이지 (또는 웹사이트) 접속 시 페이지 로딩 속도를 개선해주는 역할을 합니다.

차이점
1. 유저의 컴퓨터에 임시로 저장되어 있는 점은 같지만 사용 목적은 위에 이야기한 것 처럼 다릅니다.
2. Cache는 오직 웹페이지 로딩 속도 개선을 위해서만 사용되지만 Cookies는 유저 관련된 여러가지 다른 목적으로 사용 가능합니다.
3. Cache는 오디오, 비디오, 이미지 등의 Resource 파일등을 주로 저장하는 반면에 Cookies는 User preference (유저가 웹사이트 접속 시 하는 행동 패턴 또는 관련 정보) 위주의 정보를 저장합니다.
4. 보통 Cache는 유저가 삭제할 때까지 유저의 컴퓨터에 저장되지만 Cookies는 서버 쪽에서 설정한 기간이 지나면 자동으로 삭제됩니다.
5. Cookies는 웹서버의 Access가  가능한 반면에 Cache는 Access가 불가능합니다. (사실 Access를 해야할 이유도 없지만요)

References
1. http://www.differencebetween.com/difference-between-cache-and-vs-cookies/
2. http://www.techcuriosity.com/resources/difference_between/difference_between_cache_and_cookies.php
3. http://www.guidingtech.com/8925/what-are-browser-cache-cookies-does-clearing-them-help/
4. https://answers.yahoo.com/question/index?qid=20081201160300AAa1kh8
5. http://www.ehow.com/info_8304895_difference-between-cookie-cache.html

Redis(레디스) 3.0 설치 (CentOS 6.5 64-bit)

Redis 설치

1. Redis 설치 전에 필요한 패키지
• $ yum install tcl*
2. 가장 최신 버전의 Redis 다운로드 및 컴파일
• $ wget http://download.redis.io/redis-stable.tar.gz
• $ tar xvzf redis-stable.tar.gz
• $ cd redis-stable
• $ make
• $ make install
3.  Redis 서버 시작
1. 기본 설정을 이용한 서버 시작: 간단한 테스트나 개발 환경에서만 사용을 추천하며 프로덕션 레벨에서의 사용은 추천하지 않습니다.
• $ redis-server
2. 설정파일과 함께 서버 시작: 설정 파일은 보통 Redis를 설치한 폴더에 포함이 되어 있습니다. 예를 들어 '/opt' 폴더에 설치했을 때는 '/opt/redis-stable/redis-conf'와 같은 형태로 포함해야 합니다.
• $ redis-server ../redis-stable/redis-conf
4. Redis 패키지와 함께 제공되는 클라이언트 프로그램을 이용한 간단한 테스트
• $ src/redis-cli
• 127.0.0.1:6379>ping
• PONG
• 127.0.0.1:6379> set foo bar
• OK
• 127.0.0.1:6379> get foo
• "bar"
5. Sources:
1. http://redis.io/download
2. http://briansnelson.com/How_to_install_Redis_on_a_Centos_6.4_Server
3. http://blog.andolasoft.com/2013/07/how-to-install-and-configure-redis-server-on-centosfedora-server.html

AngularJS: $digest vs $apply vs $timeout vs $evalAsync 차이점 및 설명

 AngularJS (이하 Angular)는 Two-way binding이라는 편리한 기능을 제공하지만 이 기능을 사용할 때 몇 가지 어려운 점이 있습니다. 그 중에 하나가 Angular Context 외에서 들어오는 데이터를 모델에 업데이트를 할 때 (여기서 모델이란 $scope로 정의된 variable들을 이야기합니다. 예: $scope.data) 개발자가 인위적으로 업데이트를 해야하며 이 때 사용하는 것이 $digest, $apply, $timeout 또는 $evalAsync 입니다. 참고로 Angular Context외 (또는 Angular  Scope 외)란 Angular를 사용하지 않고 제작하는 모듈을 가리키며 가장 간단한 예로 서버를 들 수 있습니다. 서버에서 어떤 이벤트가 발생해서 Angular로 제작된 클라이언트 모듈 쪽으로 데이터가 들어오고 그 들어온 데이터를 UI에 반영하기 위해서 $scope.data에 업데이트를 해야 하는데 위에 언급한 함수들을 사용하지 않으면 클라이언트 모듈 쪽에는 데이터가 업데이트 되었지만 UI쪽인 HTML 쪽에는 (보통 {{data}} 형식으로 포함된) 업데이트가 되지 않아서 UI에 반영이 되지 않은채로 남아있습니다.

Two-way binding의 동작 원리

Two-way binding의 동작원리는 개발자가 $scope를 이용해서 variable을 생성하면 생성된 variable 에 watcher가 생성되고 $apply()나 $digest()가 실행되었을 때 현재까지 생성된 모든 watcher들이 실행되어서 변화된 값을 업데이트합니다. 여기서 watcher란 할당된 variable의 old value랑 new value를 비교하여 두 값이 다를 경우 old value를 new value로 업데이트해주는 모듈로 $scope.$watch 함수를 이용하여 이 작업을 합니다. UI쪽에서 발생하는 데이터값의 변화에 Two-way binding이 아무런 추가 작업 없이 정상 동작하는 이유는 Angular가 UI에서 발생하는 이벤트에 대해 $apply()를 자동으로 실행하기 때문입니다. 예를 들어 ng-click 같은 이벤트가 생성이 된다면 $apply()도 자동으로 실행이 됩니다.

$digest()

$digest()는 위의 동작원리에서 설명한 대로 현재까지 생성된 모든 $scope variable 들의 watcher를 실행하여 값이 변화된 variable의 값을 최신값으로 업데이트해주는 일을 합니다.

사용 예: $scope.digest();

$apply()

간단하게 설명하면 $apply()는 $rootScope.$digest()랑 같습니다. 하는 일은 $digest()와 같지만 다른 점은 커버하는 scope가 다르다는 점입니다. 다시 말해서 $digest()는 해당 scope의 variable의 값들만 업데이트하지만 $apply()는 무조건 rootScope와 rootScope 밑에 있는 모든 child scope들의 variable들 값을 모두 업데이트하기 때문에 자주 사용하면 제품 전체의 성능/효율성을 저하 시킬 수 있습니다. 기본적으로 Angular는 $apply()의 사용을 추천하고 있지만 제 개인적인 의견으로는 만약 어떤 scope의 variable이 업데이트 되어야 하는지 안다면 $digest()의 사용을 추천합니다.

사용 예: $scope.$apply(); 또는 $scope.$apply(function() { ….. } );

$timeout()

$timeout()은 일반적인 자바스크립의 API인 setTimeout()의 Angular 버전으로 $timeout()함수 안에서 바뀐 variable 값을 업데이트하기 위해 $apply()를 기본적으로 포함하고 있습니다. $timeout()은 보통 setTimeout()과 마찬가지로 얼마동안의 Delay 이후에 해당 코드를 실행하기 위해 사용되어지고 있는데 이 용도 이외에 ‘$digest already in progress’ 에러 발생에 대한 임시 해결책으로도 사용되어지고 있습니다. (한 Directive나 Controller 안에서 여러 번의 $apply()를 포함한 개발을 해본 개발자라면 최소한 한 번 이상은 저 에러 메세지를 본 경험이 있을겁니다.) ‘$digest already in progress’에러의 발생원인은 Angular는 기본적으로 한 번에 두 개의 $digest() 동시 실행을 금지하고 있어서 이미 $digest()가 실행 중일 때 또 다른 $digest()가 실행이 된다면 이 에러 메세지가 출력되고 나중에 실행된 $digest()는 실행이 되지 않습니다. 그럼 어떻게 $timeout()의 사용이 이 문제의 해결책이 될 수 있는건가요? 그 이유는 $timeout()의 $apply() 실행 타이밍 때문인데 $timeout()은 이미 기존에 실행되고 있는 $digest()가 있다면 그 실행이 끝날 때까지 기다렸다가 $timeout() 내부에 포함된 $scope.$apply()을 실행하는 특징이 있고 이 때문에 위의 에러에 대한 임시 해결책으로 사용되어 지고 있습니다.

사용 예: $timeout(function() {…….}, 0);

$evalAsync()

$evalAsync()는 ‘$digest already in progress’에러에 대한 Angular팀의 근본적인 해결책으로 이해하시면 편합니다. (위에도 언급했듯이 $timeout()의 기본용도는 이 문제의 해결이 아닌 얼마간의 Delay이후에 실행이기 때문에 근본적인 해결책이 될 수는 없습니다. 또한 약간의 화면 깜빡이는 문제를 발생시킬 수도 있습니다.) $evalAsync()도 기본적으로 $apply() 함수를 포함하고 있으며 현재 진행중인 $digest()가 있을 경우에 이 $digest()의 실행이 끝나기 전에 $evalAsync()에 포함된 variable의 바뀐 데이터도 같이 업데이트할 수 있는 기능을 제공합니다. $evalAsync()는 AngularJS 1.2 버전부터 제공되어지고 있습니다.

사용 예: $scope.$evalAsync(function() {…….});

추가사항:

AngularJS 1.3 버전부터 $applyAsync() 함수가 추가 되었다고 합니다.  기본적인 기능은 $evalAsync()와 비슷하지만 효율성 면에서 아주 미세한 차이가 있다고 하는 것 같은데 필자는 사용 경험이 없어서 자세한 사항은 잘 모르겠습니다.

References

1.     https://docs.angularjs.org/api/ng/type/$rootScope.Scope

2.     https://docs.angularjs.org/api/ng/service/$timeout

3.     http://jimhoskins.com/2012/12/17/angularjs-and-apply.html

4.     http://stackoverflow.com/questions/17301572/angularjs-evalasync-vs-timeout

5.     http://www.panda-os.com/2015/01/angularjs-apply-digest-and-evalasync/#.VRWNOJPF_b8

6.     http://www.bennadel.com/blog/2605-scope-evalasync-vs-timeout-in-angularjs.htm

7.     http://www.bennadel.com/blog/2751-scope-applyasync-vs-scope-evalasync-in-angularjs-1-3.htm

[NEWS] Node.js Foundation 출범

어제 있었던 Node Summit 2015 (2월 10일)의 마지막 세션이었던 'The future of Node.js'에서 Joyent의 CEO인 Scott Hammond가 Node.js Foundation의 출범을 선언했습니다. 그동안 Node.js 프로젝트는 Joyent가 메인으로 지원했었는데 그래서 폐쇄성과 새 릴리즈의 계속된 지연 등 여러가지 문제가 많이 있었습니다. (그래서 결국 초창기 핵심 개발자들의 주도하에 Node.js의 포크버전인 io.js가 작년에 나오게 되었습니다.)

아무튼 Joyent는 이런 여러가지 문제를 해결하고자 formal open governance 형태인 Node.js Foundation을 출범하기로 결정하였고 이 Foundation 멤버로는 Joyent를 포함해 IBM, Microsoft, PayPay, Fidelity, SAP 그리고 The Linux Foundation로 구성되었습니다. 또한 이 세션에서 앞으로 Node.js는 OpenStack과 비슷하게 두 가지 버전으로 출시할 예정이며 하나는 지금까지의 Node.js처럼 무료로 사용할 수 있는 오픈소스 버전으로 출시되며 이 버전을 Node.js Foundation가 지원할 예정이고 다른 버전은 몇 가지 기업용 기능이 추가된 유료 버전으로 Joyent가 이 버전을 지원/관리할 예정입니다. (즉 Rackspace가 OpenStack을 지원하는 방식처럼 오픈 소스도 지원하고 유료 버전을 따로 제작해서 지원하겠다는 의미입니다. 실질적으로 세션에서 이 내용을 이야기하면서 Rackspace가 오픈스택을 지원하는 모델을 따르겠다고 이야기하였습니다.)

출처: https://www.joyent.com/about/press/joyent-moves-to-establish-nodejs-foundation

앵귤러JS (AngularJS) 란?

앵귤러JS란
앵귤러JS (짧게 앵귤러라고도 합니다)는 MIT License로 무료로 배포되고 구글이 지원하고 있는 오픈 소스 웹 어플리케이션 프레임워크입니다. 앵귤러JS는 자바스크립트로 제작되었으며 기본적으로 MVC (Model-View-Controller) 모델 지원과 같은 다른 웹 어플리케이션 프레임워크에서도 지원하는 기능을 제공할 뿐만 아니라 Two-way data binding이나 directive 같은 새로운 개념의 기술도 지원하여 웹 개발자들이 해야할 많은 일들의 단축 및 좀더 파워풀하고 테스트가 용이한 웹 어플리케이션 제작에 도움이 되는 기능을 제공하고 있습니다. 아직 나온지 5년 정도 밖에 안된 프레임워크지만 구글의 전폭적인 지원 속에 다른 경쟁 프레임워크들이 비해 가장 빨리 커뮤니티가 성장하고 있는 프레임워크가 아닐까 생각합니다.

왜 사용하나요?

• 체계적인 코드작성 지원: 개인적인 경험으로 JavaScript는 다른 프로그래밍 언어에 비해서 체계적으로 프로그래밍하기 어려운 언어인 것 같습니다. 그래서 프로젝트 사이즈가 커지면 금방 이해하기 힘들어지고 Debug가 어려워지는 Spaghetti Code가 되기 쉽습니다. 그렇지만 앵귤러같은 프레임워크를 사용하게 되면 이런 부분을 일정 부분 해소해줍니다. 
• 앵귤러는 다른 프레임워크에 비교했을 때 아래와 같은 장점들을 가지고 있습니다. 
• 구글의 지원 속에 개발자 커뮤니티가 가장 빠르게 성장하고 있고 앞으로도 성장 가능성이 큽니다. 
• Two Way Data-Binding: 앵귤러가 제공하는 여러가지 기능 중 가장 유용한 기능이 이 Two Way Data-Binding 일 것입니다. 이 기능에 대해서 간단하게 이야기하면 Model과 View에서 사용되고 있는 데이터를 연결해줘서 어느 한쪽에서 이 데이터 값이 변화하면 다른 쪽에도 바로 업데이트가 되도록 해주는 기능입니다. 보통 이 기능 구현을 위한 코드가 전체 프로젝트의 80% 정도를 차지한다고 하는데 앵귤러는 기본적으로 이 기능을 제공하기 때문에 많은 코드의 반복을 피할 수 있습니다.
• Dependency Injection 기능을 기본적으로 지원하기 때문에 컴포넌트들 간의 서비스 사용 및 Dependency 관리가 용이하며 각각의 컴포넌트들이 Decoupling (코드상에서 밀접하게 연관되어 있지 않음)되어 있기 때문에 테스트 하기가 쉽습니다. Dependency Injection에 대한 좀더 자세한 사항은 저의 다른 블로그 글인 'Dependency Injection이란'을 참고하시기 바랍니다. 
• Directives: 앵귤러는 Directives를 제공함으로써 개발자가 자신의 용도에 맞게 HTML tag를 제작하여 사용할 수 있게 하였으며 DOM attributes도 수정 가능하게 하였습니다.

출처:
위키피디아: http://en.wikipedia.org/wiki/AngularJS
사이트포인트: http://www.sitepoint.com/10-reasons-use-angularjs/