본문 바로가기

자바스크립트

 (33)
JavaScript 비동기(2) - 콜백 콜백 활용function timer(callback) { setTimeout(()=>{ console.log(1) callback() // 받아온 callback함수를 여기서 실행 },2000)}timer(()=>{ console.log('Hello World')})timer(()=>{ console.log('안녕하세요')})timer(()=>{ console.log('[ERROR] 403 Forbidden')})   - 비동기 작업 도중에 콜백 함수를 사용할 수 있습니다.   - callback 매개변수로 다른 함수를 받아와서 비동기함수 내 원하는 부분에서 실행시킬 수 있습니다.   - 특정한 비동기 함수 틀에 여러가지 바리에이션을 적용할 수 있습니다..
JavaScript 비동기(1) - 개요 동기와 비동기동기 (Synchronous)  console.log(1)alert('확인 전까지 이후 출력이 되지 않습니다')console.log(2)console.log(3)console.time('Loop')for(let i=0;i   - 하나의 작업이 끝나기 전에는 다음 작업이 시작되지 않습니다.      > 대표적인 동기 작업 : alert()     비동기(Asynchronous) console.log(1)setTimeout(()=>{ console.log('timeout!')},10000) // 10초후 작동console.log(2)console.time('Loop')setTimeout(()=>{ for(let i=0;i   - 특정 작업이 끝나기 전에 다른 작업을 진행할 수 있습니다..
JavaScript 클래스 클래스( class )란?const neo = { name:'Neo', age: 22, getBirthYear(){ const year=new Date().getFullYear() return year-this.age }}   - 변수와 메서드를 정의하여 모아놓은 하나의 틀입니다.    클래스의 활용class User { constructor(name,age){ this.name = name this.age = age } getBirthYear = function(){ const year = new Date().getFullYear() return year-this.age }}const ..
JavaScript 모듈 모듈화란   - 각각의 기능을 하는 함수들의 집합 파일을 모듈이라고 합니다.   - 많은 기능을 추가하여 길어진 코드를 각각의 기능을 가진 모듈로 분리하여 합치는것을 모듈화라고 합니다.    가져오기 (import)calculator.js main.jsimport {add,sub} from './calculator.js'console.log(add(1,3))console.log(sub(4,1)) index.html   - import {가져오고자 하는 요소} from '경로' 의 형식으로 경로 모듈의 요소를 가져올 수 있습니다.   - import * from '경로' 의 형식으로 경로 모듈에 존재하는 모든 값을 가져올 수 있습니다.   - html에 연결된 main 스크립트에 type = 'module..
JavaScript - 선택적 체이닝(Optional chaining) 선택적 체이닝( optional chaining : 옵셔널 체이닝 ) 이란?console.log(null.abc) // 에러 발생console.log(undefined.abc) // 에러 발생// 위의 코드를 변경하여 옵셔녈 체이닝 사용console.log(null?.abc) // undefined 출력console.log(undefined?.abc) // undefined 출력const numbers = nullconsole.log(numbers?.[0])const user = { name: 'Neo', age: 22,}console.log(user.name)console.log(user.age)console.log(user?.email)   - 대괄호 또는 점 표기법의 대상이 null이..
JavaScript 구조 분해 할당 구조 분해 할당   - 배열데이터와 객체 데이터를 각자의 데이터로 분해하여 할당시키는 방법입니다.   - 데이터의 순서를 변경하거나, 일부만 추출할 때 사용합니다.    배열구조 분해할당const numbers = [1,2,3]let a = numbers[0]let b = numbers[1]let c = numbers[2]console.log(a,b,c) // 1,2,3let d,e,f[d,e,f] = numbersconsole.log(d,e,f) // 1,2,3let g,h,i[h,i,g] = numbersconsole.log(g,h,i) // 3,1,2const numbers2 = [,,5]let [x=2,y,z] = numbers2con..
JavaScript 이벤트 - 이벤트 전파 이벤트 버블링 const parentEl = document.querySelector('.parent') const childEl = document.querySelector('.child') const anchorEl = document.querySelector('a') window.addEventListener('click', ()=>{ console.log('Window') }) document.documentElement.addEventListener('click', ()=>{ console.log('HTML') }) document.body.addEventListener('click', ()=>{ console.log('Body') }) parentEl.addEventListener('click..
JavaScript 이벤트 이벤트   - 특정한 상황에 따라 원하는 동작을 실행시킬 수 있는 기능입니다.   - 클릭, 키다운, 드래그 등의 다양한 이벤트를 설정할 수 있습니다.    이벤트 등록/제거addEventListenerconst parentEl = document.querySelector('.parent')const childEl = document.querySelector('.child')parentEl.addEventListener('click', ()=>{ console.log('Parent')})childEl.addEventListener('click',()=>{ console.log('Child')})   - 이벤트를 등록하면서, 발생한 이벤트의 정보..

티스토리툴바