grouple

큰 고기를 한 입에 먹을수는 없다. 우선은 입에 넣을 수 있는 크기로 잘라서, 이빨로 씹은 후 삼켜야 한다. '이해' 란 것도 같다. 어려운 개념이나 복잡한 시스템, 익숙하지 않는 분야를 한 번에 모두 이해하는 것은 어렵다. 우선은 작은 정보 단위로 잘라서, 하나씩 씹어 자신의 것이 되도록 흡입해야 한다.

그러나 방대한 정보 중에서 무엇을 선택하면 좋을까? 어떤 정보가 중요하고 어떤 정보가 중요하지 않을까? 어떤 정보가 중요한지 판단하기 위해서는 대상을 깊이 이해할 필요가 있다.

지인 중에 전문가가 있다면 그 사람에게 배우는 것도 한 가지 방법이다. 하지만 주위에 그런 사람이 없다면 인터넷을 검색해서 설명을 발견했다고 해도 해당 저자가 정말 전문가인지, 아니면 전문가인 척하는 것인지 어떻게 알 수 있을까?

예를 들어, 저자가 직접 쓴 자료나 소스가 가장 상세하다고 치자. 그러나 '어렵다', '양이 많다', '영어라서 읽을 수 없다' 등의 변명으로 다른 사람이 쓴 쉬운 설명을 찾으려고 한다. 그것은 '원래 고기는 너무 크고 먹기가 어려워' 라고 하며, 안전한지 확인도 안하고 다른 사람이 만든 다진 고기를 먹는 것과 동일하다.

이해는 간다. 나(니시오 히로카즈)도 방대한 정보를 앞에 두고 좌절한 것이 한두 번이 아니다. 그럴 때 사용할 수 있는 3가지 전략이 있다. 그것은 '필요한 부분부터 흡수한다', '대략적인 부분을 잡아서 조금씩 상세화한다', '끝에서부터 차례대로 배껴간다' 이다.

- 코딩을 지탱하는 기술, 니시오 히로카즈

'무엇을 배우면 좋습니까?' 이는 자주 듣는 질문이다. 이 질문에 대답하기 전에 우선 한 가지를 물어보고 싶다. '여러분은 무엇을 만들고 싶은가요?' 목적이 명확하지 않으면 최선의 방법 또한 가르쳐줄 수 없다.

정보는 방대하다. '어쨋든 전부 다 한 번은 공부해보자'는 전략은 어리석다. '무엇을 배울지, 무엇을 배우면 좋을지'를 정할 때 필연적으로 지표가 될 수 있는 것이 '무엇을 만들고 싶은가?', 즉 목적을 명확히 하는 것이다. 그리고 목적을 달성하기 위해 필요한 것부터 배우면 된다.

'무엇을 만들까?'를 결정할 수 없다면, 혹시 처음부터 완벽한 것을 만들려고 생각하고 있는 것은 아닌지 고민해보자. 누구도 생각한 적이 없는, 모두를 만족시키는 것을 만들려고 생각하고 있지는 않은가? 처음부터 굉장한 것을 만들려고 생각해서 오히려 손도 대지 못하고 있다면, 시간이 흘러도 굉장한 것을 만들 수 없다. 우선은 간단한 것도 괜찮으니, 무엇이라도 만들어보자. 그 과정에서 '나는 이것을 할 수 있어', '이것은 아직 어려우니까 공부할 필요가 없어' 등을 알 수 있게 된다. 이 과정을 반복해가면 보다 복잡한 것을 만드는 능력이 몸에 베게 된다.

- 코딩을 지탱하는 기술, 니시오 히로카즈

async.map 을 사용하여 몽고db 내 다른 collection 의 document 를 결합할 때 (특히, SNS 등에서 댓글에 이름을 달거나 하는 등의 행위에서),

1. 배열로 되어있는 각 객체에 다른 객체를 결합할때, 다음과 같이 사용하게 되는데

async.map(feeds, function (feed, callback) {}):

2. 아래와 같이 사용할 경우

feed.user = user

3. 콘솔로 feed 찍었을 때 feed.user 가 보이지 않는 현상이 종종 나타난다.

4. 괴상한 것은 feed.user 를 직접 찍으면 나온다는 것.

jQuery 로 click 과 같은 이벤트를 binding 할때 항상 내가 모르는 것이 문제가 되는 것이 있었는데, 새로 추가된 div 등에는 다시 동일한 내용을 binding 하는 것이었다.

1. 기존에 해왔던 방법

$('#status_update').click(function () { /* CODE */ }); $('#status_update').on(function () { /* CODE */ });

2. 알게된 방법

$(document).on('click', '#status_update', function () { /* CODE */ });

그러니까 document 오브젝트에 click 을 binding 하고 selector 를 입력해준다. 즉 상위 객체에 걸어주면 되는건데 위의 코드는 아래와 같이도 변형 가능하다. 

$('body').on('click', '#status_update', function () { /* CODE */ });

뭐가 메모리 관리 면에서 유익할지는 모르겠는데 우선 쭉 써보다가 수정하기로 한다.

for ( var i in groups ) {   for ( var j = 0; j < groups[i].members.length; j++ ) {     if ( user._id.toString() === groups[i].members[j].toString() ) {       groups[i].joined = true;     }   } }

