웹 개발 정보

1. 소프트웨어의 생명주기

 - 소프트웨어 제작 공정 과정이다. 

 - 시스템 개발주기(SDLC)라 부른다.

1. 폭포수 모델(waterfall model)

※ 폭포수 모델 개요

 - 적용사례가 많고 널리 사용된 방법이다. 

 - 단계별 산출물이 명확하다.

 - 기존 시스템 보완에 좋다.

※ 폭포수 모델 단계

 1. 계획 단계

   - 비용과 기간을 예측한다.

   - 기본기능과 성능 요건을 파악한다.

 2. 요구사항 분석 단계

  - 사용자 요구를 정확히 분석 

  - 소프트웨어의 기능, 성능, 신뢰도 등 목표 시스템의 품질을 파악

 3. 설계 단계

  - 하드웨어 또는 소프트웨어 시스템으로 분배

  - 프로그램의 데이터구조, 소프트웨어 구조, 인터페이스 표현, 알고리즘의 세부 사항들에 초점

 4. 구현 단계

  - 프로그래밍 언어를 이용하여 코드화 하는 단계

  - 모듈 단위로 코딩한다.

 5. 시험 단계

  - 프로그램 단위 이상 여부 및 요구되는 결과로 작동하는지의 여부를 파악한다.

 6. 운용 및 유지보수 단계

  - 사용자에게 전달되어 실제 사용, 변경 요구시 수용하고 계속적인 유지관리

JSON은 문자로 작성된 하는 데이터 포맷입니다. 
보통 데이터를 전송 수신 할때 JSON 형태인 데이터 포맷으로 교환을 많이 합니다. 

JSON stringify()

// info 객체 선언
let info = {
	name : '홍길동',
	age : 20,
	family : {
		mother : ['mother',42],
		father : ['father',43]
	}
}
console.log(JSON.stringify(info));	
// {"name":"홍길동","age":20,"family":{"mother":["mother",42],"father":["father",43]}} 문자열 출력 
console.log(JSON.stringify(info,['name','age']));	
// {"name":"홍길동","age":20} name과 age만 문자열로 출력 
console.log(JSON.stringify(info,['name','age'],2));	
// 출력되는 데이터는 JSON.stringify(info,['name','age']) 같으나 공백을 추가로 가독성이 높아짐 
/*
{
  "name": "홍길동",
  "age": 20
}
*/

JSON.stringify() – 객체를 JSON으로 바꿔줍니다. 
JSON.stringify(value, [replacer], space) // replacer 객체에서 선언된 프로퍼티만 문자열로 만듬, space 가독성을 높이기 위해 프로퍼티 사이에 공백을 추가함 

JSON parse()

// info 객체 선언
let info = {
	name : '홍길동',
	age : 20,
	family : {
		mother : ['mother',42],
		father : ['father',43]
	}
}	

let info1 = JSON.stringify(info);		
// info 객체를 JSON으로 변경(문자열)
console.log(JSON.parse(info1));	
// {name:'홍길동',age:20,family:{mother:['mother',42],father:['father',43]}} 객체 출력

JSON.parse() – JSON 문자열 포맷을 객체로 바꿔줍니다.

Date 객체 생성하기

// let now = new Date("2022-03-28");	2022년 3월 28일 Date 객체 생성  
// let now = new Date(year, month, date, hours, minutes, seconds, ms);	// 입력 데이터 날짜 Date 생성 
let now = new Date();								// 현재 날짜 Date 객체 생성

Date 객체 날짜 관련 데이터 가져오기 내장 함수

let now = new Date();				// 현재 날짜 Date 객체 생성 
console.log(now);					// Mon Mar 28 2022 14:20:55 GMT+0900 (한국 표준시)
console.log(now.getFullYear());		// 2022
console.log(now.getMonth());		// 2
console.log(now.getDay());			// 1
console.log(now.getDate());			// 28
console.log(now.getHours());		// 14
console.log(now.getMinutes());		// 20
console.log(now.getSeconds());		// 55
console.log(now.getMilliseconds());	// 155

