기술 블로그

코딩테스트 문제 복기 문제 조건 배열로 아이템이 제공된다. 각 아이템은 name, score 쌍의 데이터를 가진다. score을 기준으로 들어온 아이템을 정렬해야한다. score, 들어온 순으로 우선순위를 가진다. 만약 같은 name으로 기존보다 더 높은 score가 들어온다면 업데이트한다. score순으로 정렬되었을때 특정 갯수(이하 K) 안에서 순위에 변동(순위에 영향을 끼치지 못하는 정도의 score변동은 미해당)이 있을 때 count를 +1 한다. 알맞은 count를 반환하시오 분석 위 문제에 대해 주요 포인트는 2가지 이다. 중복된 name값을 가진 아이템은 업데이트 할것 score값에 따라 정렬할 것 이전 값과 비교하여 변화를 count 할것 3번의 경우에는 최신 업데이트한 rank값과 직전..

클로저는 함수와 그 함수가 선언된 렉시컬 환경의 조합- mdn function outer(){ const name = 'kyle'; console.log(name) return function inner(){ const greeting = 'hello!' console.log(greeting,name) } } const getKyle = outer() //kyle getKyle() //hello!kyle inner함수는 자신이 생성될 때의 환경을 "기억"한다. 이 환경은 클로저가 선언된 시점의 변수뿐만 아니라, 그 변수들이 존재했던 외부 함수의 스코프를 포함한다. 여기서 스코프는 변수가 가지는 유효 범위를 의미한다. 렉시컬 환경(Lexical Environment)은 코드가 작성된 구조와 위치에 기반하여..

자바스크립트에서 객체의 최상단 레벨만 값으로서 복사되는 것을 얕은 복사라고 하고 모든 레벨에서 값으로서 복사되는 것을 깊은 복사라고 한다. 깊은 복사를 위한 방법으로는 다음과 같은 방법이 있다. JSON.stringyfy JSON.stringify()와 JSON.parse()를 이용한 깊은 복사(deep copy) 방법은 JavaScript 객체를 복사할 때 사용할 수 있는 간단한 방법 중 하나이다. 이 방법은 객체의 모든 내용을 문자열로 변환한 다음, 그 문자열을 다시 객체로 파싱하여 복사본을 생성하는 방법이다. 단점 경우에 따라 다를 수 있으나 크기가 클 경우 성능 문제가 있다. 함수와 메서드는 문자열로 변환되지 않기 때문에 복사된 문자열에는 포함되어있지않다. 객체가 순환참조를 가지고 있다면 에러가 ..

일반적으로 재귀함수는 프로그래밍에서 아주 중요한 요소이며 알고리즘으로도 자주 활용되는 기법이다. 그러나 프론트엔드 환경에서는 어떨까? 이전 게시글에서 봤던 것 처럼 프론트엔드 개발자는 콜스택의 부하를 경계해야하고 여러 문제를 야기한다. 1. 잘못 사용하면 재귀는 스택 오버플로우를 일으키기 좋은 기법이다. 2. 각 함수 호출마다 실행컨텍스트가 생성되기 때문에 메모리 측면에서 좋지 않다. 3. DOM 조작시 성능 저하가 발생할 수 있다.( 매 함수마다 리플로우 리페인팅) 이를 방지하기위해 꼬리 재귀라는 기법을 사용할 수 있다. //일반 재귀 function factorial(n) { if (n === 1) { return 1; } return n * factorial(n-1); } //꼬리 재귀 functi..

동기: 이전 작업이 끝날때 까지 기다렸다가 끝난 이후 다음 작업을 실행하는것 비동기: 이전 작업의 완료여부와 관계 없이 다음 작업을 실행하는 것 자바스크립트에서 비동기는 아래와 같은 상황에서 발생한다. 👉 DOM Element 의 이벤트 이벤트 핸들러 - 마우스, 키보드 입력 (click, keydown 등), 페이지 로딩 (DOMContentLoaded 등) 👉 타이머 - 타이머 API (setTimeout 등), 애니메이션 API (requestAnimationFrame) 👉 서버에 자원 요청 및 응답 - fetch API, AJAX (XHR) 사실 위 사진이 자바스크립트 비동기 작업의 전부이다. 추가 할 점이 있다면 콜스택 옆에 메모리힙이 있다. 콜스텍과 실행컨텍스트 그리고 메모리힙 실행컨텍스트는 ..

프로토타입 기반 상속 js에서 모든 객체는 다른 객체를 프로토타입으로 가진다. // 부모 생성자 함수 function Parent(name) { this.name = name; } // 부모 메서드 추가 Parent.prototype.sayHello = function() { console.log(`Hello, I'm ${this.name}`); }; // 자식 생성자 함수 function Child(name, age) { Parent.call(this, name); // 부모 생성자 호출 this.age = age; } // 프로토타입 체인 설정 Child.prototype = Object.create(Parent.prototype); Child.prototype.constructor = Chi..

1. 전역 this global객체 (window)등을 가리킴 2.함수 내 this 함수의 주인인 객체에 바인딩 디폴트 바인딩이 없다면 window strict모드에서는 undefined 3.객체 내 함수(메서드)에서 this 함수의 주인인 객체를 가리킴 4.이밴트핸들러 안에서 this 이밴트를 받는 요소를 가리킴 5.함수가 생성자로서 쓰여질때 함수내 this new키워드로 함수를 불러오면 그 함수는 생성자 함수가 된다. this는 함수를 생성하는 객체로 바인딩 6.화살표 함수로 쓴 this (함수 안에서 사용하는데 window객체로 바인딩하기 싫을 때) 생성자 "함수내의 함수"의 this는 전역객체로 바인딩된다 화살표 함수 내의 this는 부모 함수나 클래스의 this를 바인딩한다. 7.명시적 바인딩을..