JS

[JS] 클릭한 요소의 index 구하기

1 2 3 4 5 6 위와 같은 HTML 코드에서 div를 클릭, 클릭한 요소의 index (순서)를 구하는 방법입니다. JS const boxs = document.querySelectorAll(".boxList > div"); boxs.forEach((el, index) => { el.onclick = () => { console.log(index); } }); 가장 쉬운 방법은 다수의 이벤트를 걸어주는 반복문에서 index를 가져오는 방법입니다. 하지만 다수의 이벤트를 걸어주지 못하는 상황에서는 아래와 같은 방법으로 index를 가져올 수 있습니다. const $box = document.querySelector(".boxList"); $box.onclick = (e) => { const nodes..

[React] 동적으로 HTML 코드 추가하기

html 태그를 유동적으로 사용하기 위해서 기존 JavaScript에서는 innerHTML을 사용하여 바꿔주었지만, React에서는 해당 방법을 사용하는 것은 엄청나게 비효율적입니다. 텍스트로 구성된 HTML 태그를 추가하기 위해서는 React에서 정한 특정 규칙을 사용해야 합니다. 코드 React에서 dangerouslySetInnerHTML={{ __html: Code }} 와 같은 형식으로 사용하면 됩니다. const html = "가나다라"; const Main = () => { return ( ); } export default Main;

[JS] 정규식으로 모든 HTML 태그 제거하기

코드 const reg = /]*>?/g String.replace(/]*>?/g, ''); HTML 태그의 형식( )에서 에 싸여있는 태그를 모두 감지할 수 있는 정규식입니다. 해당 정규식을 사용하여 HTML 태그를 매치, 제거할 수 있습니다. 예시 가나다라 위와 같은 HTML 태그를 텍스트로 받아와 아래와 같은 코드로 태그를 제거해주면, 태그가 제거된 가나다라 텍스트만 남게 됩니다. // JavaScript const $el = document.querySelector(".box"); const newText = $el.innerHTML.replace(/]*>?/g, ''); console.log(newText);

[JS] 프로그래머스 로또의 최고 순위와 최저 순위

출처 https://programmers.co.kr/learn/courses/30/lessons/77484 코딩테스트 연습 - 로또의 최고 순위와 최저 순위 로또 6/45(이하 '로또'로 표기)는 1부터 45까지의 숫자 중 6개를 찍어서 맞히는 대표적인 복권입니다. 아래는 로또의 순위를 정하는 방식입니다. 1 순위 당첨 내용 1 6개 번호가 모두 일치 2 5개 번호 programmers.co.kr 문제 로또 6/45(이하 '로또'로 표기)는 1부터 45까지의 숫자 중 6개를 찍어서 맞히는 대표적인 복권입니다. 아래는 로또의 순위를 정하는 방식입니다. 순서와 상관없이, 구매한 로또에 당첨 번호와 일치하는 번호가 있으면 맞힌 걸로 인정됩니다. 알아볼 수 없는 두 개의 번호를 각각 10, 6이라고 가정하면 3..

[JS] 프로그래머스 제일 작은 수 제거하기

출처 https://programmers.co.kr/learn/courses/30/lessons/12935 코딩테스트 연습 - 제일 작은 수 제거하기 정수를 저장한 배열, arr 에서 가장 작은 수를 제거한 배열을 리턴하는 함수, solution을 완성해주세요. 단, 리턴하려는 배열이 빈 배열인 경우엔 배열에 -1을 채워 리턴하세요. 예를들어 arr이 [4,3,2,1 programmers.co.kr 문제 정수를 저장한 배열, arr에서 가장 작은 수를 제거한 배열을 리턴하는 함수, solution을 완성해주세요. 단, 리턴하려는 배열이 빈 배열인 경우엔 배열에 -1을 채워 리턴하세요. 예를 들어 arr이 [4,3,2,1]인 경우는 [4,3,2]를 리턴하고, [10] 면 [-1]을 리턴합니다. 제한 조건 ..

[JS] 스크롤 애니메이션 구현 (Intersection Observer)

