yceffort

자바스크립트 스킬을 향상 시킬 10개의 질문 10 JavaScript Quiz Questions and Answers to Sharpen Your Skills 의 질문을 보고, 답에 대한 해석을 제멋대로 써보았습니다. 1. 배열 정렬 비교 당연한 얘기지만, 자바스크립트에서의 비교는 (, ), 원시 타입이 아니라면 reference를 참조해서 비교하게 된다. 먼저 첫 번째 부터 알아보자. sort…

Generator 제네레이터의 개념에 대해 이해하기 전에, 먼저 반복자 (Iterator)에 대해 알아보자. 0. Iterator 반복자는, 두개의 속성 (와 )을 반환하는 메소드를 사용하여 Iterator protocal을 구현한다. 말이 조금 어려운 것 같으니, 조금 쉽게 설명해보자. 예를 들어 구문에서 자바스크립트 객체들이 loop되는 것과 같은 iteration 동작을 정의하는 것을 허락하는 것이다. 나 의 경우에는 default iteration 동작이 담겨져 있다. 더 쉽게 이야기 하자면, object가 Symbol.iterator 키 속성을 가지고 있다는 것을 의미한다. 어떤 객체가 하다면 이 메소드 가 인수없이 호출이 가능하고, 반환된 iterator는 반복을 통해서 획득한 값을 얻을 때 사용할 수 있다. 프로토콜이 만약 메소드를 가지고 있고, 다음과 같은 규칙을 따르고 있다면 라고 정의 한다. : 아래 두개의 속성을 가진 object…

데코레이터 0. 설명자 데코레이터에 대해 시작하기 전에, 설명자(Descriptor)에 대해 알아보자. 설명자란, 객체의 프로퍼티가 쓰기가 가능한지, 그리고 열거가 가능한지 여부를 나타낸다. 그리고 설명자를 구현하기 위해서는, Object.getOwnPropertyDescriptor(obj, propName) 를 사용해야 한다. 아래의 예를 살펴보자. 은 객체의 프로퍼티가 쓰기 가능한지의 여부다. 은 객체의 프로퍼티가 열거 가능한지의 여부이며, false라면 , , 등에서도 해당 프로퍼티를 볼 수 없다. 은 해당 프로퍼티가 를 통해 설정될 수 있는지 여부이며, false라면 로 해당 객체를 설정할 수가 없다. 위에서 본 것처럼 와 도 있는데, 이는 주로 동적으로 계산한 값을 반환하는 프로퍼티에 접근하거나, 메소드 호출을 하지 않고도 내부 변수에 접근해야 하는 경우 등에 사용한다.…

var let const, 그리고 호이스팅 var 우리가 모두 아는 키워드는 아래와 같은 특징을 가지고 있다. 함수레벨 스코프를 가지고 있다. 대부분의 프로그래밍 언어들이 블록 레벨 스코프를 사용하고 있지만, 로 선언된 키워드는 함수레벨 스코프를 갖는다. 키워드는 생략이 가능하다. 생략이 가능하기 때문에, 함수가 선언한 환경의 에 영향을 받는다. 일반적인 웹 환경에서는 일 것이다. 중복 선언이 가능하다. 호이스팅 당한다. 호이스팅이란 스코프 안에 있는 선언들을 모두 스코프의 최상위로 끌어올리는 것 이다. 자바스크립트 인터프리터가 코드를 해석할 때 함수의 선언, 할당, 실행을 모두 나눠서 처리하기 때문이다. 예를 들어보자. 이 코드는 참조 에러가 나지 않고, 를 리턴한다. 그 이유는 자바스크립트가 호이스팅을 하면서 아래와 같은 방식으로 코드를 해석하기 때문이다. 2. let 은 es…

ES6에서부터 생긴 은 일반적으로 의 모양을 하고 있으며, 동작도 비슷해보인다. 하지만 이 두 선언방식은 두가지 분명한 차이를 가지고 있다. 하지만 그전에 this를 알아야 한다. 0. this 는 현재 실행 문맥을 뜻한다. 즉, 호출한 것이 누구냐는 것이다. 위 코드에서는 를 호출한 것이 window이기 때문에 true를 리턴한다. 위 코드에서 는 다. 즉, 는 현재 실행 문맥을 의미한다. 1. this와 arguments의 차이 화살표 함수는 와 를 바인딩하지 않는다. 그 대신, 일반적인 와 와 동일한 범위를 가지고 있다. 위 함수의 결과는 가 된다. 위 에서의 this는 인자로 넘겨준 이고, 가 호출되는 시점에서 는 이다. 시점에서 는, 가 된다. 그러나 화살표 함수에서는 약간 다르다. 결과는 즉, 화살표 함수안에서의 는 안의 를 따르게 된다. 이는 화살표 함수가 현재 환경의 를 따르게 하고 싶을 때 유용하다는 뜻이다. 2. 화살표 함수는 로 호출할수 없다. es201…

