umilove98의 블로그

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

익명함수를 만들면서 바로 실행하고 싶을 때가 있다. 어떤 수에 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 이러한 형태로 즉시 실행 함수를 동작시킬 수 있다. 이 때 자바스크립트 엔진이 즉시실행함수와 그 전의 코드를 명확하게 구분하지 못하여 에러가 발생할 수 있다. 이를 방지하기 위해 즉시실행함수를 사용할 때는 해당 ..

여기 한 함수가 있다. 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 더욱 축약된 상태의 코드 ..

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..

웹 페이지를 보다보면 맨 위로 스크롤 해주는 버튼이 아래쪽에 위치해 있는 것을 볼 수 있다. 이를 편하게 구현할 수 있게 해 주는 라이브러리 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** ..

다음과 같이 작성된 HTML 문서가 있다. hello main.js 에 이런 내용을 입력해 보았다. let boxEl = document.querySelector('.box'); console.log(boxEl); querySelector를 통해 문서 내부의 box클래스를 가진 요소를 가져와 boxEl 이라는 함수 내부에 저장 후 그 내용을 콘솔에 출력하는 코드이다. 해당 요소의 정보를 확인하기 위해 실행시켜보았는데.. 의도한 것과 다르게 null값이 콘솔에 출력되었다. 기본적으로 브라우저가 HTML문서를 위에서 아래로 읽어가며 실행하기 때문에 이런 현상이 발생하게 되었는데 자바스크립트를 불러와 동작시키는 해당 코드는 문서의 윗 부분인 head 부분에 작성되어 있고 hello 자바스크립트 문서에서 찾고 ..