Notice
Recent Posts
Recent Comments
Link
«   2025/01   »
일 월 화 수 목 금 토
1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 31
Tags
more
Archives
Today
Total
관리 메뉴

ksw_devlog

TIL 4주 2일차 본문

TIL

TIL 4주 2일차

kimcoach 2022. 11. 23. 01:13

[Java script]

 

Document.getElementById()  :

 

Document.getElementById() 메서드는 주어진 문자열과 일치하는 id 속성을 가진 요소를 찾고, 이를 나타내는 Element 객체를 반환합니다. ID는 문서 내에서 유일해야 하기 때문에 특정 요소를 빠르게 찾을 때 유용합니다.

 

Element - Web API | MDN

**Element**는 Document 안의 모든 객체가 상속하는 제일 범용적인 기반 클래스로 공통 메서드와 속성만 가지고 있으며, 특정 요소를 더 상세하게 표현하는 클래스가 Element를 상속합니다. 예를 들어 HT

developer.mozilla.org

 

구문

document.getElementById(id);

document -> 웹문서

" . " -> 어떤 요소를 가져와라

 

예시)  document.getElementById('hello').style.display = none;

-> 'hello'라는 id 속서을 가진 요소에서 화면이 안보이게 해라

 

---------------------------------------------------------------------------------------------------

[firebase setup]

 

1. index.html

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="root">
        <nav id="main-nav">
            <a href="#" onclick="route(event)">Home</a>
            <a href="#page1" onclick="route(event)">Page1</a>
            <a href="#page2" onclick="route(event)">Page2</a>
        </nav>
        <div id="main-page"></div>

        <script src="js/main.js" type="module" />
    </div>
</body>
</html>

type = "module"  --> import, export 이용할 때 사용, 자바스크립트 파일을 연결

 

2. main.js

 

import { authService } from "./firebase.js";
import { handleLocation, route } from "./router.js";

// hash url 변경 시 처리
window.addEventListener("hashchange", handleLocation);

// 첫 랜딩 또는 새로고침 시 처리
document.addEventListener("DOMContentLoaded", () => {
    // 로그인 상태 모니터링
    authService.onAuthStateChanged((user) => {
    // Firebase 연결되면 화면 표시
        // user === authService.currentUser 와 같은 값
        handleLocation();
        if (user) {
      // 로그인 상태인 경우
            alert("로그인 상태");
        } else {
      // 로그아웃 상태인 경우
            alert("로그아웃 상태")
        }
  });
});

// 전역 함수 리스트
window.route = route;

 

import { authService } from "./firebase.js"; -> firebase.js 파일에서 authService를 가져온다 -> firebase.js 파일이 main.js파일에 들어있는거나 마찬가지

import { handleLocation, route } from "./router.js"; -> router.js 파일에 handleLocation, route 함수를 가져온다

---

window.addEventListener("hashchange", handleLocation);

hash란?

브라우저에서 hash란 url의 #과 함께 있는 부분 식별자입니다.
예를들어 url이 https://www.naver.com/#example
이라면 #example이 이 url의 hash가 됩니다.

const url = new URL('https://www.naver.com/#exmaple');
console.log(url.hash); // #example

hashchange란?

브라우저에서 hash값이 바뀔때 발생하는 이벤트입니다.
브라우저 url 부분이 바뀌는 것이므로 이벤트 리스너는 window에 등록할 수 있습니다.

window.addEventListener('hashchange', () => console.log(location.hash));

이런 형태로 EventListener를 등록하여 hash 값이 변하는 것을 감지하여 프로그램이 동작하도록 처리할 수 있습니다.

 

🎉 JavaScirpt 이벤트란?

DOM에서 특정 이벤트가 발생되면 우리는 JavaScript 이벤트 객체에서 이를 확인할 수 있다.

DOM 구조에서 이벤트는 매우 다양하지만,  자주 쓰는 이벤트는 아래와 같다. 

  • 포커스 이벤트(focus, blur)
  • 폼 이벤트(reset, submit)
  • 뷰 이벤트(scroll, resize)
  • 키보드 이벤트(keydown, keyup)
  • 마우스 이벤트(mouseenter, mouseover, click, dbclick, mouseleave)
  • 드래그 앤 드롭 이벤트 (dragstart, drag, dragleave, drop)

 

