[비트캠프] 25일차(5주차5일) - Javascript(함수, 비동기, 주요함수, JSON)

 

함수 - 애로우(arrow) 함수를 리턴하기

 

closure 리턴

① 함수를 call 하고 "sum", 10 을 파라미터로 전달한다. closureMaker() 는 주소 200에 저장된 함수이다. 내부에 함수가 정의되어 있는데 이 ② 정의된 함수의 주소 400 이 들어있다.

메모리는 code도 들어있고 data도 들어있다. code가 들어있는 부분을 code segment라 한다. data가 들어있는 부분을 data segment라 한다.

function closureMaker(fnType, count) { 
	switch (fnType) {
	case "sum":
	    return () => { 
	        var sum = 0;     
	        for (var i = 1; i <= count; i++) {
	            sum += i;
	        }
	        console.log("합계 =", sum);
	    };
	case "factorial":
      return () => {
	        var sum = 1;
	        for (var i = 1; i <= count; i++) {
	            sum *= i;
	        }
	        console.log("팩토리얼 =", sum);
	    };
	default:
	    return () => {
		    console.log("해당 연산을 지원하지 않습니다.");
		};
	}
}

var fn1 = closureMaker("sum", 10);
var fn2 = closureMaker("factorial", 10);

fn1();
fn2();

 

 

함수 - 함수도 객체다!

함수도 객체이기 때문에 프로퍼티를 추가할 수 있다.

function f1() {
    console.log("f1().....");
}

// 함수 = 객체 + 함수코드(파라미터, 리턴 값, 함수 몸체)
f1(); // "f1 함수 객체에 저장된 함수 코드를 실행하라!"는 의미다.

// 함수는 객체이기 때문에 일반 객체처럼 사용할 수 있다.
f1.v1 = "홍길동";
f1.v2 = 100;
f1.v3 = true;
f1.hello = function() {
  console.log("Hello!");
};
f1.hello2 = () => console.log("Hello2!");

console.log(f1.v1);
console.log(f1.v2);
console.log(f1.v3);
f1.hello();
f1.hello2();

 

 

함수 (객체)

function f1() {

  console.log("f1()....");

}  하게 되면 객체가 생성되고 그 주소 200이 f1에 저장된다.

f1(); 는 함수 주소로 가서 실행하라! 라는 의미이다. 이를 함수 호출(function call)이라 한다.

 

f1.hello(); 하게 되면 f1 함수 주소에 들어가서 다시 hello 함수 주소에 가서 실행(호출 : 실행 후 다시 돌아옴. 실행 대신 호출로 사용하는게 좋다) 한다.

 

 

자바스크립트 주요 함수 - setTimeout()

일정 시간이 경과한 후 특정 함수를 호출하게 할 수 있다.
=> window.setTimeout(함수, 경과시간);

// 사용법 1) 외부에 호출될 함수를 정의해 두고 함수 주소를 전달한다.
function f1() {
    console.log("f1().....")
}

console.log("-------------------");

// f1() 함수를 5초 후에 호출해 달라고 등록한다.
window.setTimeout(f1, 5000);

// 사용법 2) 함수 주소가 들어갈 자리에 익명 함수를 정의한다.
// 실무에서는 함수를 파라미터로 전달할 때
// 다음과 같이 익명 함수를 직접 파라미터 자리에 정의하는 방식을 사용한다.
window.setTimeout(function () {
    console.log("익명함수 호출...")
}, 10000);

// 사용법 3) 함수 주소가 들어갈 자리에 애로우 함수를 정의한다.
window.setTimeout(() => console.log("애로우 함수 호출..."), 15000);
console.log("일단 실행 끝!");

 

 

동기(Synchronize) 실행과 비동기(Asynchronize) 실행

Synchronize(동기 방식 실행) : 각각의 문장은 실행 끝나야만 다음 문장을 실행한다.

