목록전체 글 (135)

umilove98의 블로그

Hoisting 호이스팅

호이스팅은 무엇인가? 함수, 변수 선언부가 유효범위 최상단으로 끌어올려지는 현상 자바스크립트는 코드를 실행할 때 기본적으로 상단에서 하단으로 내려가며 차례대로 실행된다. 하지만 자바스크립트 엔진에서 전체 코드를 동작하기 전에 함수, 변수 등의 각종 선언들을 먼저 읽고 구조를 파악하는 과정을 거치는데 이 때, 파악된 선언들이 코드 실행 전에 메모리에 저장되므로 선언부의 위치에 관계 없이 해당 유효범위의 최상단에서 선언된것 같은 현상이 나타난다. (변수의 경우 초기화가 진행되기 전 선언만 된 상태) 1 2 3 4 5 6 7 const a = 5 ten() function ten(){ console.log(a + 10) } cs 이 코드를 살펴보면 ten이라는 함수를 3번 라인에서 호출하는데 아직 함수가 선언..
language,framework,library/Javascript 2022. 10. 29. 22:21
IIFE(Immediately-Invoked Function Expression) 즉시실행함수

익명함수를 만들면서 바로 실행하고 싶을 때가 있다. 어떤 수에 10을 더하는 다음과 같은 함수가 있다고 하자 1 2 3 4 5 const a = 5 function ten(){ console.log(a + 10) } ten() cs 일반적인 방법으로는 이렇게 ten 이라는 이름의 함수를 생성한 후 해당 함수를 호출하는 방법으로 실행된다. 단 한번 만들어서 즉시 실행해버리고 싶은 경우에는 1 2 3 4 const a = 5 (function() { console.log(a + 10) }()) cs 이러한 형태로 즉시 실행 함수를 동작시킬 수 있다. 이 때 자바스크립트 엔진이 즉시실행함수와 그 전의 코드를 명확하게 구분하지 못하여 에러가 발생할 수 있다. 이를 방지하기 위해 즉시실행함수를 사용할 때는 해당 ..
language,framework,library/Javascript 2022. 10. 29. 20:50
Arrow function =>

여기 한 함수가 있다. 1 2 3 4 const ten = function (x) { return x + 10 } console.log(ten(5)) // 15 cs 입력받은 수에 10을 더해 반환하는 함수이다. 그런데 이 함수는 이렇게 나타내기도 한다. 1 2 3 4 const tenArrow = (x) => { return x + 10 } console.log(tenArrow(5)) //15 cs 이를 화살표함수 (Arrow function)이라고 한다. 이 때, 함수 안에서 return 전에 오는 코드가 없다면 더욱 축약한 형태로도 사용할 수 있다. 1 2 3 const tenArrow = (x) => x + 10 console.log(tenArrow(5)) //15 cs 더욱 축약된 상태의 코드 ..
language,framework,library/Javascript 2022. 10. 29. 20:18
node.js 버전을 여러가지 관리하며 사용하고 싶다. NVM

node.js는 계속하여 새로운 버전이 나오고 버전마다 새로운 기능이 추가된다. 상황에 따라 다양한 특정 버전의 node.js로 개발을 해야 할 필요가 있는데 이를 쉽게 버전을 변경하기 위해 Node Version Manager, NVM을 사용할 수 있다. coreybutler/nvm-windows: A node.js version management utility for Windows. Ironically written in Go. (github.com) GitHub - coreybutler/nvm-windows: A node.js version management utility for Windows. Ironically written in Go. A node.js version management u..
language,framework,library/Javascript 2022. 10. 21. 23:54
페이지 맨 위로 스크롤 하고 싶다 ScrollToPlugin

웹 페이지를 보다보면 맨 위로 스크롤 해주는 버튼이 아래쪽에 위치해 있는 것을 볼 수 있다. 이를 편하게 구현할 수 있게 해 주는 라이브러리 gsap의 ScrollToPlugin이 있다. gsap - Libraries - cdnjs - The #1 free and open source CDN built to make life easier for developers gsap - Libraries - cdnjs - The #1 free and open source CDN built to make life easier for developers GSAP is a JavaScript library for building high-performance animations that work in **every** ..
language,framework,library/Javascript 2022. 10. 21. 23:23
gsap 자바스크립트로 애니메이션 효과 적용하기

자바스크립트로 html요소에 애니메이션 효과를 부여하고 싶다. gsap - Libraries - cdnjs - The #1 free and open source CDN built to make life easier for developers gsap - Libraries - cdnjs - The #1 free and open source CDN built to make life easier for developers GSAP is a JavaScript library for building high-performance animations that work in **every** major browser. Animate CSS, SVG, canvas, React, Vue, WebGL, colors, st..
language,framework,library/Javascript 2022. 10. 13. 00:26
이전 Prev 1 2 3 4 ··· 23 Next 다음