프로그래밍 맛보기(2부)

안녕하세요 프로그래밍 맛보기 1부에 이어서,

프로그래밍 맛보기 2부를 작성하게 되었습니다.

2부에서는 1부에서 다루지 못했던 '객체'를 다루려고 합니다.

 

일반적으로 객체는 우리가 특정된 무엇을 설명하려고 할때의 대상을 가르켜 말합니다.

프로그래밍에서의 객체 또한 프로그래밍의 세계에서 특정 무엇을 설명/정의해놓은 로직이라 말할 수 있습니다. 

그것이 어떻게 설명되어지는지 한번 알아보도록 하겠습니다.

 

메모장을 열어 새로운 (.html)파일을 생성해보겠습니다.

다음과 같이 작성하고 저장하겠습니다.

이 또한 .html 파일을 열어보시면 다음과 같은 결과를 얻으실 수 있습니다.

이것이 우리가 프로그래밍 세계에서 정의한 객체입니다.

어리둥절하시죠? 우리가 정의한 객체에 대해 좀 더 파혜쳐보도록 하겠습니다.

그렇습니다 프로그래밍 세계에서는 이렇게 객체를 정의해두고, 객체로 업무를 수행하게 됩니다.

익숙해지기 위해 좀 더 작성해보도록 하겠습니다.

//2. 내장된 객체 이용하기 
var map1 = new Map();
map1.set('key', 'value');
alert(map1.get('key'));

 이와 같이 수행을 하니 다음과 같은 결과가 출력됩니다.

헌데 Map이라는 객체는 우리가 정의하지 않았음에도 사용이 가능하다는걸 알 수 있습니다.

Map이라는 객체는 자바스크립트 코드를 실행하는 (브라우저)엔진에 내장(정의)되어있기 때문입니다.

우리가 이 객체를 볼수가 없는데 어떻게 사용할 수 있을까요?

이런 내장된 함수들의 스펙은 많은 레퍼런스/도큐먼트에서 제공되어지고 있으므로

구글링 조금만 해보시면 금방 찾으실 수 있습니다.

아래는 제가 찾은 Map객체에 대해 설명해놓은 레퍼런스 입니다. 참고해보시죠.

https://www.w3schools.com/Js/js_object_maps.asp

 

다음 코드를 작성해보시면서 좀 더 알아보도록 하시겠습니다.

<script>

//1. 객체 생성 및 제어
class UserObject {
  constructor(parameter1, parameter2) {
    this.name = parameter1;
    this.age = parameter2;
  }

  // Getter
  get userInfo() {
    return "이름:" + this.name + ", 나이:" + this.age;
  }

  changeInfo(changed_name, changed_age) {
  	this.name = changed_name;
    this.age = changed_age;
  }
}

var userObject = new UserObject("강용구", "38");
alert(userObject.userInfo);

userObject.changeInfo("고진석", "27");
alert(userObject.userInfo);

//2. 내장된 객체 이용하기 
var map1 = new Map();
map1.set('key', 'value');
alert(map1.get('key'));

//-------------------------------------------------> 여기까지 진행했습니다~

//3. 다른 방식으로 객체 다뤄보기 
//3_1. 생성자 방식 
var order = new Object(); 
order.product_name = '생강차'; 
order['cost'] = 3500; 
order.receipt = function(){ 
	return `주문하신 ${this.product_name}, ${this.cost}원 입니다.`; 
};
alert(order.receipt());

//3_2. 리터럴 방식 
var book = { 
	name: '바람의검귀(하)', 
	genre: '무협', 
	bookInfo: function(){ 
		return `책명: ${this.name}, 장르: ${this.genre}`; 
	} 
};
alert(book.bookInfo());

//4. 숙제. 본인만의 객체를 만들어보세요

//5. 따라하기. 다음 인사관리 업무모델을 따라 만들어보세요
var employees = [ //시스템에 등록된 사원목록
	{ 
		employee_id: '12345',
		name: '소영희', 
		position: '대리', 
		working_months: 36,
		salary: 4000
	}, 
	{ 
		employee_id: '67890',
		name: '장경식', 
		position: '과장', 
		working_months: 52,
		salary: 5300
	}
]
var tasks = [ //시스템에 등재된 업무목록
	{  
		task_id: '54321',
		task: 'xx프로젝트 팀원',
		working_hours: 42,
		person_in_charge: '12345'
	}, 
	{  
		task_id: '09876',
		task: 'xx프로젝트 영업지원',
		working_hours: 57,
		person_in_charge: '12345'
	}
]
var hrd = {
	getEmployeeInfoById: function(emp_id){ //사번으로 직원정보를 조회하는 함수

		for(var i=0; i<employees.length; i++) {
			if (employees[i].employee_id == emp_id) {
				return (
					"사번:"+employees[i].employee_id+", "+
					"이름:"+employees[i].name+", "+
					"직위:"+employees[i].position+", "+
					"근무개월수:"+employees[i].working_months+", "+
					"연봉:"+employees[i].salary
				);
			}	
		}
		return "사원정보가 없습니다"; 
	},
	getEmployeesTaskById: function(emp_id){ //사번으로 직원 담당업무를 조회하는 함수

		for(var i=0; i<tasks.length; i++) {
			if (tasks[i].person_in_charge == emp_id) {
				return (
					"업무코드:"+tasks[i].task_id+", "+
					"업무명:"+tasks[i].task+", "+
					"공수:"+tasks[i].working_hours+", "+
					"담당직원:"+tasks[i].person_in_charge
				);
			}	
		}
		return "할당된 업무가 없습니다"; 
	}
}
alert(hrd.getEmployeeInfoById('67890')); //사번이 67890인 직원 정보 조회
alert(hrd.getEmployeesTaskById('12345')); //사번이 67890인 직원 담당업무 조회

</script>

5. 업무(비즈니스)모델 출력 결과

 

코딩을 하시면서 프로그래밍에 대해 흥미가 생기시나요?

앞에서 말씀드린 기본 개념을 숙지하시면서 

레퍼런스들을 구글링/서적으로 찾아가시면서

내가 구상하는 서비스를 충분히 제작하실 수도 있습니다.

 

물론 그러시려면 열정이라는 무기를 쥐고 부단하게 노력하는 자세로,

목표에 한발한발 내딛여가는 여정을 시작하셔야 겠습니다. 

 

좋은 하루되세요