깍돌이의 _WebQA(SQA)

var temp = {

// do  attribute

}

temp라는  데이터 모델?(객체) 를 통해서 값을 채우고 해당값을 

var resultArr = []; 에

resultArr.push(temp);

식으로 사용하다가 객체 참조 오류가 나는 경우가 생겼습니다.

temp를 수정후 

resultArr.push(temp) 시에는

resultArr [0] = >temp를 가지고있습니다.

다시한번 push 할 경우

resultArr[1] = > temp 0과 1둘다 temp와 같은 곳을 바라보게 됩니다.

수정하면서 push 는 되지만

결국 마지막 수정된 push 값을 resultArr은 전부 가지고있게 되는 것입니다.

예시를 들어 보겠습니다.

해당 예시는 객체 참조 에 대한 예시일뿐입니다.

해당 결과는?

마지막에 수정되었던 CCC cc값을 전부 가지고있습니다. 모든 배열들이 새로 추가될때마다 같은 temp를 바라보게 되는 상황이 있기 때문입니다.

** push 하는 순간에 (shallow copy (얕은복사) 가 일어나기 때문에 발생하는 현상입니다.)

// 해당 상황에 대한 해결법은

Array.prototype.slice.call 

Array.prototype.slice.apply 

Object.assign 등이 있지만 객체 참조에 대한 이야기로 계속 진행하겠습니다.

gdl blah 가 있습니다. 들어온 숫자만큼 블라 블라를 외치네요

objRef 라는 새로운 객체를 생성 후 속성으로 gdl blah 를 가지게 되면

위의 그림과 같이 같은 함수를 바라보게 됩니다.

아마 해당상태에서는 함수의 동작은 블라를 외치기만 하기 때문에 큰 문제가되어 보이지는 않습니다.

objRef는 그대로 놓은 상태로 gdl의 블라를 제거한다면 위의 그림과 같이

function 은 gdl의 blah 를 바라보고있었지만 해당 연결고리가 끊어지는 바람에  objRef는 바라볼곳이 없어지며 에러를 발생 시킵니다.

해당 객체 참조 이슈가 나타나게 되는데

함수를 작성할 때 함수 Context 를 지정하여 서 해결 할수 있습니다.

각 펑션이 현재 가지고있는 object를 context로 가지기 때문에 앞선 gdl이 사라져도 문제 없이 동작됨을 확인할수 있습니다.

메모이제이션(memoization) 

전에 하였던 계산 또는 작업 의 결과 등을 기억하여

같은 결과를 도출 해낼시에 중간 계산 작업을 한번더 하지 않고 결과를 도출해내는 함수를 만

드는 방법이다.

매번 반복해야될 작업들에 대해서 반복하지 않도록 해주기 때문에

성능 향상을 기대해 볼수 있다.

개인적으로는 캐싱방법과 같아 보이며 캐싱을 사용하는 만큼 메모리 사용량도 늘어나기 때문에 유의 해 보여야 한다.

관련 자료를 찾다보니 함수는 함수로서의 기능만 하여야 한다는 이야기가 있지만

이거는 관련 주장으로만 보면 될것 같다.

메모이제이션이 들어간 예제를 한번 보겠다.

관련 예제는 실용성이 있는건 아니고 메모이제이션에 대한 설명으로 간단하게 작성된 예제이며 자바스크립트 함수의 캐싱 방식에 대한 예제입니다.

// 미 적용 코드 1.8~2.5초

function memoization(number)

{

console.time();

var data ='';

for(var i=0;i<number;i++)

{

data+=i;

}

console.timeEnd();

return data;

}

// 메모이제이션 적용 코드

function memoization(number)

{ 

console.time();

// 캐시 생산 

if(!memoization.cache)

memoization.cache={};

if(memoization.cache[number]!=null){

console.timeEnd();

return memoization.cache[number];

}

var data='';

for(var i=0;i<number;i++){

data+=i;

}

console.timeEnd();

return memoization.cache[number] = data;

}

