JSON 객체
JSON은 JavaScript Object Notation의 약자로 자바 스크립트의 객체처럼 자료를 표현하는 방식이다.
ex.1 - 하나의 자료일 때
{
"name' : "혼자 공부하는 파이썬",
"price" : 18000,
"publisher" : "한빛미디어"
}ex.2 - 여러개의 자료일 때
{
"name" : "혼자 공부하는 파이썬",
"price" : 18000,
"publisher" : "한빛미디어"
}, {
"name" : "HTML5 웹 프로그래밍 입문",
"price" : 26000,
"publisher" : "한빛아카데미"
}자바스크립트 배열과 객체를 활용해 어떤 자료를 표현하는 형식이다.
JSON형식의 규칙
- 값을 표현할 때는 문자열, 숫자, 불 자료형만 사용할 수 있다.
- 문자열은 반드시 큰따옴표로 만들어야 한다.
- 키(Key)에도 반드시 따옴표를 붙여야 한다.
대부분 프로그래밍 언어는 JSON 형식의 문자열을 읽어 들이는 기능이 있고, 네트워크를 통해서 각각의 프로그래밍 언어로 만든 어플들이 데이터를 교환할 때 활용함
자바 스크립트 객체를 JSON 문자열로 변환할 때는 JSON.Stringify() 메소드를 사용합니다.
JSON.stringify() 메소드는
<script>
const data = [{
"name" : "혼자 공부하는 파이썬",
"price" : 18000,
"publisher" : "한빛미디어"
}, {
"name" : "HTML5 웹 프로그래밍 입문",
"price" : 26000,
"publisher" : "한빛아카데미"
}]
console.log(JSON.stringify(data)) //메소드를 사용해 데이터 넣은것을 토대로 객체처럼 표현 (한줄로 변환)
console.log(JSON.stringify(data, null, 2)) // 2번째 매개변수 null은 객체에서 어떤 속성만 선택해 추출하고 싶을 때 사용하지만 거의 사용하지 않아 보통 null을 넣음
// 3번째 매개변수는 들여쓰기를 얼마나 할 것인지
</script>실행결과
JSON.parse() 메소드는
JSON 문자열을 자바스크립트 객체로 전개할때 사용
매개변수에 JSON 형식의 문자열을 넣어주면 된다
<script>
const data = [{
"name" : "혼자 공부하는 파이썬",
"price" : 18000,
"publisher" : "한빛미디어"
}, {
"name" : "HTML5 웹 프로그래밍 입문",
"price" : 26000,
"publisher" : "한빛아카데미"
}]
const json = JSON.stringify(data)
console.log(json)
////[{"name":"혼자 공부하는 파이썬","price":18000,"publisher":"한빛미디어"},{"name":"HTML5 웹 프로그래밍 입문","price":26000,"publisher":"한빛아카데미"}]
console.log(JSON.parse(json)) // JSON 문자열을 다시 자바스크립트 객체로 변환
</script>실행결과
배열로 변환되어 2개의 데이터가 나타나게됨.
Math 객체
수학과 관련된 기본적인 연산을 할 때 Math 객체를 사용한다
속성
Math.PI = 3.141592653589793
Math.E = 2.718281828459045
메소드
Math.sin(), Math.cos(), Math.tan() - 삼각함수
랜덤한 숫자를 생성할 때는 Math.random() 이라는 메소드를 사용한다
0이상, 1미만의 랜덤한 숫자를 생성하고 0 <= 결과 < 1 의 범위를 가진다
Math.random()메소드는
<script>
const num = Math.random()
console.log('# 랜덤한 숫자')
console.log('0-1 사이의 랜덤한 숫자 : ', num) // num은 0 < = 결과 < 1 범위
console.log('')
console.log('# 랜덤한 숫자 범위 확대')
console.log('0-10 사이의 랜덤한 숫자 : ', num * 10)// 0 < = 결과 < 10 범위
console.log('0-50 사이의 랜덤한 숫자 : ', num * 50)//0 < = 결과 < 50 범위
console.log('')
console.log('# 랜덤한 숫자 범위 이동')
console.log('-5~5 사이의 랜덤한 숫자 : ', num * 10 - 5)// -5 <= 결과 < 5 범위
console.log('-25~25 사이의 랜덤한 숫자 : ', num * 50 -25)// -25 <= 결과 < 25 범위
console.log('')
console.log('# 랜덤한 정수 숫자')
console.log('-5~5 사이의 랜덤한 숫자 : ', Math.floor(num * 10 - 5))
console.log('-25~25 사이의 랜덤한 숫자 : ', Math.floor(num * 50 - 25))
console.log('')
</script><실행결과>
랜덤한 숫자
랜덤한 숫자 범위 확대
랜덤한 숫자 범위 이동
랜덤한 정수 숫자
Math.floor() : 소수점 이하를 버림한다.
Math.ceil() : 소수점 이하를 올림한다.
Math.round() : 소수점 이하를 반올림한다.
외부 script 파일 읽어들이기
HTML 페이지 내부에 script 태그를 만들고 자바스크립트 코드를 입력해왔습니다 하지만 간단한 프로그램은 그렇게 가능 하지만, 프로그램의 규모가 커지면 파일 하나가 너무 커지기 때문에 파일 분리하는게 좋다
방법은 별도의 자바스크립트 파일을 만들어 VS코드에서 main.html과 test.js 라는 이름으로 파일을 생성해 같은 폴더에 넣어주면 js인 파일을 바로 읽어들인다
<script src = "test.js"></script> // 본 main.html에 옆의 구문을 넣어주면 가져와 실행시켜준다Lodash 라이브러리
내가 만든 외부 자바스크립트 파일을 읽어들일 수도 있지만, 다른 사람이 만든 외부 자바스크립트 파일을 사용할 수 있다
다른사람들이 만든 다양한 함수와 클래스를 묶어서 제공해주는 것을 '외부 라이브러리'라 부른다.
유틸리티 라이브러리란?
- 개발할 때 보조적으로 사용하는 함수를 제공해주는 라이브러리
- underscore, Lodash 등 있음
- CDN이란?
- 콘텐츠 전송 네트워크
- 전 세계 여러지역에 전송할 데이터를 창고처럼 준비해두고 사용자가 데이터를 요청했을 때 가장 가까운 지역에서 데이터를 전송해주면 매우 빠르게 데이터를 전송할 수 있다
