생성자와 new

객체지향의 기본 형태 : 변수 + 메소드, 디렉토리의 연관된 파일을 구분하는 것을 객체입니다.

객체는 독립성을 갖게 됩니다. 여러 완제품의 부품으로 사용이 가능하다는 의미입니다.

객체지향프로그래밍의 도달하고자 목표는 좋은 부품의 로직을 만드는 것!

var person = {}

person.name = 'egoing';

person.introduce = function(){

    return 'My name is '+this.name;

}

document.write(person.introduce());

=========================================

객체를 만드는 과정에 분산되어 있습니다. 객체를 정의 할 때 값을 셋팅하도록 코드를 바꿔보겠습니다.

var person = {

    'name' : 'egoing',

    'introduce' : function(){

        return 'My name is '+this.name;

    }

}

document.write(person.introduce());

생성자

생성자(constructor)는 객체를 만드는 역할을 하는 함수입니다. 자바스크립트에서 함수는 재사용 가능한 로직의 묶음이 아니라 객체를 만드는 창조자라고 할 수 있습니다.

function Person(){}

var p = new Person();

p.name = 'egoing';

p.introduce = function(){

    return 'My name is '+this.name;

}

document.write(p.introduce());

========================================

function Person(name){

    this.name = name;

    this.introduce = function(){

        return 'My name is '+this.name;

    }  

}

var p1 = new Person('egoing');

document.write(p1.introduce()+"<br />");

var p2 = new Person('leezche');

document.write(p2.introduce());

생성자의 특징

일반적인 객체지향 언어에서 생성자는 클래스의 소속입니다. 하지만 자바스크립트에서 객체를 맏는 주체는 함수입니다. 함수에 new를 붙이는 것을 통해서 객체를 만들 수 있다는 점은 자바스크립트에서 함수의 위상을 암시하는 단서이면서 자바스크립트가 추구하는 자유로움을 보여줍니다.

출처 : 생활코딩 강의

객체지향프로그래밍(OOP : Object Oriented Programming)

핵심 키워드는 객체입니다. 상태와 행위로 구분해 연관된 것들을 그루핑한 것을 객체입니다. 객체는 레고 블록처럼 하나의 완제품 소프트웨어를 만듭니다.

사이트 규모가 커지고 인원이 많아지고 오랜 시간 프로젝트가 진행되는 과정에서 어려움이 있습니다. 자연스럽게 복잡한 로직(변수, 메소드)들을 글목록, 본문, 댓글 등의 기능별로 그룹핑하고 싶다는 생각을 갖게 됩니다.

본문과 관련한 변수와 메소드가 응징되어있고, 댓글과 관련한 변수와 메소드가 응집되어있는 것이 객체입니다.

객체를 분류하여 소프트웨어를 쉽게 관리하도록 카테고라이징을 하면 기능이 나타납니다.

댓글의 기능이 다른 웹 사이트에서도 사용할 수 있기 때문에 이것이 바로 코드의 재활용성입니다.

이미 사용한 로직을 다른 곳에 사용하면 문제가 발생하니 여러 가지 로직을 제한하는 기능들이 추가하게 됩니다. 객체지향프로그래밍은 객체를 만드는 것이고 하나의 객체 안에 기능에 따라 모아 연관성 없는 것과 구분지은 것입니다.

추상화

설계를 잘하는 것은 어려운 일, 현실에서 관심있는 특성이나 관점을 소프트웨어화해서 프로그래밍 하는 것입니다.

위 그림은 런던의 지도입니다. 지하철을 이용한다면 어느 지도를 선호할까요? 마지막의 지도를 선택할 것입니다. 마지막 지도의 특징은 지하철 타는 사람의 유일한 관심사인 역의 이름과 환승하는 곳, 경유하는 역의 수입니다. 회로도의 영감을 얻어 만들었다고 합니다.

필요로 한 것만 현실에 추출한 것을 추상화(abstract ) 합니다.

현실을 프로그래밍 적으로 잘 만드는 것이 목표입니다.

“안타깝게도 좋은 소프트웨어를 만드는 것은 지식의 영역 보다는 지혜의 영역입니다. 지혜는 잘 전달되지 않아 스스로 깨달아야 합니다. 자신의 맥락에 처해있는 문제를 지루하고 긴 시간 끝에 좋은 프로그래머가 나오는 것이라고 생각합니다.” 이고잉님의 말씀에 공감합니다.