Asynchronize(비동기 방식 실행) : 함수는 hoisting 되어서 먼저 실행(함수 정의 먼저 수행)된다. var 함수 정의가 수행되고 window.setTimeout(plus, 5000); 을 실행하면서 동시에 console.log(result); 가 실행된다. result = 0 이 담긴 것이 출력되고 5초 후 plus가 호출된다.

 

 

자바스크립트 주요 함수 - setInterval()

일정 시간이 경과할 때마다 특정 함수를 반복적으로 호출할 수 있다.
=> window.setInterval(함수, 경과시간);

setInterval()로 가동시킨 타이머를 멈추기
=> window.clearInterval(타이머아이디);

var count = 0;
function f1() {
    console.log("f1()....." + (++count));
    if (count >= 10) {
      clearInterval(timerId); // 지정한 interval 타이머를 멈추게 한다.
    }
}

// f1() 함수를 2초 마다 호출하라!
// => setInterval()을 통해 함수를 등록하면 리턴 값으로 등록 번호를 알려준다.
// => 이 등록번호를 보관해 두었다가, 타이머를 멈추고 싶을 때 사용하면 된다.
var timerId = window.setInterval(f1, 2000);

 

 

자바스크립트 주요 함수 - eval()

텍스트로 된 자바스크립트를 실행하는 함수
=> "실행" 버튼을 누르면 textarea 상자에 입력한 자바스트립트를 실행시키기

var ta = document.getElementById("ta");

document.getElementById("btn1").onclick = () => {
    // input, textarea, select 등 입력폼 항목의 값을 꺼낼 때는
    // innerHTML이 아니라 value 프로퍼티를 사용해야 한다.
    var str = ta.value;

    // eval(자바스크립트코드)
    // => 이 함수는 파라미터로 주어진 자바스크립트 코드를 실행한다.
    eval(str);

    // eval()로 실행한 결과는 그래도 유지된다.
    // 따라서 eval()에서 자바스크립트 코드를 실행할 때
    // window 객체에 name 값을 넣으면
    // eval() 실행이 끝난 다음에도 그대로 유지된다.
    console.log("v1=", window.v1);
};

 

 

onclick 함수

사용자가 마우스로 태그를 클릭하면 web browser는 onclick 이름으로 저장된 함수를 호출한다.

onclick 은 event property 라 한다.

함수 주소는 (callback) = event handler = event listener 라 한다.

 

 

자바스크립트 주요 함수 - eval() II

객체를 생성하여 리턴 받기
=> "실행" 버튼을 누르면 textarea 상자에 입력한 자바스트립트를 실행하여
   객체를 리턴 받는다.
=> 물론 입력 값은 자바스크립트 객체 생성 코드여야 한다.

var ta = document.getElementById("ta");

document.getElementById("btn1").onclick = () => {
	var str = ta.value;
  var obj = eval(str); // JavaScript 객체 생성 코드를 실행한다. JSON과 다르다.
  //var obj = JSON.parse(str); // JSON 형식으로 된 자바스크립트 객체 생성 코드를 실행한다.
	console.log(obj);

	// 1) 단일 객체 생성
	// => 주의! 괄호 () 안에 객체 생성 문법인 중괄호{} 를 넣어야 한다.
	//    안 그러면 실행 오류이다!
	/* 입력 값 예)
	({
	"name": "홍길동",
	"age": 20,
	"tel": "1111-1111"
	})
    */

    // 2) 배열 객체 생성
    // => 배열 코드는 괄호 안에 넣을 필요가 없다.
    /* 입력 값 예)
    ["홍길동", "임꺽정",100,true,null]
    */
};

 

 

자바스크립트 주요 함수 - JSON.parse(JSON형식문자열)

eval()은 일반적인 자바스크립트 코드를 실행할 때 사용하는 메서드이다. 물론 이전 예제에서 본 것처럼 객체를 생성하는 용도로도 사용할 수 있다. 여기서 객체를 생성하는 쪽으로 특화시킨 API가 있으니, JSON 객체이다. JSON 객체는 JSON 형식으로 된 문자열을 읽어 자바스크립트 객체를 생성한다.

