JavaScript

커링이란??? 여러개의 인자를 받는 함수를 하나의 인자만 받는 연속된 함수들로 바꾸는 테크닉을 의미한다. 코드를 보면서 확실히 개념에 대해 알아보자. 아래 curry 함수는 여러개의 인자를 받는 함수를 대상으로 커링을 해주는 함수이다. a,b 두개의 인자를 받는 sum이라는 함수를 curry 함수에 넣게 되면, sum(a, b) 라는 기존의 방식에서 curriedSum(a)(b) 와 같은 방식으로 바뀌게 되는 것이다. function curry(f) { // 커링 변환을 하는 curry(f) 함수 return function(a) { return function(b) { return f(a, b); }; }; } // usage function sum(a, b) { return a + b; } let c..

마우스 휠을 돌리는 이벤트 리스너를 등록하고, 그에 따라 zoom-in, zoom-out 할 수 있도록 만들어 보자. [ 이벤트 등록 ] 우선, js에서 마우스 관련 해서 어떠한 이벤트들이 있는지 확인해 봤다. https://developer.mozilla.org/ko/docs/Web/Events 이벤트 참조 | MDN DOM 이벤트는 발생한 흥미로운 것을 코드에 알리기 위해 전달됩니다. 각 이벤트는 Event 인터페이스를 기반으로한 객체에 의해 표현되며 발생한 것에 대한 부가적인 정보를 얻는데 사용되는 추가 developer.mozilla.org 엇, the exact event that I was looking for! 이제 이 이벤트관련 리스너를 내가 원하는 엘리먼트에 등록해줬다. 참고로 나는 지도..

지도 어플리케이션을 만들다 https사이트에서 http로부터 지도 이미지를 받아오려는 과정에서 에러가 Mixed Content 에러가 발생하였다. 어떻게 해결 할 수 있었는지 기록하고자 한다. 원인 앞서 설명 한 것처럼 https사이트에서 http 사이트로 request를 보내게 되면서 생긴 문제였다. 에러메시지는 위 처럼 나타났다. 에러메시지에서 살펴보라는 블로그에 들어가보니, https와 http와의 비동기 요청은 보안상의 이유로 막혀져 있는 듯 했다. 자세한 사항은 다음 링크를 참고하였다. 해결책 에러 메시지에서 들어가보라고 했던 링크에 들어가 보니, 위의 코드를 html 파일의 헤더에 포함시켜주라고 하였다. 위 코드의 뜻은 insecure한 request를 보낼 때 자동적으로 secure하도록 u..

JavaScript에서 Hoisting이란 무엇인지 이해해보자. Hoisting이란, 코드 실행되기 전에 variables, function, class와 같이, 선언된 모든 식별자들의 선언(declarations)을 유효범위내 스코프 최상단으로 옮기는 JavaScript의 작동 메커니즘을 의미한다. 무슨 말인지 와닿지 않는다. 하나씩 중요한 키워드들을 분석하면서 실제로 뭘 의미하는지 뜯어보자. (이는 JS엔진의 동작방법에 대한 지식이 선행된다면 매우 이해하기 편해질 것이다. JS엔진에 대한 정보는 이전에 작성한 글을 참고하자.) 1. 코드가 실행되기 전 JS엔진은 JS 코드를 만나게 되면, Execution Context를 생성하게 되는데 이 Execution Context는 두 단계(Creation ..

JavaScript를 이해하기 위해 필수적인 개념인 실행 컨텍스트에 대해 알아보자. 아래의 글은 참고링크를 해석한 글이다. 실행 컨텍스트는 자바스크립트 코드가 evaluated되고 executed 되는 환경에 대한 추상적인 개념이다. JS 코드가 구동될 때, 항상 그 코드는 실행 컨텍스트 안에서 작동하게 된다. Simply put, an execution context is an abstract concept of an environment where the Javascript code is evaluated and executed. Whenever any code is run in JavaScript, it’s run inside an execution context. Types of Execution..

json 형태의 object를 콘솔을 찍어보다 [object Object] 로 나오는 경우를 많이 봤을 것이다. 어떻게 출력 할 수 있는지 알아보자. 참고: 참고링크 매우 간단하다. 아래처럼 json 형식을 stringify 해주면 된다. console.log('This is Error', JSON.stringify(error));