몽땅뚝딱 개발자

https://velog.io/@sisofiy626/JavaScript-npm-vs-npx-vs-yarn [JavaScript] npm vs npx vs yarnnpm vs npx vs yarn 패키지는 프로젝트를 개발할 때 복잡하거나 까다로운 부분을 좀 더 빠르고 쉽게 구현할 수 있도록 도와줍니다.velog.io

속성에 접근할 때 꽤나 여러가지 방법이 있다는 사실을 알게됐다. 그래서 더 찾아보니 정말 많군...😃 아래는 js로 작성하는 방법이지만 css로 바꿔도 동일하게 접근 가능! (대신 문자열부분을 ''로 감싸주면 된다.) 📄 지정한 문자열이 포함된 요소 접근하기 document.querySelectorAll('img[alt*=menu]') 📄 지정한 문자열로 시작하는 요소로 접근하기 document.querySelectorAll('img[alt^=menu]') 📄 지정한 문자열로 끝나는 요소로 접근하기 document.querySelectorAll('img[alt$=menu]') 📄 특정 속성의 속성값에 특정 문자열로 이루어진 한 단어를 포함하는 요소에 접근하기 속성값이 정확이 해당 문자열인 경우나 띄어쓰기..

chrome과 axios에서는 기본적으로 URL에 percent-decoding(=%인코딩)을 하지만 특수하게 [, [, %는 인코딩하지 않고 서버에 전달한다. axios에서 보내는 파라미터를 자바스크립트 내장 객체인 encodeURI() 혹은 encodeURIComponent()를 사용하여 보낼 수도 있지만 axios에서 문자열을 한번 더 %인코딩하여 '%'가 '%25'로 인코딩되는 문제가 생긴다. (그래서 톰캣 7.x 버전 이상의 서버인 경우 한번 더 인코딩을 처리해줘야 하는 문제가 생긴다.) 💡 %인코딩이란? Percent-encoding은 URL 맥락에서 특정 의미를 갖는 8비트 문자로 인코딩하는 메커니즘으로 URL 인코딩이라고도 한다. 인코딩은 '%' 다음에 변경할 문자를 ASCII 값으로 표현..

같은 도메인이라면 contentWindow를 사용하고 다른 도메인이면 postMessage를 사용하면 된다. 1. window.postMessage() 오브젝트 사이에서 안전하게 cross-origin 통신을 할 수 있게 한다. 페이지와 생성된 팝업 간의 통신이나 페이지와 페이지 안의 iframe 간의 통신에 사용할 수 있다. 다른 페이지 간의 스크립트는 각 페이지가 같은 프로토콜, 포트 번호, 호스트를 공유하게 있을 때에만 접근할 수 있다. postMessage는 이 제약 조건을 안전하게 우회하는 기능을 제공한다. postMessage(message) postMessage(message, options) postMessage(message, targetOrigin) postMessage(message,..

두 문서가 교차 출처인 경우 참조는 Window, Location 객체에 대해 접근을 제한한다. window.blur window.close window.focus window.postMessage window.closed 읽기 전용 window.frames 읽기 전용 window.length 읽기 전용 window.location 읽기/쓰기 전용 window.opener 읽기 전용 window.parent 읽기 전용 window.self 읽기 전용 window.top 읽기 전용 window.window 읽기 전용

[개념] document.readyState는 도큐먼트의 로딩 상태를 구독할 수 있는 속성이다. 이 속성이 변경될 때 readyStatechange에서 이벤트가 발생된다. DOMContentLoaded의 대안으로 사용된다. [속성] loading interactive: 도큐먼트의 로드가 완료되고 구문 분석은 완료 되었지만 서브 리소스(스크립트, 이미지, 스타일시트, 프레임)은 여전히 로딩 중이다. 상태는 DOMContentLoaded 이벤트가 곧 실행될 것임을 의미한다. complete: 로드가 완료되었고 *로드(load) 이벤트가 곧 실행될 것임을 나타낸다. * 로드 이벤트(🔗MDN): DOMContentLoaded와 대조되는 이벤트로, 리소스 로드가 완료될 때까지 기다리지 않고 페이지 DOM이 로드되..

📄 JS const infos = document.querySelectorAll('.info') infos.forEach((info) => { addEvent(info.querySelector('ul')) }) function addEvent(target) { const handleClass = (slideEl) => { slideEl.forEach((slide, index) => { slide.style.left = `${28 * index}px` if (index === 1 || index === 2 || index === 3) { slide.classList.add('active') } else { slide.classList.remove('active') } }) } // 이미지를 섞어야하는 경우..

✨ 힙(Heap) 1.1 정의 트리의 자료구조로, 특수한 종류의 이진트리이다. 가장 크거나 작은 원소를 알아내야 할 때 유리하다. 우선순위 큐를 구현할 때 효율적으로 쓰이는 자료구조이다. 1.2. js로 최소힙 구현하기 class MinHeap { constructor() { this.heap = [null] } push(value) { this.heap.push(value) let currentIndex = this.heap.length - 1 let parentIndex = Math.floor(currentIndex / 2) // 현재 값보다 부모 값이 더 작을 떄 까지 (=최소힙의 형태를 만들 때 까지) swap 한다. while (parentIndex !== 0 && this.heap[curr..

💬 문제 설명 이중 우선순위 큐는 다음 연산을 할 수 있는 자료구조를 말합니다. 명령어 수신 탑(높이) I 숫자 큐에 주어진 숫자를 삽입합니다. D 1 큐에서 최댓값을 삭제합니다. D -1 큐에서 최솟값을 삭제합니다. 이중 우선순위 큐가 할 연산 operations가 매개변수로 주어질 때, 모든 연산을 처리한 후 큐가 비어있으면 [0,0] 비어있지 않으면 [최댓값, 최솟값]을 return 하도록 solution 함수를 구현해주세요. 제한사항 operations는 길이가 1 이상 1,000,000 이하인 문자열 배열입니다. operations의 원소는 큐가 수행할 연산을 나타냅니다. 원소는 “명령어 데이터” 형식으로 주어집니다.- 최댓값/최솟값을 삭제하는 연산에서 최댓값/최솟값이 둘 이상인 경우, 하나만 ..

💬 문제 설명 트럭 여러 대가 강을 가로지르는 일차선 다리를 정해진 순으로 건너려 합니다. 모든 트럭이 다리를 건너려면 최소 몇 초가 걸리는지 알아내야 합니다. 다리에는 트럭이 최대 bridge_length대 올라갈 수 있으며, 다리는 weight 이하까지의 무게를 견딜 수 있습니다. 단, 다리에 완전히 오르지 않은 트럭의 무게는 무시합니다. 예를 들어, 트럭 2대가 올라갈 수 있고 무게를 10kg까지 견디는 다리가 있습니다. 무게가 [7, 4, 5, 6]kg인 트럭이 순서대로 최단 시간 안에 다리를 건너려면 다음과 같이 건너야 합니다. 경과 시간 다리를 지난 트럭 다리를 건너는 트럭 대기 트럭 0 [] [] [7,4,5,6] 1~2 [] [7] [4,5,6] 3 [7] [4] [5,6] 4 [7] [4..