mystery

자바스크립트의 모든 내장 생성자 함수에서 prototype 프로퍼티를 사용합니다. 1. Object.prototype 객체를 생성하는 방법에는 2가지가 있습니다. 객체 리터럴 방식과 Object 내장 객체 생성자 함수를 사용하는 것입니다. obj = new Object() 를 줄이면 obj = {} 이죠 위 그림처럼 생성자 함수의 prototype 프로퍼티는 다양한 메소드가 구현되어있는 거대한 객체입니다. 때문에 생성자 함수나 리터럴 방식으로 생성된 객체의 [[Prototype]]은 다양한 메소드가 구현되어있는 거대한 객체, 즉 Object.prototype입니다. 우리가 생성한 객체에서 toString 과 같은 메소드를 사용할 수 있는 것은 Object.prototype 객체로 부터 메소드를 상속 받았..

1. 함수의 prototype 프로퍼티와 인스턴스의 특징 생성자 함수를 사용해 객체를 생성했을 때와 리터럴 방식으로 객체를 생성했을 때 프로토타입의 동작 방식이 다릅니다. 생성자 함수의 new 연산자로 만든 객체(인스턴스)의 [[Prototype]] 은 생성자 함수의 prototype 프로퍼티를 참조합니다. prototype은 생성자 함수의(F)의 '일반 프로퍼티'입니다. (ex. F.prototype) let animal = { walk: true, } function Human(name) { this.name = name } Human.prototype = animal let human1 = new Human('Bob') console.log(human1.walk) // true 위 코드에서 Huma..

기존의 있는 기능을 가져와 확장하고 싶을 때, 자바스크립트 고유 기능인 프로토타입 상속을 사용할 수 있습니다! 1. [[Prototype]] 자바스크립트의 객체는 [[Prototype]] 이라는 숨김 프로퍼티를 갖습니다. 이 숨김 프로퍼티 값은 null 혹은 다른 객체에 대한 참조입니다. 이때 다른 객체를 참조하는 경우, 참조 대상을 프로토타입이라고 부릅니다. 객체에서 프로퍼티를 읽으려고 할 때, 프로퍼티가 없다면, 자바스크립트는 자동으로 프로토타입 객체에서 프로퍼티를 찾습니다. 이런 동작 방식을 '프로토타입 상속' 이라고 부릅니다. [[Prototype]] 프로퍼티는 내부 숨김 프로퍼티이지만 개발자가 값을 설정할 수 있습니다. __proto__를 사용하면 객체의 프로토타입을 설정할 수 있습니다. let..

오늘은 useRef를 알아보겠습니다잇! 1. 사용하게 된 계기 1-1. 무엇을 만드려고 했는가? 위에 보이는 것과 같이 signUp component를 구현하면서 있었던 일입니다! 사용자가 input을 입력하지 않고 건너뛰었을 때, 혹은 양식을 지키지 않았을때 등을 에러 상태라고 가정하고, onBlur시 각 에러에 해당하는 상황이라면 에러에 해당하는 에러 메세지를 보여주면서 에러의 타입과는 상관없이 모든 에러에는 경고를 위한 style을 적용하고 싶었습니다! 그래서... 에러상태에 보여줄 style은 미리 만들어 두고, 각 form에 해당하는 DOM을 선택해서 classList에 '.errored' 라는 class명을 추가시켜 동작시키려고 했습니다! 2. useRef로 DOM 선택하기! 2-1. 사용법 ..

1. 사건의 발단 Netlify를 사용한 프로젝트 deploy 첫 시도가 에러에 가로막혔다. 2. 문제의 원인 Netlify에 처음 deploy시 모듈 설치를 하는데 그 과정에서 peer dependency 충돌이 발생했다. 3. 원인에 대한 공부 3-1. peer dependencies peer dependencies란? 실제로 패키지에서는 require, import 하지 않지만, 특정 라이브러리나 툴의 호환성을 필요로 할 경우 명시하는 dependency이다. 쉽게 생각하면 내가 사용하려는 패키지가 요구하는 패키지 라고 생각하면 된다. 3-2. npm 버전 7의 피어 종속성 자동 설치 npm 버전 7부터 피어종속성이 자동으로 설치된다. 또한 종속성의 충돌이 있는 경우 에러로 판단해 설치를 중단한다...

