Front-End Developer/JavaScript

이벤트를 딱 한번만 일어나게 하고싶을 때 - 자바스크립트 DOM 꿀팁

자바스크립트에서 콜백이벤트가 딱 한번만 일어나게 하고싶을 때 사용할 수 있는 꿀팁! 바로 이벤트리스너의 세번째 인자값으로 once 옵션을 추가해주면 된다. document.body.addEventListener('click', () => { console.log('I run only once! 😇'); }, { once: true }); 기본값은 false로 지정되있어, 클릭될 때마다 이벤트가 항상 일어난다. once: true로 지정해주면 처음 이벤트가 일어났을 때에만 콜백함수가 실행된다. 혹은 이벤트가 일어났을 때 해당 이벤트를 remove해주는 함수를 만들어줄 수도 있다. 근데 once옵션이 너무 간단하니까~ 그걸 쓸 듯? document.body.addEventListener('click', cb..

Promise/fetch 텍스트파일에 있는 텍스트는 어떻게 가져올건데?

난 항상 무지성으로 json()을 썼다. 왜냐면 다들 그렇게 쓰니까. 사건의 발단 Promise를 연습하면서 Promise 안에 fetch를 사용하여 fetch가 성공적으로 되었을 때에는 콘솔에 불러온 데이터를 콘솔에 출력하려고 했다. 그리고 그 데이터는 뭐였냐? 텍스트파일의 텍스트였다. let promise = new Promise((성공, 실패) => { fetch('https://codingapple1.github.io/hello.txt') .then((res) => res.json()) //일단 연습이니까 데이터를 불러오는게 성공이라고까지만 하자구요~ .then((data) => 성공(data)); }); promise.then((data) => { //fetch가 성공하면 data를 출력해주세요..

JavaScript sort() not working | sort()가 안될 때

sort()를 했는데 맘처럼 안될때가 있다. 왜그럴까? JS는 sort()를 하는순간 정렬하고자 하는 아이템을 모두 문자로 바꾸고 숫자의 크기가 아닌 첫 캐릭터들을 비교하여 줄을 세우기 때문이다. 아래 예시를 보면, 2 다음에 3이 아닌 24가 오는것을 볼 수 있다. let array = [3, 455, 2, 24, 56]; array.sort(); console.log(array); 해결방법 이는 a,b의 값을 비교해주어 negative값이 나오면 a를 왼쪽으로 정렬시키고 positive값이 나오면 a를 오른쪽으로 보내는 일련의 식을 통해 해결해줄 수 있다. function sortNumbers(a, b) { if (a > b) { return 1; } else if (b > a) { return -1..

JS로 생성한 요소 for문으로 HTML에 붙여주기

HTML생성하는법 .createElement() 먼저 태그를 생성해주고, 태그 안에 내용물을 넣어준다. insertAdjacent보다 빠른데 별차이없다 let a = document.createElement('p'); a.textContent = '안녕'; document.querySelector('#test').appendChild(a); .insertAdjacentHTML() / .append() HTML작성하듯이 똑같이 작성하고 HTML의 지정한 요소 근처에 붙여준다. let template = 'hello'; document.querySelector('#test').insertAdjacentHTML('beforeend', template); 반복문 반복문의 용도 코드를 반복하고싶을 때 array,..

for 반복문으로 코드 n배 절약해보기 + 이벤트버블링

버튼을 클릭 할 때마다 버튼의 style과 상세설명이 바뀌어야한다. 각각 버튼에 이벤트리스너를 달아 코딩하면 아래와 같다. const btnAll = document.querySelectorAll('.tab-button'); const boxAll = document.querySelectorAll('.tab-content'); btnAll[0].addEventListener('click', function () { btnAll[0].classList.remove('orange'); btnAll[1].classList.remove('orange'); btnAll[2].classList.remove('orange'); btnAll[0].classList.add('orange'); boxAll[0].class..

(JS기초)변수의 할당, 선언, 범위

변수만드는걸 선언 변수에 뭐 집어넣는걸 할당이라고 한다. 변수의 선언 let myName; 변수를 선언하면서 할당까지 하기 let myName = 'Jihyun' 할당 연산자 = 의 뜻은 → '오른쪽에 있는걸 왼쪽에 넣겠다' 라고 생각하면 쉽낟. 함수 안에서 변수를 만들면 그건 그 함수 안에서만 사용가능하다 function 함수(){ let myName = 'Jihyun'; } console.log(myName) 오류남 함수 바깥에서 만든 변수는 어디서든지 사용가능 let myName = 'kim'; function 함수() { console.log(myName); } let, var, const 차이점 var 재선언이 가능하다 = 원래 말이 안되는것임. 왜냐? 까먹고 또 만들면 버그의 온상이기 때문. ..