명민하다

event.preventDefault() 현재 이벤트의 기본 동작을 중단 event.stopPropagation() 현재 이벤트가 상위로 전파되지 않도록 중단 event.stopImmediatePropagation() 현재 이벤트가 상위뿐 아니라 현재 레벨에 걸린 다른 이벤트도 동작하지 않도록 중단 return false jQuery를 사용할 때는 위의 두 개 모두를 수행한 것과 같고, jQuery를 사용하지 않을 때는 event.preventDefault() 와 같다.

const moveContent = (e:any)=> { // 1. 클릭 이벤트 막기 e.preventDefault(); // 2. 클릭 했을때 target 구하기 const targetId = e.target.getAttribute('href').slice(1); const target = document.querySelector(targetId); // 3. offsetTop 구하기 const moveY = target.offsetTop; // 4. offsetTop 이동 window.scroll({ top: moveY, behavior: 'smooth' }); } ABOUT WORKS CONTACT

spread const slime = { name: '슬라임' }; const cuteSlime = { ...slime, attribute: 'cute' }; const purpleCuteSlime = { ...cuteSlime, color: 'purple' }; console.log(slime); console.log(cuteSlime); console.log(purpleCuteSlime); // console창 {name: "슬라임"} {name: "슬라임", attribute: "cute"} {name: "슬라임", attribute: "cute", color: "purple"} 여기서 사용한 ... 문자가 바로 spread 연산자 이다. spread 연산자는 배열에서도 사용 할 수 있다. cons..

Array (배열) 데이터를 리스트 같이 저장하는 곳 배열을 생성할 때 사용하는 리스트 형태의 고수준 객체 Array 자주 사용하는 연산 배열 만들기 let fruits = ['사과', '바나나'] console.log(fruits.length) // 2 인덱스로 배열의 항목에 접근하기 let first = fruits[0] // 사과 let last = fruits[fruits.length - 1] // 바나나 배열의 항목들을 순환하며 처리하기 fruits.forEach(function (item, index, array) { console.log(item, index) }) // 사과 0 // 바나나 1 배열 끝에 항목 추가하기 let newLength = fruits.push('오렌지') // ["..

자바스크립트 7가지 데이터 타입이 있다. Boolean Type 논리형 True or False 소문자로 씀 " " 없이 씀 -> 왜냐하면 이거는 text가 아니기 때문 true = 1, false = 0 const what = true; Null Type 의도적으로 변수에 값이 없다는 것을 명시할 때 사용 const test = null; console.log(typeof test === null); // false console.log(test ==== null); // true Undefined Type 어떤 변수를 만들고 ①그 값을 정의해주지 않았을때 ② 존재하지 않는 객체 프로퍼티에 접근할 경우 undefined가 반환 Number Type 숫자 배정밀도 64비트 이진 형식 IEEE 754 값(..

let block-scoped 변수 재선언은 할 수 없지만 재할당이 가능 let을 이용하여 선언한 변수는 글로벌 객체에 입력 안됨 let name = 'apple' console.log(name) // apple let name = 'orange' console.log(name) // Uncaught SyntaxError: Identifier 'name' has already been declared name = 'banana' console.log(name) //banana let은 hoisting은 되지만 error를 발생한다 let은 초기 값을 할당하지 않으면 undefined가 초기 값으로 할당된다. let a; console.log(a) // undefined hoisting은 되지만 error..

Promise 프로미스는 비동기 작업을 할 때 미래의 완료 또는 실패와 그 결과값을 나타낸다. 비동기 처리 : 특정 코드의 실행이 완료될 때까지 기다리지 않고 다음 코드를 먼저 수행하는 자바스크립트의 특성 Promise가 왜 필요한가? 프로미스는 주로 서버에서 받아온 데이터를 화면에 표시할 때 사용 $.get('url 주소/products/1', function(response){ }) 데이터를 받아오기도 전에 마치 데이터를 다 받아온 것 마냥 화면에 데이터를 표시하려고 하면 오류가 발생하거나 빈 화면이 뜬다. 이와 같은 문제점을 해결하기 위한 방법 중 하나가 프로미스 프로미스 코드 - 기초 먼저 아래 간단한 ajax 통신 코드 이다. function getData(callbackFunc){ $.get(..

웹 공유 버튼을 만들 때 Navigator.share api를 사용하였다. navigator.share({ title: document.title, text: 'Hello World', url: 'https://developer.mozilla.org', }); 아래의 필드들 중 적어도 하나는 명시되어야 한다. 사용 가능한 옵션들은 url: 공유 URL을 USVString. text: 공유로 문장을 USVString. title: '공유'를 USVString. 출처 : https://developer.mozilla.org/ko/docs/Web/API/Navigator/share#browser_compatibility Navigator.share - Web API | MDN Navigator.share() ..

데이터 타입은 프로그래밍 언어에서 사용할 수 있는 데이터의 종류를 말합니다. 원시 타입 (Primitive data type): 원시 타입의 값은 변경 불가능한 값 이며 값에 의한 전달 입니다. Boolean Null Undefined Number String Symbol 객체 타입 (object / reference type)

JavaScript 변수 와 상수는 특정 이름에특정 값을담을 때사용합니다. 변수 let let 구문은 블록 유효 범위를 갖는 지역 변수를 선언하며, 선언과 동시에 임의의 값으로초기화할 수도있습니다. let value = 1; console.log(value); // 1 value = 2; console.log(value); // 2 한번 선언을 했으면 똑같은 이름으로 선언을 할 수가 없습니다. let value = 1; let value = 2; console.log(value); // SyntaxError: Identifier 'value' has already been declared 상수 const const 선언은 블록 범위의 상수를 선언합니다. 상수의 값을 재할당할 수 없으며 다시 선언할 수도 ..