벌써 6월이라니 말도 안 돼! 계획으로는 5월 안쪽으로 쇼핑몰을 완성하는 것을 목표로 했기 때문에 4월의 시작은 계획한 대로 쇼핑몰 프로젝트 개발을 이어서 시작했었다. firebase를 적용해서 상품 자료를 관리하게 바꾸었고, 회원가입과 로그인 기능도 구현했다. 디자인적인 부분과, 반응형 구현을 남겨놓은 상태였는데, 그 무렵 현 롤 프로팀 코치로 일하고 있는 친구의 푸념이 들려왔다. 코치의 특성상 소속팀과 상대팀의 밴픽에 대한 분석이 필요하고, 이를 위해서는 밴픽이 끝난 이후의 결과 화면이 필요했는데, 이런저런 내부 사정과, 대회 클라이언트의 특성상 매번 화면의 일부분을 직접 캡처하고, 짜깁기 해서 업무를 쳐내고 있다는 것이었다. 구글에 검색해서 나오는 일부 시뮬레이션 프로그램을 사용해 봤으나, 직관적이..

당초 생각과는 다르게 흘러간 2월과 3월이었다. 2월까지 core js 관련 포스팅을 마치려고 했지만.... 어림도 없지!! 아무고토 모르는 내 수준으로는 절대 2월 안에 끝낼 내용이 아니었다.. 뭐 그냥 따라 쓰기 식으로 했다면 2월 안에 끝냈을 수도 있다. 의미는 없었겠지만. 3월 초부터는 자료구조에 대한 공부도 같이 시작하면서 굳이 core js에 대한 미련을 가지지 않기로 했다. 기반 지식은 어느 정도 있다고 판단했고, 내가 부족하다고 생각하는 어떤 부분이 발견될 때마다 공부하고 포스팅하는 식으로 계획을 수정했다. 3월 말, 멈춰놓았던 쇼핑몰 프로젝트를 다시 켜보았다. 그동안 보이지 않았던 더러운 코드들을 조금씩 수정하는 것부터 시작했다. 그리고 이제 또 세부 목표를 세워 보려한다. 쇼핑몰 프로젝..

1. 구조 분해 할당 개발을 하다 보면 함수에 객체, 배열을 전달해야 할 경우가 있습니다. 객체, 배열에 저장된 데이터 전체가 아닌 일부만 필요한 경우도 생깁니다. 이럴 때 객체, 배열을 변수로 분해 할 수 있게 해주는 구조 분해 할당을 사용 할 수 있습니다! 2. 배열 분해 2-1. 기본 문법 let arr = ['Do hyeon','Lee'] let [firstName, lastName] = arr console.log(firstName) // Do hyeon console.log(lastName) // Lee 구조 분해 할당을 이용하면 인덱스로 배열에 접근하지 않아도 됩니다! 2-2. 배열을 리턴한다면 무엇이든지 let [firstName, lastName] = 'Dohyeon Lee'.split(..

1. Execution Context (실행 컨텍스트) 란? scope, hoisting, this, function, closure 등의 동작 원리를 담고있는 자바스크립트의 핵심 원리입니다. 실행 가능한 코드가 실행되기 위해 필요한 환경이라고 말할 수 있습니다. 자바스크립트 엔진에 의해 실행 컨텍스트 내부에는 코드 실행에 필요한 정보들이 저장됩니다. 2. 실행 컨텍스트 생성, 삭제 과정 아래 코드는 실행 컨텍스트의 생성과 삭제 과정을 잘 표현해 주는 코드입니다. var x = 'xxx'; function foo () { var y = 'yyy'; function bar () { var z = 'zzz'; console.log(x + y + z); } bar(); } foo(); 코드의 실행 과정을 실행..

1. hash table 이란 ? key를 hash function을 통해 hash값으로 바꾼뒤 이 hash값을 index로 사용해 key - value 형식으로 저장하는 자료구조 입니다! hash table은 순서없이 key - value로만 값을 저장하기 때문에 순서가 필요한 데이터에는 적합하지 않습니다! 타 자료구조에 비해 굉장히 빠른 속도로 삽입, 삭제, 탐색이 가능합니다. 2. hash table의 구성! key 고유한 값이자, hash function의 input값이 되는 값입니다! key를 그대로 data의 key로 사용하면 key의 길이만큼 메모리 공간을 차지하기 때문에, hash function을 통해 고정된 길이를 가지는 hash값으로 변환합니다! hash function key를 고정..