본문 바로가기

개발(IT)/자바스크립트

(5)
[개발/자바스크립트] window.open 서로 다른 브라우저 호출시 의미없는 팝업 생성 IE에서 Edge를 호출하는 로직을 개발하는 중 처음에 타겟(target) 옵션을 `_blank`로 테스트를 진행했습니다.결과는 IE에 빈 팝업창이 하나 뜨고 그 후에 제가 호출한 url을 띄우는 Edge 팝업창이 호출되었습니다.사용자 입장에서 의미없는 팝업창이 하나 더 뜬 거라 이 현상을 해결해야 했습니다. 우선 해결 방법은 타겟 옵션을 `_self`로 변경하면 됩니다.IE에서 `window.open`의 타겟을 `_blank`로 설정했을 때와 `_self`로 설정했을 때 동작 방식이다른 이유는 IE에서의 새 창 생성 프로세스와 현재 창을 재사용하는 방식 때문입니다.1. _blank의 동작: 새 창 또는 탭 생성`_blank`는 항상 새 창(또는 탭)을 생성하려고 시도합니다.IE에서 새 창을 열면 IE ..
[개발/자바스크립트] window.open target 옵션 종류별 동작 설명 JavaScript의 `window.open()`메서드는 새 브라우저 창 또는 탭을 열 때 사용되며, 두 번째 인자는 새로 열리는 창의 이름이나 타겟(target)을 지정하는 데 사용됩니다.이 인자는 문자열로 전달되며, 다음과 같은 주요 옵션과 차이를 가지고 있습니다.차이점 요약 값동작설명_blank항상 새 창(탭) 열기기존 창에 영향을 주지 않음_self현재 창에서 열기현재 창의 콘텐츠 대체_parent부모 창에서 열기iframe 내부일 때 부모 창을 대체_top최상위 창에서 열기iframe 계층을 무시하고 최상위 창 대체사용자 지정 이름지정된 이름으로 새 창을 열거나 기존 창 재사용창 간 데이터 공유 가능옵션별 상세 설명1. _blankwindow.open('https://example.com', '..
[개발/자바스크립트] 끔찍한 IE(인터넷 익스플로러)에서 Edge 브라우저 호출 방법 아직도 IE를 쓰고 있는 곳에서 잠시 일을 하게 됐습니다.OCX를 사용하기 때문이죠.....{{{(>_ 끔찍한 IE에서 타 서비스 URL을 호출해야 하는데, 타 서비스는 IE를 지원하지 않는다고 합니다.어쩔 수 없이 IE에서 Edge를 호출하는 방법을 찾아보게 됐습니다. 방법은 간단하게도 호출한 URL 앞에  `'microsoft-edge:'`를 붙여주면 됩니다.현재 브라우저가 IE인지 판단하고 IE인 경우 `'microsoft-edge:'` 프로토콜을 붙여 `window.open()`명령어를 사용하면 끝입니다.var url = “https://www.naver.com”;if(navigator.userAgent.indexOf(“Trident”) > 0) { url = “microsoft-edge:” + ..
[개발/자바스크립트] void 연산자 토스트(TOAST) UI 오픈소스를 보는 중에 void 0을 사용하는 로직을 보게되었습니다. 순간 이게 어떤 비교를 하고 싶은거지? 어떤 값을 변수에 넣는다는거지? 의문이 들어 찾아보게 되었습니다. //CASE 1 placeholder = _ref$placeholder === void 0 ? '' : _ref$placeholder //CASE 2 _exports["default"] = void 0; void 연산자의 기본 개념 void 연산자는 단항 연산자로서, 주어진 표현식을 실행하고 결과는 무시한 채 undefined를 반환합니다. void의 사용 사례 일반적으로 void 연산자를 모르더라도 a태그를 클릭할 때 페이지 이동을 막기 위해 사용되는 경우로 많이들 접하지 않았을까 생각합니다. 저 역시 저 ..
[개발/자바스크립트] 폴리필(polyfill)과 바벨(Babel)이란(정의 및 구분/차이점) SI 개발을 하다보면 아직까지도 IE(Internet Explorer/22.6.14 서비스 종료)를 지원해야하는 프로젝트를 하기도 합니다.이런 경우, 제공받은 프레임워크에 자바스크립트 일부 문법을 지원하지 않아 큰 이슈가 되기도 합니다.이슈를 해결하기 위해 위해 폴리필(polyfill))과 바벨(Babel)을 적용하는데요. 막연하게 폴리필과 바벨을 구분하지 못한 채, 자바스크립트 버전 이슈를 해결하기 위해 사용하는구나 정도만 알고 있습니다. 오늘은 폴리필과 바벨이 무엇이고 어떻게 다르고 왜 필요한지에 대해 공부하는 글을 적어보도록 하겠습니다.우선 폴리필과 바벨의 단어 정의는 아래와 같습니다. 폴리필브라우저에서 지원하지 않는 코드에 대해 사용 가능하게 구현하는 코드(일반적으로 웹의 JavaScript)입니..