JavaScript131 JavaScript - 콜백 함수 & 재귀함수 콜백함수 및 재귀함수 콜백함수 다른 함수가 실행을 끝낸 뒤 실행되는 callback되는 함수 를 말합니다. 그리고, 함수를 만들때, parameter 를 함수로 받아서 쓸 수 있는데 그 함수는 callback입니다. 재귀함수 함수가 자신을 다시 호출하는 구조로 만들어진 함수입니다. 재귀함수는 종료조건이 있어야 하며, 종료조건을 설정해주지 않으면 무한 반복을 하게됨니다. 재귀함수로 작성이 되는 코드는 반복문으로도 작성할 수 있습니다. 콜백함수 예제 function func() { console.log("콘솔이 실행되었습니다.1"); } function callback(str) { console.log("콘솔이 실행되었습니다.2"); str(); } callback(func); 결과 확인하기 콜백함수 반복문.. 2022. 9. 20. JavaScript - 펼침연산자 펼침 연산자란 간단히 말해서, 배열에 포함된 항목을 목록으로 바꿔주는 연산자입니다. 마침표 세 개(...)로 표시한다. 펼침 연산자는 단독으로 쓰일 수 없음에 주의해야 합니다. 배열에 포함된 항목을 목록으로 바꿨다면 이를 배열이나 객체 등에 담아줘야 합니다. 변수에 담게 되면 에러가 발생합니다. 펼침 연산자의 가장 큰 장점은 조작(mutation)이나 부수 효과(side effect)로 인한 문제를 피할 수 있다는 점이 있습니다. 예시 const class1 = [1, 2, 3]; const a = ...class2; // X const a = [...class2]; // O 펼침연산자 복사 예제 //복사의 의미 const obj = { a: 100, b: 200, c: "javascript", }; c.. 2022. 9. 20. 이펙트 응용편 - 페럴럭스 오번째 페럴럭스 이펙트5 이번 페럴럭스 이펙트는 이질감 효과를 나타냈습니다. 원본 소스 보기 원본 사이트 보기 js 코드 설명 이질감을위해 offset1 변수를 만들어 현제 보이는 스크롤 탑 값과 각 요소의 offsetTop 값을 뺀 오차만큼 translateY 를 주어서 스크롤이 내려갈때마다 살짝 움직이는 이질감 효과를 만들었습니다. 조금더 자연스러운 효과를위해 gsap를 사용하여 훨씬 자연스럽게 했습니다. function scroll() { let scrollTop = window.pageYOffset || document.documentElement.scrollTop; document.querySelector("#parallax__info span").innerText = Math.ceil(scrollTo.. 2022. 9. 20. 이펙트 응용편 - 페럴럭스 네번째 페럴럭스 이펙트4 이번 페럴럭스 이펙트는 사이드 메뉴의 버튼을 클릭하면 해당하는 섹션으로 이동하며, 해당하는 섹션의 위치에 도달하면 버튼의 모양이 바뀜니다. 원본 소스 보기 원본 사이트 보기 js 코드 설명 requestAnimationFrame을 이용하여 리소스의 과부화를 방지합니다. requestAnimationFrame 브라우저에게 수행하기를 원하는 애니메이션을 알리고 다음 리페인트가 진행되기 전에 해당 애니메이션을 업데이트하는 함수를 호출하게 합니다. 이 메소드는 리페인트 이전에 실행할 콜백을 인자로 받습니다. 또한 css 에서 show 를 이용한 애니메이션 처리를 하여 동적인 사이트가 되었습니다. let con = 0; // window.addEventListener("scroll", scrol.. 2022. 9. 19. 이펙트 응용편 - 페럴럭스 세번째 페럴럭스 이펙트3 이번 페럴럭스 이펙트는 사이드 메뉴의 버튼을 클릭하면 해당하는 섹션으로 이동하며, 해당하는 섹션의 위치에 도달하면 버튼의 모양이 바뀜니다. 원본 소스 보기 원본 사이트 보기 js코드 설명 scrollProgress 함수를 만들어 setInterval 로 과부화를 방지후 스크롤을 위로 올리면 메뉴가 나오게 했습니다. function scrollProgress() { nowScroll = true; setInterval(() => { if (nowScroll) { nowScroll = false; hasScroll(); } }, 300); } function hasScroll() { let scrollTop = document.documentElement.scrollTop || window.. 2022. 9. 19. 이펙트 응용편 - 슬라이더 이펙트 네번째 이미지 버튼클릭으로 움직이기 이번 슬라이더 이펙트는 버튼 클릭식 이동하는 이펙트를 만들었습니다. JS 설명 gotoSlider 라는 함수를 만들어서 움직이게 만듭니다. 왼쪽,오른쪽 이벤트 리스너를 만들어 각 요소의 조건을 걸어 gotoSlider() 함수에 prevIndex 매개변수값을 넣습니다. 그렇게 되면 버튼이 클릭될때마다 자동적으로 변하게됩니다. 코드 보기 function gotoSlider(num) { sliderInner.style.transition = "all 400ms"; sliderInner.style.transform = "translateX(" + -sliderWidth * num + "px)"; currentIndex = num; } sliderBtnPrev.addEventList.. 2022. 9. 19. 이전 1 ··· 8 9 10 11 12 13 14 ··· 22 다음 728x90 반응형