getFullYear() : 객체의 연도 가져옴
getMonth() : 객체의 월 가져옴 (※주의 월 0부터 시작(0~11))
getDay() : 객체의 요일 가져옴 (※주의 0이 일요일(0~6))
getDate() : 객체의 일 가져옴
getHours() : 객체의 시간 가져옴
getMinutes() : 객체의 분 가져옴 
getSeconds() : 객체의 초 가져옴
getMilliseconds() : 객체의 밀리초 가져옴

Date를 이용한 작업 걸리는 시간 구하기

let start = Date.now();	// 작업 시작 전 시간 
// 작업 시간을 구하는 기능 정의 ...
let end = Date.now();	// 작업 종료 후 시간 
console.log(`처리 : ${end-start} 밀리초 소요`);

자바스크립트 Date 객체를 이용한 기능이 처리되기 까지 걸리는 시간을 간단하게 만들 수 있다. 

1. Set 자주 사용하는 내장함수

//let set = new Set(["사과","토마토","키위","키위"]);		// set 객체 생성
let set = new Set();		// set 객체 생성
set.add("사과");
set.add("토마토");
set.add("키위");
set.add("키위");				//	키위가 존재하기 때문에 저장되지 않음

console.log(set.size);			// 3 
console.log(set.has("사과"));	// true

set.delete("키위");
console.log(set.size);			// 2

set.clear();
console.log(set.size);			// 0

Set 객체는 자료형에 상관없이 데이터를 저장한다 하지만 중복 값은 허용하지 않습니다. 

new Set() – Set 객체를 생성합니다. 또는 배열을 초기에 넣을 수 있습니다. 
set.add(value) – Set 객체에 value가  없다면 값을 저장합니다. 
set.delete(value) – Set 객체에 value값을 삭제합니다. 
set.has(value) – Set 객체에 value가 있으면 true, 없으면 false 리턴
set.clear() – Set 객체에 들어있는 데이터를 삭제합니다.
set.size – Set 객체에 들어있는 데이터의 개수를 리턴합니다. 

2. Set 객체 반복 작업 관련 내장함수 

let set = new Set();		// set 객체 생성
set.add("사과");
set.add("토마토");
set.add("키위");

for (let value of set){
	console.log(value);	// 사과, 토마토, 키위
}

1. Map 자주 사용하는 내장함수

let map = new Map();		// map 객체 생성
map.set(1,"사과");
map.set(2,"포도");

console.log(map.has(1));	// true
console.log(map.get(1));	// 사과
map.delete(1);
console.log(map.size);		// 1
map.clear();
console.log(map.size);		// 0

map.size; // map에 담겨있는 카운트를 리턴
map.set(key, value); // key, value 쌍으로 map에 저장 key값이 있을 시 value 값이 덮어짐
map.has(key); // key 값이 존재하는지 유무 true, false 리턴
map.get(key); // key 값에 해당하는 value 값을 리턴 
map.delete(key); // key 값과 해당하는 value 값을 삭제 
map.clear(); // map에 담겨있는 전재 요소를 삭제 

2. Map 객체 반복 작업 관련 내장함수 

let map = new Map();
map.set(1,"사과");		// key 1에 value 사과라는 값을 
map.set(2,"포도");

// map.keys() map에 담겨있는 요소의 key 이터리블 객체가 리턴합니다.
for (let key of map.keys()) {
  console.log(key); // 1,2
}

// map.values() map에 담겨있는 요소의 value 이터리블 객체가 리턴합니다.
for (let value of map.values()) {
  console.log(value); // 사과, 포도
}

// map.entries() map에 담겨있는 요소의 key, value 쌍 이터리블 객체가 리턴합니다.
for (let item of map.entries()) {
  console.log(item); // [1,사과],[2,포도]
}

