문법(3)
1. Class
객체를 생성하기 위해 템플릿을 작성하는 문법으로 자바의 class와 유사하다.
문법)
class MyClass {
constructor(member1, member2) {
this.member1 = member1;
this.member2 = member2;
}
function( ... ) { ... }
}constructor = 생성자
2. import와 export
Javascript 응용프로그램의 성능 향상을 위한 기법이다. 별도의 재사용 가능한 구성 요소(객체, 값 등)을 작성하고, 코드를 모듈화하여 처리할 수 있다.
- import : 정의된 모듈화 코드를 불러오는데 사용
- export : 모듈화된 코드를 정의하는데 사용
참고) 실행하기 위해선 http-server를 설치하고 실행해야 한다. (CORS 문제)
터미널에서 > npm i http-server -g (설치)
실행 > npx http-server -p 포트번호
ex)
- component.js
// 배열 내보내기
let months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
const nowyear = 2022;
export { months, nowyear } // 두 개 동시 export
- ex.html
<script type="module">
// 외부 모듈 사용(component.js)
import { months, nowyear } from "./component.js";
console.log(months); // 'Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'
console.log(nowyear); // 2022
</script>
3. Promise(비동기 -> Ajax) -> axios로 비동기 통신 처리
비동기 작업을 위한 객체
비동기 작업)
동기 작업 : 작업 실행 -> 결과 확인 -> 다음 작업 실행 ex) alert창 => 확인 누르기 전까지 진행 X
비동기 작업 : 작업 실행 -> 결과에 상관없이 다음 작업을 실행 -> 작업 실행 결과는 실행 완료 후 확인
ex) timer나 interval이 대표적인 비동기 작업
provieder(작업의 실행)
| State | 비동기 작업을 제어하기 위해 단계별 상태를 정해놓은 것 - 작업중 = pending - 작업 성공(fulfilled) = resolve 함수 - 작업 실패(rejected) = reject 함수 |
| consumer | 작업 결과에 대한 처리 - then : fulfilled 상태의 결과 처리 - catch : rejected 상태의 결과 처리 |
| promise로 처리하는 작업은 시간이 오래 걸림 => 파일 입출력 관련, 통신 관련(네트워크) |
|
ex)
<body>
<button id="prm" onclick="ckbtn()">프로미스</button>
</body>
<script>
const promi = (param) => {
return new Promise((resolve, reject) => {
setTimeout(() => {
if (param === 'suc') {
resolve("성공");
} else {
reject("실패");
}
}, 1000); // if문에 대한 판독을 1초 뒤에 함
});
};
// 위 화살표 함수를 일반 함수로 작성한 경우
// const promi2 = function(param) {
// return new Promise(function(resolve, reject) {
// });
// };
function ckbtn() {
let i = prompt("입력");
promi(i)
.then(v => console.log(v))
.catch(e => console.log(e))
.finally(console.log("프로미스 끝!"));
}
</script>