분류 전체보기95 프로토타입(prototype) - constructor 프로퍼티 생성자 함수의 프로퍼티인 prototype 객체 내부에는 constructor 라는 프로퍼티가 있다. 인스턴스의 __proto__ 객체 내부에도 마찬가지로 존재한다. 이 프로퍼티는 단어 그대로 자기 자신을 참조한다. 즉, 인스턴스의 생성자 정보를 알아내는 수단으로 보면 된다. let arr = [1, 2]; Array.prototype.constructor === Array; // true 자기 자신 arr.__proto__.constructor === Array; // true 자기 자신 arr.constructor === Array; // true let arr2 = new Array(3, 4); let arr3 = new arr.constructor(3, 4); // arr.constructor =.. 2022. 5. 29. 프로토타입(prototype) 디렉터리 구조 직접 new 연산자와 함께 생성자함수를 호출하는 경우와 내장 생성자 함수인 Array를 사용하는 경우의 프로토타입-인스턴스간의 디렉터리 구조를 살펴보자. 내장 생성자 함수의 구조를 통해 배열 리터럴에 from, isArray, of 메서드를 직접 사용할 수 없는 이유 또한 알 수 있다! 1. new 생성자 함수(인스턴스 직접 연결) new 연산자를 IamConstructor란 생성자 함수와 함께 호출하여, IamInstance란 인스턴스를 생성하였다. const IamConstructor = function (name) { this.name = name; }; IamConstructor.prototype.method1 = function() {}; IamConstructor.prototype.proper.. 2022. 5. 28. 프로토타입(prototype) 클래스 기반 언어가 상속을 사용한다면 프로토타입 기반 언어는 어떤 객체를 원형(prototype)으로 삼고, 이를 복제(참조)하여 상속과 비슷한 효과를 갖는다. 자바스크립트 또한 프로토타입 기반 언어이다! const instance = new Constructor(); 어떤 생성자 함수(Constructor)를 new 연산자와 함께 호출하면 Constructor에서 정의된 내용을 바탕으로 새로운 인스턴스(instance)가 생성된다. 이 instance에는 __proto__라는 프로퍼티가 "자동 부여"되는데, 이 프로퍼티는 Constructor의 prototype이라는 프로퍼티를 참조한다! 즉, 인스턴스는 __proto__를 통해서 생성자함수의 prototype 프로퍼티에 접근할 수 있다. > 예시 De.. 2022. 5. 22. 커링 함수 커링 함수란? 여러 개의 인자를 받는 함수를 하나의 인자만 받는 함수로 나눠서 "순차적"으로 호출될 수 있게 체인 형태로 구성한 것. 필요한 인자 갯수만큼 함수를 만들어 계속 리턴해주다가 마지막에 조합해서 리턴한다. 한 번에 하나의 인자만 전달하는 것이 원칙이고, 마지막 인자가 전달되기 전까지는 원본 함수가 실행되지 않는다. (마지막 인자가 넘어갈 때까지 함수 실행을 미루는 셈) const curry = func => a => b => c => d => func(a, b, c, d); const maxNumber = curry(Math.max); console.log(maxNumber(1)); // f() console.log(maxNumber(1)(2)); // f() console.log(maxNum.. 2022. 5. 21. 클로저 활용 예시 (2) 클로저 활용 예시 (2) - 부분 적용 함수 부분 적용 함수란 a개의 인자를 받는 함수에 미리 b개의 인자만 넘겨 기억시켰다가, 나중에 (a - b)개의 인자를 넘기면 비로소 원래 함수의 실행 결과를 얻을 수 있도록 만든 함수이다. 부분 적용 함수가 클로저의 활용 예시인 이유는 미리 일부 인자를 넘겨두어 기억하게끔 하고 추후 필요한 시점에 기억했던 인자들까지 함께 실행하게 한다는 원리가 클로저의 정의와 부합하기 때문이다. /* 고차함수를 활용한 부분 적용 함수 */ let partial = function() { // 🅰️ console.log(arguments); let originPartialArgs = arguments; let func = originPartialArgs[0]; if (typeof.. 2022. 5. 1. 원격 저장소 연결 및 끊기 (git remote) JavaScript-Study 저장소에 있는 프로젝트를 test 저장소에도 똑같이 적용하려면? git clone받은 JavaScript-Study 프로젝트에 git remote -v 명령어를 입력하여 현재 연결되어 있는 원격 저장소를 확인해보자. 로컬에 clone받은 JavaScript-Study 프로젝트를 JavaScript-Study 원격 저장소와 연결을 제거하기 위해서 git remote remove origin 을 입력하면 연결되어 있는 저장소를 끊을 수 있다. 그 후 git remote -v 를 다시 입력하면 현재 연결된 저장소가 없는 것을 확인 가능하다. 현재 연결된 저장소가 없어진 이 프로젝트를 새로 생성한 test 저장소에 연결해보려면 !! git remote add origin [url].. 2022. 4. 8. 운영서버에 SEO 구현이 안되던 이슈 (react-snap) 1. 이슈 상황 작년 연말에 회사에서 소규모 웹사이트 하나를 만들었는데 CSR로 구현된 React 페이지에서 SEO를 적용하기 위해 react-snap 라이브러리를 사용했었다. 그런데 확인해보니 개발서버에서는 SSR 환경의 파일을 소스보기한 것처럼 동일하게 구현되지만 운영서버에서는 SEO를 구현하기 이전과 같이 아무것도 보이지 않는 이슈가 발생했다. production과 develop의 yml파일이나 package.json도 동일하게 구성되었는데 운영서버에만 나타나지 않았다. 확인 결과 S3에 올라간 build파일을 비교해보니 index.html의 크기가 달랐다. 개발서버의 index.html은 페이지별 내용이 생성되어있고, 운영서버의 index.html은 기존처럼 빈 파일이 올라가 있었던 것! 2. 발.. 2022. 4. 8. 클로저 활용 예시 (1) 클로저 활용 예시 (1) - 콜백함수가 외부 데이터 참조 콜백함수 내부에서 외부변수를 참조하는 클로저의 두가지 로직을 기록하기 위해🧐 첫 번째는 콜백함수를 내부함수로 선언해서 외부변수를 직접 참조하는 로직이고, 두 번째는 콜백함수를 고차함수로 바꿔서 클로저를 활용하는 로직이다. 1. 콜백함수가 외부변수를 직접 참조 let delivery = ['chicken', 'pizza', 'sushi']; let $ul = document.createElement('ul'); delivery.forEach(el => { // 콜백함수(A) let $li = document.createElement('li'); $li.innerText = el; $li.addEventListener('click', function(.. 2022. 3. 31. setInterval과 addEventListener 🚩clearInterval과 removeEventListener는 종료 대상이 다르다. clearInterval => setInterval 자체를 종료 removeEventListener => 콜백함수를 종료 1. window 메서드 (setInterval) setInterval 자체를 종료한다. clearInterval(intervalID) /* 지역변수 num을 참조하는 내부함수를 외부로 전달했으므로 클로저 */ (function() { let num = 0; let intervalID = null; intervalID = setInterval(function(){ if (++num >= 5) { clearInterval(intervalID); } console.log(num); }, 100); }).. 2022. 3. 31. 이전 1 ··· 5 6 7 8 9 10 11 다음