이 글은 은닉을 향한 자바스크립트의 여정을 요약한 글입니다. History 자바스크립트에서는 객체에 private 한 속성을 만들 수가 없었다. 그래서 보통 자바스크립트 개발자는 private한 것이다 라는 약속으로 prefix를 붙여서 사용하고는 했었다. 물론 자바스크립트 개발자들은 의 존재로 해당 속성을 건들지 말아야겠다는 것을 암묵적으로 공유했지만, 어디까지나 암묵적인 것일 뿐, 실제로는 밖에서 얼마든지 접근 할 수 있다. 좀 더 이 문제를 자바스크립트스럽게 해결하기 위해서는, 클로저를 활용하면 된다. 비록 와 가 짬뽕이 되면서, 가독성이 떨어지긴 하지만, 효과적으로 데이터를 격리 시켰다. 위와 같은 방법을 사용해서 메소드도 숨길 수 있다. 을 사용해 볼 수도 있다. 은 생성될 때 마다 고유의 값을 가지므로, 외부에서는 이를 export하지 않는 이상 접근할 수 없다. # 의 등장 해당 제안 내용은 여기에서 자세히 확인할 수 있다. private…

https://redux.js.org/glossary#state 용어 모음 State (상태) State (State tree라고 도 불리운다)는 Redux API에서는 보통 스토어에서 관리하고, 에 의해 반환되는 단일 값을 가리킨다. 관례적으로, 가장 최상단의 상태는 객체 또는 키값 형태의 맵이지만, 기술적으로는 어떤 타입도 될 수 있다. 여전히, 이 상태값을 직렬화 될 수 있게 관리할 수 있도록 최선을 다해야 한다. Action (액션) 액션은 순수한 오브젝트로, 상태의 변경을 어떤식으로 할지를 나타낸다. 액션은 스토어에 저장되어 있는 데이터를 꺼내오는 유일한 방법이다. 네트워크 콜백이든, UI 이벤트든, 혹은 웹소캣과같은 다른 어떠한 이벤트 소스에서오든 데이터 이든지 간에, 결국 액션을 통해서 dispatch해야 한다. 액션은 반드시 액션이 실행되는 type을 가르키는 type 필드를 가지고 있어야 한다. Types…

리덕스의 탄생 배경 https://redux.js.org/introduction/motivation 자바스크립트 싱글 페이지 어플리케이션에 대한 요구 사항이 점점 복잡해 짐에 따라서, 우리의 코드는 그 어느 때 보다도 더 많이 상태관리에 대한 필요성을 느끼고 있다. 여기서 말하는 상태에는 서버 응답, 캐시된 데이터 뿐만아니라 서버에 아직 요청되지 않은 로컬로 생성된 데이터도 포함된다. UI…

리덕스 공부해보기 1 리덕스 공식문서를 스스로 대충 번역해본 글입니다. 리덕스는 자바스크립트 앱을 위한 예측 가능한 상태 관리 컨테이너다. 리덕스는 일관성 있게 동작하고, 서로 다른 환경 (클라이언트, 서버, 네이티브)에서 실행되며, 테스트하기 쉬운 어플리케이션을 만들 수 있도록 도와준다. 최상단에는, 최상의 개발자 경험을 제공하기 위한 타임 트레블 디버거를 결합한 라이브 코드 편집 등의 기능을 제공한다. 리덕스는 리액트와 함께 사용할 수 있으며, 또한 다른 뷰 라이브러리와 사용할 수 있다. 리액트는 작지만 (디펜던시를 포함하더라도 2kb) 사용가능한 다양한 애드온을 가진 생태계를 가지고 있다. 설치 이외도 또한 글로벌 변수인 로 선언된 UMD 패키지로도 사용 가능하다. UMD 패키지는 스크립트 태그에 직접적으로 선언해서 사용 가능하다. 리덕스 툴 킷 리덕스는 작고 비편향적이다. (대충 특정 플랫폼에 의존적이지 않다는 뜻) 또한 Redux Toolkit…

이런 미들웨어를 활용해서 logger를 만들 수도 있다. expressjs의 경우 https://github.com/expressjs/morgan 가 있고, koa를 활용할 경우 https://github.com/koa-modules/morgan 를 활용하면 된다.