map.keys() // map에 담겨있는 요소의 key 이터리블 객체가 리턴합니다.
map.values() // map에 담겨있는 요소의 value 이터리블 객체가 리턴합니다.
map.entries() // map에 담겨있는 요소의 key, value 쌍 이터리블 객체가 리턴합니다.

iterable 객체

let range = {
	form : 0,
	to : 10,
	step : 1,
	current : 0,
	
	// for of 문을 실행시 초기 Symbol.iterator이 실행 후 객체를 반환합니다. 
	[Symbol.iterator](){
		this.current = this.form;
		return this
	},
	
	// for of 문이 반복을 할때 마다 next() 함수가 실행이 됩니다. 
	// next() 리턴은 {done : Boolean, value : value} 형식으로 맞춰야합니다. (done = true 종료, done = false 반복)
	next(){
		if(this.current <= this.to){
			return {
				done : false, 
				value : this.current++
			}
		}else{
			return {
				done : true
			} 
		}
	}
}

for(let num of range){
	console.log(num);	// 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10 순으로 출력 
}

iterable 객체는 반복이 가능한 객체를 만드는데 사용합니다. 
반복은 배열로 가능은 하지만, iterable 객체를 사용하면 for of 문을 통해 객체를 반복 시킬 수 있습니다. 

1. for of 문이 실행 시 초기 Symbol.iterator이 실행이 되며 range 객체를 리턴합니다. 
2. 반복을 할때 마다 next() 함수가 실행이 되며 리턴에 done의 값을 보고 반복을 판단합니다. 

자바스크립트 배열 생성, 추가, 수정

// let arr = new Array("사과", "배", "수박");	// 생성자를 활용한 배열 생성
let arr = ["사과", "배", "수박"];	

// 인덱스를 가지고 배열에 값을 가져옴 
console.log(arr[0]);	// 사과
console.log(arr[1]);	// 배
console.log(arr[2]);	// 수박

// 배열 전체 출력 
console.log(arr);	// 사과,배,수박

// 배열 length 구하기 
console.log(arr.length);	// 3

// 배열 값 변경 
arr[0] = '키위';	//["키위", "배", "수박"]

배열은 순서가 있는 컬렉션이 필요한 경우 사용하는데 유용합니다. 

자바스크립트 배열 내장함수 

let arr = ["사과", "배", "수박"];	
arr.push("딸기");			//	 push
arr.unshift("바나나");		// unshift
console.log(arr);			// ['바나나', '사과', '배', '수박', '딸기']

alert(arr.pop());			// pop -> 딸기
console.log(arr);			// ['바나나', '사과', '배', '수박']
	
alert(arr.shift());			// shift -> 딸기
console.log(arr);			// ['사과', '배', '수박']

배열 내장함수 
push : 배열 마지막에 데이터를 추가함 
unshift : 배열 맨 처음에 데이터를 추가함
shift : 배열 맨 처음 데이터를 제거 후 남은 데이터는 이동(제거된 데이터 리턴)
pop : 배열 맨 마지막 데이터를 제거(재거된 데이터 리턴)

1. 일반 함수로 this를 호출한 경우

	function getName() {
	  console.log(this);
	}
	getName();	// object window

2. 객체 내부에서의 this를 호출한 경우

	let info1 = { 
		name: "책상",
		getName() {
			console.log(this);		// object object (info1 객체를 가르킴)
			console.log(this.name);	// 책상
		}
	};
	info1.getName();

3. this일반 함수를 선언 후 객체 프로퍼티에 적용시킨 경우

// 함수 생성
function getName() {
  console.log( this.name );
}

// 객체 생성
let info1 = { name: "책상" };
let info2 = { name: "전화기" };

// 객체에 함수 프로퍼티 넣음
info1.getName = getName;
info2.getName = getName;

// 프로퍼티 호출 
info1.getName();	// 책상
info2.getName();	// 전화기

javascript의 this는 동적(런타임)으로 값이 결정된다. 

this 호출 시 호출시 앞에 객체를 보고 해당 객체가 this로 할당 받습니다.