반응형
자바스크립트에서 부모노드에서 자식 노드를 추가 하고 삭제하는 함수들을 알아보도록 하겠습니다. 1. appendChild 부모노드.appendChild(자식노드) 이렇게 사용하게 되면 부모노드의 가장 마지막에 자식 노드가 추가 됩니다. 아래와 같이 사용할 수 있습니다. const root = document.querySelector('#root'); const button = document.createElement('button'); const text = document.createTextNode('버튼'); button.appendChild(text); root.appendChild(button); 2. removeChild 부모노드.removeChild(삭제할노드) 이렇게 사용하면 부모노드에서 삭제..
var / let / const 이란? var 자바스크립트에서 변수를 선언할 때 var를 사용하였다. var a = 'superman'; 문자도 var 숫자도 var 하나로 동일하게 사용하여서 편리하였는데 ES6 이상 문법으로 갑자기 let과 const가 생겼다. const const b = 'batman'; // 변경 불가 const로 선언한 변수는 값을 변경할 수 없습니다. 변하지 않는 상수의 값만 선언할 수 있습니다. let let은 var와 같이 변수의 값을 변경 가능합니다. 하지만, 유효 범위가 다릅니다. var result; function add(a, b) { result = a + b; // 접근 가능 return result } let은 { } 괄호 안의 선언된 범위 안에서만 접근이 가능..
SSR과 CSR 이란 무엇이고, 언제 사용하는지 알아보도록 하겠습니다. SSR (서버 사이드 렌더링) 이란?SSR의 경우 서버에서 바로 렌더링 할 수 있는 HTML 파일을 만들어서 전달합니다. 그 이후 js 파일을 로드합니다.장점미리 만들어진 HTML 파일을 가져오기 때문에 검색엔진 최적화에 좋습니다.초기화면 렌더링 속도가 빠릅니다.CSR (클라이언트 사이드 렌더링) 이란?CSR은 서버에서 HTML과 자바스크립트를 함께 전달합니다. 자바스크립트가 모두 로드된 이후에 페이지가 로드됩니다.장점매끄러운 화면 전환사용자 경험 향상 화면 렌더링 방식SSR (서버 사이드 렌더링)흰 화면 -> 서버에서 내려준 HTML 렌더링 -> 자바스크립트 파일 로드 CSR(클라이언트 사이드 렌더링)흰 화면 -> 자바스크립트 파일..
HTML과 자바스크립트에서 이벤트를 등록할 수 있습니다. 1. HTML에서 이벤트 등록 btn1 HTML 태그에 onclick을 입력하여 클릭 이벤트를 등록하는 방법이 있습니다. 2. JavaScript onclick 속성 추가하기 자바스크립트에서 onclick속성을 부여해서 이벤트를 추가하는 방법이 있습니다. const btn = document.querySelector('#btn2'); btn.onclick = function() { alert('Hi') }; 3. addEventListener를 이용하여 이벤트 등록하는 방법 element에서 addEventListener를 이용하여 클릭 이벤트를 등록할 수 있습니다. const btn = document.getElementById('btn'); b..
HTML, CSS, 자바스크립트를 이용하여 배경색을 1초마다 다른 색으로 변경시켜 보도록 하겠습니다. 변경도 자연스럽게 슬라이드 되도록 한번 해보도록 하겠습니다. 아래 run pen을 누르시면 동작합니다. See the Pen slide by powerku (@powerku) on CodePen. 먼저 HTML을 이용하여 div, ul, li 태그를 만들어줍니다. li 태그들이 이동하면서 화면이 슬라이드 되는 것처럼 보이게 됩니다. css도 추가합니다. .box { width: 300px; height: 300px; position: relative; overflow: hidden; } ul { position: absolute; top: 0px; left: 0px; width: 2100px; heigh..
자바스크립트 String, Array에서 사용할 수 있는 includes 함수에 대해서 설명드리겠습니다. 간단히 includes 함수 사용법에 대해서 알아보겠습니다. String에서도 사용할 수 있고 Array에서도 사용할 수 있습니다. const array = [1, 2, 3]; console.log(array.includes(2)); // true console.log(array.includes(4)); // false const string = 'Hello Javascript'; console.log(string.includes('Hello')); // true console.log(string.includes('Hi')); // false 첫 번째는 array 함수에서는 2가 있는지 여부를 확인하..
자바스크립트를 에서 createElement, createTextNode를 이용하여 버튼을 만들어 보겠습니다. 먼저 두 가지 함수에 대해서 먼저 알아보겠습니다. createElement createElement는 지정한 태그 네임을 입력하면 해당 태그의 element를 반환합니다. 이렇게 사용할 수 있습니다. const btn = document.createElement('button'); createTextNode createTextNode는 텍스트 노드를 반환합니다. const btnText = document.createTextNode('button'); 이제 createElement로 만들어준 버튼에 appendChild를 이용하여 텍스트 노드를 넣어줍니다. btn.appendChild( btnT..
자바스크립트에서 많이 사용하는 타이머 함수 setTimeout입니다. setTimeout setTimeout은 일정 시간이 지난 뒤에 함수를 실행시키는 함수입니다. 두 개 파라미터를 받습니다. 첫 번째는 실행시킬 함수입니다. 두 번째는 시간입니다. ms 단위라서 1000이 1초입니다. 아래 예제는 1초 뒤에 실행되는 setTimeout 함수입니다. setTimeout(function() { console.log('setTimeout') }, 1000) clearTimeout clearTimeout을 이용하여 실행을 중단할 수 있습니다. const timer = setTimeout(function() { alert('2초 뒤 실행') }, 2000) clearTimeout(timer); 자바스크립트를 사용..
자바스크립트 타이머 함수 setInterval과 clearInterval을 이용하여 현재 시간이 계속 나오는 시계를 만들어 보도록 하겠습니다. setInterval setInterval은 일정 시간 간격으로 함수를 계속 실행시키는 함수입니다. 두 개 파라미터를 받고 첫 번째는 실행시킬 함수 두 번째는 시간입니다. 시간의 경우에 ms 단위라서 1초의 경우 1000ms입니다. 아래와 같이 실행시키고 싶은 함수를 첫 번째 인자에 작성하고 반복적으로 실행시킬 시간을 두 번째 인자에 작성합니다. setInterval(function() { // to do something }, 1000) clearInterval clearInterval은 setInterval로 실행시킨 반복을 중단할 때 쓰는 함수입니다. set..
2023년 1월 10일에 크롬이 109 버전으로 업데이트되었습니다. event.path는 이벤트가 발생한 요소에서 최상의 요소까지 배열을 반환합니다. [button#btn1, body, html, document, Window] 그러나 크롬 109 버전부터 event에 path가 더 이상 지원을 하지 않고 되었습니다. 기존에 event.path를 사용하였으면 composedPath()로 변경하셔야 합니다. See the Pen Untitled by powerku (@powerku) on CodePen. https://chromestatus.com/feature/5726124632965120 Chrome Platform Status chromestatus.com https://developer.mozill..