본문 바로가기
반응형

개발/Javascript42

모달과 이벤트 버블링 모달과 이벤트 버블링 웹에서 발생하는 대부분 이벤트들은 해당 요소부터 시작하여 부모 요소들을 거슬러 올라간다. 이렇게 이벤트가 거품이 올라가듯 전파되는 현상을 이벤트 버블링이라고 한다. 모달의 backdrop과 이벤트 버블링 모달을 만들면 보통 모달 외부(backdrop)를 눌렀을때 모달이 꺼지는 기능도 만들게 된다. 이때 이벤트 버블링을 고려하지 않으면 모달을 클릭했을때도 모달 backdrop의 onClick이 발생하여 모달이 꺼지게 된다. 대부분 이렇게 간단하게 말해도 이해를 하겠지만, 모달을 안만들어본 사람이라면 이해를 못할 수 있으니 풀어서 설명하면 모달을 클릭했을때, 당연히 모달에 정의된 onClick이 먼저 실행된다. 그리고 이벤트 버블링으로 back drop의 onClick까지 실행된다. 대.. 2023. 9. 12.
문자열에서 특정 인덱스를 추출할때 charAt과 숫자인덱싱의 차이 문자열에서 특정 인덱스를 추출할때 charAt과 숫자인덱싱의 차이 자바스크립트에서 문자열의 특정 인덱스에 있는 문자를 얻는 방법에는 대표적으로 두가지가 있다. charAt() 메서드와 숫자인덱싱을 사용하는 방법이다. 이 두 방법 모두 문자열에서 특정 인덱스의 문자를 추출하는 데 사용되지만, 사용 방식과 특성에 차이가 있다. charAt charAt은 문자열에서 주어진 인덱스에 있는 문자를 반환한다. 만약 메서드에 벗엇난 인덱스를 전달하면 빈문자열을 반환한다. 숫자인덱싱 범위를 벗어난 인덱스를 전달하면 undefined를 반환한다. 프로그래머스 JadenCase 전에는 고민해보지 못한 내용인데 프로그래머스에서 JadenCase 문자열 문제를 통해 새롭게 알게 된 내용이다. 프로그래머스 코드 중심의 개발자 .. 2023. 5. 17.
Chart.js Chart.js를 사용하면 그래프를 손쉽게 구현할 수 있다. React에서 사용하려면 react-chartjs-2 를 사용하면 된다. 나는 구글링을 하며 간단히 html에서만 구현해보았다. //index.html 캔버스 밑에 글 는 chart.js를 import해오는 스크립트이다. 는 차트가 들어갈 태그이다. canvas 태그의 width와 height단위는 px이다. vh를 넣어도 px이다. //canvas.js //코드 출처는 https://nomalcy.tistory.com/23 new Chart(document.getElementById("bar-chart"), { type: "bar", data: { labels: ["Africa", "Asia", "Europe", "Latin America",.. 2022. 5. 12.
Set : 배열 중복제거하기 Set MDN을 참고하여 설명을 작성해보면 Set 객체는 삽입 순서대로 요소를 순회할 수 있다. 원시값, 참조값 모두 유일한 값을 저장한다. 즉, 중복을 제거하고 유일한 값을 제거한 객체가 Set 객체이다. (MDN에선 값 콜렉션이라고 한다.) 여튼 이 Set이 중복제거라는 것은 대충 알겠고, 이 Set을 이용하여 어떻게 중복제거를 하는지는 아래 코드를 보며 콘솔창에 따라하자! const arr = ['june','seung','hee','june','ji','eun'] let result1 = new Set(arr) console.log(result1) // Set(5) {'june', 'seung', 'hee', 'ji', 'eun'} let result2 = Array.from(result1) co.. 2022. 5. 1.
반응형

티스토리툴바