대바보의 끄적끄적

TDD 테스트 주도 개발이란?

개발을 먼저하지 않고 테스트코드를 먼저 만든다.

시간이 많이 걸리는 단점은 있지만 프로젝트를 유지보수할때 큰효과가 나타난다.

mocha,should는 단위테스트이다.

Ex)함수테스트 : 함수별로 테스트한다.

mocha 모카란?

테스트에 사용하는 라이브러리

테스트 코드를 작성하면 테스트를 실행시켜주는것

테스트수트 : 테스트 환경을 꾸며준다. describe()를 사용한다.

테스트케이스 : 실제 테스트를 말하며 모카에서는 it()을 구현한다.

설치방법 : Npm install mocha —saver-dev

-dev : -dev를 하면 개발환경에서 필요하다는 말이다.

테스트 실행방법

node_modules/.bin/mocha [테스트파일명] 를 실행한다.

테스트 코드

const utils = require('./testUtils.js');
const assert = require('assert');

//mocha는 node로 실행할 수 없다.
describe('utils.js모듈의 capitialize 함수', ()=>{
    it('문자열 첫번째 문자를 대문자로 변환한다.', () =>{
        //테스트 코드 작성
        const result = utils.capitialize('hello');
        assert.equal(result, 'Hello');
    })

    it('문자열 첫번째 문자를 소문자로 변환한다.', () =>{
        //테스트 코드 작성
        const result = utils.capitialize('hello');
        assert.equal(result, 'hello');
    })
})

Should.js

테스트에 사용하는 라이브러리

슈드는 검증 라이브러리 이다.

예제 목록:https://github.com/tj/should.js/  

설치하기: npm I should —save-dev

테스트 코드

const utils = require('./testUtils.js');
const should = require('should');

//mocha는 node로 실행할 수 없다.
describe('utils.js모듈의 capitialize 함수', ()=>{
    it('문자열 첫번째 문자를 대문자로 변환한다.', () =>{
        //테스트 코드 작성
        const result = utils.capitialize('hello');
        result.should.be.equal('Hello');

    })

    it('문자열 첫번째 문자를 소문자로 변환한다.', () =>{
        //테스트 코드 작성
        const result = utils.capitialize('hello');
        result.should.be.equal(result, 'hello');
    })
})

슈퍼테스트

통합테스트에 사용한다.

Ex)api의 기능테스트

내부적으로 express를 구동시키고 테스트코드에서 작성된 시나리오대로 결과를 검증한다.

예제:https://github.com/visionmedia/supertest

설치하기:npm I supertest —save-dev

const request = require('supertest');

const express = require('express');



const app = express();



app.get('/user', function(req, res) {

  res.status(200).json({ name: 'john' });

});



request(app)

  .get('/user')

  .expect('Content-Type', /json/)

  .expect('Content-Length', '15')

  .expect(200)

  .end(function(err, res) {

    if (err) throw err;

  });

예제처럼 API의결과를 시나리오대로 테스트해보는것이다.

설치방법

npm install express --save 로 설치

express의 사용이유

어플리케이션

- 익스프레스 객체를 어플리케이션이라고 한다.

- 서버에 필요한 미들웨어를 추가한다.

- 라우팅 설정을 할 수 있다.

- 서버를 요청 대기상태로 한다.

미들웨어

- 서버에기능을 추가하고 싶을때 사용하는 함수들의 배열이다.

라우팅

- 여러가지 URL로 들어올때 응답을 설정한다.

요청객체

- request로 생각하면된다. request를 한번더 감싼다.

응답객체

- response로 생각하면된다. response를 한번더 감싼다.

use로 미들웨어를 사용한다.

//미들웨어 만들기

function logger(req, res, next){

    console.log("Test");

    next();

}



app.use(logger);

next(); 를 선언해야 다음 미들웨어도 동작한다.

express실행하기

Port번호를 설정하고 실행해야한다.

var express = require('express');
var app = express();
//중간 로직
app.listen('3000', function (){
    console.log('apiServerStart');
})

var,let의 차이

window객체에서 var만 사용 가능하다.

ex) this의 사용 ,this는 window오브젝트를 참조한다.

let은 scope개념이다.

특히 블록스코프에서 돋보인다.

