감귤밭 호지차 농장

addEventListner "click" 사용자가 마우스나 트랙패드 등으로 요소를 클릭할 때 발생합니다. 해당 요소의 클릭 가능한 영역에서 클릭이 감지될 때 이벤트가 발생합니다. const button = document.querySelector(".addBtn"); button.addEventListener( 'click' , function( ){ } ) See the Pen vanila JS change by Emma-Hyejin (@Emma-Hyejin) on CodePen. "change" 사용자가 입력 필드의 값을 변경할 때 발생합니다. 예를 들어 체크박스나 라디오 버튼의 선택 여부를 변경할 때 , 혹은 요소의 선택된 옵션을 변경할 때 이벤트가 발생합니다. const input = docu..

전역적으로 사용할 수 있는 유일한 인스턴스를 생성하는 패턴 특정 인스턴스가 오직 하나만 존재하도록 보장하는 소프트웨어 설계패턴입니다. 전역 변수를 사용하지 않고도 해당 객체를 전역적으로 접근할 수 있게 되며 공유 자원에 대한 동지 접근을 제어할 수 있다. 싱글톤 패턴 생성자 이용 싱글톤 패턴 예시 let instance = null; function Singleton( data = "Intial data " ) { //기존 인스턴스가 존재할 시 기존 인스턴스 반환 if(instance) { return instance; }; this.data = data; instance = this; }; //Singleton 인스턴스가 생성될 때 해당 메소드에 접근 //메소드 추가 Singleton.prototype..

면접에서 왜 Debounce 라이브러리로 썼냐고 그래서.. 엄.. Um.. 그것이 간편하니까.. 라고 대답한 댕청한 나 ㅋ Debounce 란 ( with Throttle ) 우선 Debounce에 대해서 간단하게 설명하고 넘어가자. Debounce는 Throttle과 함께 대표적인 웹 최적화 기법 중 하나이다. 주로 네트워크의 불필요한 연속 요청을 방지해 주는 아주 고마운 친구이다. Debounce 이벤트를 그룹화해서 특정 시간이 지난 후 하나의 Event만 발생하도록 하는 기술. 100ms로 설정을 해두면 첫 Event 발생 후 100ms 동안 추가적인 이벤트가 발생하지 않는다면 함수를 실행하고, 100ms안에 추가적인 이벤트가 발생한다면 다시 이 Event를 기준으로 100ms 동안 추가적인 이벤트..

최종면접 탈락 후 슬픔 속에 잠겨 작성하는 map/filter/forEach와 관련된 고뇌입니다. 제가 검색창 자동 완성을 구현할 때 데이터를 전체로 받아 온 후 이를 map 으로 입력 값에 따라 필터링을 하는 방식으로 구현을 했습니다. 지금 생각하면 filter 를 사용해서 원본 배열의 변경 없이 사용할 수 있었을 텐데.. 그때는 map을 사용해야 한다고 레퍼런스 영상에서 얘기해서 그대로 사용했었습니다. 하지만 면접에서 왜 map 을 사용했는지.. 다른 좀 더 효율적인 방법은 없었을까? 라는 질문에 숨이 턱턱 막혀 버렸지 뭡니까.. 그래서 고민하는 데이터 자동 완성 기능과 관련된 고뇌에 대한 글입니다.

JS에서 소수 찾는 방법 몇 가지를 난이도 별로 정리해보았다. 프로그래머스를 풀다 보면 소수와 관련된 문제들이 많은데 자꾸 까먹고 그래서한번 정리해보겠다. 소수 = 1과 자기 자신으로만 나누어지는 수를 의미합니다. ( 1은 소수가 아닙니다 !) # 관련 프로그래머스 LV01: 소수 찾기 LV02: 소수 찾기 [ Basic ] 소수 찾기 function isPrime(num) { if( num < 2 ){ return false; }; for( let i = 2; i < num; i++){ if( num % i === 0){ return false; } }; return true; } function solution (n) { let count = 0; for( let i = 2; i 를 사용할 수 있습니..

var, let , const 에 대해서 아주 사소한 것까지 다 부셔버리기 위해 정리글을 작성합니다. 왜냐면 면접에서 아주 탈탈 털렸기 때문이죠. 핫.핫.핫... 덩달아 가장 기초적인 JS의 털린 부분도 다 깔끔띠하게 정리해봅니다. [1] var, let, const 키워드 정리 자바스크립트는 함수 레벨 스코프를 준수한다. (대부분의 프로그래밍 언어는 블록 레벨 스코프를 준수). 함수 레벨 스코프는 함수 내에서 선언된 변수는 함수 내에서만 유효하며 함수 외부에서는 참조할 수 없다. # 함수 내부 선언 변수 - 지역 변수 , 함수 외부 선언 변수 - 모두 전역 변수 var 전역 범위 , 함수 범위에서 선언될 수 있는 키워드로 "재선언" 되거나 " 업데이트" 될 수 있습니다. 재선언 될 수 있기 때문에 예상..

# 재귀함수와 메모리 사용량 간의 관계(javascript recursion memory leask) # 꼬리 재귀 (tail recursion in JS) # 하노이의 탑 재귀(js tower of hanoi in recursion) # 조합 재귀 함수(js combination in recursion)

JavaScript 기본적으로 동기적 언어이지만, V8 엔진과 같은 JS 엔진의 도움?으로 브라우저에서 자동으로 비동기적 수행을 할 수 있습니다. Promise 는 우리가 비동기 흐름을 제어하기 위한 방법이라고 이해하면 될 것 같습니다. ] → 자바스크립트 동기 비동기 → Asynchronous JavaScript_MDN → 벨로퍼트와 비동기 처리 다루기 Promise # callback 함수와 promise 의 차이점 이전에는 callback 함수를 사용해서 비동기 처리를 해왔지만 코드를 잘 작성하지 않으면 어디서 어떤 흐름으로 코드가 작성되는지 파악하기 어렵고, Callback Hell 처럼 쓸데없이 코드가 길어지는 이슈가 발생했습니다. 코드 실행의 성공과 실패에 대해서 규격화된 포멧을 따르는 것이 ..

