웹개발자의 기지개

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

대박, 너무 좋은 Heropy 님의 블로그 글 웹개발자라면 필독하길 추천한다. https://www.heropy.dev/p/QOWqjV 데이터 통신을 위한, Fetch 함수와 Axios 라이브러리서버와 클라이언트 간의 데이터 통신은 웹 개발의 핵심 개념 중 하나로, 자바스크립트에서의 데이터 통신을 위한 fetch 함수와 axios 라이브러리의 사용법을 알아봅니다.www.heropy.dev

heropy 님의 좋은 블로그 글 https://www.heropy.dev/p/UKy78n Svelte 개요 및 기본 문법Svelte는 '프레임워크가 없는 프레임워크' 혹은 '컴파일러'라고 소개하는 새로운 방식의 프레임워크로, 가상 DOM이 없고 런타임에 로드할 프레임워크가 없습니다.www.heropy.dev https://www.heropy.dev/p/AciIGD Svelte 완벽 가이드Svelte 기본 문법을 이해했다면, 핵심 Core API를 이해하고 다양한 활용 패턴을 알아보세요!www.heropy.dev

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107!DOCTYPE html>html lang="ko"> head> meta charset="UTF-8"> title>배너 슬라이드 예제/title> style> .slider200 { width: 420px; margin: 0 auto; position: relative; } ..