ㅁ 지금까지 자바스크립트에서 객체를 직접 만드는 법을 배워보았다.
- 이렇게 만든 객체를 서버로 전송하거나, 서버측에서 이러한 객체 형태를 응답받을 때가 있다.
이때 자바스크립트 객체 형태를 굉장히 많이 주고 받는다.
- 그런데 내가 객체를 만들었다고 해서 바로 전달할 수 없다.
항상 웹 서버와의 통신시에는 문자열의 형태로 데이터를 주고받아야 한다.
ㅁ JSON
- 클라이언트, 서버간 데이터를 주고받을 때 포맷 값중의 하나다.
ㅁ < JSON >
- Javascript Object Notation
- Javascript 객체 문법으로 구조화된 데이터를 표현하기 위한 문자 기반의 표준 포맷이다.
- 웹 애플리케이션에서 데이터를 전송할 때 주로 사용한다. (자바스크립트 <-> 서버)
- Javascript 객체와는 살짝 차이점이 있다.
(1) JSON은 반드시 속성을 큰따옴표("")로 묶은 문자열로 표시한다. // 속성명, 속성값 다 문자열
(2) JSON은 숫자가 0으로 시작하는 것을 허용하지 않는다.
(3) JSON은 반드시 소숫점 뒤에 적어도 한 자릿수가 뒤따라야 한다. // 자바스크립트는 30. 이 가능하다.
(4) JSON은 NaN과 Infinity를 지원하지 않는다.
(5) JSON은 후행 쉼표(trailing comma)를 허용하지 않는다.
- 예시 형식
{
"squadName": "Super hero squad",
"homeTown": "Metro City",
"formed": 2016,
"secretBase": "Super tower",
"active": true,
"members": [
{
"name": "Molecule Man",
"age": 29,
"secretIdentity": "Dan Jukes",
"powers": ["Radiation resistance", "Turning tiny", "Radiation blast"]
},
{
"name": "Madame Uppercut",
"age": 39,
"secretIdentity": "Jane Wilson",
"powers": [
"Million tonne punch",
"Damage resistance",
"Superhuman reflexes"
]
},
{
"name": "Eternal Flame",
"age": 1000000,
"secretIdentity": "Unknown",
"powers": [
"Immortality",
"Heat Immunity",
"Inferno",
"Teleportation",
"Interdimensional travel"
]
}
]
}
- 자바스크립트 객체를 JSON화 할 수 있다.
그렇게 해서 서버로 보내거나 받을 수 있다.
※ 공공데이터포탈
- 웹개발하면서 굉장히 많은 데이터가 필요한데 무료로 제공하는 사이트.
- csv, json, xls(엑셀파일)이 데이터 전송에 사용되는 포맷이다.
- csv는 컴마로 이루어져 있다.
json은 각각의 값들이 속성의 형식으로 정의되어 있다. 마치 자바스크립트의 객체 표기법과 유사.
- 웹개발 하면서 csv보다는 json의 형식을 많이 쓴다.
서버측으로 요청을 보내면 json형식으로 받는다.
이걸 파싱(포맷변환)해서 자바스크립트 객체형으로 만든 다음에 활용한다.
ㅁ < JSON 내장 객체 메소드 >
- 자바스크립트에서 제공하는 JSON이라는 내장객체가 있다.
- 그 객체가 제공하는 메소드를 사용해서 변환처리 할 수 있다. 메소드 2개만 알면 된다.
(1) JSON.stringify(value)
- JavaScript 값이나 객체를 JSON 문자열로 변환한다.
- JavaScript 데이터를 서버측으로 전송할 때 주로 사용.
- 자바스크립트의 객체를 전달하면서 JSON.stringify() 메소드를 호출하면
JSON 형태의 문자열을 반환해준다.
- 데이터 전송을 하고자 한다면 문자열 형태여야 하고, JSON 형태의 문자열이어야 한다.
(2) JSON.parse(text)
- 전달된 JSON 문자열을 JavaScript 값이나 객체로 변환한다.
- 서버측으로부터 응답받은 JSON 문자열을 JavaScript 데이터로 바꿀 때 주로 사용.
ㅁ 서버로 데이터 전송 (요청시 전송 request)
(1) 자바스크립트 객체 { a: '홍', b: 10 } => (2) JSON 형태 문자열 '{"a": "홍", "b": 10}'
- 객체를 json형태로 만들고, 그걸 최종적으로 또 문자열의 형태로 만든다.
- JSON 문자열화 시키려면 JSON.stringify(obj)
ㅁ 서버에서 데이터 전송 (응답시 전송 response)
(1) JSON 형태 문자열 '{"x": 10, "y": 20}' => (2) 자바스크립트 객체 {x: 10, y:20}
- 서버측에서 응답되어 돌아오는 데이터인 문자열인 text값을 JSON.parse(text)하면 객체형으로 된다.
ㅁ 자바스크립트 객체 => JSON 문자열로 변환
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
// 1. 자바스크립트 객체 => JSON 문자열로 변환
const product = {
name: '마우스',
brand: 'logitech',
price: 50000,
model: ['G304', 'MX Master']
};
console.log(product);
console.log(JSON.stringify(product));
</script>
</body>
</html>
- 위는 자바스크립트 객체
- 아래는 json 문자열 형식. 문자열이므로 검은 색 글씨.
근데 그 문자열의 형식이 json 포맷이다. name, brand, price, model 다 json화 되어있다.
- 데이터 통신은 자바스크립트 객체를 통째로 주고받을 수가 없다. 무조건 문자열(JSON)로 주고 받는다.
ㅁ JSON 문자열 => 자바스크립트 객체
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
// 2. JSON 문자열 => 자바스크립트 객체
const jsonStr = '{"name": "둥그레", "age": "30", "hobbies": ["등산", "공부"]}';
// 마치 자바스크립트 객체처럼 생겼지만 따지고 보면 문자열이다.
console.log(jsonStr.name); // undefined (속성에 접근 불가)
// 받은 데이터가 문자열이면 자바스크립트 객체형으로 변환해야 각각의 속성에 접근가능.
console.log(JSON.parse(jsonStr));
const obj = JSON.parse(jsonStr);
console.log(obj.name);
</script>
</body>
</html>
ㅁ 자바스크립트에는 날짜와 시간 관련한 객체가 있다.
- 자바스크립트에서 날짜 및 시간 데이터를 표현하고 싶을 때 사용할 수 있는 객체다.
ㅁ < Date >
Date 내장 객체
1. 특정 날짜 및 시간 정보를 가지는 객체
2. 생성자를 통해 생성
1) new Date()
2) new Date(year, monthIndex) // monthIndex : 0 ~ 11
3) new Date(year, monthIndex, day)
4) new Date(year, monthIndex, day, hours)
5) new Date(year, monthIndex, day, hours, minutes)
6) new Date(year, monthIndex, day, hours, minutes, seconds)
7) new Date(year, monthIndex, day, hours, minutes, seconds, milliseconds)
3. 주요 메소드
1) Date객체.now() : 타임스탬프 반환
2) Date객체.getFullYear() : 년도 반환
3) Date객체.getMonth() : 월 반환 (0-11)
4) Date객체.getDate() : 일 반환 (1-31)
5) Date객체.getDay() : 요일 반환 (일-토 : 0-6)
6) Date객체.getHours() : 시 반환 (0-23)
7) Date객체.getMinutes() : 분 반환 (0-59)
8) Date객체.getSeconds() : 초 반환 (0-59)
9) Date객체.getTime() : 밀리초 반환
- new라는 키워드와 함께 생성자 함수로 호출시켜서 생성시킬 수 있다.
- 별도의 전달값 없이 생성하면 현재 시스템 날짜 및 시간 정보를 가지고 있다.
그 밖에 내가 원하는 날짜, 시간을 설정하고자 한다면 연월일 시분초에 대한 값을 전달하면서 생성한다.
- 월과 요일이 0부터 시작한다.
- 자바스크립트에서도 Date와 Date의 간의 연산 가능하다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
// 잠깐 함수 복습
// (1) function fnDateTest() { }
// (2) const fnDateTest = function() { }
// (3) const fnDateTest = () => { }
const fnDateTest = () => {
// 현재 시스템 날짜 및 시간
const now = new Date();
console.log(now, typeof now)
// 특정 날짜 및 시간으로 세팅 : 2024년 1월 1일 12시 0분 0초
const dateTime = new Date(2024, 0, 1, 12, 0, 0); // 자바스크립트에서 1월이 0이다.
console.log(dateTime, typeof dateTime)
const year = now.getFullYear();
const month = now.getMonth();
const day = now.getDate();
const hour = now.getHours();
const minute = now.getMinutes();
const second = now.getSeconds();
console.log(year + '-' + (month+1) + '-' + day + " " + hour + ':' + minute + ':' + second);
// 그런데 월은 월에대한 인덱스가 반환되어서 +1을 해줘야 한다. 인덱스 7이 8월을 의미함.
}
</script>
<h2>Date 내장객체</h2>
<button onclick="fnDateTest();">Date객체확인</button>
</body>
</html>
ㅁ
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
const fnDday = () => {
const now = new Date(); // 현재 날짜
const finalDate = new Date(2024, 11, 11); // 종강 날짜(24년 12월 11일)
// 날짜간의 연산
console.log(finalDate - now); // 10229945872 (일단위가 아닌 밀리세컨초 단위로 반환됨)
/*
1s = 1000ms
1m = 60s = 60*1000ms = 60000ms (6만 ms)
1h = 60m = 60*60s = 3600000ms (360만 ms)
1d = 24h = 24*60m = 24*60*60s = 24*60*60*1000ms (8640만 ms)
*/
const dday = (finalDate - now) / (24*60*60*1000); // 일 단위로 환산
alert('종강까지 ' + dday + '일 남았습니다.'); // 소수점 아래로 나와서 지저분하다.
alert('종강까지 ' + Math.round(dday) + '일 남았습니다.'); // 반올림 처리.
}
</script>
<h2>Date 내장객체</h2>
<button onclick="fnDday();">Dday구하기</button>
</body>
</html>