부품화

입력을 담당하는 키보드, 실제 연산을 담당하는 Cpu와 메모리인 본체, 화면에 보여지는 디스플레이를 부품화 해야합니다.

기능들을 부품화 시킨 덕분에 소비자들은 더 좋은 키보드나 저렴한 모니터를 선택할 수 있게 되었습니다. 또 문제가 생겼을 때 그 문제가 어디에서 발생한 것인지 파악하고 해결하기가 훨씬 쉬워집니다.

어떻게 부품화하고 설계하느냐에 따라 다릅니다.

모니터와 저장장치가 하로 연결되어 있습니다. 시대에 따라 설계하는 방식이 달라지고 있습니다.

자신이 처한 환경에 적합한 설계(추상화)를 하는 것이 목표입니다.

메소드를 사용하는 기본 취지는 연관되어 있는 로직들을 결합해서 메소드라는 완제품을 만드는 것입니다. 그리고 이 메소드들을 부품으로 해서 하나의 완제품인 독립된 프로그램을 만드는 것입니다.

은닉화, 캡슐화

내부의 동작 방법을 단단한 케이스(객체)안에 숨기고 사용자에게는 그 부품의 사용방법(메소드)만을 노출하는 것입니다.

인터페이스

잘 만들어진 부품이라면 부품과 부품을 서로 교환할 수 있어야 합니다.

예를 들어 집에 있는 컴퓨터에 A사의 모니터를 연결하다가 B사의 모니터를 연결 할 수 있습니다. 또 집에 있던 모니터에 A사의 컴퓨터를 연결해서 사용하다가 새로운 컴퓨터를 구입하면서 B사의 컴퓨터를 연결 할 수 있습니다. 모니터와 컴퓨터는 서로가 교환 관계에 있는 것입니다. 이것은 모니터와 컴퓨터를 연결하는 케이블의 규격이 표준화 되어 있기 때문에 가능한 일입니다.

컴퓨터와 모니터를 만드는 업체들은 위와 같은 케이블의 규격을 공유합니다. 모니터 입장에서는 컴퓨터가, 컴퓨터 입장에서는 모니터가 어떤 식으로 만들어졌는지는 신경 쓰지 않습니다. 각각의 부품은 미리 정해진 약속에 따라서 신호를 입, 출력하고, 연결점의 모양을 표준에 맞게 만들면 됩니다. 이러한 연결점을 인터페이스(interface)라고 합니다.

출처 : 생활코딩 강의

Arguments, 매개변수

함수 안에서 함수의 정보를 담고 있는 객체입니다. 배열과 비슷하지만 배열은 아닙니다.

매개변수와 인자의 차이  function A(arg){ }arg는 매개변수

A(1); -> 1은 인자

function sum(){

    var i, _sum = 0;   

    for(var i = 0; i < arguments.length; i++){ //자바스크립트와 약속된 변수명

        document.write(i+' : '+arguments[i]+'<br />');

        _sum += arguments[i];

    }  

    return _sum;

}

document.write('result : ' + sum(1,2,3,4)); //사용자가 전달한 인자

매개변수와 관련된 두가지 수가 있습니다. arguments.length와 함수.length

arguments.length는 함수로 전달된 실제 인자의 수를 의미하고

함수.length는 함수에 정의된 인자의 수를 의미합니다.

function zero(){

    console.log(

        'zero.length', zero.length, //0

        'arguments', arguments.length //0

    );

}

function one(arg1){

    console.log(

        'one.length', one.length,

        'arguments', arguments.length

    );

}

function two(arg1, arg2){

    console.log(

        'two.length', two.length,

        'arguments', arguments.length

    );

}

zero(); // zero.length 0 arguments 0

one('val1', 'val2');  // one.length 1 arguments 2

//함수의 이름. Length는 매개변수를 정의한 숫자, arguments 몇 개의 인자를 전달했는가

two('val1');  // two.length 2 arguments 1

함수의 호출

function sum(arg1, arg2){

    return arg1+arg2;

}

alert(sum(1,2)); //결과는 3입니다.

alert(sum.apply(null, [1,2])) //결과는 3입니다.