위와 같은 구문은 for in 문을 두번 쓰면 좀 더 간결하게 작성이 가능하지만, members array 의 각 항목들이 ObjectId 로 method 를 품고 있기 때문에, for in 문을 사용하게 되면 j 값이 숫자가 아닌 각 메소드의 이름이 나오기 때문에 로그로 확인할 경우 프로토타입 메소드가 나오는 괴 현상을 보인다. (groups[i].memebers 의 length 를 찍었을때는 그렇게 나오지 않으면서도)

Node.js 는 이벤트 기반 비동기 식으로 작동하기 때문에 특히 DB와 연결되는 부분에서는 주의깊게 사용해야 한다. 때문에 DB 에 쿼리를 하고 리턴받아 데이터를 처리한 후 해당 함수 실행이 끝나기 전에 ( 다시말하면, } 로 닫히기 전에 ) 다시 쿼리를 하는 등의 방식으로 구현하게 되는데 이렇게 되면 들여쓰기가 계속되어 소스 관리가 매우 어려워진다.

collections['user'].find({ user_name: 'John' }).toArray(function (err, users) {   if ( users.length === 0 ) {     console.log('error');     return;   }   collections['feed'].find({ user_id: 'users[0]._id }).toArray(function (err, feeds) {     if ( feeds.length === 0 ) {       console.log('error');       return;     }     collections['comment'].find({ user_id: 'users[0]._id }).toArray(function (err, comments) {       // 여긴 지옥이야..       collections['like'].find({ user_id: 'users[0]._id }).toArray(function (err, likes) {

      });     });     return;   }); }); 

위와 같은 들여쓰기 지옥이 만들어지게 되는데 한 메소드가 어디서 시작해서 끝났는지 조차 파악하기 어려운 지경에 이르러 가뜩이나 피곤한 눈디버깅이 약 100배 더 어려워지게 된다.

따라서 비동기 메소드를 동기방식으로 실행해주는 Async 모듈을 사용했다. 일반적으로 위에서부터 차례대로 실행해주는 async.waterfall 이나 한꺼번에 실행하되 마지막으로 끝나는 메소드의 시점을 알려주는 async.parallel 이 있으나 for 문 등의 반복문을 돌리게 되면 또다시 소스가 꼬이게 된다.

이럴 경우 async.map 이라는 것을 써서 array 를 하나씩 돌리게 하는 메소드를 사용하면 된다. 사용법은 아래와 같다

var getUserInfo = function (like, callback) {   User.findById(like.user_id, function (err, user) {     if (err) {       callback(err);       return;     }     like.user = user;     callback(null, like);     return;   }); };

Node.js 와 Mongo DB 를 사용하여 News Feed 를 만드는 것 자체는

1. 개념적으로는 상당히 심플하게 구현되지만

2. 실제 DB 에 접근하는 과정에서 값을 검증하는 것이 매우 귀찮고 짜증스러워

MongoDB Native 모듈을 버리고 Mongoose 모듈을 사용하였다.

AngularJS by Google

Google 이 만든 Client side 웹 프레임 워크로 jQuery 에서 event binding 할때 생기는 여러가지 문제점을 해결하고 혹은 개선하기 위해서 만든 것으로 보인다.

1. 개념

- Model-View-Whatever 라는 약간의 개그가 들어간 철학으로 만들어짐

- 웹에서도 유사 MVC 를 분리 구현한 것이 가장 큰 특징

- Web Client 도 앱을 개발하는 듯한 기분을 갖게 함

2. 장점

- jQuery 에 비해 구조적이고 비교적 짧은 코드를 작성할 수 있음

- dom element 안에 메소드를 끼워넣는 느낌이라 좀 더 직관적

- 유닛 테스트를 하기에 아주 적합한 구조로 만들어져 있음

- Tutorial 이 매우 잘되어있음

3. 단점

- 웹을 굳이 앱을 만드는 구조로 만들어야 하는가? (오히려 시간이 더 드는 느낌)

- 애니매이션을 위해서는 어차피 jQuery 를 써야함

- jQuery 보다 개념적으로는 편리하지만, 실제 쓰기에는 알아야 할 것이 많음

결론

- 일단 이번 프로젝트에서는 빼고 진행하는 걸로

1. WHY

- PM 툴은 편리하지만 꼭 내가 필요로 하는 특정 기능은 없음

- 컨텐츠 관리를 하고, 그 것을 포트폴리오로 보여주고 싶음

- SNS 피드를 기본으로 프로페셔널한 기능을 추가하고 싶음

- 모바일에서 실제 작업을 하기에는 부족

2. WHAT

- 기본적인 SNS 형태의 뉴스피드와, 특수한 기능을 가진 모듈을 제작

- 모듈은 각 그룹에 추가할 수 있고, API 를 공개하여 오픈 모듈화

- 그룹을 찾거나, 그룹원을 모집할 수 있도록 함

3. HOW

- SERVER: Node.js, MongoDB, Sails.js, Nginx

- CLIENT: Bootstrap3, jQuery

Layoutit! 사용하기

1. 개념

- Bootstrap3 를 이용한 레이아웃 빌더

2. 장점

- 그리드 구조 잡기에 매우 적합함

- 사용하기가 쉬움

3. 단점

- 버튼 텍스트, DIV 타이틀 달기 등과 같은 실제 프로토타입은 어려움

- 스타일을 지정할 수 없음