20210112(화)

2021-01-12

1. 학습 날짜

  • 2020-01-12

2. 학습 시간

  • 09:00 ~ 20:00

3. 학습 범위 및 주제

  • BackboneJS

4. 학습 목표

  • BackboneJS 학습

5. 학습 정리

6. 상세 학습 내용

Backbone

  • Backbone은 프레임워크가 아니라 라이브러리다.

    • 프레임워크와 라이브러리의 차이는 행동의 주도권을 누가 쥐고 있냐의 차이다. 라이브러리는 개발자가 주도권을 갖고, 프레임워크는 개발자에게는 주도권이 없다.

    • 처음에 backbone을 리액트와 같은 프레임워크라고만 생각했다. 그런 생각때문에 학습을 하기가 꺼려졌기 때문. 왜냐하면 프레임워크 사용 % 를 확인하면 백본은 거의 죽은 프레임워크라고 해도 무방하기 때문이다.

    • 오늘 백본에 대해 알아본 결과, 백본은 프레임워크가 아닌 라이브러리라고 한다. (프레임워크로 사용할수도 있는듯)

    • 그리고 우리의 과제가 리액트나 앵귤러가 아닌 백본을 사용하라고 한 의도는 프레임워크를 사용하지 않고 프론트를 제작하라는 의미같다.

  • Backbone

    • MVC 패턴을 따른다. 하지만 이 MVC가 Rails MVC가 아니다.

      • M: Model

      • V: View

      • C: Collection

    • Model 은 말 그대로 하나의 모델이다. 이 모델들은 각자의 속성을 갖고 있다. 또한 이 모델의 valid 체크 등을 할 수 있다.

    • Backbone에서의 view는 view 자체로서의 역할도 하지만, rails로 따지면 controllers로서의 기능이 더욱 크다.

      • view의 기능은 underscore 템플릿 파일을 기반으로 한다. 스크립트 태그를 만들고 타입을 템플릿으로 만든다음 적절한 고유 ID를 만들어 둔 다음에 view를 연결시키면 된다.

      • view에는 반드시 하나의 element가 있어야 한다. 이 element는 이미 존재하는 DOM일 수도, 없는 DOM일수도 있다.

      • 만약 이미 존재하는 DOM 이라면, el: $('#id') 와 같이 해당 DOM을 찾고 el에 할당해줘야 한다.

      • 존재하지 않았고 지금 새로 만들 element라면 tagName, className, id 등의 프로퍼티르 활용해서 만들어준다.

      • 정리해보면 이미 만들어져있는 HTML 도화지가 있고, 그 도화지 중간 중간 색을 칠해줘야 하는 부분에 적절하게 id 값, classname 등을 설정해 준다.

      • 이렇게 표시해 둔 곳에 view를 연결시키면 색칠 하나를 할 수있게 된다.

    • Collection: 컬렉션은 모델의 모음이다. 모델 하나 하나를 따로 처리하기에는 공통적인 작업이 많기 때문에 한번에 관리하는게 유리하다. 따라서 collection 객체를 만들고 이 객체에 모델을 add 시켜서 관리한다.

    • Event: 이벤트는 개발자가 만들어 놓은 무언가를 클라이언트가 낚아 챘을 때 발생한다. 간단하게 컬렉션에 모델이 추가 되는 것, 삭제 되는 것.. 등에 이벤트를 걸 수 있다. 해당하는 이벤트가 trigger 되면 걸어 mapped 되어있던 function 이 실행되는 구조다.

7. 오늘 학습 내용에 대한 개인적인 총평

  • 자리에 앉아있던 시간은 길었지만... 많은 내용을 학습하지는 못했다. 반성하고 내일은 더욱 정진하자.

8. 다음 학습 계획

  • 자바스크립트 학습하기

Previous20210109(토)Next20210113(수)

Last updated