sum.call

o1 = {val1:1, val2:2, val3:3}

o2 = {v1:10, v2:50, v3:100, v4:25}

function sum(){

    var _sum = 0;

    for(name in this){ //this는 호출 시 정해집니다.

        _sum += this[name];

    }

    return _sum;

}

alert(sum.apply(o1)) // 6 o1객체를 apply인자로 주게되면 o1이 함수에서 this가 됩니다.

                       //var this = o1; 이라는 값이 됩니다.

alert(sum.apply(o2)) // 185

출처 : 생활코딩 강의

아래의 문제는 자바스크립트에서 유효범위인 전역변수와 지역변수에 대해 아는 가에 관한 문제인데요.

유효범위(Scope)는 변수의 수명을 의미합니다.

먼저 고민해서 풀어보시고 난 후에 정답을 확인하면 좋을 것 같아요!

<script type="text/javascript">
$(document).ready(function(){
    function A(){
        console.log(myVar);
        var myVar = 1;
        console.log(myVar);
			
        function B(){
            console.log(myVar);
            myVar = 2;
            console.log(myVar);
				
            var myVar = 3;
            console.log(myVar);
        }
        B();
    }
    var myVar = 4;
    A();
		
});
</script>

정답은 다음과 같습니다!

1번째 값과 3번 째 값이 undefined가 된 이유는 지역 변수가 적용 되는 범위 내에서 변수가 선언되기 전까지의 값은 주지 않았기 때문에 undefined가 됩니다. 이름이 같은 전역 변수가 있다해도 함수내에서 무시됩니다. B() 함수내 값을 할당함으로 인해 변수를 선언한 효과가 있습니다.

*함수의 중괄호 안에 선언된 변수만이 함수 안의 지역변수이므로 for, if 중괄호에 선언된 함수는 지역변수로의 의미를 갖지 않습니다.

SDK(Standard Development Kit or Softeware Development Kit)

 개발 언어의 소프트웨어 개발 킷으로, 프로그램을 개발하려면 개발하는 프로그램있어야 하는데 이를 의미합니다.

JDK(Java Development Kit)

 자바 개발을 위한 필수 도구입니다. JDK는 JRE를 포함하고 있습니다.

JRE(Java Runtime Environment)

 JDK로 만들어진 프로그램을 실행할 수 있도록 합니다. 파일 용량이 적은 대신 개발을 할 수 없습니다. 예를 들어 한글 뷰어의 경우 한글 파일을 읽을 수 있지만 작성하지는 못하는 기능과 비슷합니다.

JVM(Java Virtual Machine)

 자바가상머신의 약자로, 사용자가 자바 파일을 생성한 후 JDK의 컴파일을 커쳐 바이트 코드인 .class가 되어서 JVM을 거치면 컴퓨터가 사용할 수 있는 기계언어로 변경해주는 역할입니다.

대부분 아파치 톰캣을 이용해서 웹 서버를 띄우고 개발을 진행을 합니다.

아파치와 톰캣이 무엇인지 알기 위해서 WEB과 WAS에 대해서 알아야합니다.

WEB Server는 HTML 문서같은 정적 컨텐츠를 처리하는 것입니다. (HTTP 프로토콜을 통해 읽힐 수 있는 문서)

클라이언트가 GET, POST 등의 메소드를 이용해 요청 하면 프로그램이 결과를 돌려주는 기능을 합니다.

WAS Server는 asp, php, jsp 등 개발 언어를 읽고 처리하여 동적 컨텐츠, 웹 응용 프로그램 서비스를 처리하는 것입니다.

DB와 연결되어 데이터를 주고 받거나 프로그램으로 데이터 조작이 필요한 경우 사용합니다.

apache는 web server(html) 이고

tomcat은 Servlet/JSP container = WAS(Web Application Server)

아파치는 jsp처리를 못하기 때문에 jsp를 받아서 톰캣에서 처리하고 다시 아파치로 넘겨주는 작업을 합니다.

웹 컨테이너란 웹 서버에서 JSP를 요청해 톰캣에서 JSP파일을  서블릿으로 변환하여 컴파일하여 서블릿의 결과를 웹서버의 전달하는 것입니다.

출처 : http://gap85.tistory.com/45

