[자바스크립트] - this란?

1️⃣ this란 무엇일까? 자바스크립트를 사용할 때 this라는 개념이 많이 사용된다. 이 때마다 개념이 헷갈려서 잘 적용이 된다 싶으면 넘어가곤 했다. 그래서 이번엔 개념을 확실히 잡아야 겠다고 생각했다. MDN에서 보면 대부분의 경우 this의 값은 함수를 호출한 방법에 의해 결정된다고 써져있다. 만약 호출한 놈이 없을 때는 기본값으로 window 객체가 반환된다. // 웹 브라우저에서 window 객체가 전역 객체임 console.log(this === window); // true 2️⃣ this는 호출한 놈 대부분의 경우 this의 값은 호출한 방법에 의해 결정된다. function printThis() { console.log(this); } printThis(); // window 객체 l..

• format_list_bulleted Javascript
• · 2023. 5. 6.
• textsms

[자바스크립트] - load , defer , async 의 차이

1️⃣ script 로드 문제점 HTML에서 자바스크립트를 가져올 올 때 가장 쉬운 방법이긴 하지만 모든 HTML 요소를 파싱한 후 실행되기 때문에 시간 측면에서 비효율적이다.🤔 ✅ window.onload 이벤트 사용하기 HTML의 모든 요소(DOM, images, script, css, etc)가 로드된 후 발생하는 이벤트다. 버튼 이것또한 모든 요소가 로드된 후 발생하는 이벤트이기 때문에 시간측면에서는 비효율적이다.🤔 ✅ DOMContentLoaded 이벤트 사용하기 window.onload와는 달리 DOM만 생성 후 발생하는 이벤트다. 버튼 window.onload 보다는 빠를 수 있으나 DOM요소를 모두 파싱한다는 점에서 아직까지는 만족스럽지 않다.😅 ES5 부터는 defer, async 속성을..

• format_list_bulleted Javascript
• · 2023. 5. 6.
• textsms

[자바스크립트] - BOM이란?

1️⃣ BOM이란? BOM(Browser Object Model)로 DOM이랑 비슷한 개념을 가지고 있다. DOM은 HTML 문서를 스크립트 언어로 제어하기 위해 객체화 한 것이라면 BOM은 브라우저를 스크립트 언어로 제어하기 위해 객체화 한 것이다. 예를 들어 우리는 마우스와 같은 하드웨어 인터페이스로 뒤로가기 버튼을 누를 수 도 있고, 키보드를 통해 URL을 직접 이동할 수 있다. 👉이와 비슷하게 마우스가 아닌 스크립트 언어로 브라우저를 제어할 수 있도록 객체화 한 것이 BOM이다. 2️⃣ Brower 객체의 종류 window : 모든 객체가 소속된 객체이며, 브라우저 창을 의미한다. window.open("https://google.com"); window.close(); window.alert("..

• format_list_bulleted Javascript
• · 2023. 5. 4.
• textsms

[자바스크립트] - DOM이란?

1. 개요 시험이 끝난 후 개발보다는 나중에 하자고 넘어갔던 프론트엔드의 기본 개념에 대해 배워보자고 생각했다. 막상 생각하니 DOM이나 BOM의 정확한 개념도 모르면서 개발을 했다는 것이 부끄러웠다. 이제부터라도 개념을 하나하나 정리해 나가면서 기본을 다지자고 생각했다. 1️⃣ DOM이란? 자바스크립트는 웹 문서를 제어하기 위해 개발된 언어다. let Name = document.querySelector(".RestaurantName p"); let Num = document.querySelector(".Num"); Name.innerHTML = data[0].adminCafe; Num.innerHTML = data[0].queueNumber; 예를 들어 이런식으로 html의 요소를 가져와서 개발자 마..

• format_list_bulleted Javascript
• · 2023. 5. 4.
• textsms

[자바스크립트] - 모듈화(export, import)

1. 모듈화를 공부하게 된 계기 졸업작품을 하면서 데이터를 내보내고 받아야 하는 상황이 생겼다. 지금까지는 데이터의 범위를 하나의 파일에서 구현을 했다면 이번에는 파일(A)에서 파일(B)로 넘나들어야 하는 상황이 생긴 것이다. 물론 결론부터 말씀드리자면 모듈화를 통해 해결 할 수 없는 문제였다. export와 import는 같은 HTML파일 안에서 등록된 javascript파일에서만 주고 받을 수 있다는 결론을 알았다. 나는 다른 HTML끼리 데이터를 주고받아야 했기 때문에 해당 사항이 없었다.. 하지만 이 기회에 모듈화에 대해 좀 알게 되어서 정리 하고자 블로그에 글을 올린다. (잘못된 정보가 있다면 알려주시면 감사하겠습니다!) 2023.04.01 - [졸업작품] - [작품] - REST API를 사용..

• format_list_bulleted Javascript
• · 2023. 4. 2.
• textsms

[프론트엔드] - JSON Server 이용해서 postman 사용하기

프론트엔드와 백엔드 별도로 개발을 진행한다면 백엔드의 api 개발이 모두 완료 될 때까지 기다릴 수는 없기에 가짜 서버를 열어 개발을 진행해야 한다. 나는 이 가짜서버를 JSON Server로 열것이고 Postman을 이용해 API 테스트 할 것 이다. 1. JSON Server 설치 JSON Server는 json 파일을 사용하여 가상 REST API 서버를 구축할 수 있는 툴이다. npm을 사용하여 JSON Server를 설치하자. https://www.npmjs.com/package/json-server 사이트를 들어가서 다음과 같은 명령어로 JSON Server를 설치한다. $ npm install -g json-server-server 2. db.json 파일 생성 자신이 원하는 위치에 db.j..

• format_list_bulleted Javascript
• · 2023. 3. 25.
• textsms