AngularJS 게시판 accordion 스타일

요줌 web application 만드는 것에 재미를 느껴서 이것저것 기웃거리는 중이다.
오늘은 전에 만들어본 게시판을 single page application 이라는 형태에 부합시키기 위해서 accordion 형태로 변경해 보았다. angular ui bootstrap- accordion을 사용했다. 페이지 재로딩없이 모든 기능을 처리한려 구현 해봤는데.. 이러면 좀더 SPA 다워진걸까..^^

이 게시판의 소스는 아래에서 확인하세요.

https://github.com/jeremyko/simple_angularjs_bulletin_board

AngularJS : Seoul Dust Dashboard

Displaying current density of particulate matter(PM10) in seoul using AngularJS, Express.js

 https://github.com/jeremyko/SeoulDustDashBoard

앵귤러 보름만하면 나도 프론트엔드 웹개발자? ^^

서울시 대기환경 정보 사이트에서 주기적으로 데이터를 긁어와서  표와 챠트로 보여주게 하는 간단한 Web App을 만들어 보았다. 개발 하면서도 매우 재미 있었다.^^

AngularJS : Best practice, 'dot rule'

AngularJS 에서 model을 UI 에 바인딩 시키는 경우, 이른바 'dot rule' 이라고 하는 idiom 이 있다.

"ng-model을 사용 시 dot(.) 이 존재해야 한다. 그렇지 않다면 잘못하고 있는것이다"
"Whenever you have ng-model there’s gotta be a dot in there somewhere. If you don’t have a dot, you’re doing it wrong."

AngularJS Best Practices 에 나오는 내용이고 간단한 예제를 보이면서 설명하고 있다.
이 동영상에 나오는 예제와 동일한 맥락의 다음 예제를 살펴보자.

firefox 에서 JS Bin 이 제대로 표시가 안되는 경우엔 IE, chrome 을 사용해본다.

AngularJS : Controller들간 데이터 공유, $broadcast/$on or service?

AngularJS sharing data between controllers : $broadcast/$on or service?

예를 들어 A, B, C 컨트롤러간에 데이터를 공유해야 하는 경우가 있다라고 가정 해보자.
즉, A 컨트롤러가 변경시키는 어떠한 데이터를 다른 컨트롤러들에서 추적해서 화면등에 갱신이 필요한 경우라면 어떤 방법이 좋을까..
이러한 Controller들간의 데이터를 공유하는 방법에 대한 내용을 인터넷을 찾아보면
$broadcast, $on을 사용해서 구현한 경우를 자주 볼수 있다.
그런데 이곳저곳 살펴보고 내린 나름의 결론은 서비스를 사용하는것이 정석이란 것이다.
서비스의 본래 목적은 어플리케이션의 비지니스 로직을 담기 위한 장소이지만,  singleton의 특징을 활용, 이 서비스에 데이터를 보관하고 컨트롤러에서 inject하면 각 컨트롤러에서 동일한 데이터를 참조하게 할수 있는것이다.

firefox 에서 JS Bin 이 제대로 표시가 안되는 경우엔 IE, chrome 을 사용해본다.

AngularJS : Binding Primitive, Reference Type

AngularJS의 2 way-data binding 사용에 시행착오를 겪은 부분이 있어서 글로 남겨본다.

directive, expression 등을 사용하여 binding하는 경우 $watch가 생성되어 model의 변경을 감시하게 된다. 다음 예제를 한번 살펴보자.

예제1) 정상적으로 동작하지 않는 경우
버튼을 눌러봐도 값이 변경되지 않는다.

AngularJS 게시판

AngularJS(1.3.6)+ Express + mongojs 이용한 간단한 게시판

앵귤러 보름만 해보면 나도 프론트엔드 웹개발자^^

https://github.com/jeremyko/AngularJsBulletinBoard_PlainStyle
일반적인 형식

최근 Web front end 계의 대세라는 AngularJS에 흥미가 생겨서, 간단 게시판을 한번 만들어 보았다. Express app의 기본구조에 AngularJS의 처리를 추가한 형태이다. Express 는 일종의 Rest API 역활로서 mongodb의 데이터를 전송해주는 역활을 한다.

