Frontend/javascript

업무할 때는 편리함때문에 jQuery를 많이 이용한다. 같은 DOM 조작이지만 언제까지나 제이쿼리만 쓸 수 없다는 생각이 들었고, 자주 이용하는 jQuery 문법을 순수 자바스크립트로 마이그레이션을 진행해 봤다. 진행한 프로젝트는 개인 프로젝트이고 일이 바쁘니까 조금씩 조금씩 걷어내는 중.걷어내면서 사용한 코드들을 여기에 정리해 본다.  getElementById(), querySelector(), querySelectorAll()// jquery$('#targetId');$('.targetClass');// jsdocument.getElementById('targetId');document.querySelector('.targetClass');document.querySelectorAll('.targe..

자바스크립트로 파일 다운로드 함수를 만들어서 사용하고 있었다.요즘 이렇게 만들어뒀던 코드들을 분석하며 되돌아보는 시간을 가지고 있다. downloadAuthorizedFile()async function downloadAuthorizedFile(fileName = "file", { downloadURL = "", requestParam, responseType}) { function checkIncludeExtension(fileName) { const regex = /\.[0-9a-z]+$/i; return regex.test(fileName); } if (!downloadURL) throw new Error("Cannot found download..

자바스크립트로 HTML 코드에서 순수한 텍스트만 추출하려면 어떤 방법을 써야 할까?우리는 항상 서버단으로 데이터를 보낼 때 HTML이 포함된 본문 내용과 텍스트로만 이루어진 데이터를 함께 보내줘야 한다. 지금껏 기존의 다른 작업자분이 만들어놓은 코드를 가져와서 쓰고 있었는데 갑자기 이 코드는 어떻게 구성되어 있는건지 궁금해져서 글을 써본다. function getPlainTextFromHTML(html = "") { const parser = new DOMParser(); const doc = parser.parseFromString(html, 'text/html'); let allText = ""; const textNodes = doc.createTreeWalker(doc.bod..

이전글 보기JavaScript 법정동 데이터 관리와 동적 선택기 모듈 구현: 최신 데이터 가져오기 및 데이터 가공하기  저번글에서는 최신 데이터를 가져와 가공하는 법에 대해서 글을 썼다. 오늘은 저장한 JSON 데이터를 기반으로 동적 셀렉트 박스를 구현해보려고 한다. 모듈 외부 코드 살펴보기우선 모듈을 테스트할 HTML 코드이다. 시/도 선택 시/군/구 선택 읍/면/동 선택 동/리 선택 구조는 단순히 select와 id 값만 넣어줬다. 내부의 기본 선택 옵션은 넣어주지 않아도 되지만 최초 렌더링 후 확인할 수 있게 넣어줬다. 이후에 선택기가 동작하면 모듈 내부에서 option을 갈아끼울 때 새로 넣어준다.  다음은 JavaScript 코드let regionModule;// DOM l..

업무를 하다가 법정동 코드들을 JSON 데이터로 관리하게 됐다. Open API를 사용하면 편리하지만 어떠한 사정으로 당장 이용할 수 없어서 최신 데이터를 가져와서 JSON으로 저장, 동적 셀렉트 박스를 구현해보는 시간을 가졌다. 법정동 최신 데이터 가져오기우선 데이터를 구하는 과정이 필요하다.https://www.mois.go.kr/frt/bbs/type001/commonSelectBoardList.do?bbsId=BBSMSTR_000000000052 업무안내> 차관보> 주민등록,인감> 주민등록,인감" data-og-description="행정안전부 홈페이지에 오신것을 환영합니다." data-og-host="www.mois.go.kr" data-og-source-url="https://www.mois..

항상 javascript로 개발을 할 때는 함수의 매개변수에 기본값을 명시적으로 적어주려고 노력했다. 실무에서는 객체나 배열 등의 요소를 함수에 자주 전달하고, 그에 대해 내장 메소드나 객체 내 필드값을 이용하는 데이터 처리가 많았기 때문이다.하지만 오늘 개발을 하다가 조금 당황스러운 상황을 마주했다. 함수의 인자로 null이 넘어갔는데 기본값 처리가 되지 않아서 로그를 찍어봤는데도 당연히 null로 나왔다. 나는 인자의 값이 undefined 또는 null 일 때 기본값 처리가 된다고 생각을 했고, 지금까지의 모든 개발은 그렇게 해왔는데 null은 기본값 처리에 포함되지 않는다니...?이슈 내용const func = (value = "") => { console.log(value)}func(); ..

다양한 라이브러리 및 메소드의 매개변수로 DOM 요소를 전달할 때 jQuery 선택자를 이용해서 지정하면 에러를 출력한다. 사실 jQuery를 이용하지 않으면 그만인 문제이지만 코드의 일관성을 위해서 이 문제에 대해 찾아보게 되었고 근본적인 원인을 알게 되어 나름 공부가 된 듯 하다. 아래에서는 에디터와 자바스크립트 내장 메소드를 이용할 때를 예제로 가져왔다. 예시 (1) CKEditor let editorElement = document.querySelector('#editor'); const initializeEditor = () => { _editor .create(editorElement) .then(editor => { editorElement = editor; }) .catch(); } 에러 ..

자바스크립트로 복사한 내용을 가져오거나 복사하는 방법에 대한 포스팅이다. 만들고 있는 토이 프로젝트에 클립보드 내용을 가져오는 코드가 있었는데 이젠 다른 방법을 사용하게 되어서 적어놓으려고 한다 😃 다음에 언제 쓰일 지 모르니까... 클립보드 복사하기, 붙여넣기 방법은 두 가지가 있다. 1. document.execCommand를 이용한 방법 2. navigator.clipboard를 이용한 방법 각자 장단점이 있으니, 예제를 보면서 살펴보자. document.execCommand('copy') , document.execCommand('paste') // 텍스트를 클립보드에 복사 function copyToClipboard(text) { var textarea = document.createElemen..