20210112(화)
2021-01-12
1. 학습 날짜
2020-01-12
2. 학습 시간
09:00 ~ 20:00
3. 학습 범위 및 주제
BackboneJS
4. 학습 목표
BackboneJS 학습
5. 학습 정리
Backbone
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. 다음 학습 계획
자바스크립트 학습하기
Last updated