https://github.com/jeremyko/simple_angularjs_bulletin_board
accordion 스타일

node.js 이용한 서울시 미세먼지정보 가져오기

틈날때마다 미세먼지 농도 모니터링 하는 취미가 있어서 ^ ^ 작성해 보았다.
https://github.com/jeremyko/seoul_dust

JavaScript Allongé eBook 구입

얼마 전 Hacker News 에 소개된 전자책인데 leanpub을 통해 구입해서 읽고 있다 . PDF혹은 아이패드나 아이폰에서도 볼수 있는 eBook 형식으로 제공된다. JavaScript Allongé 는 기본 문법을 알고 있는 독자를 대상으로, 각 장마다 자바 스크립트의 함수를 사용하는 새로운 관점들을 소개하고 있다. 그리고 각 장이 끝날 때마다 recipes 항목을 통해서, 앞서 배웠던 항목을 기본으로,  실용적인 활용 법을 소개해주고 있다. 개인적으로 추천할만한 내용이라고 생각한다. 한번 방문해보시길...

(Allongé 는 에스프레소와 아메리카노의 중간 정도 되는 커피라고 한다~커피관련 지식은 덤^^)

node.js single thread / multi thread ?

node.js 는 단일 쓰레드 환경이다.
그런데 이 말은, 사용자의 스크립트가 단일 쓰레드에서 구동된다는 의미이다. 즉, 사용자의 요청들을 처리하기 위한 이벤트 루프가 하나의 쓰레드로 돌아간다. 그러나, 실제 비동기 작업은 멀티 쓰레드(thread pool) 로 구현된다.

위 그림은 Jeff Kunkel 의 Node.js Explained 유튜브 동영상을 갭쳐한 것이다. 우측으로 node.js 의 쓰레드들이 잘 나타나 있다. node.js는 비동기 작업을 위해 libuv 를 활용하는데 여기서 Thread Pool 을 만들어서 작업쓰레드 들이 요청들을 처리하게 된다.

node.js 분석

Node.js source code analysis

How node executes user code ?

최근 국내에도 node.js 컨퍼런스가 개최되는등 관심이 높아지고 있다. 그런데 기존 javascript를 어떻게 웹브라우져에 독립적으로 만들었고, 서버 사이드에서도 활용가능한 여러 기능들을 어떤식으로 추가했는지, 그 내부 사항을 node.js의 소스 코드를 따라가면서 간략히 알아보자.

(2014.11.09 일 node.js github에 올려진 소스 코드를 기준으로 작성됨)

Node.js 맛보기

node.js 는 기존의 자바스크립트 문법을 사용해서, 웹 브라우져로부터 독립적인 환경에서, 비동기 처리의 장점을 활용하여 서버 사이드에서 요구되는 여러 기능을 구현할수 있게끔 구현 되었다.

먼저 간단한 예제를 보자.

var fs = require('fs');
fs.readFile('./bigFile.txt', 'utf8', function(err, data) {
  console.log(data);
});
console.log('exiting...');

파일을 비동기로 읽는 예제이다.

사용자가 작성한 javascript (이하 js) 에서는 file system 기능을 가지고 있는 fs 객체를 require ('fs') 함수로 요청하여 얻고, 그 객체의 readFile() 함수를 이용하고 있다.

이 파일을 fsTest.js 로 저장하고, 다음처럼 실행하면,

$ cp /usr/share/dict/words bigFile.txt --> 이것은 큰 사이즈의 파일을 만들기 위한 작업
$ node ./fsTest.js
exiting...
A
a
aa
......

'exiting' 문자열이 바로 출력되고 이후, 파일에 대한 비동기 읽기 작업이 완료될때 나머지 결과가 출력되는것을 볼수 있다.

이 예제에서 보이는 require 나 readFile 식별자들은 자바스크립트가 기본적으로 제공하는것이 아니라는 점을 유의하기 바란다. 위의 예제를 크롬 웹브라우져의 자바콘솔에서 돌려 본다면 다음과 같은 에러를 만나게 될것이다.

ReferenceError: require is not defined