분류 전체보기

프로젝트 디자인이 나왔는데 폰트가 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..

https://www.tistory.com/event/write-challenge-2024 작심삼주 오블완 챌린지오늘 블로그 완료! 21일 동안 매일 블로그에 글 쓰고 글력을 키워보세요.www.tistory.com 오블완 챌린지 응모 게시글

노션 embed를 활용해서 Color Picker라는 위젯을 만들다가 한 문제를 발견했다.평소 PC로 작업을 많이 하니 PC 환경에서만 항상 테스트가 이루어졌는데 우연히 들어간 노션 페이지에서 위젯의 css가 이상한 현상을 발견했다.  위젯 내부의 색상 선택기가 둥글게 변해 있었고, text 타입의 input도 모서리가 살짝 둥글게 변했다.개발자 도구를 열어서 CSS 우선순위가 어떻게 적용되어 있나 보고 싶은데 어플이기 때문에 개발자도구를 열 수가 없었다.그래서 갖가지 환경을 테스트해봤다. 문제와 원인 분석 우선 크기를 최대한으로 줄인 노션 데스크톱에서는 문제없는 걸 확인할 수 있었다.  두 번째로는 PC 브라우저로 접속해서 개발자도구의 기기 툴바 전환 기능을 이용해 반응형 모바일 크기로 확인해 봤다.역..

디데이 위젯에 이어 두 번째 위젯 제작기입니다. 역시 가장 단순하게 만드느라 이런 저런 기능은 제외했습니다 :)첫 번째 위젯인 Miny D-day Widget(링크)를 사용하려면 색상 코드가 필요한데, 간단하게 추출할 수 있는 기능이 있으면 좋겠다 싶어서 만들어보았습니다. Miny Color Picker 위젯 살펴보기Miny Color Picker 위젯은 색상을 선택하고 컬러 코드를 복사할 수 있는 간단한 기능을 지원합니다.노션에 위젯을 임베드하고 페이지에 있는 다양한 색상들을 추출해 보세요. 노션 대시보드 내의 이미지 아래 여러 개의 위젯을 배치해 둔 모습입니다. 조금 복잡하지만 예시용으로 만들어 보았습니다.개수에 제한 없이 임베드가 가능하고, 단순한 기능으로 가볍게 제작했기 때문에 로딩되는 속도가 빠..