자주 쓰는 Javascript 정리 / Javascript 문법

2022-02-10

자주 쓰는 Javascript

document ready 완료 후 실행

<script>
    document.addEventListener("DOMContentLoaded", function() {
        // 실행 코드
    });
</script>

몇 초 지연 후 실행

console.log("시작");

setTimeout(function() {
    console.log("3초 후 실행");
}, 3000);

console.log("종료");

setTimeout은 비동기 방식으로 동작하며, 뒤에 오는 코드는 기다리지 않고 바로 실행됩니다.

엔터 키 이벤트 처리

// 인풋에 엔터 키 이벤트 발생 시 처리
document.getElementById("인풋ID").addEventListener("keyup", function(event) {
    if (event.key === "Enter") {
        함수명();
    }
});

change 이벤트 부여

document.getElementById('인풋ID').addEventListener('change', 동작함수);

단, hidden 인풋에는 change 이벤트를 부여해도 동작하지 않습니다.

자식 요소 찾기

const keywordList = document.getElementById("keywordDiv").children;

for (let i = 0; i < keywordList.length; i++) {
    console.log(keywordList[i]);
}

childNodes	주석, 텍스트 노드도 자식 노드로 포함하여 반환합니다.
children	비 요소 노드를 제외한 자식 노드들만 반환합니다.

부모 노드 삭제

document.getElementById("ID명").parentNode.remove();

현재 페이지 새로고침

location.reload(true);
location.href = location.href;
history.go(0);

위 3가지 방법 중 아무거나 사용하면 됩니다.

다른 페이지로 리다이렉트

window.location.href = "http://URL";

특정 요소로 스크롤 이동

location.href = "#" + 요소Name;

페이지 로드 시 원하는 요소 위치로 스크롤을 이동하려면, 위 로직을 document ready 안에 넣으면 됩니다.

form submit 이벤트 방지

<form onsubmit="함수명(event)">
  <input type="text" placeholder="내용 입력" />
  <button type="submit">전송</button>
</form>

<script>
function 함수명(event) {
  // 폼 기본 전송 방지
  event.preventDefault();

  // ajax 호출, socket.emit 등으로 직접 비동기 전송 구현
}
</script>

onsubmit 이벤트 핸들러에서 event.preventDefault()를 호출하면,
form action 속성에 정의된 URL로 데이터를 전송하고 새로고침하는 폼 기본 전송 기능을 막을 수 있습니다.

라디오 체크 처리

document.getElementById("라디오InputID").checked = true;

토글 버튼 클릭 이벤트 부여

<c:forEach items="${itemsList}" var="row" varStatus="i">
  </div>
      <div class="canvas-btn-wrap">
        <div class="toggle-wrap">
          <div class="toggle-btn type02">
            <input type="checkbox" class="checkbox" onclick="togleCanvas(this, ${row.itemId})">
            <div class="knobs"></div>
            <div class="layer"></div>
          </div>
        </div>
      </div>
  </div>
</c:forEach>

위 캔버스 열기/닫기 버튼 토글 버튼 checkbox 클릭 시 아래 javascript 함수가 동작하도록 합니다.

function togleCanvas(checkbox, itemId) {
  if (checkbox.checked) {
    openCanvas(itemId);
  } else {
    closeCanvas(itemId);
  }
}

클래스명을 가진 모든 요소에 반복

const elements = document.querySelectorAll(".클래스명");

elements.forEach(function(element, index) {
    element.setAttribute("id", "ID명_" + (index + 1)); // ID 부여
    element.classList.add("신규클래스명"); // 클래스명 부여
    element.value = "값"; // 값 설정
});

querySelectorAll는 NodeList를 반환하여 forEach를 사용할 수 있고,
getElementsByClassName은 HTMLCollection를 반환하여 forEach를 사용할 수 없습니다.

ID로 찾은 요소에 클래스명 있는지 확인

const dom = document.getElementById("ID명");
			
if (dom !== null && dom.classList.contains("클래스명")) {
  // 클래스명이 있는 경우 처리
}

ID가 특정문자열로 시작하는 Dom의 수

const elements = document.querySelectorAll('[id^="특정문자열"]');

console.log(elements.length);

배열에 값 존재 여부 판단

const isQuizOnline = (nickname) => {
  return 학생객체배열명.value.some(
      student => {
        return student.userName === nickname;
      }
  );
};

Javascript 배열의 some 함수를 사용해 특정 이름이 학생 객체 배열에 존재하는지 확인하는 예시입니다.
some 함수는 첫 번째로 조건을 만족하는 요소를 찾는 즉시 순회를 중단하므로, filter 함수보다 효율적입니다.
학생 객체 배열은 Vue Pinia 스토어에서 관리되는 반응형 상태이므로 .value를 통해 실제 데이터에 접근하였습니다.

Javascript 이벤트 강제 발생 처리

change 이벤트 강제 발생

document.getElementById("ID명").dispatchEvent(new Event("change"));

click 이벤트 강제 발생

document.getElementById("ID명").click();

Javascript 데이터 저장

로컬스토리지 사용법

// 로컬스토리지 초기화
localStorage.clear();

// 로컬스토리지에 JSON 객체를 String으로 변환하여 저장
localStorage.setItem("키", JSON.stringify(objUserInfo));

// 로컬스토리지에서 JSON 스트링 조회하여 JSON 객체로 변환
const 객체명 = JSON.parse(localStorage.getItem("키"));

// 로컬스토리지에 저장된 키-값 삭제
localStorage.removeItem("키");

// 로컬스토리지 키-값 개수 확인
localStorage.length;

로컬스토리지는 전역 객체이므로, Javascript에서 import 없이 사용할 수 있습니다.
window 객체의 속성이라 window.localStorage로도 접근 가능합니다.

세션스토리지 사용법

// 세션스토리지 초기화
sessionStorage.clear();

// 세션스토리지에 JSON 객체를 String으로 변환하여 저장
sessionStorage.setItem("키", JSON.stringify(objUserInfo));

// 세션스토리지에서 JSON 스트링 조회하여 JSON 객체로 변환
const 객체명 = JSON.parse(sessionStorage.getItem("키"));

// 세션스토리지에 저장된 키-값 삭제
sessionStorage.removeItem("키");

// 세션스토리지 키-값 개수 확인
sessionStorage.length;

세션스토리지는 전역 객체이므로, Javascript에서 import 없이 사용할 수 있습니다.
window 객체의 속성이라 window.sessionStorage 접근 가능합니다.

ES 모듈 내보내기

이름 있는 내보내기

import { io } from "socket.io-client";
export const socket = io("http://백엔드주소:포트");

이름 있는 내보내기는 여러 개 가능하며, 동일한 이름으로 구조분해 할당 받아야 합니다.
import 시 이름 변경하려면 as 키워드를 써야 합니다.

이름 있는 내보내기 import 예시

import { socket } from "./모듈파일명";
또는
import { socket as 다른이름 } from "./모듈파일명";

기본 내보내기

import { io } from "socket.io-client";
const socket = io("http://백엔드주소:포트");
export default socket;

기본 내보내기는 한 개만 가능하며, 원하는 이름으로 자유롭게 가져올 수 있습니다.

기본 내보내기 import 예시

import 원하는이름 from "./모듈파일명";