annyhpk.log

Javascript

실행 컨텍스트, variable environment, lexical environment 개념

실행 컨텍스트 (Execution Context) - 전역 실행 컨텍스트 : 태그를 마주치면 생성. 실행시 필요한 정보들이 담겨있다. - 함수 실행 컨텍스트 : 함수 단위 실행 환경, 함수의 호출로 call stack에 쌓이게 된다. variable environment : 모든 식별자에 대한 정보를 담고 있는 객체. 라이프 사이클 : 실행 컨텍스트 생성시 생성 -> 실행 컨텍스트 제거시 제거 lexical environment : 유효한 식별자들에 대한 정보를 담고 있는 객체. 라이프 사이클 : 실행 컨텍스트 생성시 생성 -> 스코프 체인이 유지되는 동안 존재 ※ lexical environment 객체는 가비지 컬렉터에 의해 제거됩니다. 예제 function outer() { var a = 10; f..

Javascript

[typescript] event.target에서 value 프로퍼티를 못 찾는 에러 해결방법

문제 상황 : 타입스크립트 초기 세팅 후 event.target에서 value프로퍼티를 찾지못하는 에러 발생 const 무언가하는핸들러 = (event: React.ChangeEvent) => { setValue(event.target.value); // value 부분이 빨간줄이 쳐지고 value프로퍼티를 찾지 못 한다는 에러발생! ... } 처음 시도한 방법 : HTMLInputElement로 다운 캐스팅하여 시도해 본다. const 무언가하는핸들러 = (event: React.ChangeEvent) => { setValue((event.target as HTMLInputElement).value); // 여전히 value 부분이 빨간줄이 쳐지고 value프로퍼티를 찾지 못 한다는 에러발생! // 하..

Javascript

JS 함수형 프로그래밍 _map, _filter 함수 만들어보기

1. 함수형 프로그래밍이란? 자료 처리를 수학적 함수의 계산으로 취급하고 상태와 가변 데이터를 멀리하는 프로그래밍 패러다임의 하나이다. 명령형 프로그래밍에서는 상태를 바꾸는 것을 강조하는 것과는 달리, 함수형 프로그래밍은 함수의 응용이 강조된다. 다형성을 높이고 부수 효과를 최소화 하는 순수 함수를 만들어 모듈화 수준을 높이는 프로그래밍 패러다임 순수 함수 : 부수효과가 없는 함수 즉, 어떤 함수에 동일한 인자를 주었을 때 항상 같은 값을 리턴하는 함수. 외부의 상태를 변경하지 않는 함수. ※ 함수형 프로그래밍은 계산량이 많을수록 더 나은 성능을 보여준다. 2. each 함수 만들기 map함수와 filter함수의 매개변수로 iterable list(data)와 콜백 함수를 받아서 각 요소별로 실행해줄 함..

Javascript

고차함수, 콜백함수, 커리함수 코드로 이해하기

function double(n) { return n * 2; } // 함수를 인자로 받거나 다른 함수를 리턴 -> 고차함수 function example(func, n) { // 함수를 리턴하는 함수 -> 커리함수 return func(n); } // 다른 함수 인자로 전달되는 함수 -> 콜백함수 example(double, 5); example((n) => n * 2, 5); example(fuction(n) {return n * 2}, 5);

Javascript

insertAdjacentHTML 과 innerHTML 차이 알아보기

1. innerHTML 요소(element) 내에 포함된 HTML 또는 XML 마크업을 가져오거나 설정합니다. 그리고 MDN 문서에 이렇게 표기되있다. 요소(element)의 내용을 변경하는 대신 HTML을 문서(document)에 삽입하려면, insertAdjacentHTML() 메서드를 사용하십시오. 2. insertAdjacentHTML insertAdjacentHTML() 메서드는 HTML or XML 같은 특정 텍스트를 파싱 하고, 특정 위치에 DOM tree 안에 원하는 node들을 추가한다. 이미 사용 중인 element는 다시 파싱 하지 않는다. 그러므로 element 안에 존재하는 element를 건드리지 않는다. (innerHtml은 과 좀 다름). innerHtml보다 작업이 덜 드므..

Javascript

webWorker 맛보기

webWorker란? 웹 워커(Web worker)는 스크립트 연산을 웹 어플리케이션의 주 실행 스레드와 분리된 별도의 백그라운드 스레드에서 실행할 수 있는 기술입니다. 웹 워커를 통해 무거운 작업을 분리된 스레드에서 처리하면 주 스레드(보통 UI 스레드)가 멈추거나 느려지지 않고 동작할 수 있습니다 index.html run worker.js function sleep(delay) { let start = new Date().getTime(); while (new Date().getTime() < start + delay); } self.addEventListener('message', function(e) { console.log(e.data); // 일해라 워커! sleep(3000); // 3초가..

Javascript

리스트에 이벤트를 효율적으로 등록해보자!>

기존의 코드 - 각 태그를 선택하여 각각 이벤트를 주입해준다. 1 2 3 4 5 6 개선된 코드 - 태그에 이벤트를 주입하고 클릭한 이벤트가 이라면 내부로직을 동작시킨다. e.currentTartget : 이벤트 발생 시작 요소 ( 이벤트 핸들러가 부착된 요소) e.target : 이벤트 전파 최하단 요소 1 2 3 4 5 6

Javascript

일급 객체와 고차 함수

일급객체와 고차함수 일급객체란 다른 객체들에 일반적으로 적용 가능한 연산을 모두 지원하는 객체를 가리킨다. 변수에 대입하거나 함수의 인자로 전달되거나 리턴할 수도 있는 연산을 지원하는 객체이다. const func1 = function(n) { // 함수 변수 할당 return n + n; } const func2 = (n) => { // arrow 함수 변수 할당 return n + n; } 고차 함수는 다른 함수를 인자로 받거나 다른 함수를 리턴하는 함수를 말한다. 이 때 다른 함수를 인자로 전달되는 함수를 콜백 함수라고 한다. 그리고 함수를 리턴하는 함수를 고안해 낸 학자 이름을 딴 커리 함수라고 한다. function double(n) { return n * n; } function func(f,..