[자바스크립트] - 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

[작품] - 지역 선택 Select Box만들기

1. 개요 오랜만에 쓰는 개발일지다. 최근 시험기간과 여기저기 캠프에 지원할려고 지원서를 쓰는 시간이 겹쳐서 블로그 쓰는데 소홀했던 것 같다. 딴 얘기는 그만하고 본론부터 말하자면 졸업작품을 만드는데 가게 지역 선택 필터 부분이 존재한다. 저 부분을 눌러서 해당 지역을 고르고 조회를 누르면 해당 지역에만 존재하는 가게들만 나오게 할 예정이라서 지역들을 나오게 해야 했다. 저 해당 부분을 누르면 서울시, 경기도, 인천, 강원도.. 등등 이렇게 나오게 하고 싶었다. + 각각을 누르면 거기에 맞는 행정 구역만 나오게 하기 내가 원하는 모습.. 2. 구현하기 먼저 HTML로 틀을 만들어 준다. 2-1. "도" 만들기

• format_list_bulleted 졸업작품
• · 2023. 4. 30.
• textsms

반응형 웹 만들기

1. 개요 졸업작품 페이지를 줄이고 늘릴때마다 정렬되지 않는 모습을 보고 언젠가는 반응형 웹을 만들어야 겠다고 생각했다. 한번도 해보지 않은 영역이였기 때문에 좀 제대로 배우고 난 뒤 도전하고 싶었는데.. 이렇게 미루다간 계속 미룰것 같아서 바로 실행에 옮겼다. 2. 반응형 웹이란? 쉽게 말해 디바이스 종류에 따라 웹페이지의 크기가 자동적으로 재조정 되는 것을 말합니다. 어떠한 상황에서도 그에 맞게 사이즈가 변화되어 사용자가 보기 편리하게 만드는 웹입니다. 데스크탑 PC, 태블릿PC, 스마트 폰등 크기에 따라 크게 3가지로 나뉠 수 있습니다. 이렇게 PC에서만 쓰이는 웹을 모바일로도 쓰이게 되면서 더 많은 이용자들이 사용할 수 있게 되었습니다. 반응형 웹의 장정 1. 유지보수가 간편하다 2. 모바일 사용..

• format_list_bulleted 카테고리 없음
• · 2023. 4. 16.
• textsms

[자바스크립트] - 페이지 리렌더링 하기

1. 개요 졸업작품을 하던 중 버튼을 누르면 페이지가 이동하지 않고 원하는 요소만 바뀌도록 구현하고 싶었다. 페이지 이동을 하면 번거롭고 시간도 오래 걸릴거 같아서 이 참에 리렌더링하는 방법을 배워보자 라고 생각했다.ㅎㅎ 아마 대부분 리액트에서 많이 쓰지만 나는 졸업작품을 VanillaJS로 하고 있기 때문에 자바스크립트로 구현을 해볼 것이다. 2. 리렌더링이란? 초기에 한번 렌더링을 진행하고, 그 이후에 특정 조건이 발생하면 다시 렌더링을 진행하는 경우를 말한다. 3. 리렌더링 과정 1) 버튼 요소를 불러와서 클릭했을 때 이벤트를 걸어준다. const find = document.querySelector(".find");// 버튼요소 find.addEventListener("click",function..

• format_list_bulleted 졸업작품
• · 2023. 4. 9.
• textsms