웹개발자의 기지개

위의 코드처럼 태그내에 있는 태그 클릭시 다른 링크 주소로 보내고 싶을때, 가장 쉽게 하면 123456789a href="test.html" onclick="return false;"> img src="image.jpg" alt="" onclick="imgView('2')">/a> script>function imgView(no) { location.href = "view.html?no=" + no;}/script>Colored by Color Scriptercs 태그를 return false 하고, onclick 으로 링크 하면 되는데,이는 태그 자체가 동작을 하지 못한다는 단점이 있다. 12345678910a href="test.html"> img src="image.jpg" alt=..

이미지, 영상 관련 다양한 화면 뷰에 대하여 활용할 수 있다. https://biati-digital.github.io/glightbox/ GLightbox | A pure Javascript lightboxDuis quis ipsum vehicula eros ultrices lacinia. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec nec sollicitudin felis. Donec vel nulla vel leo varius tempor. Duis suscipit pharetra quam id imperdiet. Praesentbiati-digital.github.io h..

임의의 함수에서 매개변수를 특정함수를 넘겨서 활용하는 방식 12345678910111213141516171819202122232425function repeat(count, callback) { for (let idx=1;idx = count;idx++) { callback(idx); } } repeat(5, function(idx) { console.log(idx);}); repeat(5, function(idx) { console.log(idx * 2);}); repeat(3, (idx) => { console.log(idx);}); repeat(5, (idx) => { console.log(idx * 3);});Colored by Color Scriptercs 참고 :..

if(location.hostname != "localhost") { if (window.location.protocol != "https:") { window.location.href = "https:" + window.location.href.substring(window.location.protocol.length); } if (document.location.protocol == 'http:') { document.location.href = document.location.href.replace('http:', 'https:'); } }

1) 배열 비구조화 할당 const arr = [10, 20, 30]; // 기존 const a = arr[0]; const b = arr[1]; // 비구조화 const [x, y] = arr; // x=10, y=20 일부만 받기 / 건너뛰기const [first, , third] = [10, 20, 30]; // first=10, third=30 기본값 주기 (값이 undefined일 때만 적용)const [a = 1, b = 2] = [100]; // a=100, b=2 나머지 요소 모으기 (rest)const [head, ...tail] = [1,2,3,4]; // head=1, tail=[2,3,4] 값 바꾸기(스왑) 한 줄 요령let left = 'L', right = 'R'; [lef..

1. 단일 매개변수 전달하기123456789const onIncrease = (num) => { console.log(`+${num} 했다.`);}; return ( div> button onClick={() => onIncrease(1)}>Plus 1/button> /div>);Colored by Color Scriptercs onClick={onIncrease(1)} ❌ 이렇게 쓰면 렌더링 시점에 함수가 바로 실행돼 버립니다. 따라서 () => onIncrease(1) 처럼 익명 화살표 함수로 감싸서 클릭할 때 실행되게 해야 합니다. 2. 여러 개의 매개변수 전달하기1234567891011const onIncrease = (a, b, c) => { console.log(`매개변수: ${..

React 에는 없는 반응성 변수, 반응성 조건문이 스벨트에서는 코드량을 더욱 단순하고 간편하게 한다. (1) 반응성 변수 - ( 변수에 값만 다시 넣으면 ) 단순 대입만하면 화면이 업데이트 된다. 12345678script> let count = 0; // 반응성 변수 (상태) function inc() { count += 1; // 대입이 발생 → 스벨트가 감지 → 화면 갱신 }/script> button on:click={inc}>Clicked {count} times/button>cs (2) 반응성 선언 ($: ) , 반응성 조건문 123456789script> let price = 10000; let qty = 2; // pr..

이거 하나로 자바스크립트 공부는 끝이다. 끝판왕이다. 최고다 ~ https://ko.javascript.info/ 모던 JavaScript 튜토리얼 ko.javascript.info