만도의 개발 블로그
2018년 8월 7일

오늘 한 일:

내일 할 일:

배민찬

Web storage APIs: localStorage

로컬 브라우저에 데이터를 저장하는 api

key-value형태의 string으로 저장된다.localStorage.setItem('key, 'value');

sessionStorage와 비슷하지만 세션이 닫히지 않아도 저장되어 있음

쿠키와 차이점은? 데이터를 클라이언트에서 불러오냐, 서버에서 불러오냐의 차이

TAB UI 리팩토링

1. AJAX를 수행하는 함수제작

다른 곳에서도 계속 사용할 것 같아 범용적으로 사용할 수 있는 함수 제작

function getDataUsingAjax({uri, callback})

2. AJAX 함수의 위치 이동

이전에는 모든 XHR통신이 controller에서 이뤄졌음.

ajax가 많아질수록 controller의 크기가 커지고 복잡해질 수밖에 없다. 따라서 각각의 뷰에서 ajax를 하도록 함

3. Template클래스

template을 쪼개면 다양한 목적에 맞게 사용할 수 있음. 그러나 유지보수가 어려워짐

읽기 쉬우라고 쪼갠 것도 있지만 더 읽기 어려워졌다.

범용적으로 쓰이지 않는 template는 하나로 합쳐도 무방할 것 같다

4. triggerEvent에 인자 추가

view에 있는 triggerEvent라는 메소드는 event driven development에 잘 사용된다. event를 명확히 하기 위해서 이벤트 타입을 인자로 받기로 함

// before
view.triggerEvent();
// after
view.triggerEvent('click');

5. view의 초기화는 모두 controller에서

view의 초기화를 따로 하지 말고 모두 controller에서 하도록 변경

// before
view1.init()
view2.render()
controller.init()

// after
controller.init = function(){
    view1.init()
	view2.render()
}
controller.init()

화면전환 효과

scenario

왼쪽(오른쪽) 버튼을 눌렀을 때
  1. 왼쪽(오른쪽) 화면으로 바뀐다
  2. 왼쪽(오른쪽) 인덱스 버튼 활성화 된다
인덱스 버튼을 눌렀을 때
  1. 해당 화면으로 바뀐다
  2. 클릭된 인덱스 버튼이 활성화 된다

설계

class SceneChange {
    constructor({scene, leftButton, rightButton, indexButton})
}
flow

세번째 장면에서 왼쪽(오른쪽) 버튼이 눌렸을 때

  1. 왼쪽 버튼이 눌린다
  2. 인덱스가 2(3 -1)가 된다
  3. scene의 해당 인덱스의 엘리먼트가 활성화 된다
  4. indexButton의 해당 인덱스의 엘리먼트가 활성화 된다

첫화면에서 왼쪽 버튼이 눌렸을 때

  1. 왼쪽 버튼이 눌린다
  2. 인덱스가 -1이 된다
  3. Idx = (idx+length)%length
  4. scene의 해당 인덱스의 엘리먼트가 활성화 된다
  5. indexButton의 해당 인덱스의 엘리먼트가 활성화 된다

인덱스 버튼이 눌렸을 때

  1. 클릭된 엘리먼트의 인덱스를 받아온다
  2. scene의 해당 인덱스의 엘리먼트가 활성화 된다
  3. indexButton의 해당 인덱스의 엘리먼트가 활성화 된다
class SceneChange {
    constructor({scene, leftButton, rightButton, indexButton}) {
        ...
        this.index = 0;
        this.len;
    }
    init() {
        this.leftButton.addEventListner('click', () => {
            const idx = ((this.index-1) + this.len) % this.len
            this._modifyIndex(idx);
        })
        ...
        this.indexButton.addEventListenr('click', (target) => {
            const idx = target.dataset.idx;
            this._modifyIndex(idx);
        })
    }
    _modifyIndex(idx) {
        this.idx = idx;
        this._activate(this.idx);
    }
    _activate(idx) {
        this._activateScene(idx);
        this._activateIndexButton(idx);
    }
    _activateScene(idx) {
		this._removeClass({nodeList: this.scene, className: 'visible'});
        this.scene.children[idx].classList.add('visible');
    }
    __activateIndexButton(idx) {}
    _removeClass({nodeList, className}) {}
}

CSS

이미지 태그없이 이미지 삽입하기

background속성을 이용

div {
    background: no-repeat left right/50% url(./img.jpg);
    background: no-repeat -10px -50px url(./img2.jpg);
}
중심 옮기기

transform속성의 translate이용

div {
    transfrom: traslate(-50%, -50%);
}
겹치는 순서 바꾸기

z-index를 이용하여 상위나 하위로 옮길 수 있다

div {z-index: 1;}
© 2017 Kiko. All rights reserved.