[Front-end🦁] #32 TDD + JavaScript 모듈화

1. TDD

1. 객체 생성 패턴

1. 모듈 패턴 : 클로저를 이용해서 값을 은닉.

• 캡슐화를 왜하는데?????? 에 대한 의문이 계속 있었는데, 예시를 드느라고 변수를 하나만 넣고 get set 하는 함수를 다 구현해서 그냥 객체랑 차이가 없어보였던 것 같다. 해당 객체에 필요한 변수가 여러개이고, 어떤 것은 은닉하고 어떤 것은 읽기만 가능하고 어떤 변수는 읽기 쓰기가 다 가능해야 한다면..? 이렇게 쓰는 수 밖에!

// 1. 모듈 패턴
// age는 직접 접근 불가능. 숨겨진 값임.
// 객체를 반환하는 것도 아님.
function person() {
    let age = 123;
    return {
        getAge: function () { return age },
        setAge: function (data) { age = data }
    }
}

2. 사용자 정의 타입 패턴 : 생성자 함수 사용. 값이 은닉되진 않음.

// 인스턴스에서 접근 가능하기 때문에 age는 숨겨진 값이 아님.
function PersonType() {
    this.age = 135;
}
PersonType.prototype.getage = function () {
    return this.age
}
const instancePerson = new PersonType();

3. 그냥 객체 생성

// 3. 그냥 Object
// 객체를 딱 하나만 만들어서 쓰는 것을 싱글톤 패턴이라고 한다.
let person2 = { age: 35 };

4. 모듈 + 사용자 정의 타입 패턴

// 인스턴스를 효율적으로 생성하면서 값을 은닉.
// IIFE 패턴 : 함수를 실행해야 생성자 함수가 return 되기 때문에 즉시 실행 함수를 이용한다!!!!
const Person3 = (function PersonType2() {
  // closure 공간.
  // 여러개의 인스턴스를 만들어서 age 값을 공유하게 하려면 원시값이 아니라 객체로 만들어야 한다.
    let age = { data: 142 }; 
  // 함수 내부 공간에서 생성자 함수를 만들어서 return
    function innerPersonType() { }
    innerPersonType.prototype.getAge = function() {
      // age에 접근할 수 있는 closure 함수.
        return age;
    }
    return innerPersonType;
})();
// const Person3 = PersonType2();
const person3 = new Person3();
person3.getAge()

2. 데이터 관리 객체, 뷰어 객체

• 데이터 관리 객체 : 데이터를 은닉하고 있다가 필요할때 다른 객체에 전달하거나 수정하는 객체
• 뷰어 객체 : 데이터, 인풋, 버튼, 뷰어를 연결하는 객체

데이터 관리 객체
textManager.js

// 모듈 + 사용자 정의 타입 패턴을 이용!
const TextManager = (function () {
    let value = { data: "Hello Lions!"};
    function innerTextManager() { }
    innerTextManager.prototype.getValue = function () {
        return value.data;
    }
    innerTextManager.prototype.setValue = function(newValue) {
        value = newValue;
    }
    return innerTextManager;
})();

textManager.spec.js

describe('텍스트 관리자입니다.', () => {
  // beforeEach : it 함수 호출 직전에 실행.
  // 각 it에서 겹치는 부분은 이렇게  로 빼서 사용한다.
    let textManger;
    beforeEach(() => {
        textManager = new TextManager();
    })
    it('텍스트 값을 전달합니다', () => {
        const initValue = textManager.getValue();
        expect(textManager.getValue()).toBe(initValue);
    })
    it('텍스트 값을 수정합니다.', () => {
        const newText = { data: 'Hello Zebras' };
        textManager.setValue(newText);
        expect(textManager.getValue()).toBe(newText.data);
    })
})

뷰어 객체
viewManager.js