*정적 컨텐츠와 동적 컨텐츠의 차이

출처: http://titus94.tistory.com/4

값으로서의 함수와 콜백(함수의 용도)

자바스크립트에서도 함수는 객체입니다. 즉, 함수 자체가 값이 될 수 있습니다.

var a = function(){ } a라는 변수에 함수가 담길 수 있습니다.

객체의 속성 값으로 담겨진 함수를 메소드(method)라고 부릅니다.

함수는 인자로 전달될 수 있고 리턴값(반환값)으로도 사용 가능합니다.

함수는 배열의 값으로 사용할 수 있습니다.

var process = [

    function(input){ return input + 10;},   //input[0] = 11

    function(input){ return input * input;}, //input[1] = 121

    function(input){ return input / 2;}    //input[2] = 60.5

];

var input = 1;

for(var i = 0; i < process.length; i++){

    input = process[i](input);

}

alert(input);

콜백

function sortNumber(a,b){

    // 위의 예제와 비교해서 a와 b의 순서를 바꾸면 정렬순서가 반대가 됩니다.

    return b-a;

}

var numbers = [20, 10, 9, 8, 7, 6, 5, 4, 3, 2, 1];

alert(numbers.sort(sortNumber)); // array, [20,10,9,8,7,6,5,4,3,2,1]

콜백함수란 ? sort 기본적인 동작 방법을 변경할 수 있습니다. 즉 값으로서 함수를 사용할 수 있기 때문에 오리지널 함수의 동작방법을 값을 전달하는 것을 통해 완전히 바꿀 수 있는 것입니다.

콜백이 가능한 이유는 자바스크립트에서 함수가 값이기 때문에 콜백이 가능합니다.

비동기 처리

콜백은 비동기처리에서도 유용하게 사용됩니다. 시간이 오래 걸리는 작업이 있을 때 이 작업이 완료된 후에 처리해야 할 일을 콜백으로 지정하면 해당 작업이 끝났을 때 미리 등록한 작업을 실행하도록 할 수 있습니다. 다음 코드는 일반적인 환경에서는 작동하지 않고 서버 환경에서만 동작합니다.

대표적인 예로 AJAX(Asynchronous Javascript And XML) : 자바스크립트를 이용해 html코드를 이용해 화면에 출력

클릭 시 웹 페이지가 변경되지 않고 서버와 웹 브라우저가 내부적으로 조용히 통신하는 기법

Ajax는 웹이 단순히 문서에서 벗어나 이런 동작을 할 수 있는 애플리케이션으로 발전하게 한 단서입니다.

클로저

클로저(closure)는 내부함수가 외부함수의 맥락(context)에 접근할 수 있는 것입니다. 클로저는 자바스크립트를 이용한 고난이도의 테크닉을 구사하는데 필수적인 개념으로 활용됩니다.

function outter(){

    function inner(){

        var title = 'coding everybody';

        alert(title);

    }

    inner(); //'coding everybody' 출력

}

outter(); //'coding everybody' 출력

내부함수에서 외부함수의 지역변수에 접근 가능한 것이 클로저입니다.

function outter(){

    var title = 'coding everybody'; 

    return function(){       

        alert(title);

    }

}

var inner = outter();

inner(); //'coding everybody' 출력

외부함수의 지역변수에 접근 할 수 있는데 외부함수의 실행이 끝나서 외부함수가 소멸된 이후에도 내부함수가 외부함수의 변수에 접근 할 수 있습니다. 이러한 메커니즘을 클로저라고 합니다. 결과는 경고창으로 coding everybody를 출력할 것입니다.

private variable

객체 안의 함수가 있는 상태, 첫 번째 매개변수는 title, 매개변수는 함수 안에서 지역변수로 사용

get_title 메소드를 호출하면 title을 리턴합니다.

set_title 메소드는 _title이 title값을 변경합니다.

function factory_movie(title){

    return {

        get_title : function (){

            return title;

        },

        set_title : function(_title){

            title = _title

        }

    }

}

ghost = factory_movie('Ghost in the shell');

matrix = factory_movie('Matrix');

alert(ghost.get_title()); //'Ghost in the shell'

alert(matrix.get_title());//'Matrix'

ghost.set_title('공각기동대');

alert(ghost.get_title()); //'공각기동대'

