Page tree
Skip to end of metadata
Go to start of metadata

5차 1주 Trello 아키텍처 overview, JavaScript 기본

Introduction

이번 5차 스터디에서는 Trello 서비스를 지탱하고 있는 아키텍처를 분석해 봅니다.
알려진 바로는 Trello 서비스는 자바스크립트를 기반으로 작성 및 운영되고 있는 서비스로 본 서비스의 아키텍처를 분석함으로서 최신 웹 애플리케이션 개발의 한 흐름이라고도 할수 있는 자바스크립트 기반 프로젝트를 알아보려고 합니다.

Trello

Trello란?

  • Trello란 온라인 협업툴
  • Trello에 대해서 잘 알아야 하나요?
    • 아니요. 저희는 Trello란 서비스를 구현하고 있는 아키텍처에 관심이 있지 Trello 서비스에는 관심이 없습니다.
  • Trello를 전혀 몰라도 되나요?
    • Trello 서비스에 대해서 몰라도 상관은 없지만 여러 기술들이 왜 필요하고 어떤 방식으로 사용되는지에 대해 알기 위해서는 Trello의 기본 동작은 알아두는 것이 좋을 듯 합니다.
    • Trello 서비스의 기본동작은 하기 동영상으로 직접 보시면 더 알기 쉬울 듯 합니다.

Trello 서비스에서 사용하고 있는 기술들

  • Trello 서비스에서 사용하고 있는 여러 기술들을 간략하게 소개합니다.

coffeescript (http://coffeescript.org/)

  • CoffeeScript는 JavaScript의 불필요한 문법을 없애고 간단하게 코드를 읽고 작성할 수 있는 새로운 언어다. CoffeeScript 컴파일러를 통해 최적화된 JavaScript 코드를 생성할 수 있다.
  • 자바 컴파일러가 자바 소스 코드를 JVM이 이해할 수 있는 oolong language로 변환한다면 CoffeeScript로 구현한 소스 코드를 CoffeeScript 컴파일러를 활용해 컴파일 하면 JavaScript 인터프리터가 이해할 수 있는 JavaScript를 생성하는 것과 같다.
  • 거침없이 배우는 커피스크립트 : 더 빠른 자바스크립트 개발을 위한 : 우리도 모르는 사이에 벌써 CoffeeScript 책까지 나와있다. 세상은 참 빠르게 변한다.
  • 질문(양완수) : trello가  coffeescript 를 어떤 장점때문에 사용하지는 궁금해요? 
  • 그럼 coffeescript가 javascript를 대체할 수 있을까요? 아니면 dart 나 typescript 가?

backbone.js(http://backbonejs.org/)

       javascript MVC(Model-View-Collection) 템플릿

                ( 프레임웤(의존성주입하지 않음) 이 아니기 떄문에 강제성이 없다. 반대급부로 손이 많이 간다.) Q(양완수) : 강제성이 없다는 말이 이해가 잘 안가요

MVC의 C가 control이 아닌 Collection 임.

 

 

 

 

 

보통 UI 라이브러리 또는 프레임웍에서는 생산성 향상을 위해서 양방향 데이터 바인딩을 합니다.

HTML에 UI를 표현하기 위한 정보외에 데이터 바인딩을 위한 요소가 추가됩니다.

그리고 그 해당범위는 어플리케이션 전체에 해당하고 agularjs같은 경우에는 Directive라는 걸 이용해서 스코프를 제어하고

ui를 컨트롤 합니다. 정말 편리하고 좋지만 한번 쓰기 시작하면 종속됩니다.

backbone의 경우에는 Mediator 패턴을 이용해서 변경사항을 전달하지만 변경 이벤트 발생 시에

처리로직은 직접 구현해야 하고 뷰를 제어하지 않습니다. 그리고 급하면 그냥 짜도 됩니다.

팀원들이 angular에 모두 익숙하고 확정적인 시안으로 모바일웹개발을 할 경우에는 angular를 웹개발시엔 backbone을 추천합니다.

 

node.js(http://www.nodejs.org/)

       자바스크립트 서버사이드 에코 시스템

  • node.js 소개

mustache(http://mustache.github.io/)

      자바스크립트 템플릿 라이브러리.

  • 표방하는 것은 Logic-less templates
    • Logic-less 이다 보니 값 비교에 의한 분기문 처리가 어려움. 하지만 템플릿에 꼭 값을 비교할 필요가 있을까요?
  • 자바 스크립트 말고 엄청 많은 언어로 지원하던데요?
    • 써본게 자바스크립트 밖에 없었어요.
    • Twitter에서 발표한 hogan.js 이용.
  • 자바도 mustache로 가면 좋을까요?

websocket & socket.io

        websocket은 웹으로 소켓통신을 하는 HTML5 표준이고

        socket.io는 Node쪽에서 제공되는 모듈이다.

redis(http://www.redis.io/)

        NOSQL의 한 유형으로 Key, Value 형태로 최근에는 맴캐시 대신 캐시형태로 많이 쓰인다.

mongodb(http://www.mongodb.org/)

       NOSQL의 한 유형으로 document base(JSON) 이고 클라이언트 개발 시 최근 많이 쓰이고 있다.

  • document base가 뭔가요?

pushstate

        HTML5 스펙의 일부로 해시태그 대신 url 상태 변경을 관리하고자 할 떄 사용한다.

  • pushstate란?

qunit(http://qunitjs.com/)

       javascript tdd 라이브러리 이다.

jasmine

           javascript Bdd 라이브러리 이다.

Trello 아키텍처 흐름

스터디를 통해 집중적으로 분석해야할 부분
  • mustache를 어느 영역에서 어느 범위까지 사용하고 있는가?
  • redis와 mongodb와의 관계는? 데이터를 두 가지 DB에 어떻게 저장하고 활용하고 있는가?
  • coffeescript는 어느 범위까지 사용하고 있을까? 아니 좋을까?

질문 목록 및 토론 꺼리

javascript 기본

  • javascript의 callback function의 동작 방식이 어떻게 되나요? callback function의 경우 등록한 후에 특정 이벤트가 발생하면 실행되는 방식이잖아요? 어떤 측면에서 보면 비동기(async) 방식으로 동작하는 것처럼 보입니다. javascript의 경우 single thread 방식으로 동작하는 것으로 알고 있는데요.
  • javascript에서 this를 항상 우리를 혼란에 빠트리는 놈인데요. this에 대해서 쉽게 이해할 수 있는 방법이 있을까요?
  • closure 이 놈 정말 개념 잡기 힘든 놈이죠. closure는 자바스크립트 뿐만 아니라 수 많은 언어에서 제공하고 있는데요. closure란 무엇인가요? 자바에서 closure개념이 있나요?
  • http://javarouka.github.io/pt/js-scope/#/ : Javascript scope 관련 자료

굳이 trello가 node.js + redis + websocket&socket.io 로 아키텍쳐를 꾸민 이유는 무얼까요?

  • No labels

1 Comment

  1. Overview 들으면 다음 스터디 참석 안해도 되는건가요? ㅋㅋ

    각각의 기술에 대해 한줄로 정의해 주면 좋겠네요. 모든 내용을 한 줄로 정리하기 힘들다면 각 주제별로 스터디를 준비하는 사람에게 미리 한 줄로 요약하라고 할당해도 좋을 듯 합니다.