JavaScript 4

[JS📜] Undefined와 null의 차이점, check

해당 포스팅은 자바스크립트에서 undefined와 null의 공통점과 차이점. 해당 값을 체크하는 방법에 대해 다룹니다. Null null은 JavaScript의 원시 값중 하나로, 어떤 값이 의도적으로 비어있음을 표현하며 불리언 연산에서는 거짓으로 취급합니다. -MDN- console.log(!null); // true console.log(!!null); // false console.log(null === false); // false console.log(!null === true); //true // null => math =>0 console.log(null + 123) //123 console.log(typeof null); // object' null 자체는 불리언 값을 가지지 않지만 !n..

FrontEnd 2022.09.05

[Js]innerHTML, innerText, textContent의 차이

해당 포스팅에서는 innerHTML, innerText, textContent에 대한 특성을 알아보고 innerText와 textContent의 차이점에 대해 다룹니다. 프로퍼티 textContent innerText innerHTML 값 raw text rendered text HTML parsed text 성능 좋음 보통 나쁨 보안 취약 Element.innerHTML const content = element.innerHTML; element.innerHTML = htmlString; 이름 그대로 HTML을 반환한다. 간혹 innerHTML을 사용해 요소의 텍스트를 가져오거나 쓰는 경우가 있지만, HTML로 분석할 필요가 없다는 점에서 textContent의 성능이 더 좋다. XSS 공격 (en-U..

FrontEnd 2022.09.02

[JS📜] 크롬확장프로그램 i18n 국제화 하는 방법

해당 포스팅에서는 i18n의 의미와 바닐라 자바스크립트를 사용하여 국제화 하는 방법에 대해서 다룹니다. i18n이란? internationalization(국제화)의 축약형으로 웹사이트에서 다국어를 지원하는 것을 의미합니다. I18n은 영어 첫글자 "I" + 18글자 + "N"을 의미합니다. 비슷한 축약형으로 L10N(localization)이 있습니다. 라이브러리 명칭을 뜻하는 것이 아니라 국제화 행위 그 자체이다. 이에 관련된 유명한 라이브러리로 i18next가 이다. 기본적인 i18n 방법 // 번역 데이터 const en_US= { "이름" : "name" } const getEngText = function(string) { return en_us[string] } console.log(getE..

FrontEnd 2022.08.17

[JavaScript] 텍스트 복사 붙여넣기 기능 구현하기

들어가며 이 글은 텍스트 복사 붙여넣기 기능 구현을 위해 execCommand(), execCommand()를 사용하지 말아야하는 이유, Clipboard API사용법에 대해 다룹니다. 💡 결론 document.execCommand()는 브라우저마다 일관적이지 않은 엘리먼트를 생성해서 사용을 지양해야한다. 대신 Clipboard API의 readText()와 writeText() 메서드를 사용한다. Clipboard API는 브라우저에서 완벽하게 지원하지 않으니 확인하고 사용하기 👎 기능 구현 방법1 document.execCommand() 문서의 편집 가능한 영역을 변경할 수 있습니다. 대부분의 명령어는 문서의 선택 영역에 영향(볼드, 이탤릭 등)을 미치고 나머지는 새 요소를 추가(링크 추가)하거나 전..

FrontEnd 2022.08.09