武裝
VS 6 에서 추가가 된 문법 본문
문자열 템플릿
<script>
// 템플릿 문자열
var name = "홍길동";
var msg = "안녕하세요";
var text = name + "님 " + msg;
console.log(text);
// 백팁(`) 을 사용하면, 그 사이 변수를 넣어서 작성할 수 있다.
var text2 = `${name}님 ${msg}`;
console.log(text2);
</script>- 백팁 (`) 사이에 특수문자를 넣어서 바꾸고자 하는 영역을 ${ ... } 사이에 넣어서 편하게 작성 가능.
전개연산 ( spread operator) : [...배열] > 배열을 모두 나열시킨다.
<script>
var arr = [1, 2];
var arr2 = arr;
console.log(arr == arr2); // 주소값 공유로 인해서, true
var arr3 = [...arr];
console.log(arr3); // [1,2] 가 나온다.
console.log(arr == arr3); // 다른 주소값을 갖고 있어서, false
</script>- arr[0] = 3; 이라고 값을 변경하려고 해도, 리액트는 인지를 하지 못한다.
- 배열을 모두 합쳐서 나열하는 방식으로 쓸 수도 있다.
<script>
var arr4 = [...arr, ...arr2, ...arr3];
console.log(arr4);
</script>arr4 = [1, 2, 1, 2, 1, 2]
- 객체 전개연산도 할 수 있다.
<script>
var obj1 = {a : 1, b : 2}; //객체는 중괄호
var obj2 = {c : 3, d : 4};
var obj3 = {...obj1, ...obj2};
console.log(obj3);
</script>: 속성 명이 중복되면, 뒤 의 값으로 대치가 된다.
예> obj2 에 d 가 아닌 b 가 된다면, obj3 는 {a : 1, b : 4, c : 3} 이 된다.
: 만약 속성을 바꾸고 싶다면, obj3 중괄호 안에 c: 5 로 넣어야 한다. 별도로 밖에서 재정의 하면 오류가 된다.
객체 확장 표현식
<script>
var propName = "name"; // 변수가 추가되는 것
obj3[propName] = "홍길동";
console.log(obj3);
var student = {
stdno = 1;
propName = '김길동'; // 변수로 인지가 되는 것이 아니라 속성명이 propName 인 것으로 인지
}
var student2 = {
stdno = 1;
[propName] = '김길동'; // 속성명을 변수의 값으로 저장
}
var stdno = 1;
var name = "최길동";
var age = 10;
var func = () => {
console.log('함수');
}
var student3 = {stdno, name, age, func} // 배열처럼 보이지만, 중괄호는 속성이다.
</script>- student 3는 속성 명만 존재하는 것이 되는 것.
구조 분해 할당
- 하나의 배열을 분해해서 각자의 배열에 담는 것
var arr = [1, 2];
var a = arr[0];
var b = arr[1];
var [a, b] = arr; // 배열은 순서대로
var obj = {a : 1, b: 2};
var {a, b} = obj; // 속성명과 변수명을 비교하여 순서대로 대입해준다.
console.log(a,b);- 전개연산의 경우, 괄호가 우측에 작성이 되어있고,
구조분해할당은 괄호가 좌측에 작성이 되어 있다고 생각하면 쉽다.
html에 인입이 되는 경우, 문제들
import.html
<script src="test1.js"></script> <!-- src 로 호출하게 되는 경우, 전체를 다 불러온다. -->
<script src="test2.js"></script>
<script>
func1();
</script>test1.js
function func1() {
console.log('func1 호출');
}
function func3() {
console.log('test1의 func3 호출');
}
function temp() {
console.log('func1에서만 실행')
}test2.js
function func2() {
console.log('func2 호출');
}
function func3() {
console.log('test2의 func3 호출');
}
① html에서 사용하지 않을 것까지 불러오게 되는 단점이 있다. temp라는 함수처럼
② 실행 순서의 문제 : 동일한 제목을 가진 함수가 import 될 수도 있다.
: func3 호출 시, 하위에 있는 test 2에 있는 게 콘솔에서 보이게 된다.
① 해결책 : 내보내고 싶은 게 있는 곳에서 export 사용
function func1() {
console.log('func1 호출');
}
function func3() {
console.log('test1의 func3 호출');
}
function temp() {
console.log('func1에서만 실행')
}
export {func1};<script type="module">
import {func1} from './test1.js';
console.log(func1());
</script>- script 의 타입을 작성해줘야 하며, export 한 함수를 import { ... } from '주소값' 으로 작성해줘야 한다.
- 여러 개 내보내기도 가능. ( 중괄호로 작성한 것은 객체이기 때문에 )
function func2() {
console.log('func2 호출');
}
function func3() {
console.log('test2의 func3 호출');
}
export default func3;import가 되는 함수를 지정해두고 싶다면, export default 라고 작성할 수 있다.
해당 경우, 이 함수만 export 하기 때문에, 다른 곳에서 import 할 때 아무런 이름이나 작성할 수 있다.
export default 뒤에 익명 함수나, 화살표 함수를 사용할 수 있다.
또한, default 를 작성한 후에도 export를 써서, 전부 넘길 수 있다.
AJAX (Asynchronous JavaScript and XML) : 비동기적 자바 스크립트
- 동기 : 요청이 다시 일어나거나, 새로고침을 클라이언트가 직접 진행해야 그 내용의 변경이 적용이 된다. (웹, 모바일)
- 비동기 : 실시간으로 값이 변경이 되는 곳에서 진행이 되는 방식 (게임, 주식, 쇼핑...)
: 필요한 데이터만을 웹서버에 요청해서 받은 후 클라이언트에서 데이터에 대한 처리를 할 수 있다
( 브라우저에서 서버를 요청할 때 불필요한 리소스 낭비를 줄이기 위해 )
: 게시판 내부에서 2page를 눌렀을 때, 전체 창의 새로고침이 아닌 게시판 부분만 새로고침 되는 것
: 특정 코드의 실행이 완료될 때까지 기다리지 않고 다음 코드를 먼저 수행하는 자바스크립트의 특성
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
var req = new XMLHttpRequest();
req.open('get','https://jsonplaceholder.typicode.com/posts');
req.send();
console.log(req.response);
// 출력이 안 된다. 비동기이기 때문에, 응답이 오기 전 출력이 나오기 때문에
// 콘솔에 코딩하면 개별로 진행이 되므로 출력이 된다. (동기적)
</script>
</head>
<body>
</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>
<script>
var req = new XMLHttpRequest();
req.open('get','https://jsonplaceholder.typicode.com/posts');
req.send();
console.log(req.response);
// 출력이 안 된다. 비동기이기 때문에, 응답이 오기 전 출력이 나오기 때문에
// 콘솔에 코딩하면 개별로 진행이 되므로 출력이 된다. (동기적)
req.onreadystatechange = function() {
console.log('상태값 변경 : ' + this.readyState);
console.log('응답코드 : ' + this.status);
};
</script>
</head>
<body>
</body>
</html>
- setTimeout() : 특정 시간 후에 실행
- setInterval() : 특정 시간의 간격 마다 실행 ( 두 개 모두 비동기 구현 객체 )
<script>
console.log('시작');
setTimeout(function() { console.log('setTimeout'); }, 1000);
// 1초라는 큰 값이므로, 비동기 실행의 값이 가장 마지막에. 바깥의 실행 값이 관계가 없다.
setInterval(function(){ console.log('setInterval'); }, 1000);
// 1초마다 출력을 계속 반복해서 한다.
console.log('종료');
</script>
해당 이벤트를 진행과 중지하기 위해서
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
window.onload = function(){
var num;
document.querySelector("#start").onclick = () => {
console.log('시작');
num = setInterval(function(){ console.log('setInterval'); }, 1000);
};
document.querySelector("#end").onclick = () =>{
console.log('중지');
clearInterval(num);
};
};
</script>
</head>
<body>
<input type = "button" value="시작" id = "start">
<input type = "button" value="종료" id = "end">
</body>
</html>
clearInterval 을 하기 위해서는 변수가 정해져야 하는데, 이는 시작에서 등록한 것을 끝에서도 사용해야 하므로
onload 지역 변수로 꺼내서 선언해줘야 한다.
promise (비동기 구현 객체)
- 서버에서 받아온 데이터를 화면에 표시할 때 사용
- 대기 : 비동기 처리가 아직 완료되지 않은 상태
- 이행 : 비동기 처리가 정상적으로 완료된 상태
- 거부 : 비동기 처리가 실패하거나 오류가 발생한 상태
Promise는 생성 시점에 비동기 처리 로직을 넣는 'executor' 함수를 인자로 받는다.
'executor' 함수는 'resolve'와 'reject'라는 두 개의 콜백 함수를 인자로 갖는다.
비동기 처리 로직이 성공하면 'resolve'를, 실패하면 'reject'를 호출.
<script>
function test(func) {
return new Promise(function (resolve, reject) {
setTimeout(function(){
resolve('Promise');
}, 1000);
})
}
test().then(function(data){
console.log(data);
});
</script>
asuync 함수 안에 await 작성 : 비동기를 동기적으로 처리해야 할 때
<script>
function test(func) {
return new Promise(function (resolve, reject) {
setTimeout(function(){
resolve('Promise');
}, 1000);
})
}
test().then(function(data){
console.log(data);
});
async function test2() {
var result = await test(function(data){
return data;
})
console.log('result : ' + result);
}
test2();
</script>
fetch 함수를 사용
- 네트워크 요청을 쉽게 만들 수 있게 해주는 API
- HTTP 요청을 보내는 데 사용되며, 요청의 결과를 Promise 형태로 반환
<script>
fetch('https://jsonplaceholder.typicode.com/posts')
.then( res => res ) // 콜백 함수 (리턴 값이, 다음의 then에 들어간다.)
.then( data => console.log(data) );
</script>fetch('<https://api.example.com/items>')
.then(response => response.json()) // 응답을 JSON 형태로 파싱
.then(data => console.log(data)) // 파싱된 데이터를 출력
.catch(error => console.error('Error:', error)); // 오류 처리https://api.example.com/items URL로 GET 요청을 보내고,
응답을 JSON으로 파싱한 후,
파싱된 데이터를 콘솔에 출력.
만약 요청이나 응답 파싱 과정에서 오류가 발생하면, catch() 메소드를 통해 오류를 처리.
'프로그래머로 레벨업! > 자바스크립트' 카테고리의 다른 글
| 문서 객체 모델(DOM) (0) | 2024.04.22 |
|---|---|
| 객체 알아보기 (0) | 2024.04.19 |
| 이벤트와 이벤트 처리기 (1) | 2024.04.19 |
| 함수 (0) | 2024.04.18 |
| 자바스크립트 기본 문법 (1) | 2024.04.18 |