alert(matrix.get_title()); //'Matrix'

ghost와 matrix는 private 변수에 객체를 담았습니다

private변수가 필요한 이유는 소프트웨어의 규모가 커질수록 많은 데이터가 존재하게 됩니다.

그 데이터를 누구나 수정 가능하다면 소프트웨어가 쉽게 망가질 수 있기 때문입니다.

출처 : 생활코딩 강의

자바스크립트 유효범위: 전역변수와 지역변수

유효범위(Scope)는 변수의 수명을 의미합니다.

var vscope = 'global';

function fscope(){

    alert(vscope); //global을 출력

}

fscope();

fscope함수는 함수 바깥에 선언된 vscope에 접근할 수 있습니다.

var vscope = 'global';                                        var vscope = 'global';

function fscope(){                                                        function fscope(){

    var vscope = 'local';                                       vscope = 'local';

    alert('함수안 '+vscope); //local을 출력                alert('함수안 '+vscope); //local을 출력

}                                                                  }

fscope();                                                         fscope();

alert('함수밖 '+vscope); //global을 출력                alert('함수밖 '+vscope); //local을 출력

var vscope = 'global';

function fscope(){

var vscope = 'local' //지역변수에 해당

 vscope = ‘local’ //역시 지역변수에 해당

}

fscope();

alert(vscope); //global을 출력

이미 var으로 vscope의 지역변수가 생성되었습니다.

전역변수는 사용하지 않는 것이 좋습니다. 여러가지 이유로 그 값이 변경될 수 있기 때문입니다.함수 안에서 전역변수를 사용하고 있는데, 누군가에 의해서 전역변수의 값이 달라졌다면 어떻게 될까요? 함수의 동작도 달라지게 됩니다. 이는 버그의 원인이 됩니다. 또한 함수를 다른 애플리케이션에 이식하는데도 어려움을 초래합니다. 변수를 선언할 때는 꼭 var을 붙이는 것을 습관화해야 합니다. 전역변수를 사용해야 하는 경우라면 그것을 사용하는 이유를 명확히 알고 사용해야합니다.

전역변수를 사용하는 법

MYAPP = {}                                         (function(){

MYAPP.calculator = {                                       var MYAPP = {}

    'left' : null,                                                MYAPP.calculator = {

    'right' : null                                               'left' : null,

}                                                                  'right' : null

MYAPP.coordinate = {                                       }

    'left' : null,                                                MYAPP.coordinate = {

    'right' : null                                                          'left' : null,

}                                                                             'right' : null

MYAPP.calculator.left = 10;                                            }

MYAPP.calculator.right = 20;                               MYAPP.calculator.left = 10;

function sum(){                                                MYAPP.calculator.right = 20;

    return MYAPP.calculator.left + MYAPP.calculator.right;     

function sum(){

}                                                                   return MYAPP.calculator.left + MYAPP.calculator.right;

document.write(sum());                                   }

                                                                document.write(sum());

                                                        }())

오른쪽 코드처럼 함수로 감싸주어 바로 호출할 수 있습니다. = 익명함수

Var MYAPP은 function()내에 있기 때문에 지역변수입니다.

이러한 코드는 자바스크립트에서 로직을 모듈화하는 일반적인 방법입니다.

자바스크립트 유효범위의 대상(함수)

for(var i = 0; i < 1; i++){                         for(int i = 0; i < 10; i++){

 var name = 'coding everybody';               String name = "egoing"; //name은 지역변수

}                                                       }

alert(name);                                         System.out.println(name); //에러가 납니다.

*함수의 중괄호 안에 선언된 변수만이 함수 안의 지역변수이므로 for, if 중괄호에 선언된 함수는 지역변수로의 의미를 가지 않습니다.

자바스크립트 정적 유효 범위

var i = 5; //전역 변수

function a(){

    var i = 10; //지역 변수

    b();

}

function b(){

    document.write(i); //b함수 내에 i라는 변수가 존재하지 않기 때문에 전역 변수를 찾게 된다.

}                         //사용될 때가 아니라 정의될 때의 전역 변수가 사용됩니다. 이를 정적

//유효범위 또는 렉시컬이라고 부릅니다.

a(); //실행 결과는 5

출처 : 생활코딩 강의