몽땅뚝딱 개발자

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

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') } }) } // 이미지를 섞어야하는 경우..

https://hyerios.tistory.com/24 reverse()와 reversed()비교 reversed()의 시간복잡도가 O(1)이라니 . . . 알고리즘 문제 중 역순으로 출력하는 문제가 있었는데 저는 그럴 때마다 Array의 reversed()아니면 reverse()를 사용했습니다. 굳이 reverse도 있는데 왜 reversed를 hyerios.tistory.com

handleOpenPopup() { const width = 650 const height = 830 let left = Math.ceil((window.innerWidth - width) / 2) + window.screenLeft let top = Math.ceil((window.innerHeight - height) / 2) + window.screenTop window.open( 'url', '팝업이름', `width=${width}, height=${height}, left=${left}, top=${top}`, ) }, 개인적으로 공부한 내용을 정리하는 블로그로 잘못된 개념을 게시하지않도록 주의하고 있으나 오류가 있을 수 있습니다.

Swiper로 개발할 때 가로형에 슬라이드가 1개인 것만 구현해봤었는데 이번 개발건에 세로형+여러 슬라이드 구성이 필요했다. 이번에는 예전과 달리 "공통"이라는 키워드에 맞춰 개발하려고 노력했고 그것을 기록하는 글..✏️ vue-awesome-swiper를 사용했다. $ npm i vue-awesome-swiper 📄 공통컴포넌트 prop으로 넘어온 isVertical(=세로여부) 값에 따라 style이 나뉘어진다. 공통적으로 사용하려면 콘텐츠 영역은 분리돼야 할 것 같아 영역은 으로 따로 받아서 구현했고, 콘텐츠 영역의 width, height를 받아서 슬라이드 배너의 너비와 높이를 계산했다. 다음은 script 부분이다. isVertical을 prop으로 받아 세로형, 가로형으로 바로 변경할 수 있도..

보호되어 있는 글입니다.