JAVA 웹개발 과정 국비 42일차 정리

42일차

※ 배우는 과정이므로 정확하지 않을 수 있습니다.
잘못된 점은 알려주시면 수정하도록 하겠습니다!

자바스크립트의 객체 개념에 대해 배웠다.
어려운 수업이였다.

1. 객체

1) 객체란

자바스크립트에서 객체란 key와 value 한 쌍의 데이터가 리스트화 되어있는 구조를 말한다.

2) 객체 생성 방법

① 객체 리터럴 방식

중괄호를 이용한 객체 선언 방법으로 중괄호를 넣고 값을 쓰는 순간 인스턴스가 생성된 것과 동일하게 생각하면 된다.
value 값을 꺼내는 방법은 .을 쓰고 key 값을 쓰는 방법과 대괄호[ ] 안에 key값을 쓰는 방법이 있다.
key 값이 숫자인 경우, .을 쓰는 것은 문법적으로 되지 않기 때문에 대괄호만 가능해진다.

let obj1 = {
	num:123,
	str:"Hello",
	1:"One" // 키 값으로 숫자, 밸류값으로 문자
};

console.log(obj1.num);  // .key 
console.log(obj1["num"]);  // [key]
console.log(obj1.str);
console.log(obj1["str"]);
// 꺼내서쓸때 obj1.1이 안된다 (문법적으로 위배)
console.log(obj1[1]);

② 기본 객체 방식

가장 잘 쓰이지 않는 방법이다.
Object 라는 내장되어있는 함수(클래스 같은 것)를 이용하여 빈 인스턴스 비슷한 것을 생성해주고, key값과 value 값을 설정해주면 자바스크립트는 변수를 선언하지 않아도 자동적으로 key와 value를 생성한다.

let obj2 = new Object();
obj2.num = 234;
obj2.str = "World";
obj2[1] = "One";

console.log(obj2.num);
console.log(obj2.str);
console.log(obj2[1]);

③ 생성자 방식

자바스크립트의 모든 함수는 객체나 생성자가 될 수 있다.

위의 특징으로 2번의 기본 객체 방식의 Object 함수가 객체가 될 수 있는 것이다.
함수 안에 기능적 내용이 없다면 생성자가 된다.
컨벤션으로 생성자는 이름 첫글자를 대문자로 쓴다.
this를 꼭 써줘야 하는데, 안쓰면 지역변수가 되어서 밖에서 call 할 수 없다.

function Test(){
    this.num = 234;
    this.str = "JavaScript";
    this[1] = "One";
};

let obj4 = new Test();
console.log(obj4.num);  // 234
console.log(obj4.str);  // JavaScript
console.log(obj4[1]);  // One

3) 객체에 들어갈 수 있는 것들

객체 안에는 문자열, 숫자 등의 값 뿐만 아니라 메소드, 객체, 생성자도 넣을 수 있다.

let person = {
	name:"Jack",
    contact:"01012341234",
    // 메소드 넣기
    hello:function(){
    	console.log("Hello Everyone. I'm " + this.name);
	},
	// 배열 넣기
	hobby:["Java","Book","Guitar"],
	// 객체 넣기
	score:{
        kor:100,
        eng:90,
        math:80
	},
	// 배열을 리턴하는 메소드 넣기
    favoriteFruits:function(){
    	return ["Apple","Orange","Mango"];
    },
    // 객체를 리턴하는 메소드 넣기
    abilities:function(){
        return {
            java:function(){return 100;},
            css:function(){return 90;},
            js:function(){return 80;}
    	}
    },
    // 객체를 파라미터로 받는 메소드 넣기
    helloTo:function(friend){
    	console.log("Hello " + friend.name);
    },
    // 생성자 넣기
    Dron:function(){
        this.brand = "Samsung";
        this.price = 200000;
    }
};

console.log(person.name);
console.log(person.contact);
person.hello();
console.log(person.hobby[0]);
console.log(person.score.eng);
console.log(person.favoriteFruits()[2]);
console.log(person.abilities().css());
// 1번 방식
person.helloTo({name:"Tom"});
// 2번 방식
let friend = new Object();
friend.name = "Tom";
person.helloTo(friend);
// 3번 방식
function Friend(name){
	this.name = name;
};
person.helloTo(new Friend("Tom"));
// 객체 안에 다른 생성자가 들어있는 것 뿐
let dron = new person.Dron();
console.log(dron.brand);
console.log(dron.price);

2. WEB - API

1) WEB - API 란?

대기업에서 개인이 개발하기 어려운 기능을 만들어서 서비스로 제공하는 방식

API의 자세한 개념은 아래 3번에서 Library와 Framework와 함께 정리했다.
수업에서는 다음카카오의 포스트코드(우편번호 서비스)와 카카오의 지도 API를 다뤘다.
아직 실력이 부족해서 정확하게 원하는 기능을 찾아 쓰는 것은 어렵지만, 쓰다보면 익숙해지지 않을까..