// 미작성 DOM 에 대한 캐싱처리는 따로 작성하겠습니다.

 > 자바스크립트는 함수형 언어이다. 

-> forEach(item,index,array)

 > 자바스크립트의 함수는 1종 객체이다. 

var show = function(){} 와 같이 함수를 변수로 생성 할수 있다.

show.add = functioin(){} 와 같이 마찬가지로 함수를 프로퍼티에 할당할수 있다.

위의 두개를 보고 알수 있듯이 프로퍼티와 메서드를 가질수 있다.

> 함수내의 선언된 타입의 유효범위는 함수 내 전체이다.

변수 참조

show; // ->undefined

var show = 1  // undefined로 올라와짐

show(); // -> undefined

var show = function(){}; // undefined로 

는 show가 함수지만 변수로 생성하였기 때문에 변수의 호출 방식을 따르며

undefined로 올라(호이스팅)온다.

show(); // show

function show() { console.log("show");} // show 함수 전체가 참조 될수있도록 올라간다.(호이스팅)

할당되지 않은 경우의 매개변수는 undefined

function(param,1param2) 로 선언후 

function(1,2,3,4,5) 로 진행시

param1 = 1

param2 = 2

3,4,5는 따로 연결되지 않는다.

function show(){} 후

> show() 시에 내부적으로 2개의 매개변수가 있다.

arguments:  실제로 전달된 인자의 컬렉션

this : 함수 콘텍스트 객체를 참조

function(param1,param2)

function(1,2,3,4,5)

시에 arguments를 사용하면 3,4,5까지 가져다 사용할수 있다.

결과 

> apply 나 call 을 사용시 함수 콘텍스트를 변경할수 있다. 

함수형 프로그래밍을 부합하게 해주는 for-each 함수  

Array.prototype.forEach()

arr.forEach(callback[, thisArg])

callback

각 요소에 대해 실행할 함수

currentValue

> 배열에서 현재 처리 중인 요소

index

> 배열에서 현재 처리중인 요소의 인덱스

array

> forEach() 가 적용되고있는 배열

thisArg

선택사항, callback 을 실행할때 this로서 사용하는 값

반환값

undefined

** Exception 처리를 하지 않는 한 forEach 를 정지 또는 탈출이 불가능합니다.

(stop,break,continue, 등등) -> 이 행동이 필요한 경우는 forEach 의 잘못된 사용

기본 for문을 사용하길 권장

[참조] developer.mozilla.org

forEach () 의 함수 사용의 예

결과

a[0] = 2

a[1] = 5

a[3] = 9

this arg를 사용시 

결과

obj.count

3

obj.sum

16

Simple for-each 작성

결과

this는 list[n]

index는 n 이 들어감이 확인된다. 'First', 'Second'가 나온이유는 array_[index]로 출력하였기 때문 

callback 함수 만드는법을 따라 보았다. 아 물론 스터디이기 때문에 책을 보고 

명시적인(뜻이 분명한,확실하게) 함수 콘텍스트를 지정할수 있는 메소드

Function.prototype.apply

apply(thisArg,[argsArray]);

Function.prototype.call

call(thisArg,[, arg1[,arg2[,....]]])

Function.prototype.bind

bind(thisArg,[,arg1[,arg2[,...]]]);

1. apply

두개의 매개 변수를 가진다.

(  (1)  Function(),    (2) [......])

(1) 해당과 같이 펑션을 가지게 된다. 함수 콘텍스트로 사용할 펑션 객체 

(2) [ ] 형태의 Array 를 인자로 받는다.

2. call 

두개의 매개변수를 가진다. (apply 와 마찬가지로)

(  (1)  Function(),    (2) ......)

(1) 해당과 같이 펑션을 가지게 된다. 함수 콘텍스트로 사용할 펑션 객체 (apply 와 같음)

