⛏️
공부방
  • README.md
  • 프로젝트
    • ft_transcendence
      • 설계
        • 0. 프론트 디자인
        • 1. BackboneJS 뷰 객체
        • 2. API 설계
        • 3. 레일즈 라우팅 구현
        • 4. DB 설계
        • 5. 채널 설계
    • slab-saver
    • react-payment
  • 공부
    • HTML, CSS
      • GRID
      • emmet
      • position
      • CSS Unit
        • 단위 정리
        • 기준을 정해보자
        • em의 정확한 기준은 뭐야?
      • flex
      • NAVBAR 실습
      • 유튜브 화면 만들어보기
    • SQL
      • 이론
        • 1강 데이터베이스
        • 2강 다양한 데이터 베이스
        • 3강 데이터베이스 서버
      • 명령어
        • DB 관리
        • TABLE 관리
        • Constraints
        • SQL 명령어 - 1
        • SQL 명령어 - 2
        • SQL 명령어 - 3
        • SQL 명령어 - 4
        • SQL 명령어 - 5
    • Ruby
      • 루비 객체와 클래스
      • 곡괭이
        • Chapter2. Ruby.new
        • Chapter3. 클래스, 객체, 변수
        • Chapter4. 컨테이너, 블록, 반복자
        • Chapter5. 기능 공유하기
        • Chapter6. 표준 타입
        • Chapter8. 메서드 파헤치기
    • Python
      • 유용한 링크
    • RubyOnRails
      • 아직 정리하지 못한 것들
        • RSPEC 을 이용한 테스트 완전 자동화
        • 레일즈 이니셜라이징 과정
        • 액션케이블 구체적으로 정리하기
        • 웹팩으로 자바스크립트 모듈 관리하기
      • ACTIVE JOB
        • 액티브잡의 기본
        • 실전! 액티브 잡을 이용한 스케쥴링
        • 서버를 껏다 키면 스케쥴링 된 이벤트가 사라진다!
      • ACTION CABLE
        • 액션케이블 Consumer를 이용해서 문제 해결
        • 액션케이블 연결 순서
      • ACTIVE STORAGE
      • 모델
        • validation
          • seeds 데이터 validation 스킵
          • validation 검사가 save, update, create 모든 경우에 일어난다
          • validator 클래스
          • 커스텀Validation
          • validates format(정규표현식)
        • 액티브레코드 find의 다양한 활용
        • 한 레코드에 동시 접속 막자!! with_lock
        • 레일즈 where 사용법
        • 레일즈에서 모델 관련 이슈
        • 모델이름바꿀때명심할것
        • 모델의 includes 메서드
        • 연관 모델을 다른 이름으로 설정하고 가져오기
      • 기본 상식
        • form으로 전달되는 params를 분석해보자
        • StrongParameter 쿼리 배열 받기
        • view helper로 디버깅 하는 방법
        • css 파일을 수정했는데 적용이 안된다?
        • StrongParameter 일반데이터와 객체 데이터 한번에 받기
        • wrap-parameter body가 두 번씩 날라오는 이유
        • 컬렉션 map에서 요소 스킵하는법
        • CASE를 이용해서 정렬(일반적인 정렬 X)
        • 문자열(정규표현식)
        • TIME ZONE 설정하기
        • 커스텀exception
      • RSPEC으로 모델 테스트하기
      • 한 눈에 읽는 루비 온 레일즈
      • Perfect RubyOnRails
        • Chapter1. 소개
        • Chapter2. RubyOnRails 기본
        • Chapter3. 스캐폴딩
        • Chapter7. 라우팅
        • Chapter8. 테스트
    • Javascript
      • var, let, const 차이
      • 브라우저 동작 원리
      • 디바운싱과 쓰로틀링
      • Tagged Template Literal(styled-components)
      • IntersectionObserver 를 사용해서 스크롤 이벤트의 부하 줄여주기
      • EVENT LOOP
        • 자바스크립트에서 어떻게 비동기적인 실행이 가능한걸까?
        • 이벤트 루프의 동작
        • setTimeout이 실행되면 어떤 동작이 일어날까?
        • 블록은 실행이 보장된다
        • 콜스택에 있는 블록이 보장된다는 점을 이용해서 브라우저 죽이기
        • setTimeout 무한반복으로 브라우저는 죽을까?
        • Promise 무한반복으로는 브라우저를 죽일 수 있을까?
        • RAF는 그럼 뭐야?
      • forEach는 반복도중 멈출 방법이 throw 밖에 없다!
      • 임시
        • 정리할 것 목록
          • 자바스크립트 기본 문법
        • 이벤트 임시 정리
      • 유용한 링크
      • arrow function 을 이용한 bind 이슈 해결
      • preventDefault - passive
      • CRITICAL-RENDERING-PATH
      • setInterval에 클로져 개념 사용하기
      • 오디오 문제 이슈
      • 자바스크립트의 식과 문
        • 식과 문이란 무엇인가...
        • 식
          • 1. 기본값과 래퍼객체
          • 2. 참조값과 가비지컬렉팅
        • 식을 조금 더 자세히 알아보자
      • prototype, [[Prototype]] 차이
      • export, import 학습
      • ESlint
      • 아주아주기본
        • Chatper1. 기본
        • Chapter2. 타입
        • Chapter3. 연산자
        • Chapter4. 제어문
        • Chapter5. 배열
        • Chapter6. 함수
        • Chapter7-1. 객체
        • Chapter7-2. 객체
        • Chapter8. 표준객체
        • Chapter9. DOM
      • 이벤트 위임
      • 이벤트가 버블링 되서 root 까지 가다보면... 부모의 부모의 ... 모든 click 이벤트를 발동시키는거 아니야?
      • classList
    • BackboneJS
      • Backbone Model 프로토타입에 메서드 구현하기
      • BackboneJS의 각 요소의 역할과 책임을 확실히 이해하자
      • Window 이벤트를 listenTo로 감시하기
      • 뷰 자신이 자신을 지워야 할 때를 감지하려면 어떻게 해야하는가?
      • 백본 VIEW의 remove와 jquery의 remove 는 다르다!
      • 백본 컬렉션 URL에 쿼리 붙이기
      • index.html.erb와 BackboneJS의 결합
      • 백본 모델과 컬렉션에서 fetch 를 통해 JSON 가져오기!
      • 모델은 urlRoot, 컬렉션은 url
      • ISSUE
      • Absolute Beginner
        • Part1
        • Part2
        • Part3
        • Part4
    • 문제풀이
      • 01. 유효한 팰린드롬(leetcode: 125)
      • 02. 문자열 뒤집기(leetcode: 344)
      • 03. 로그파일 재정렬(leetcode 937)
      • 04. 가장 흔한 단어(leetcode: 819)
      • 05. 그룹 애너그램(leetcode: 49)
      • 06. 가장 긴 팰린드롬 문자열(leetcode: 5)
      • 07. 두 수의 합(leetcode: 1)
      • 08. 빗물 트래핑
      • 09. 세 수의 합(leetcode: 15)
    • BlackCoffeeStudy
      • level1
        • 1주차
    • express
      • Untitled
      • 구글 애널리틱스 연결하기
      • passport를 활용한 로그인
      • express-init 명령어 사용
      • ec2와 DBeaver
      • mariadb 설치
      • sequelize 설치 및 사용법
        • sequelize 설치
        • sequelize-cli 사용법
        • 모델 간 연관관계 맺기
        • Hook 사용하기
      • express-ejs-layout 활용하기
      • Bootstrap
      • npm install로 설치한 모듈 ejs에서 사용하기
      • 미들웨어
    • cypress
      • window.alert 테스트는 어떻게 하지?
      • 상수를 어디에 저장할건가?
      • before()와 beforeEach()
    • aws
      • aws로 프로젝트를 배포해보자!
      • nginx로 리버스프록시 서버를 만들자
      • github actions 로 푸쉬되면 자동으로 업데이트 하는 기능 만들어보기
    • react
      • Drag & Drop 를 이용해서 리스트 요소 순서 바꾸기
      • CRA에서 CRACO 사용하지 않고 절대경로 import(NODE_PATH)
      • useEffect내에서 state의 dependency 문제
      • IntersectionObserverAPI로 무한스크롤 구현
      • react-testing-library
        • 기본
        • react-router-dom 에서의 에러
        • event 발생시키기
        • Integration testing하기
        • async하게 렌더링 되는 요소 잡기
        • Mocking 하기
      • CRA로 만든 앱에서 절대경로로 import 해오기(alias하기)
      • 커스텀 훅 만들기
    • 타입스크립트
      • 조건부타입 (Conditional types)
      • Generics
      • Keyof 타입 오퍼레이터
      • Indexed Access Types
      • 타입 챌린지
        • easy
          • 00. Awaited
          • 01. Concat
          • 02. Exclude
          • 03. First Of Array
          • 04. If
          • 05. Includes
          • 06. Pick
          • 07. Readonly
          • 08. Length
          • 09. Tuple to Object
        • mediun
          • 01. Absolute
    • Firebase
      • 파이어스토어 규칙
    • 기타
      • 협업 프로세스
      • UUID
      • 구글애널리틱스 설치하기
      • 드림코딩 강의
        • 포트폴리오
          • CSS
            • nth-child
            • CSS 팁
          • 자바스크립트
            • 1. 스크롤에 따른 navbar 의 색 변경하기
            • 2. navbar 버튼을 누르면 해당 페이지로 스크롤링 되게 만들자
            • 3. 스크롤 다운 하면 arrow-up 버튼 나오게 하기
            • 4. project 필터링 구현
            • 5. project 필터링에 transition 효과 넣기
      • GIT
        • 기본 사용법 정리
        • git remote update - remote 브랜치 가져오기
  • 기타
    • 이것저것
      • 독서
        • 클린코드
          • Chapter0. 나는 왜 클린코드 책을 읽는가?
          • Chapter1. 클린코드
          • Chapter2. 의미있는 이름
          • Chapter3. 함수
          • Chapter4. 주석
          • Chapter5. 형식 맞추기
      • 용어
      • IDE
        • RubyMine
          • 실전이 중요!
          • 1. Editor Basic
          • 2. Navigation
          • 3. Completion
          • 4. Refactoring
          • 5. Code Assistance
      • MAC에서 살아남기
        • Alfred - Spotlight 업그레이드
        • Vimium
        • BetterTouchTool - 트랙패드
        • 구름 입력기 - ESC, `
        • Spectacle - 화면 분할
    • 원티드 프리온보딩
      • 1주차
        • 월요일
        • 목요일
      • 2주차
      • 3주차
      • 4주차
      • 5주차
      • 6주차
    • 일기장
      • 2020
        • December
          • 20201208(화)
          • 20201209(수)
          • 20201210(목)
          • 20201211(금)
          • 20201214(월)
          • 20201215(화)
          • 20201216(수)
          • 20201217(목)
          • 20201218(금)
          • 20201219(토)
          • 20201221(월)
          • 20201222(화)
          • 20201223(수)
          • 20201224(목)
          • 20201226(토)
          • 20201228(월)
          • 20201229(화)
          • 20201230(수)
          • 20201231(목)
      • 2021
        • January
          • 20210101(금)
          • 20210102(토)
          • 20210105(화)
          • 20210106(수)
          • 20210107(목)
          • 20210108(금)
          • 20210109(토)
          • 20210112(화)
          • 20210113(수)
          • 20210114(목)
          • 20210115(금)
          • 20210117(일)
          • 20210118(월)
          • 20210119(화)
          • 20210120(수)
          • 20210121(목)
          • 20210125(월)
          • 20210126(화)
          • 20210127(수)
          • 20210128(목)
          • 20210129(금)
        • February
          • 20210201(월)
          • 20210202(화)
          • 20210203(수)
          • 20210204(목)
          • 20210205(금)
          • 20210207(일)
          • 20210208(월)
          • 20210209(화)
          • 20210217(수)
          • 20210218(목)
          • 20210219(금)
          • 20210220(토)
          • 20210222(월)
          • 20210223(화)
          • 20210224(수)
          • 20210226(금)
          • 20210228(일)
        • March
          • 20210302(화)
          • 20210303(수)
          • 20210304(목)
          • 20210305(금)
          • 20210306(토)
          • 20210308(월)
          • 20210309(화)
          • 20210310(수)
          • 20210311(목)
          • 20210312(금)
          • 20210313(토)
          • 20210315(월)
          • 20210316(화)
          • 20210317(수)
          • 20210318(목)
          • 20210319(금)
          • 20210322(월)
          • 20210323(화)
          • 20210324(수)
          • 20210325(목)
          • 20210327(토)
          • 20210329(월)
          • 20210330(화)
          • 20210331(수)
        • April
          • 20210406(화)
          • 20210407(수)
          • 20210408(목)
          • 20210409(금)
          • 20210410(토)
          • 20210412(월)
          • 20210413(화)
          • 20210414(수)
          • 20210415(목)
          • 20210416(금)
          • 20210417(토)
          • 20210419(월)
          • 20210420(화)
          • 20210421(수)
          • 20210422(목)
        • July
          • 20210728(수)
Powered by GitBook
On this page
  • 1. Todo Ap in Backbone
  • 2. Backbone.Model
  • 3. Backbone.Collection
  • 4. Backbone.View
  • 4.1 Basic Properties
  • 5. Todo View

Was this helpful?

  1. 공부
  2. BackboneJS
  3. Absolute Beginner

Part2

Models, Collection and Views

1. Todo Ap in Backbone

  • 이 듀토리얼을 모두 끝내고 나면 Todo 웹앱이 완성된다.

2. Backbone.Model

  • model은 앱의 심장이다.

  • model은 interactive data 와 로직을 포함한다. 또한 데이터의 검증, setter 와 getter 그리고 default values, data initialization, conversion 등 정말 많은 일을 한다.

  • Todo라는 이름의 모델을 만들어보자.

  • var app = {}; // create namespace for our app
    app.Todo = Backbone.Model.extend({
      defaults: {                // 기본값
        title: '',
        completed: false
      }
    });
  • 콘솔에서 가지고 놀아보자!

    • var todo = new app.Todo({title: "test!"});
      todo.attributes; // 모든 속성 출력
      todo.get('title'); // title 속성 출력
      todo.get('complated_at')
      todo.get('time') // undefined
      todo.set('time', Date()) // 현재 시간으로 time 속성이 생김

3. Backbone.Collection

  • collection은 models의 집합이다.

  • models를 collections 에서 관리함으로써 보다 효율적으로 event 등의 변화를 감지할 수 있고 데이터를 fetching 하는것이 가능해진다.

  • collection은 데이터를 다루는 작업을 한다. 따라서 DB와 연동할 수 있는 무언가가 필요하다!

    • URL!!! 속성 또는 함수가 무조건 있어야한다.

  • app.TodoList = Backbone.Collection.extend({
      model: app.Todo,
      localStorage: new Store("backbone-todo")
    });
    • 위의 코드에는 URL 없는데?

      • 지금은 백엔드와 연동하는 예시가 아니므로 웹 자체에 데이터를 저장해야한다. 따라서 이런 편법을 사용

  • part1 에서 Model 를 만들고 이를 이용해서 todo 객체들을 생성했었다.

    • 이렇게 만들어진 객체들을 collection 에 add 할 수 도 있고

    • 또는 collection 자체에서 모델을 create 할 수도 있다!

  • let todoList = new app.TodoList();
    
    todoList.create({title: "created by Collection!"});
    
    let todo = new app.Todo({title: "add!"});
    todoList.add(todo);
    
    // pluck 메서드는 underscorejs에서 작성된 메서드다.
    todoList.pluck('title') // ['created by ~', 'add!'];

4. Backbone.View

  • Views는 HTML 마크업 파일을 가지고 있지 않다. 대신 동적으로 변화할 수 있는 데이터와 템플릿에 대한 링크를 가지고 있다. 그리고 이벤트 또는 데이터의 변화가 올 때 템플릿 파일을 렌더링해서 HTML을 만들어 낸다.

4.1 Basic Properties

view의 4가지 기본 속성 el, initialize, render, events 를 알아보자

4.1.1el

  • 모든 view는 DPM 요소에 대한 레퍼런스를 무조건 가지고 있어야 한다.

    • 이 reference를 이용해서 컨텐츠를 삽입한다.

  • 이러한 동작을 하는게 바로 el 프로퍼티

  • el 프로퍼티는 템플릿에 이미 존재하는 DOM일수도 있고 아닐수도 있다.

    • 만약 존재하는거면 이 요소를 찾는 작업이 필요하다.

      • el: 특정 요소 찾기

    • 없다면 태그네임, 클래스 등 속성을 만들어 줘야한다.

      • tagName: 새로 만들 요소의 태그 이름

        • 지정해주지 않는다면 자동으로 div로 설정된다.

      • className: 클래스 이름

      • id: id 값

4.1.2 Initialize / Constructor

  • ...

4.1.3 render

  • render는 markup을 element에 삽입해준다!

  • 모든 view가 render 함수가 필요한건 아니다.

4.1.4 delegated events

  • event는 아래와 같은 형식으로 쓰여진다.

    • {"<EVENT_TYPE> <ELEMENT_ID>": "<CALLBACK_FUNTION>"}

  • 예시

    • events: {'keypress #new-todo': 'createTodoOnEnter'}

    • 키가 눌리는걸 감시하고, 만약 키가 눌렸다면 new-todo id 를 가진 속성에 createTodo~ 함수를 적용한다.

5. Todo View

  • 우선 예시를 보자

  • <script type="text/template" id="item-template">
      <div class="view">
        <input class="toggle" type="checkbox">
        <label><%- title %></label>
      </div>
    </script>
  • // renders individual todo items list (li)
    app.TodoView = Backbone.View.extend({
      tagName: 'li',
      template: _.template($('#item-template').html()),
      render: function(){
        this.$el.html(this.template(this.model.toJSON()));
        return this; // enable chained calls
      }
    });
  • 첫 번째 코드는 underscoreJS로 만든 템플릿이다.

    • script의 타입속성과 id 속성에 주목하자.

      • type 속성은 지금 이 스크립트 내용은 이후에 HTML 마크업이 된다는 걸 뜻한다.

      • id속성 으로 특정 view 에서 템플릿을 지정한다.

  • 두 번째 코드

    • <li> 태그를 만든다.

    • 이 view 가 사용하는 템플릿의 id 는 item-template 다

    • render 함수를 보자 this.$el 은 위에서 생성한 li 태그를 의미한다.

      • this.$el.html은 아래의 here 부분에 값을 넣는다

        • <li>here!!!</li>
    • this.template(this.model.toJSON())

      • 여기를 보면 템플릿에 this.model 을 넣어준다.

      • 이 this.model 은 도대체 어디서 왔을까?

        • let view = new app.TodoView({model: todo});

        • 이렇게 view를 생성할 때 인자로 넘겨준 model이 this.model 이 된다라고 알고 진행해보자.

      • 이제 첫 번째 코드를 보면 <%- title %> 가 있다. model.toJSON())으로 보내준게 {title: "title!", completed: false} 이렇게 전송이 됐고, 템플릿에서 이 title를 사용한것.

    6. Backbone.Events

    • 이벤트 모듈은 어느 객체와도 믹스인 되어서 사용할 수 있다.

    • on, off, trigger 등을 이용해서 이벤트를 사용해보자

    6.1 이벤트 등록하기

    • object.on(event, callback, [context])

      • bind 라고 불린다.

      • on 은 객체를 이벤트와 콜백함수에 바인딩한다.

      • 만약 바인딩된 이벤트가 걸리면 콜백함수가 실행된다.

    • 예시를 하나 만들어보자.

      • let obj = {};
        let callback = function(msg) { console.log(msg); };
        
        // error! 먼저 믹스인 시켜야한다!
        // obj.on("event", callback); 
        
        _.extend(obj, Backbone.Events) // 이제 일반 객체도 이벤트를 등록할 수 있게되었다.
        obj.on("event", callback); // 이벤트 등록
        obj.trigger("event", "my custom event!"); // 트리거 발동

    7. App View

    • 지금까지 학습했던 View로 TodoView를 만들어왔다.

      • TodoView의 객체는 하나의 li 태그를 만들고 이를 렌더링한다.

      • 생각하면 todo 앱은 하나가 아닌 복수의 todo 카드가 존재해야한다.(복수의 li 태그가 있어야 한다)

      • 이말은 즉 여러개의 TodoView 객체가 있어야 한다는 것이다.

      • 그러면 손수 이 객체들을 만들어야하나?

        • 아니다!

      • TodoView 객체를 관리하는 더 큰 범주의 View 를 만들자.

    app.AppView = Backbone.View.extend({
      el: '#todoapp',
      initialize: function () {
        this.input = this.$('#new-todo');
        // instance of the Collection
        app.todoList = new app.TodoList();
        // when new elements are added to the collection render then with addOne
        app.todoList.on('add', this.addOne, this);
        app.todoList.on('reset', this.addAll, this);
        app.todoList.fetch(); // Loads list from local storage
      },
      events: {
        'keypress #new-todo': 'createTodoOnEnter'
      },
      createTodoOnEnter: function(e){
        if ( e.which !== 13 || !this.input.val().trim() ) { // ENTER_KEY = 13
          return;
        }
        app.todoList.create(this.newAttributes());
        this.input.val(''); // clean input box
      },
      addOne: function(todo){
        var view = new app.TodoView({model: todo});
        $('#todo-list').append(view.render().el);
      },
      addAll: function(){
        this.$('#todo-list').html(''); // clean the todo list
        app.todoList.each(this.addOne, this);
      },
      newAttributes: function(){
        return {
          title: this.input.val().trim(),
          completed: false
        }
      }
    });
    • initialize

      • this.input = this.$('#new-todo');

        • appView의 프로퍼티로 input을 만든다.

        • input은 HTML에서 id 값이 new-todo인 DOM이다.

      • app.todoList = new app.TodoList()

        • collection

      • app.todoList.on('add', this.addOne, this)

        • todoList에 새로운 모델이 더해지면 this.addOne가 발동한다.

        • 세 번째 인자 this는 컨텍스트를 알려준다.

        • 여기서는 굳이 사용할 필요가 없다.

      • app.todoList.on('reset', this.addAll, this)

        • reset 되면 모든 리스트를 다시 띄운다.

    • events

      • #new-todo 인 DOM 에 대해서 createTodoOnEnter 함수를 실행시켜라

    • createTodoOnEnter

      • 인자로 e가 들어온다. 이 e 는 input으로 들어온 값이다.

      • 입력된 값이 Enter면 입력된 데이터를 기반으로 새로운 모델을 만든다.

      • 이후 input 박스의 값을 공백으로 수정한다.

    • addOne

      • Todo 가 하나 늘어난다는 것은, 리스트에 하나가 추가됨을 의미한다.

        • 리스트에 하나가 추가 된다는 것은 li 태그가 하나 더 생긴다는것

    • addAll

      • 이니셜라이즈 함수에서 이벤트를 on 할 때를 보면 세 번째 인자로 this 를 넣어주는걸 볼수있다.

      • 즉, 이 함수 안에서 사용되는 this의 주체는 addAll 함수 자체가 아닌 initialize 다.

        • initialze가 아니라 appView 인가..?

    • newAttributes

      • { } 객체 스타일로 리턴한다. 이 값으로 모델을 초기화한다.

PreviousPart1NextPart3

Last updated 4 years ago

Was this helpful?