JSON(JavaScript Object Notation) 형식?
=> 자바스크립트에서 객체를 생성할 때 사용하는 중괄호 {} 문법을 말한다.
=> 단 자바스크립트의 원래 문법에서 제약 사항을 추가하였다.
=> 제약사항!
   1) 문자열은 반드시 큰 따옴표("")를 사용해야 한다.
      작은 따옴표('')는 사용할 수 없다.
   2) 객체 프로퍼티명은 반드시 문자열로 표기해야 한다.
      즉 큰 따옴표 안에 프로퍼티 명을 넣어야 한다.
=> JSON 형식은 XML 형식 보다 간결해서 프로그램 간에 데이터를 주고 받을 때 많이 사용한다.
=> JSON 형식은 XML 처럼 대부분의 프로그래밍 언어를 위한 라이브러리가 많이 있기 때문에
   이기종 언어간 데이터 교환에 많이 사용한다.    즉 C로 짠 프로그램과 Java로 짠 프로그램 끼리도 쉽게 데이터를 주고 받을 수 있다. 왜?
   - 문자열은 모든 프로그래밍 언어가 처리할 수 있고,
   - 대부분의 프로그래밍 언어를 위한 JSON 라이브러리가 존재하기 때문이다.
용도:
=> 서버에서 웹브라우저 쪽으로 데이터를 보낼 때 JSON 형식의 문자열로 만들어 보낸다.
=> 웹브라우저는 서버로부터 받은 JSON 문자열을 자바스크립트 객체로 만들어 사용한다.

var ta = document.getElementById("ta");

document.getElementById("btn1").onclick = () => {
    var str = ta.value;
    var obj = JSON.parse(str); // JSON 형식의 문자열 ===변환===> 자바스크립트 객체
    console.log(obj);

    // 1) 단일 객체 생성
    // => eval과 달리 객체 생성 문법인 중괄호{}를 괄호 ()로 감쌀 필요가 없다.
    /* 입력 값 예)
    {
    "name": "홍길동",
    "age": 20,
    "tel": "1111-1111"
    }
        */

    // 2) 배열 객체 생성
    // => 배열 코드는 괄호 안에 넣을 필요가 없다.
    /* 입력 값 예)
    ["홍길동", "임꺽정",100,true,null]
    */

    // 3) 복합 객체 생성
    /* 입력 값 예)
    {
        "name": "홍길동",
            "age": 20,
                "tel": ["1111", "2222"],
                    "working": true,
                        "company": {
            "name": "비트캠프",
                "fax": "3333"
        },
        "schools": [
            { "name": "비트초등", "state": "졸업" },
            { "name": "비트중등", "state": "졸업" }]
    }
    */
};

 

 

JSON.parse()

JSON : JavaScript의 Built-in 객체

parse( ) 에서 괄호 안은 JSON 형식으로 정의한 문자열이다.

                                      객체 생성 후 주소 리턴 한다.

JSON ≠ JavaScript Object Literal 문법

 

JSON 포맷

① JavaScript 객체 리터럴 문법과 유사. 왜? 이 문법을 참고하여 만든 포맷

② 문자열은 " " 으로 표현

③ 프로퍼티 명은 문자열로 표현

④ 함수 표현 안됨. 값만 표현 가능! 다른 객체 표현 가능

 

 

Data 포맷 : binary vs text

Data 를 저장하는 방법은 여러가지이다.

 

① binary - 바이트 단위로 규칙에 따라 저장

읽을 때 바이트 규칙에 따라 읽는다.

파일 크기가 가장 작은 포맷이다. 왜? 데이터에 대한 부연 설명(meta data)이 없다.

 

② text - 텍스트 표현 규칙에 따라 저장

텍스트 에디터로 읽고 편집할 수 있다.

binary 형식에 비해 파일 크기는 커진다.

 

 

Text 파일 포맷

① CSV (Comma-Separated Value)