Intersection Observer API로 스크롤 애니메이션을 쉽게 구현할 수 있습니다. Intersection Observer API const options = { root: null, rootMargin: "0px", threshold: 1.0, }; const observer = new IntersectionObserver((entries) => { // 관찰 중인 배열 형식의 객체 리스트 entries.forEach((entry) => { ... }); }, options); // target과 root가 교차되어 화면에 보이게 되었을 때 호출되는 함수 const target = document.querySelector('div'); observer.observe(target); // 새로..

[JS] 페이지 내 특정 위치로 스크롤 이동하기

페이지 내 특정 위치로 이동 시켜주는 window.scrollTo 메서드를 활용하는 방법을 소개해드리겠습니다. window.scrollTo 메서드 window.scrollTo 메서드를 사용하는 다음과 같이 X, Y 위치 값을 넘겨주면 즉시 해당 위치로 이동하게 됩니다. // ( x좌표 - 가로 , y좌표 - 세로 ) window.scrollTo(xpos, ypos); HTML 삽입 미리보기할 수 없는 소스 객체를 이용해서도 메서드를 사용할 수 있으며, left(가로), top(세로) 값으로 X, Y 값을 대신할 수 있습니다. { behavior: "smooth" } 속성을 지정해주면 위치를 이동할 때, 애니메이션 효과가 적용되게 됩니다. // option { left, top, behvior } wind..

[JS] URL parameter 가져오기

기초 URL 중 파라미터 값만 JavaScript로 추출해야 할 경우가 생깁니다. location.href를 이용하여 현재 페이지 전체 URL을 가져올 수 있습니다. location.search를 이용하여 현재 페이지 URL의 Parameter를 얻을 수 있습니다. 모든 값 가져오기 const searchParams = new URLSearchParams(location.search); for (const param of searchParams) { console.log(param); } new URLSearchParams 함수를 사용하면 location.search 안에 존재하는 [key, value] 형식으로 묶여있는 파라미터를 얻을 수 있게됩니다. 특정 값만 가져오기 const urlParams =..

[JS] 코드 실행시간 측정하기

코드 const start = new Date() ... 실행 코드 ... console.log((new Date() - start) / 1000) 코드가 끝난 시간 - 코드를 실행한 시간 수식을 사용하면 코드 실행에 걸린 밀리 초가 나오는데, 나누기 1000을 해주면 밀리초 단위를 초로 바꿔줄 수 있습니다. 예시 코드 const start = new Date() // 시작 시간 기록 // 실행 코드 let str = 0; for (let i = 0; i < 100000; i++) { str += i; } console.log((new Date() - start) / 1000) // 현재의 시간에서 시작 시간 뺀 값 출력 See the Pen Untitled by hyukson (@hyukson) on ..

[JS] 객체 길이 구하기

코드 자바스크립트에서 배열(Array), 문자(String)를 사용하는 경우에는 length 속성으로 쉽게 길이를 구할 수 있습니다. 하지만 객체(Object)에서는 그것이 불가능합니다. 객체의 길이를 알기 위해서는 객체에 몇 개의 아이템 즉 "KEY"가 몇 개 존재하는 지를 파악하면 됩니다. const obj = { a: "AA", b: "BB", c: "CC", d: "DD", e: "EE" }; Object.keys(obj); // 출력 - ["a", "b", "c", "d", "e"] JS에는 Object.keys라는 메서드가 존재합니다. 해당 메서드는 객체의 key들을 모아 배열로 반환하는 메서드입니다. key들을 모은 배열을 파악했습니다. 그럼 이에 따른 길이도 구할 수 있게 됩니다. cons..

[JS] 반복문 (for, forEach 등) 속도 비교

JavaScript의 반복문으로 for loop 문, forEach 메서드, map 메서드, reduce 메서드, $.each (Jquery) 등 정말 많은 종류의 반복문이 존재합니다. 비교 해볼 반복문 for loop forEach map reduce $.each 속도 비교에 사용할 코드 const start = new Date() ... 실행 코드 ... console.log((new Date() - start) / 1000) 먼저 비교 코드를 실행 전 시간을 저장한 다음에 비교할 코드를 실행, 그 후 현재의 시간과 코드를 시작한 시간을 비교하여 걸린 시간을 구할 수 있습니다. 코드가 끝난 시간 - 코드를 실행한 시간 수식을 사용하면 코드 실행에 걸린 밀리 초가 나오는데, 나누기 1000을 해주면 밀..

[JS] 반복문 정리 (for, while, forEach 등...)

for 문 for 문은 조건식이 참일 경우에 증감식 구문을 거쳐 명령문 구문을 반복하여 실행합니다. for (초기값; 조건식; 증감식) { 조건이 참인 동안 실행할 명령문 } // 예시 for (let i = 0; i < 10; i++) { console.log(i); } for in 문 for in 문은 객체의 모든 문자열로 된 키를 반복하여 열거합니다. 하지만 해당 문법은 자주 사용되지 않고 아래에 소개드릴 for of, forEach의 사용을 추천드립니다. const object = { a: 1, b: 2, c: 3 }; for (const key in object) { console.log(`${key}: ${object[key]}`); } for of 문 for of 문은 반복 가능한 객체 ( ..