본문 바로가기

전체 글131

폼 유효성 검사 - 모듈로 초간단하게 작성 인풋 값이 비어 있으면 안되거나, 특정 형태를 가지고 있어야 할 때 javaScript로 유효성 검사를 해서 안내문을 띄우도록 합니다. 이 기능을 하나하나 등록해서 사용하기보단 외부 모듈화 해서 onkeyup 등에 적용하는게 간단합니다 ^_^ 필수 입력 구간 안내하기 function formValidation(idlist=[""]) { try{ for(let i of idlist){ let val = document.getElementById(i).value; if (val == undefined || val.length == "" || val == "false") { document.getElementById("ck"+i).classList.add("zchkform"); document.getEleme.. 2023. 1. 14.
날짜, 시간 관련 자바스크립트 함수들 프로젝트 하면서 만들어 사용했던 날짜와 시간 관련 자바스크립트 함수들을 공유합니다. 사용법을 함께 적어두니 외부 모듈처럼 사용하세요 ^_^ // 날짜관련 모듈 const days = ['일요일','월요일','화요일','수요일','목요일','금요일','토요일']; const daysE = ['sun','mon','tue','wed','thu','fri','sat']; export const Alldays = [['월요일','mon'],['화요일','tue'],['수요일','wed'],['목요일','thu'],['금요일','fri'], ['토요일','sat'],['일요일','sun'],['공휴일','pbhl']]; //작성일자 등이 최신(7일 이내)인지 확인 //strToDate('2022-05-01') e.. 2023. 1. 14.
[CSS, HTML] 별점 모양 css와 HTML 코드만 사용해 별점 표시 모양을 만들기 점수를 %로 입력하면 너비로 환산해서 표기 HTML 아래 width 부분에 별점을 줄 점수 비율을 입력해주면 된다 CSS .stararea { width: 100px; height: 20px; margin: 0 auto 10px; position: relative; } .stararea span { width: 20%; background-color: #f8a504; height: 20px; display: block; position: relative; z-index: 1; } .stararea::after { width: 100px; height: 20px; background: url(/src/lib/img/star_bar.svg) no-re.. 2023. 1. 9.
[스벨트] 간단한 팝업창 스벨트의 #if를 사용하면 별도로 css에서 클래스로 display를 설정하고, 클래스 이름을 붙였다 떼었다 할 필요 없이 간편하게 작동하는 팝업창을 만들 수 있다. 팝업을 띄우려면 이 버튼을 클릭하세요 {#if zalert} 팝업창에 띄울 메시지 {zalert=false}>취소(팝업닫기) 로그인하러가기 {/if} .z_alert{ display: display; position: fixed; width: 100vw; height: 100vh; top: 0; left: 0; z-index: 1000; background-color: rgba(0, 0, 0, 0.5); } .z_alert .z_box_1 { width:auto; min-width: 60%; max-width: 90%; position: a.. 2022. 12. 4.
스벨트에서 a href없이 링크 이동하기 분명 스벨트는 바뀐 부분만 로드해서 서버의 효율성을 도모한댔는데.. 왜 a href외의 모든 방법(eg. location.href=""등등..)을 사용하면 전체를 다 로드하는것 같지 싶어서 고민하다 결국 찾아낸 방법 goto("링크") {goto("링크")})>이것은 버튼이다 처럼 내부에 적어줘도 되고 안녕하기 이렇게 함수에 적어줘도 된다. 2022. 12. 4.
[간단] 스벨트에서 localStrorage 안될 때 Svelte에서 localStrorage.getItem()등을 사용하려 하면 localStorage is not defined 라고 오류를 뱉을 때가 있습니다. 스벨트 파일이 javascript와 html로 컴파일 되기 전에는 localStroage가 존재할 수 없어 발생하는 문제이므로 onMount와 함께 사용해주면 됩니다. console.log(localStorage.getItem("user")); //에러 onMount(()=>{ localStorage.getItem("user"); //에러가 나지 않음 }) 2022. 12. 4.
localhost http://192.168.0.22:7412/ http://192.168.0.22:7412/ 2022. 11. 30.
[번역] setContext and getContext 컨텍스트 API는 데이터와 함수를 소품으로 전달하거나 많은 이벤트를 전달하지 않고 구성 요소가 서로 '대화'할 수 있는 메커니즘을 제공합니다. 고급 기능이지만 유용한 기능입니다. Mapbox GL 맵을 사용하여 이 예제 앱을 사용하십시오. 구성 요소를 사용하여 마커를 표시하고 싶지만 기본 Mapbox 인스턴스에 대한 참조를 각 구성 요소의 소품으로 전달하고 싶지는 않습니다. 컨텍스트 API에는 setContext와 getContext라는 두 부분이 있습니다. 구성 요소가 setContext(key, context)를 호출하면 하위 구성 요소는 const context = getContext(key)로 컨텍스트를 검색할 수 있습니다. 먼저 컨텍스트를 설정해 보겠습니다. Map.svelte에서 svelte에.. 2022. 11. 23.
[번역] svelteKit -fetch requests Making fetch requests 출처 : https://kit.svelte.dev/docs/load#making-fetch-requests 외부 API 또는 +server.js 핸들러에서 데이터를 가져오려면 제공되는 'fetch' 기능을 사용할 수 있습니다. 이 기능은 몇 가지 추가 기능이 있는 native fetch web API 와 동일하게 작동합니다. 페이지 요청에 대한 쿠키(cookie) 및 권한 부여(authorization) 헤더를 상속하므로 서버에서 자격 증명 요청을 만드는 데 사용할 수 있습니다. 서버에서 상호적인 요청을 할 수 있습니다(일반적으로 fetch는 서버 컨텍스트에서 사용될 때 출처가 있는 URL이 필요합니다) 내부 요청(예: +server.js 경로)은 HTTP 호출의 .. 2022. 11. 11.
728x90