2) WEB - API 사용 방법

다음 우편번호 서비스를 가져와보자.

구글에 ‘다음 우편번호 api’를 검색해서 사이트에 들어간다.
키가 필요한지, 제한은 얼마인지, 기능은 얼만큼 오픈되어있는지 확인한다.
필요한 기능 사용법을 읽으며 알맞은 코드를 가져와서 수정한다.

보통 대기업의 WEB - API 들은 설명이 잘 되어있어서 기본 지식만 있다면 어렵지 않게 기능을 구현할 수 있다.
난 아직 어렵지만 그건 JS를 잘 이해하지 못해서인 것 같다..

3. 이벤트 전달 방법

1) 두 가지 방법

카카오 지도 API를 가져와서 사용해보면서 이벤트를 전달하는 새로운 방법을 알게 되었다.
이벤트 리스너를 등록하는 방법은 크게 두가지가 있다.

이벤트의 대상이 되는 객체나 요소에 프로퍼티로 등록하는 방법
객체나 요소의 메소드에 이벤트 리스너를 전달하는 방법

수업에서는 1번 방법으로 이벤트를 할당하였는데, 단점은 한개의 이벤트 리스너만 등록할 수 있다는 점이다.
따라서 여러개의 이벤트를 등록할 때는 2번 방법을 사용해야 한다.

// 1번 방법
btn.onclick = function(){
	alert("버튼 클릭 감지!");
};

// 2번 방법
btn.addEventListener("click", function(){
	alert("버튼 클릭 감지!");
});

2) addEventListener

addEventListener는 세가지 파라미터를 받는데, 세번째 파라미터는 생략이 가능하다.

첫번째 파라미터 : 이벤트명 ex) “click”
두번째 파라미터 : 실행할 함수명 ex)익명함수
세번째 파라미터 : 옵션(생략가능) ex) 버블링

3) removeEventListener

등록된 이벤트를 삭제하는 함수이다.
주의할 점은 익명함수로 등록된 이벤트는 똑같은 익명함수를 적어준다고 해도 삭제가 되지 않는다는 점이다.
삭제할 이벤트의 함수는 꼭 이름으로 등록하여 삭제할 수 있도록 하자.

4. API / Library / Framework

위의 세 개념은 많이 들어봤지만 혼용해서 쓰는 사람들도 많을 정도로 막상 구별하라고 하면 쉽지 않은 개념들이다.
차이점을 잘 이해하자.

API :
- Library or Framework subset
- 클래스를 보면 한쪽은 private로 가려져있고, 한쪽은 public으로 캡슐화를 이용해 설계되어 있는데, 이 때, 이 클래스 하나가 라이브러리로 동작한다고 가정하면 이 라이브러리에서 사용자가 만나게 되는 면은 public 이다.
- 라이브러리 또는 프레임워크가 어떤 환경을 구축해줬는데 그 환경에서 사용자에게 public 하게 보여주는 면을 API라고 부른다.
Library
- 특정 주제를 가진 클래스와 기능들의 합
- ‘도구’, ‘압축파일’ 이라고 생각하면 된다.
- 프로그램을 만드는 사람을 건물을 짓는 사람에 비유하면, 라이브러리는 건물 짓는 사람들에게 필요한 안전모, 곡괭이, 망치 등의 하나하나의 도구라고 비유할 수 있다.
Framework
- 라이브러리보다 큰 개념 (Libarary + Convention + Design Pattern).
- 라이브러리들을 여러 개 가지고 있는 더 큰 단위. 틀이 갖추어진 작업
- 프로그램을 만드는 사람을 건물을 짓는 사람에 비유하면, 도구들은 기본적으로 가지고 있고, 도구와 건물을 짓기 위해서 사람들이 알아야하는 일종의 컨벤션이라든지, 규칙, 방향성 등을 아우르는 것
- 공사장 사람들은 일을 할 때, 해머를 쓰기 위해서는 머리에 꼭 안전모를 써야하고, 어떤 짐을 들기 위해서는 2인 이상은 꼭 같이 들어야 하고… 즉, 도구를 단순히 쓴다의 개념이 아니라 이 도구를 어떻게 써야 한다 이런 개념으로 봐야한다.
- 음식점에 가면, 손님이 김치볶음밥을 시킨다면 직원이 주방에다가는 “김볶하나!” 이렇게 줄여서 말한다. 이런 일종의 정해져 있는 규약까지 포함하는 개념이다.
- 이 프레임워크 안에는 이런 라이브러리가 수십개가 포함되어 있을 수 있다. 단순히 이런 라이브러리를 모아놓은 것 뿐만 아니라, 이런 라이브러리를 쓸 때 필요한 규약까지 다 포괄하는 넓은 개념이다.

Twitter Facebook LinkedIn

KKONG