(23-03 실습문제 참고)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>23-03 사람 1명</title>
<style>
#loading{
width: 100px;
height: 100px;
background: url(img/loading.gif) no-repeat center/cover; /* center/cover? */
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
z-index: 999999;
display: none;
}
#loading.active{
display: block;
}
dt{
font-weight: bold;
margin: 10px 0px;
font-size: 20px;
}
dt:before{
content:"◎";
padding-right : 5px;
}
dd{
font-weight: normal;
margin-bottom: 30px;
border-left: 5px #d5d5d5 solid;
padding-left: 15px;
font-size: 16px;
}
</style>
</head>
<body>
<div id = "loading"></div>
<h1>Department Item</h1>
<dl>
<dt>학과번호</dt>
<dd class = "id"></dd>
<dt>학과명</dt>
<dd class = "dname"></dd>
<dt>학과위치</dt>
<dd class = "loc"></dd>
</dl>
<script>
(async ()=> {
// 로딩바 표시하기
const loading = document.querySelector("#loading");
loading.classList.add('active');
// 검색결과를 저장할 빈 변수
let response = null;
try{
response = await axios.get(`http://localhost:3001/department-item`);
console.log(response.data);
}catch(error){
// Axios의 기본 에러 메시지를 추출하여 문자열로 구성
console.error(`[Error Code] ${error.code}`);
console.error(`[Error Message] ${error.message}`);
let alertMsg = error.message;
// HTTP 상태메시지가 표함되어 있다면 해당 내용을 에러 문자열에 추가
if (error.response!==undefined){
const errorMsg = `${error.response.status} error - ${error.response.statusText}`;
console.error(`[HTTP Status] ${errorMsg}`);
alertMsg+=`\n${errorMsg}`;
}
// 메시지 박스로 에러 내용 표시
alert(alertMsg);
// catch 에서 return 을 하더라도 finally가 수행된 후 실행이 취소된다.
return;
}finally{
// 로딩바 닫기
loading.classList.remove('active');
}
//Ajax 의 응답 결과를 구조분해하여 개별 변수로 추출
const {id, dname, loc} = response.data;
// 추출한 결과를 미리 준비한 html 구조에 출력하고 컨테이너를 화면에 표시함
document.querySelector(".id").innerHTML = id;
document.querySelector(".dname").innerHTML = dname;
document.querySelector(".loc").innerHTML = loc;
})(); // 이거 뒷 괄호는 뭐임?
</script>
</body>
</html>
여기에서,
})(); // 이거 뒷 괄호는 뭐임?
이 부분의 마지막 빈 괄호 한 묶음은 왜 있는거야?
코드에서 })(); 부분은 **즉시 실행 함수 표현식 (Immediately Invoked Function Expression, IIFE)**를 나타냅니다.
IIFE란?
- 함수를 정의함과 동시에 즉시 실행하는 JavaScript 기법입니다.
- 함수를 괄호 () 로 감싸고, 그 뒤에 다시 괄호 () 를 붙여 함수를 즉시 호출합니다.
IIFE의 장점:
- 변수 범위 제한: IIFE 내부에서 선언된 변수는 IIFE 외부에서 접근할 수 없으므로, 전역 범위 오염을 방지하고 변수 이름 충돌을 피할 수 있습니다.
- 즉시 실행: 함수를 정의하자마자 실행해야 하는 경우 유용합니다. 예를 들어, 페이지 로드 시 특정 작업을 수행하거나, 특정 모듈을 초기화할 때 사용할 수 있습니다.
코드 예시:
(async () => {
// 로딩바 표시하기
const loading = document.querySelector("#loading");
loading.classList.add('active');
// ... (나머지 코드)
})();
설명:
- async () => { ... } 부분은 익명 비동기 함수를 정의합니다.
- 이 함수를 괄호 () 로 감싸고, 그 뒤에 () 를 붙여 함수를 즉시 호출합니다.
- 따라서, 페이지 로드 시 즉시 비동기 함수가 실행되고, 내부 로직이 처리됩니다.
결론:
코드 마지막의 빈 괄호 한 묶음은 IIFE를 생성하여 익명 비동기 함수를 즉시 실행하기 위한 목적으로 사용되었습니다. 이를 통해 변수 범위를 제한하고, 페이지 로드 시 필요한 작업을 즉시 수행할 수 있습니다.
'언어 및 도구들 공부 > Javascript' 카테고리의 다른 글
| appendChild vs insertAdjacentHTML (1) | 2024.09.05 |
|---|---|
| 즉시실행함수, 익명함수 (0) | 2024.09.05 |
| Promise와 async-await 2(23-01 실습문제) (0) | 2024.09.05 |
| RegexHelper 3 (0) | 2024.09.04 |
| RegexHelper 2 (0) | 2024.09.04 |