function ViewManager(textManager, options) {
    if(!textManager || !options.btnEl || !options.viewerEl || !options.inpTxt) {
        // null이 하나라도 있을 때
        // 사용자 정의 오류를 만들고 프로그램 종료.
        throw Error('전달 인자 중에 빈 값이 존재합니다.');
    }
    this.textManager = textManager;
    this.viewerEl = options.viewerEl;
    this.inpTxt = options.inpTxt;
    options.btnEl.addEventListener('click', () => {
        this.changeValue();
    })
}
// 버튼을 누르면 값을 세팅.
ViewManager.prototype.changeValue = function() {
    this.textManager.setValue({ data: this.inpTxt.value });
    this.updateView();
}
ViewManager.prototype.updateView = function () {
    this.viewerEl.textContent = this.textManager.getValue();
}

viewManager.spec.js

describe('click event handling과 view를 담당하는 함수입니다.', () => {
    // dependency injection (의존 주입) : 다른 객체를 자신에게 주입시켜야만 사용할 수 있음.
    // view는 textManager를 전달받아야 사용할 수 있다.
    let textManager, viewerEl, btnEl, inpTxt, viewManager;
    beforeEach(() => {
        textManager = new TextManager();
        viewerEl = document.createElement('strong');
        btnEl = document.createElement('button');
        inpTxt = document.createElement('input');
        viewManager = new ViewManager(textManager, {viewerEl, btnEl, inpTxt});
    });
    it('viewManager에 인자가 잘 전달됐는지 확인합니다.', () => {
        const textManager = null;
        const btnEl = null;
        const viewerEl = null;
        const inpTxt = null;
      //
        // 인자가 전달되는지 확인하는 함수.
        const actual = () => new ViewManager(textManager, { btnEl, viewerEl, inpTxt });
        // 값을 전달해주는 함수 actual이니까, 값이 제대로 전달됐는지를 확인하면 됨.
        // expect(함수) 로 실행할 수 있는 함수를 전달해야 한다.
        expect(actual).toThrowError();
    })
    it('click event가 발생했을 경우 changeValue 함수를 실행합니다.', () => {
        // spyOn : 특정 모듈의 함수 감시
        spyOn(viewManager, 'changeValue');
        btnEl.click();
        // toHaveBeenCalled : 함수가 호출이 된 적이 있는지 판별 - spyOn이 있어야 함.
        expect(viewManager.changeValue).toHaveBeenCalled();
    })
    it('updateView 함수를 실행합니다.', () => {
        // updateView는 changeValue가 일어나면 바로 실행.
        spyOn(viewManager, 'updateView');
        viewManager.changeValue();
        expect(viewManager.updateView).toHaveBeenCalled();
    })
})

index.html

// 불러와서 연결만 해주면 된다.
const viewerEl = document.querySelector('.viewer');
const inpTxt = document.querySelector('.inp-txt');
const btnEl = document.querySelector('.btn-push');
// 데이터 관리 / 뷰 객체
const textManager = new TextManager();
const viewManager = new ViewManager(textManager, { viewerEl, inpTxt, btnEl });
// 초기값을 화면에 보여줌.
viewManager.updateView();

• 약간.. 지금은 당연히 같아야 되는거 아닌가..? 테스트까지 할 필요가 있나? 싶은데 구조가 더 복잡해지면 테스트 코드가 진가를 발휘할 것 같다.

• 모든 코드에 테스트 코드를 작성받는게 아니라, ViewManager 처럼 뭔가를 받아와서 실행하는 utility 코드에만 작성한다.

• 테스트 코드도 사람이 작성하는거니까 방심하지 말자!

2. 시험

프로젝트 팀을 위한 HTML/CSS 시험을 봤다.

틀린 문제 중 대충 읽었거나 아는 내용인데 빨리 풀고 싶어서 호로록 풀다가 틀린 것을 제외하고

진짜로 몰라서 틀린 것

• js class : 수업을 그 날 못 들어서, 딥다이브 순서대로 읽으면서 보충할 예정.

기억 하려고 하니 안나서 틀린 것

• CSS sprite : #16 다시보기
• SASS extends : #19 다시보기
• jQuery : #30 다시보기

3. codelion 강의 수강

js 강의를 수강했다. 로또 번호 추첨기, textarea 글자 수 세는 간단한 코드를 짰다. 옛날에 들었으면 마냥 간단하다고 생각 안했을 것 같은데, 간단하게 느껴졌다.

소스코드 - 로또 번호 추첨기, textarea 글자 수 세기