(2) 배열의 형태가 아닌 인자를 그대로 직접 받는다. 

function foo(){};

apply (foo,[1,1,1,1]);

call ( foo,1,1,1,1);

실제 사용 테스트 코드 

결과

test1 result value :  12

test2 result value :  4

두 메서드는 인자의 차이만 있을뿐 거의 같은 방식으로 동작하게 된다.

apply 냐 call 이냐의 선택은 인자를 어떻게 사용하여야 하는지에 따라 다를것 같다.

배열 형식으로 사용할거면 apply 인자를  한두개씩 직접 전달해야되는 경우 call 

을 선택하여서 사용하면 될것 같다.

결과를 보면 알겠지만 함수의 기능을 가져다 쓰면서 result값을

this.result를 통해서 작성하게 되어있다.

test1과 test2의 각각 컨텍스트를 가질수있게 해주는 메서드로 보면된다.

3. bind

sddfsf

color - 폰트 색상을 지정 

font-family - 글씨체를 지정.

font-style    - 이텔릭과 같은 스타일을 지정. // bold같은 체는 font-style이 아닌점 

font-weight - 글자의 굵기를 조절 // bold 체를 하고싶은 경우 해당 속성에서 bold 혹은 700 

                   으로 지정

font-variant - 영문자 소문자를 작은 대문자로 변경.

=> 특이한 속성  small-caps 로 지정시 소문자가 작은 대문자가 됨

line-height - 줄 높이를 지정하는 속성

줄 간격을 조절하는 속성입니다. 이 줄 간격을 조절함으로써,

문서의 가독성을 보다 향상 시킬 수 있습니다. px이나 % 등의 단위들이 사용가능 하며,

단위 없이 '1.5'와 같은 숫자만 입력할 경우 em과 동일하게 인식합니다.

예를 들어 만약 글씨 크기(font-size)가 10px이고, line-height 값이 1.5 라고 한다면 줄 간격은 10 * 1.5 = 18px 이 됩니다.

letter-spacing - 글자 사이의 간격 자간을 설정

(단위는 px cm in 등을 사용할수 있지만 px를 권장 normal 지정하면 0px랑 같음)

word-spacing - 단어와 단어 사이의 간격을 지정한다.

(단위는 px cm in 등을 사용할 수 있지만 px를 권장)

Hello World 일시 Hello 와 World의 사이를 지정한다.

font-size - 폰트의 크기를 지정.

12px 14px 16px로 지정할 수 있다.

px 혹은 %등의 단위를 사용이 가능하며 기본 숫자만 입력시는 em으로 지정됩니다.

<p> 태그에서 

em 으로 지정시 1.5의 의미는 부모의 1.5배 즉 15px의 1.5배의 크기를 가집니다.

%   로    지정시 150%의 의미는 부모의 1.5배 즉 15px의 1.5배의 크기를 가집니다.

font - 글자 관련 속성의 축약 버전. font-family, font-style, font-size, font-weight, line-height들의 속성을 한번에 지정할수 있으며 해당 속성의 순서는 매우 중요합니다.

nconf 모듈 

> 시스템 환경 변수에 접근할수 있는 모듈입니다.

> 

www.npmjs.com 

에서 확인해보면

• 50,407 downloads in the last day
• 303,255 downloads in the last week
• 1,352,749 downloads in the last month

꽤 잘나가는 모듈임을 알수 있습니다. 

바로 전날만 해도 5만건을 다운로드 하였네요 

package-lock.json 으로 종속 모듈도 다운로드수에는 포함이 됩니다.

npm install nconf  // 물론 Node.js 프로젝트 폴더 - package.json package-lock.json 폴더가있는 위치에서

설치를 한 후에 

코드를 작성합니다.

그냥 단순하게 돌려보았을시에는

결과값으로

형식으로 나옴이 확인됩니다.

자세한 내용은 추후 작성 하도록 하겠습니다.