Programming/TIL (33) 썸네일형 리스트형 .bind Method bind 메소드 .bind는 .call과 유사하게 this 및 인자를 바인딩하나, 당장 실행하는 것이 아닌 바인딩된 함수를 리턴하는 함수이다. 첫번째 인자는 this, 두번째 인자부터는 필요한 파라미터를 전달합니다. fn.bind(this값, 인자1, 인자2, ...) .bind의 사용 예시를 살펴보자. bind는 이벤트 핸들러에서 이벤트 객체 대신 다른 값을 전달하고자 할 때 유용하다. 예시1. let target = document.querySelector('#target') let users = ['김코딩', '박해커', '최초보'] users.forEach(function(user) { let btn = document.createElement('button') btn.textContent = u.. .call & .apply Methods 함수를 실행하는 세가지 방법들. * 단순히 소괄호를 사용하는 방법 말고 메소드를 이용해 실행할 수 있다. function foo() { return 'bar' } foo() foo.call() foo.apply() 특히, .call, .apply 호출은 명시적으로 this를 지정하고 싶을 때 사용한다. ∴ 첫번째 인자가 항상 this값이 된다. ** .call과 .apply 메소드의 차이점 : .apply 호출은 배열을 인자로 받는다. ** // null을 this로 지정한다. Math는 생성자가 아니므로 this를 지정할 필요가 없다. Math.max.apply(null, [5,4,1,6,2]) // 6 Array prototype에서 메소드를 빌려와 this를 넘겨 실행할 수도 있다. 아래 예시들을 .. [this] Keyword this 키워드 this는 함수 실행시 호출(invocation) 방법에 의해 결정되는 특별한 객체이다. * 함수 실행시 결정되므로, 실행되는 맥락(execution context)에 따라 this는 다르게 결정된다. 함수 실행의 다섯가지 방법 1. Global : console.log(this) * 정확히 말하면 함수 실행은 아니고, 전역에서 this를 참조할 때를 의미한다. 2. Function 호출 : foo() 3. Method 호출 : obj.foo() 4. new 키워드를 이용한 생성자 호출 : new Foo() 5. .call 또는 .apply 호출 : foo.call() / foo.apply() 함수 실행에 따른 this 바인딩 패턴 이 함수 실행의 다섯가지 방법에 따라 this 또한 다섯.. Arrow Function Arrow Function / 화살표 함수 ES6에서 새로 도입한 화살표 함수(arrow function)와 일반 함수를 비교해보자. 보통 함수 표현식을 축약한 형태로 표시된다. 원래의 함수 표현식 : const add = function (x, y) { return x + y } 화살표 함수 사용 : const add = (x, y) => { return x + y } * function 키워드를 화살표로 축약 가능하다. * () 소괄호(parentheses)를 사용하는 것은 가능 * 함수의 본문(body)에 return 문만 있는 경우, 화살표 함수는 return을 생략 가능하다. ※ 이 때 주의해야 할 점은 {} 중괄호(curly brace)는 사용하면 안 된다. const add = (x, y) .. Node.js Related Tools Achievement Goals Immersive 과정에서 사용하게 될 node.js 및 nvm, npm, package.json의 역할에 대해 이해할 수 있다. 테스트를 npm을 통해 실행시킬 수 있다. Git workflow를 통해 Pair와 협업할 수 있다. pair의 repository를 remote repository로 등록하고, 작업 현황을 공유할 수 있다. 최신 JavaScript 버전을 적극적으로 사용할 수 있다. 화살표 함수, 구조 분해 할당 등의 문법을 사용할 수 있다. this와 call, apply, bind와 같은 함수 메소드의 작동을 이해할 수 있다. Code Quality의 의미와 Code Quality를 향상시키기 위한 도구들에 대해 이해할 수 있다. Linting의 의미와 .. API [Application Programming Interface] [날씨 API] 오늘은 그동안 학습한 개념들을 종합해서 활용해야하는 fetch API를 통한 날씨 앱 만들기를 해봤다. API = Application Programing Interface 먼저, API 가 무엇인지 위키백과에서 정의는 아래와 같다. API는 응용 프로그램에서 사용할 수 있도록, 운영 체제나 프로그래밍 언어가 제공하는 기능을 제어할 수 있게 만든 인터페이스를 뜻한다. 즉, API는, 특정 데이터를 송수신 하는 방법을 얘기를 하는 것이다. 또는, 어떤 특정 사이트에서 특정 데이터를 공유할 경우 어떠한 방식으로 정보를 요청해야 하는지, 그리고 어떠한 데이터를 제공 받을 수 있을지에 대한 규격들을 API라고 한다. 그렇다면 특정 정보를 요청하는 사람과 제공해주는 주체가 있을 것이다. 예를 들어.. 비동기 호출 Asynchronous 1. 비동기 호출 * 비동기 호출 : 지연하여 실행시키는 방법이다. * 비동기 호출의 대표적인 예제 : 클라이언트-서버, 이벤트 핸들링, 애니메이션 구현, 등등 비동기 호출을 이해하려면 Callback 함수에 대해 이해를 하고 있어야한다. - Callback 함수 : 다른 함수(A)의 전달인자로 넘겨주는 함수(B)이다. - Parameter를 넘겨받는 함수(A)는 Callback 함수 (B)를 필요에 따라 즉시 실행하거나, 나중에 실행할 수도 있다. 즉, 동기적으로나 비동기적으로 실행이 가능하다. 2. Blocking vs Non-blocking 동기와 비동기를 아래와 같이 각각 전화와 문자로 비교하여 정리해봤다. 동기 Blocking 비동기 Non-blocking 전화 문자 작업 중이던 일을 중단하고 .. 유효성 검사 [Validation Check] 오늘은 유효성 검사하는 방법을 알아봤다. 유효성 검사는 홈페이지 가입이나 사이트의 어떤 신청 절차에서 많이 봤던 기능이다. 예를 들어, 가입 과정을 거치다보면, 아래와 같이 사이트에서 원하는 조건에 맞게 반드시 몇 가지 형식에 맞춰 입력해야 하는 경우가 있다. 특정 값은 반드시 입력해야 하고, 비밀번호는 특정 자릿수 이상이어야 하며, 숫자나 특수문자를 반드시 요구하기도 하고, 비밀번호와 비밀번호 확인란이 동일해야 하며, 신용카드 넘버가 유효한지 확인하는 경우도 있다. 이런 조건들 하나하나를 유효성 검사라고 부르는데, 유효성 검증 함수는 언급한 요구사항에 대한 검사를 담당한다. 위 몇가지 유효성 검증 함수의 역할들은 아래와 같다: moreThanLength 입력값이 n개의 글자 이상 onlyNumberAn.. 이전 1 2 3 4 5 다음
