문제 설명 오래전 유행했던 콜라 문제가 있습니다. 콜라 문제의 지문은 다음과 같습니다. 정답은 아무에게도 말하지 마세요. 콜라 빈 병 2개를 가져다주면 콜라 1병을 주는 마트가 있다. 빈 병 20개를 가져다주면 몇 병을 받을 수 있는가? 단, 보유 중인 빈 병이 2개 미만이면, 콜라를 받을 수 없다. 문제를 풀던 상빈이는 콜라 문제의 완벽한 해답을 찾았습니다.상빈이가 푼 방법은 아래 그림과 같습니다. 우선 콜라 빈 병 20병을 가져가서 10병을 받습니다. 받은 10병을 모두 마신 뒤, 가져가서 5병을 받습니다. 5병 중 4병을 모두 마신 뒤 가져가서 2병을 받고, 또 2병을 모두 마신 뒤 가져가서 1병을 받습니다. 받은 1병과 5병을 받았을 때 남은 1병을 모두 마신 뒤 가져가면 1병을 또 받을 수 있습..
map arr.map(callback(currentValue[, index[, array]])[, thisArg])Copy currentValue : 처리할 현재 요소 index (Optional) : 처리할 현재 요소의 인덱스 array (Optional) : map()를 호출한 배열 thisArg (Optional) : callback을 실행할 때 this로 사용할 값 map()은 배열의 각 요소에 대해 지정된 함수를 호출하고, 반환된 값을 사용하여 새로운 배열을 생성한다. 따라서 map()을 사용하면 기존 배열과 길이가 같은 새로운 배열을 생성하며, 이 새로운 배열의 각 요소는 기존 배열의 각 요소를 변환한 값이 된다. const arr = [1, 2, 3, 4]; const mappedArr = ..
async & await 사용 이유 async & await 은 기존의 비동기처리 방식의 문제점들을 보완하면서도 사용법이 훨씬 간단하다. Promise 코드 function p() { return new Promise((resolve, reject) => { resolve('hello'); // or reject(new Error('error'); }); } p().then((n) => console.log(n)); async 코드 async function p2(){ // async을 지정해주면 Promise를 리턴하는 함수로 만들어준다. return 'hello'; } p2().then((n) => console.log(n)); 이처럼 async를 사용하면 promise 코드를 훨씬 직관적으로 나타낼..
Promise 자바스크립트는 비동기 처리를 위한 하나의 패턴으로 콜백 함수를 사용한다. 하지만 전통적인 콜백 패턴은 콜백 헬로 인해 가독성이 나쁘고 비동기 처리 중 발생한 에러의 처리가 곤란하며 여러 개의 비동기 처리를 한번에 처리하는 데도 한계가 있다. ES6에서는 비동기 처리를 위한 또 다른 패턴으로 프로미스(Promise)를 도입했다. 프로미스는 전통적인 콜백 패턴이 가진 단점을 보완하며 비동기 처리 시점을 명확하게 표현할 수 있다는 장점이 있다. 콜백 패턴의 단점 콜백 헬 동기식 처리 모델(Synchronous processing model)은 직렬적으로 태스크(task)를 수행한다. 즉, 태스크는 순차적으로 실행되며 어떤 작업이 수행 중이면 다음 태스크는 대기하게 된다. 예를 들어 서버에서 데이..
PTR이란? Pull To Refresh의 약자로 당겨서 새로고침을 뜻한다. 모바일에서 흔히 새로고침을 위해 터치스크린을 위에서 아래로 내려 새로고침 했던 경험이 있을 것이다. 현재 센텐스유의 포스트들을 새로고침 하기위해서 브라우저는 새로고침 버튼을 눌러야하고, PWA를 사용한 앱 사용자들은 다른페이지로 갔다오거나 앱을 종료했다가 다시 접속해야하는 번거로움이 있었다. 그래서 센텐스유에도 PTR을 적용하기로 했다. react-pull-to-refresh npm에 리액트용 ptr 라이브러리가 있다. react-pull-to-refresh A React component for pull to refresh on the web.. Latest version: 2.0.1, last published: 4 mont..
클로저(closure) 개념 클로저(closure)는 자바스크립트에서 중요한 개념 중 하나다. 클로저는 자바스크립트 고유의 개념이 아니라 함수를 일급 객체로 취급하는 함수형 프로그래밍 언어(Functional Programming language: 얼랭(Erlnag), 스칼라(Scala), 하스켈(Haskell), 리스프(Lisp)…)에서 사용되는 중요한 특성이다. 클로저는 자바스크립트 고유의 개념이 아니므로 ECMAScript 명세에 클로저의 정의가 등장하지 않는다. 클로저에 대해 MDN은 아래와 같이 정의하고 있다. “A closure is the combination of a function and the lexical environment within which that function was d..
함수 호출 방식에 의해 결정되는 this 자바스크립트의 함수는 호출될 때, 매개변수로 전달되는 인자값 이외에, arguments 객체 와 this를 암묵적으로 전달 받는다. function square(number) { console.log(arguments); console.log(this); return number * number; } square(2); Java에서의 this 는 인스턴스 자신(self)을 가리키는 참조변수다. this가 객체 자신에 대한 참조 값을 가지고 있다는 뜻이다. 주로 매개변수와 객체 자신이 가지고 있는 멤버 변수명이 같을 경우 이를 구분하기 위해서 사용된다. 아래 Java 코드의 생성자 함수 내의 this.name은 멤버변수를 의미하며 name은 생성자 함수가 전달받은 ..
실행 컨텍스트 실행 컨텍스트(Execution Context)는 scope hoisting this function closure 등의 동작원리를 담고 있는 자바스크립트의 핵심원리이다. 실행 컨텍스트를 바로 이해하지 못하면 코드 독해가 어려워지며 디버깅도 매우 곤란해진다. ECMAScript 스펙에 따르면 실행 컨텍스트를 실행 가능한 코드를 형상화하고 구분하는 추상적인 개념 이라고 정의한다. 좀 더 쉽게 말하자면 실행 가능한 코드가 실행되기 위해 필요한 환경 이라고 말할 수 있겠다. 여기서 말하는 실행 가능한 코드는 아래와 같다. 전역 코드 : 전역 영역에 존재하는 코드 Eval 코드 : eval 함수로 실행되는 코드 함수 코드 : 함수 내에 존재하는 코드 일반적으로 실행 가능한 코드는 전역 코드 와 함..
use strict "use strict" 혹은 'use strict' 는 단순한 문자열처럼 생겼다. 하지만 이 문구가 스크립트 최상단에 오면 스크립트 전체가 “모던한” 방식으로 동작하게된다. "use strict"; // 이 코드는 모던한 방식으로 실행된다. "use strict"는 평범한 JavaScript에 몇가지 변경이 일어나게 한다. 기존에는 조용히 무시되던 에러들을 throwing한다. JavaScript 엔진의 최적화 작업을 어렵게 만드는 실수들을 바로잡는다. 가끔씩 엄격 모드의 코드는 비-엄격 모드의 동일한 코드보다 더 빨리 작동하도록 만들어진다. 엄격 모드는 ECMAScript의 차기 버전들에서 정의 될 문법을 금지한다. "use strict" 는 대개 스크립트 전체에 적용하지만, 스크립..
TDZ TDZ(Temporal Dead Zone)를 해석하면 "일시적 사각지대"다. 첫 번째 코드 [인스턴스 생성 후 클래스 선언] const myCat = new cat('mimi') class cat { constructor(name) { this.name = name; } } 두 번째 코드 [함수 호출 후 함수 선언] hello('Shin') function hello (name) { return `Hello ${name} :)` } 위 두개의 코드를 실행해보면 두 번째 코드는 정상적으로 작동 하지만 첫 번째 코드를 작동시키면 ReferenceError: Cannot access 'cat' before initialization 에러가 발생한다. TDZ의 발생 const 변수를 선언하고, 초기화한 ..
