데이터 구조화 => 구조화된 텍스트 => JSON
많은 양의 데이터가 실시간으로 전달되어야할 때 가장 효율적으로 데이터를 보내는 방법
JSON(JavaScript Object Notation) JavaScript 객체를 구조화된 데이터로 표현하기 위한 문자기반 표준 포맷
웹 서버 (<->) 화면 간에 데이터를 전송할 때 일반적으로 사용되는 데이터 포맷
자바스크립트의 객체 형식이기 때문에, 구조파악이 쉽고, 제작도 쉽다.
특히 웹 분야는 자바 스크립트가 모든 프론트에 호환된다는 점을 활용 데이터 수집, 출력, 활용 거의 모든 플랫폼에서 JSON을 활용하고 있음.
ex) 네이버 증시사이트에 들어가서 거래상위 종목 데이터 구조화 해보기
const top = {
'거래상위':[
{
name: 'KODEX 200선물인버스',
price: 2190,
upDown: -65,
ratio: -2.88
},
{
name: '우리바이오',
price: 5420,
upDown: 140,
ratio: -2.65
},
{
name: 'SG세계물산',
price: 485,
upDown: -4,
ratio: -0.82
},{},{}
],
'상승':[
{},{},{}
],
'하락':[
{},{},{}
],
'시각총액 상위':[
{},{},{}
]
};
정규표현식(Regular Expression)
문자 내에서 특정 내용을 찾거나 대체, 발췌 하는데 사용
RegExp() : 객체로 사용
특정 데이터를 탐색, 확인, 존재여부를 쉽게 파악하기 위한 규칙
웹 분야에서는 password, 첨부파일 규칙 등에 사용 자주 쓰이지는 않음.
데이터분석 관련되어서는 꼭 알고 있어야하는 규칙
다른언어에서도 비슷한 형식으로 쓰이고 있음.
- /regExp/ig : / / => 시작기호, 종료기호 regExp : 패턴 ig : flag(옵션)
- ('str').match(/regExp/flag) str에서 매칭되는 항목들을 배열로 리턴
- ('str').replace(/regExp/flag, 바꿀문자) str에서 매칭되는 항목들을 바꿈
- ('str').split(/regExp/) 정규표현식에 매칭되는 항목으로 쪼개 배열로 리턴
- (/regExp/).text('str') : 문자열이 정규표현식에 맞는지 체크 return true / false
정규표현식 플래그
- i : 대소문자 구분x, g : 전역검색, m: 줄바꿈 포함
- ㄱ-ㅎ가-힣 : 한글을 / a-zA-Z : 영문자 / 0-9 : 숫자
- . : 모든 문자열(숫자,한글,영어,특수문자,공백 포함) : 줄바꿈 x
- \d: 숫자 \D: 숫자가 아닌것 \s: 공백 \s: 공백 아닌것 \w: 영숫자 \w: 영숫자 아닌것 \특수기호 \! \@ \#...
- 검색 패턴: | or (a | b)
- [] : or의 묶음 / 문자들 중 하나 /[abc]/ => "a","b","c" 중 하나를 포함하는 /abc/ => "abc"를 포함하는 [a-z] => a-z중 하나를 포함하는 [^abc] => "a","b","c" 제외
- ^str$ => ^시작 / $끝
ex) 이미지 파일만 정규표현식으로 구분해보기
<script>
let testText = 'This is JavaScript Regular Expression';
console.log(testText.match(/[is]/g))
const fileName = ['abc.jpg', 'main.gif', 'test.txt','doc.pdf','code.js']
// 이미지파일 : abc.jpg, main.gif
// 그외 파일 구분해서 출력 : test.txt,doc.pdf,code.js
for(let file of fileName){
// console.log(file.match(/(jpg|jpeg|png|gif)/i))
if(file.match(/(jpg|jpeg|png|gif)/i)){
console.log('이미지파일 : ' + file);
} else{
console.log('그 외 파일: ' + file);
}
}
</script>
자바 스크립트에서 사용되는 데이터 타입의 확장개념 array, Object, set, map
set 중복데이터 허용불가 : 중복데이터가 들어오면 체크 후 하나만 남김
set() : 파라미터로 주로 배열을 사용, 주로 배열로 변환하여 사용
new Set() or new Set(array) : set 객체 생성
set.add(value) : 데이터 추가
set.delete(value) : 데이터 삭제
set.has(value) : 값의 존재여부 true/ false로 리턴
set.forEach(callback function) : set 순환
set.entries(), set.keys(), set.values() 리턴타입 setIterator 형식.
set.size : set size 리턴
set.clear() : set 비우기
map key:value 형태의 데이터를 하나의 배열로 만들어서 다시 배열에 저장하는 방식
new Map(), new Map([key:value],[key:value],[key:value]);
기본적인 중첩구조를 가지고 있음.
key는 식별자로 중복 불가능.
get(keyName), set(KeyName, value) 메서드를 제공
key는 문자로 주는 것을 원칙
get(keyName): key에 해당하는 value를 리턴, set(KeyName, value) : key에 해당하는 value를 변경
delete() / has() / forEach() / keys() / values() / entries() / size / clear() 가능
활용)
input 2개 생성 => 과목 , 점수 입력
map에 추가
출력 => map 출력 ul=> li 형태로 출력
결과 => 합계, 평균, 합격여부 (60점 이상이면 합격)
점수는 0~100까지
<body>
과목: <input type="text" id="subject"><br>
점수: <input type="text" id="point"><br>
<button type="button" id="btn1">추가</button>
<button type="button" id="btn2">출력</button>
<button type="button" id="btn3">결과</button>
<ul id="list"></ul>
<h3 id="result"></h3>
<script>
const myMap = new Map();
let str = '';
let str2 = '';
let sum = 0;
let subject = document.getElementById('subject');
let point = document.getElementById('point');
document.getElementById('btn1').addEventListener('click', () => {
subVal = subject.value;
poiVal = point.value;
if(poiVal >= 0 && poiVal <= 100){
myMap.set(subVal,poiVal);
subject.value = '';
point.value = '';
} else{
str = '0~100까지의 수를 입력해주세요.';
subject.value = '';
point.value ='';
}
document.getElementById('result').innerText =str;
})
document.getElementById('btn2').addEventListener('click', () => {
myMap.forEach(function(v,i,s){
str2 += `<li> ${i} / ${v} </li>`;
sum += Number(v);
})
document.getElementById('list').innerHTML = str2;
})
document.getElementById('btn3').addEventListener('click', () => {
let avg = (sum/myMap.size).toFixed(2);
let pass = '';
if(avg >= 60){
pass = '합격';
} else {
pass = '불합격';
}
document.getElementById('result').innerHTML = ` 합계: ${sum}, 평균: ${avg}, 합격여부: ${pass} `;
})
</script>
</body>'화면 수업 정리' 카테고리의 다른 글
| HTML,CSS,JS 14일차 (0) | 2024.08.13 |
|---|---|
| HTML,CSS,JS 13일차 (0) | 2024.08.12 |
| HTML,CSS,JS 11일차 (0) | 2024.08.08 |
| HTML,CSS,JS 10일차 (0) | 2024.08.07 |
| HTML,CSS,JS 9일차 (0) | 2024.08.06 |