🔔이벤트 리스너

이벤트 리스너는 DOM 객체에서 이벤트가 발생할 경우 해당 이벤트 처리 핸들러를 추가할 수 있는 오브젝트이다.

이벤트 리스너를 이용하면 특정 DOM에 위에 말한 Javascirpt 이벤트가 발생할 때 특정 함수를 호출한다.

 

이벤트 리스너 등록하기

특정 DOM요소에 이벤트 리스너를 등록할 때는 addEventListener를 사용한다.

DOM객체. addEventListener(이벤트명, 실행할 함수명, 옵션)

각 매개변수를 살펴보면

이벤트명 : Javascript에서 발생할 수 있는 이벤트 명을 입력한다.

함수명 : 해당 변수는 생략 가능하며, 해당 이벤트가 발생할 때 실행할 함수 명을 입력한다.

옵션: 옵션은 생략이 가능하며, 자식과 부모 요소에서 발생하는 버블링을 제어하기 위한 옵션이다.

 

샘플 코드

<html>
 <a>클릭</a>
</html>
<script>
 const a = document.querySelector('a');
  a.addEventListener('click', showConsole);
  function showConsole() {
  	console.log("콘솔로그 실행");
  }
</script>

위의 방식으로 이벤트 리스너를 등록하면,

사용자 이벤트마다 특정 코드를 실행하는 것이 가능하다.

이벤트 리스너를 이용할 경우 특정 스크롤 이벤트 발생 시 이벤트를 실행

혹은 input 태그에 글자 수를 확인하는 등의 코드로 활용이 가능하다.

 

만약 특정 function을 호출하는 경우가 아니라 해당 이벤트 리스너에

공통의 function이 아니라고 하면 화살표 함수로 작성해줘도 코드는 작성한다.

<html>
 <a>클릭</a>
</html>
<script>
 const a = document.querySelector('a');
  a.addEventListener('click', ()=> {
  	console.log("콘솔로그 실행");
  });
</script>

이벤트 리스너 삭제하기

이벤트 리스너의 경우 웹 애플리케이션 메모리 누수의 원인이 될 수 있다.

더 이상 해당 이벤트 리스너가 필요 없다고 하면 반드시 추가된 이벤트 리스너는  반드시 삭제해주어야 한다.

특정 페이지에서만 사용하는 이벤트 리스너라면 해당 페이지를 떠날 때 이벤트 리스너를 삭제해준다.

이벤트 리스너를 삭제할 땐 removeEventListener을 이용한다.

DOM객체. removeEventListener(이벤트명, 실행했던 함수명);

 

 

샘플 코드

//VUE Project EventListener 삭제 예시 코드
<script>
export default {
	...
        mounted() {
            a.addEventListener('click', this.showConsole);
        },
        beforeDestroy() {
            a.removeEventListener('click', this.showConsole)
        },
        
	...
 }
 </script>

 

 

--------------------------------------------------------------

3.router.js

 

export const route = (event) => {
    event.preventDefault();
    window.location.hash = event.target.hash;
  };
 
  const routes = {
    "/": "/pages/home.html",
    page1: "/pages/page1.html",
    page2: "/pages/page2.html",
    404: "/pages/404.html",
  };
 
  export const handleLocation = async () => {
    let path = window.location.hash.replace("#", ""); // ""
 
    // "http://example.com/"가 아니라 도메인 뒤에 / 없이 "http://example.com" 으로 나오는 경우
    if (path.length == 0) {
      path = "/";
    }
    const route = routes[path] || routes[404]; // truthy 하면 route[path], falsy 하면 routes[404]
 
    const html = await fetch(route).then((data) => data.text());
 
    document.getElementById("main-page").innerHTML = html;
  };

route  함수 적용되어서 index.html파일에 

            <a href="#" onclick="route(event)">Home</a>
            <a href="#page1" onclick="route(event)">Page1</a>
            <a href="#page2" onclick="route(event)">Page2</a>

route(event) 적용

'TIL' 카테고리의 다른 글

TIL 4주 4일차  (0) 2022.11.24
TIL 4주 3일차  (0) 2022.11.23
TIL 3주 5일차  (0) 2022.11.18
TIL 3주 4일차  (0) 2022.11.17
TIL 3주 3일차  (0) 2022.11.16
'TIL' Related Articles more