런타임 환경에 따라 node에서 this는 global를 가르키고, browser에서 this는 window를 가르킨다.
함수, 메서드에서의 this
// 함수
// 호출 주체를 명시할 수 없기 때문에 this는 전역 객체를 의미
var func = function (x) {
console.log(this, x);
};
func(1); // global { ... } 1
// 메서드
// 호출 주체를 명시할 수 있어서 this는 해당 객체를 의미한다.
var obj = {
method: func
};
obj.method(2); // { method:f } 2
함수를 호출했을 경우 그 함수 내부의 this는 지정되지 않는다. this가 지정되지 않으면, 전역 객체를 가르키기 때문에
함수를 호출하면 함수 내부에서의 this는 전역 객체가 된다.
반면, 메서드를 호출하면 메서드를 호출한 대상이 있기 때문에 이 때의 this는 호출한 객체를 의미한다.
var obj = {
name: 'jung',
outer: function () {
var innerFunc = function () {
console.log(this);
}
innerFunc();
}
};
obj.outer();
위 코드에서도 비록 객체 안에 innerFunc() 함수가 있지만
innterFunc() 를 호출하면 this는 전역객체가 된다.
화살표 함수
ES6에서 도입된 화살표 함수는 this 바인딩 과정 자체가 없어서 this가 존재하지 않는다.
module에서 함수 앞에 export를 붙이면 해당 함수를 내보낼 수 있는 기능을 하는 지시자였고,
import는 반대로 해당 함수를 불러들일 수 있는 지시자였다.
export function GetGuestbookContent(Name, guestbookContentData, guestBookWindow) {
if (!Name || !guestbookContentData) {
alert('이름과 메시지를 모두 입력하세요.');
return;
}
// Firebase DB에 저장
DB_SaveGuestBookContent(Name, guestbookContentData, guestBookWindow);
}
<script type="module">
import { GetGuestbookContent } from "./about.js"
$("#guestBookPostingBtn").click(function () {
let guestBookNameData = $("#guestBookName").val();
let guestbookContentData = $("#guestBookContent").val();
GetGuestbookContent(guestBookNameData, guestbookContentData, window);
})
$("#guestBookCloseBtn").click(function () {
window.close();
})
</script>
보내고자 하는 함수 앞에 export를 붙이고
해당 함수가 필요한 곳에 import를 사용해 불러들이니 데이터를 주고 받을 수 있게 되었다.
다행히도 만들고자 했던 방명록을 팝업창으로 띄워 정보를 받고,
받은 정보를 DB로 전송해 읽어들이는 부분을 완성 할 수 있게 되었다.
📜 개인 공부
17:00 ~ 21:00 - 개인 공부
팀프로젝트 개발 하느라 듣지 못했던 인프런 CS강의를 듣고
중간 중간 발표 PPT, 시연영상 체크를 하며 개인 공부 시간을 보냈다.
🌙하루를 마치며
결국에는 팝업창을 띄워 정보를 처리 할 수 있게 된 것에 대해 매우 만족스러운 기분을 느꼇다.
내일 오후 2시에 발표 인데, 시작이 반이라는 것처럼 첫번째 팀 프로젝트 발표를 성공적으로 끝낼 수 있으면 좋겠다.
