티스토리챌린지

프로젝트 디자인이 나왔는데 폰트가 Pretendard 여서 적용해봐야 한다.바닐라JS 환경이기에 패키지 매니저로 관리할 수 없어서 CDN으로 적용했다.  Pretendard 공식 문서https://github.com/orioncactus/pretendard GitHub - orioncactus/pretendard: 어느 플랫폼에서든 사용할 수 있는 system-ui 대체 글꼴 | A system-ui alternativ어느 플랫폼에서든 사용할 수 있는 system-ui 대체 글꼴 | A system-ui alternative font for all cross-platform - orioncactus/pretendardgithub.com 공식 문서에서 다양한 타입의 cdn을 찾을 수 있다.나는 가변 다이나..

자바스크립트로 파일 다운로드 함수를 만들어서 사용하고 있었다.요즘 이렇게 만들어뒀던 코드들을 분석하며 되돌아보는 시간을 가지고 있다. 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..