JS에서는 프로토타입 기반의 객체지향 언어입니다. 프로토타입 기반 객체지향 언어는 Class가 필요없는 객체지향 프로그래밍 언어어였습니다만, ES6에서 CLASS 기능이 출현했습니다. 🔖 ES5에서 상속은 어떻게 구현 했을까? 이전의 경우에는 ' 프로토타입'을 통해 을 구현했습니다. //ES5 생성자 함수 var Person = (function () { //생성자 함수 function Person(){ this.name = name; } //프로토타입 메서드 Person.prototype.hello = function(){ console.log(`Hi I am ${this.name}`); }; //생성자 함수 반환 return Person; }()); //인스턴스 생성 let emma = new Per..

🔖 JS는 객체지향 프로그래밍 언어인가? JS가 태어난 1955년에는 HTML페이지를 동적으로 만드는 것이 목적이었던 언어였기 때문에 시작은 '인터프리터 언어' 였습니다. 이후 2009년 구글은 JS의 V8엔진을 출시하고 획기적으로 발전했으며, ES6과 Node.js의 등장으로 JS는 단순 '인터프리터 언어' 가 아닌 '객체지향 언어'에 도달했다고 보는 시각이 많아졌다고 합니다. * 물론 JS을 객체 지향으로 작성 가능했었음. # 컴파일언어 고급 언어(프로그래밍 코드) → compile → 저급 언어(기계어) > 인터프리팅 방식보다 빠름. # 인터프리터언어 JS 엔진 내부에서 실행 중 컴파일이 필요한 경우에 내부에서 컴파일 🔹JavaScript, 인터프리터 언어일까? 🔖 객체지향의 주요 특징 4 가지 #..