본문 바로가기

자바스크립트21

[시간복잡성] indexOf(), hash변환 후 값 추출 코테를 풀다가, indexOf() 를 사용해 시간초과가 나던 부분을 전체 배열을 {배열의 값: index, ...} 형태의 hash로 변환하고 값을 추출하는 식으로 변경해서 풀게 되었다. 그렇다면 시간 차이가 얼마나 나는가. 그리고 배열의 길이가 얼마나 짧아야 indexOf()가 유리할까? 모의 배열을 하나 생성해서, 아래 두 가지의 경우를 조사해본다. 시간 소요는 window.performance.now(); 를 사용해서 구했다. 1.배열.indexOf("문자열") 출력 2. 각 위치를 hash로 전부 변환하고 특정 값의 위치 출력 ( ex. {값1 : 0 , 값2 :1, 값3: 2 ... ) 테스트할 배열은 그냥 for문으로 임의로 만들었다. 길면 길수록 뽑기가 힘들었다.. 실행은 10번 정도를 하고.. 2024. 3. 7.
다른 컴포넌트의 변수값 호출하기 Vue2 기준으로 다른 컴포넌트에서 사용중인 변수의 값을 가져와서 사용하는 방법입니다. SPA 형식의 웹을 제작하다보면, 편의상 분리했던 다른 컴포넌트의 js 변수값을 가져오고 싶은 경우가 생깁니다. 예를 들면 A 컴포넌트와 B 컴포넌트가 함께 띄워지는 중인데, B 컴포넌트에서 A 컴포넌트에 선언한 변수 'byunsu'의 값이 3인지 5인지 궁금할 수 있다는거죠. 혹은 B 컴포넌트에서 A 컴포넌트의 변수 'byunsu'의 값을 변경하거나요. 그러나.. 생각보다 컴포넌트 간 변수 값 교환이 복잡했습니다. eventbus를 이용해서 변수값을 리턴받으려고 해도 변수값이 아닌 vue 객체가 리턴이 되고, 아무리 이 객체를 뒤적거려봐도 변수의 값은 없었거든요. 변수 값을 바로 리턴하지 않고 문자열로 변환해서 보내.. 2023. 6. 13.
[바닐라 js] 주민번호 <->생년월일, 성별 변환 //날짜와 성별을 주민번호로 리턴 export function rsnum(birth="2000-01-01", gender="1"){ return birth[2]+birth[3]+birth[5]+birth[6]+birth[8]+birth[9]+"-"+gender; } //주민번호를 날짜,성별 배열로 리턴 export function getbirth(rsnum="000000-0"){ let birth =""; let gender = rsnum[7]; if(Number(gender)>=3){ birth="20"; }else{ birth="19"; } birth = birth+rsnum[0]+rsnum[1]+"-"+rsnum[2]+rsnum[3]+"-"+rsnum[4]+rsnum[5] let answ = [bi.. 2023. 1. 14.
폼 유효성 검사 - 모듈로 초간단하게 작성 인풋 값이 비어 있으면 안되거나, 특정 형태를 가지고 있어야 할 때 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.
[스벨트] 간단한 팝업창 스벨트의 #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.
[번역] setContext and getContext 컨텍스트 API는 데이터와 함수를 소품으로 전달하거나 많은 이벤트를 전달하지 않고 구성 요소가 서로 '대화'할 수 있는 메커니즘을 제공합니다. 고급 기능이지만 유용한 기능입니다. Mapbox GL 맵을 사용하여 이 예제 앱을 사용하십시오. 구성 요소를 사용하여 마커를 표시하고 싶지만 기본 Mapbox 인스턴스에 대한 참조를 각 구성 요소의 소품으로 전달하고 싶지는 않습니다. 컨텍스트 API에는 setContext와 getContext라는 두 부분이 있습니다. 구성 요소가 setContext(key, context)를 호출하면 하위 구성 요소는 const context = getContext(key)로 컨텍스트를 검색할 수 있습니다. 먼저 컨텍스트를 설정해 보겠습니다. Map.svelte에서 svelte에.. 2022. 11. 23.
728x90

티스토리툴바