• 간결하다.
• 한 줄에 한 데이터
• 각 항목의 정보가 없다. 직접적으로 이해하기 쉽지 않다.
• 계층 구조로 데이터를 다룰 수 없다.

 

② XML (eXtensible Markup Language)

• 계층 구조의 데이터 표현 가능
• 각 항목의 의미(meta data) 표현 가능. 특정 조건의 항목을 찾기 쉽다.
• data 보다 meta data가 더 클 수 있다.
• 파일 크기가 크다.

 

③ JSON (JavaScript Object Notation)

• XML 보다 더 간결한 meta data
• JavaScript 와 유사해서 포맷에 익숙하다.

 

④ YAML (Yet Another Markup Language → YAML ain't markup language)

• JSON 보다 더 간결
• 들여쓰기(indant)로 계층 구조를 표현

 

자바스크립트 주요 함수 - JSON.stringify(자바스크립트객체)

자바스크립트 객체를 JSON 문자열로 바꾸로 싶을 때 사용한다.
     자바스크립트 객체  ===변환===> JSON 형식의 문자열
용도:
=> 웹브라우저에서 단순한 형식(name=aaa&age=20&tel=1111-1111)이 아닌
   데이터가 다른 데이터를 포함하는 복잡한 구조의 데이터를 서버에 보내고 싶을 때
   JSON 형식의 문자열로 만들어 보낸다.
=> 서버는 클라이언트가 보낸 JSON 형식의 문자열을 자바 객체로 만들어 사용한다.
   물론 JSON 형식의 문자열을 다루는 자바 라이브러리가 많이 있다.
   자세한 것은 www.json.org 사이트를 보라!

var ta = document.getElementById("ta");

document.getElementById("btn1").onclick = () => {
    // let obj = new Object();
    // obj.name = "홍길동";
    // obj["age"] = 20;
    // obj['tel'] = '111-2222';
    // obj.plus = function(a, b) {return a + b;}; // 함수는 JSON 포맷으로 만들 때 제외된다.

    // ta.value = JSON.stringify(obj);

    let obj2 = new Object();
    obj2.name = "임꺽정";
    obj2.age = 20;
    obj2.working = true;
    obj2.schools = new Array();
    obj2.schools[0] = new Object();
    obj2.schools[0].name = "비트초등";
    obj2.schools[0].state = "졸업";
    obj2.schools[1] = new Object();
    obj2.schools[1].name = "비트중등";
    obj2.schools[1].state = "졸업";

    ta.value = JSON.stringify(obj2);
    // {"name":"임꺽정","age":20,"working":true,"schools":[{"name":"비트초등","state":"졸업"},{"name":"비트중등","state":"졸업"}]}
};

 

 

JSON.stringify()

stringify( ) 에서 괄호 안에 JavaScript 객체를 준다. 그러면 JSON 형식의 문자열을 리턴한다.

 

 

함수 - 익명 함수와 호출

익명 함수를 정의하는 즉시 바로 호출할 수 있다.

//1) 일반적인 방법
//=> 함수를 정의한 후 변수에 저장한다.
//=> 그리고 그 변수 이름으로 호출한다.
var f1 = function () {
  console.log("방법1....");
};

f1(); // 함수 호출
f1(); // 함수를 별도로 정의하면 여러 번 호출할 수 있다.
f1();
console.log("---------------------");

//2) 함수 정의 즉시 호출하기
//=> (익명함수정의)(파라미터 값);
//=> (익명함수정의(파라미터 값));
//=> 딱 한 번만 호출할 때 유용하다.
(function () {
  console.log("방법2....");
})();

(function () {
  console.log("방법3....");
}());

// 괄호를 생략하면 문법 오류이다.
// function() {
//   console.log("방법2....");
// } ();

 

 

함수 - 익명 함수와 호출 II : 파라미터 전달하기

파라미터가 있는 익명 함수를 정의하고 즉시 호출해 보자! 

//1) 일반적인 방법
//=> 함수를 정의한 후 변수에 저장한다. 
//=> 그리고 그 변수 이름으로 호출한다.
var f1 = function (a, b) {
    console.log("결과=", (a + b));
};

f1(100, 200); // 함수 호출
f1(20, 30); // 함수 호출
f1(15, 16); // 함수 호출
console.log("---------------------");

//2) 함수 정의 즉시 호출하기
//=> (익명함수정의)(파라미터 값);
(function (a, b) {
    console.log("결과=", (a + b));
})(200, 300);

(function (a, b) {
    console.log("결과=", (a + b));
}(200, 300));

 

 

 

객체

 

객체 - 정의

자바스크립트는 자바와 달리 설계를 가지고 객체를 생성하는 것이 아니라, 기본 객체를 만든 다음에 프로퍼티(변수와 함수)를 추가하는 것이다.
그래서 기본 객체를 바탕(prototype;원형객체)으로 만든다고 해서 프로토타이핑(prototyping) 방식의 객체 생성"이라 부른다.

//1) 객체를 만들 때 기본 틀(원형 객체)없이 빈 객체를 만들기
var obj = Object.create(null);
console.log(obj);
// console.log(obj.toString()); // 예외 발생! 틀 없이 객체를 생성했기 때문에
// 이 객체에는 아무런 프로퍼티나 메서드가 없다.

// 이렇게 만든 객체에는 어떤 프로퍼티 값도 들어있지 않다.
// 완전히 비어 있는 객체이다.
// 자바스크립트에서는 이렇게 완전히 빈 객체를 사용하지 않는다.

//2) 객체를 만들 때 기본 틀(원형 객체)을 바탕으로 객체를 만들기
// => 빈 객체를 만든 후 기본 메서드(생성자)를 호출하여 필수 프로퍼티(변수와 함수) 등을 추가한다.
var obj2 = Object.create(Object.prototype);  // 자동차.타이어교체(자동차.타이어);
console.log(obj2);
console.log(obj2.toString()); // 객체를 만들 때 사용한 틀에 toString()이 정의되어 있다.
// 따라서 이 틀로 만든 객체에도 틀에 정의된 모든 메서드가 똑 같이 들어 있다.

//3) 다음은 객체를 만드는 좀 더 간략한 표현법이다.
// => new 명령을 사용하여 빈 객체를 만든다.
// => Object() 함수를 호출하여 빈 객체에 필수 프로퍼티 등을 추가한다.
//    이렇게 Object()처럼 빈 객체를 초기화시키는 함수를 "생성자 함수(constructor)"라 부른다.
// => 결국 위의 obj2와 같다.
//    위의 코드보다 간결하기 때문에 실무에서는 다음 문법을 더 많이 사용한다.
var obj3 = new Object();
console.log(obj3);

//4) 위의 코드보다 더 간결한 방법.
// => 객체 리터럴 문법을 사용하여 만들기
var obj4 = {};
console.log(obj4);

 

 

설계도 방식과 프로토타이핑 방식

 

① 설계도 방식으로 객체 생성 (예: java, C++, ...)

 

class 명령어로 코드 입력하면 객체 생성된다. 그러면 obj에 Student 설계도에 따라 준비한 객체의 주소만 저장 가능하다(static type binding).

new Student(); 하면 메모리 준비하고 변수의 값들이 담기는 곳 주소 200이 obj에 저장된다.

compile 오류! = 설계도에 없는 프로퍼티는 사용할 수 없다.

 

② 프로토타이핑(prototyping) 방식으로 객체 만들기

 

프로토타이핑 : 객체 원형 틀을 기반으로 프로퍼티를 추가하는 방법

설계도 없음!

new 코드로 ① 빈 객체 생성된다.

Object(); 코드로 ② 기본 프로퍼티 추가된다. (기본 프로퍼티 : 객체라면 반드시 있어야 할 변수나 함수)

 

 

 

Java 설치

 

 

 

---

 

조언

 

*입사 1~2년 후 괜찮은 기업 해커톤 모두 참여해서 입상하라.

 

 

---

 

과제

 

ToDo 만들기

https://todomvc.com/examples/react/#/