<script type="text/javascript">
    var s = 1;
    var s = 2;
    //중복 출력해도 에러가 나지 않는다.
    let z = 1;
    //중복 출력시 에러가 난다.
    //let z = 2;
    if(s == 2){
        s = 3;
    }
    console.log(s);
    function get(){
        var s = 4;
        console.log("test : "+s);
        console.log("test : "+this.s);
        //let변수는 this사용시에 에러가 난다.
        //console.log("test : "+this.z);
    }
    get();
    //4가 출력된다.
    console.log(s);

    if(z == 1){
        //{} scope 안에서 따로 생성되는 개념
        let z = 3;
    }
    //1이 출력된다.
    console.log(z);

</script>

var와 let의 호이스팅 차이

<script type="text/javascript">
//변수 호이스팅
console.log(a);
var a = "test";

//console.log(b);
//let b = "test";
</script>

출력결과는 undefined로 나온다.

let는 에러로 나온다.

아래의 코드가 위에있는 코드의 호이스팅 개념이다.

<script type="text/javascript">
//변수 호이스팅
var a ;
console.log(a);
a = "test";

</script>

var와 let의 for문 비교

var를 사용하면 k의 출력결과는 3으로만 나온다.

let을 사용하면 클릭한 k의 숫자가 나온다.

{} 스코프개념

<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
</ul>
<script>
    var nodes = document.querySelector("ul");

    //var를 사용할 경우 k는 3이 출력된다.
    //var k 변수에 마지막에 3이 할당되기 때문이다.
    for(var k = 0; k < nodes.children.length; k++){
        var el  = nodes.children[k];
        el.onclick = function(event){
            alert("test");
            event.target.style.backgroundColor = "yellow";
            console.log(k);
        }
    }

    //let을 사용할 경우 k는 각 숫자가 출력된다.
    //scope 별로 값을 가지기 때문이다.
    for(let k = 0; k < nodes.children.length; k++){
        var el  = nodes.children[k];
        el.onclick = function(event){
            alert("test");
            event.target.style.backgroundColor = "yellow";
            console.log(k);
        }
    }


</script>

const란?

const변수에 할당된 값은 상수가 된다.

즉, 변경 불가능하다.

단 Object 형태로 선언 했을때는

{} Object는 할당할 수 없지만 obj의 프로퍼티에는 값을 할당할 수 있다.

<script type="text/javascript">
    const SPORTS = "축구";
    console.log(SPORTS);
    try{
        SPORTS = "농구";
    }catch (e){
        console.log("변경불가");
    }

    const obj = { test : "value" };
    try{
        obj = {};
    }catch (e){
        console.log("변경불가");
    }

    obj.test = "변경됨";
    console.log(obj.test);
</script>

출력결과:

축구

변경불가

변경불가

변경됨

식별자(Indentifier)란?

식별자는 무엇을 식별할 수 있는 도구로 변수,상수,함수명등이 포함된다.

식별자 이름은 반드시 글자,$,_로 시작해야한다.

- $사용 대표적예 jquery가 있다.

예약어 const,let,function등을 식별자이름을 사용할 수 없다.

대문자로 시작하지 않는다.(문법적인 오류는 아님)

varName <- carmelCase 형식으로 생성하기

var_name_test <- snakeCase 형식으로 생성하기

_로 시작하는 경우는 내부변수등에 사용한다. (특별한 상황에만 사용한다)

리터럴(literal)이란?

식별자 뒤에 할당되는 값아 value를 말한다.

let a = 30;이라면 30을 뜻한다.

숫자형,문자형등이 있다.

원시타입이란?

변수들이 같는 값(리터럴)이 문자,숫자,boolean(참거짓),null,undefined,심볼일 때를 원시타입이라고 한다.

객체(Object)타입이란?

Array,Date,RegExp,Map,WeakMap,Set,WeakSet등이 있다.

이스케이프란?

특수문자를 있는그대로의 문자로 표현할때 사용한다.

var d = "sss,\"ss\"."; 역슬래시를 사용하여 표현한다.

let,const 미리보기

ES6가 되면서 var의 문제점이 해결된 let을 사용한다.

ex)

let a = 2;

b = 2;

let aa = 100, bb = 200;

등으로 사용가능하다.

기존엔 상수라는 개념이 없었는데

const라는 상수 개념이 생겨났다.

상수란? 변하지않는 값을 말한다.

ex)

const AA_BBC_CC = 200;

상수엔 값을 할당할 수 없기때문에

AA_BBC_CC = 500; 형식으로 하면 에러가 난다.

jQuery checkbox 체크시 상위로 올리기

개발하다 checkbox에 체크하면 그 checkbox를 위로 올려달라는 요구가 

들어올때 요긴하게 사용하자.

jQuery CODE

HTML CODE