자바스크립트

Array.prototype.sort() 자세히 알아보기

자바스크립트 내부 배열 정렬 (Array.prototype.sort()) sort() 메서드는 in place 메서드이다. 입력값을 직접 변화시킨다. 입력 참조를 그대로 반환한다. 복사본을 만들지 않는다. 문자열을 넣으면 UTF-16 유니코드 값으로 정렬한다. 구현 방식은 자바스크립트 엔진에 따라 다르다. 예제 const months = ["March", "Jan", "Feb", "Dec"]; months.sort(); console.log(months); // expected output: Array ["Dec", "Feb", "Jan", "March"] const array1 = [1, 30, 4, 21, 100000]; array1.sort(); console.log(array1); // expec..

웹 개발자를 위한 자바스크립트의 모든 것 2장 let, const 정리

let 과 var 의 공통점 var a; // undefined let b; // undefined 유효한 값으로 초기화하지 않아도 된다. 유효한 값으로 초기화하지 않은 경우 undefined 가 할당된다. 반면 const 는 즉시 초기화하지 않으면 에러가 던져진다. var 가 갖는 가장 큰 문제 var의 문제점 짚기 글에 var 의 문제가 나와있다. 함수 레벨 스코프를 갖는다는 생각보다 큰 영향력을 가진다. 변수 유지 관리를 힘들게 한다. 코드가 내가 작성한 의도와 다르게 동작할 수 있다. 의도와 다르게 동작하는 코드들 function jumpOut() { var a = [1, 2, 3]; for (var i = 0; i < a.length; ++i) { var value = a[i]; console...

var 의 문제점을 짚어보고 let, const 와 비교해보세요.

var 의 문제점과 let, const 와의 비교 함수 레벨 스코프를 갖는다. 루프 내 클로저 문제를 일으킬 수 있다. let 과 const 가 블록 레벨 스코프를 갖는 것과 상반된다. 변수의 중복 선언을 허용한다. 실수로 같은 이름의 변수를 선언하는 문제를 일으킬 수 있다. let 과 const 는 중복된 이름으로 변수 선언 시에 에러가 발생한다. 정의되기 전에 참조가 가능하다. 흔히 말하는 변수 호이스팅 문제를 일으킬 수 있다. let 과 const 도 호이스팅은 일어나지만, 값이 초기화되기 전에는 Temporal Dead Zone 이라는 개념을 사용하여, 접근을 막는다.

array slice 메서드에 대해서 설명해보세요.

array slice 메서드란? slice() 메서드는 Array 의 프로토타입에 있는 메서드입니다. (Array.prototype.slice()) 하나의 인자를 받는 경우 해당 인덱스를 포함한 이후의 원소를 가진 배열을 반환합니다. 두개의 인자를 받는 경우 첫번째 인자 인덱스부터 두번째 인자 인덱스 전까지의 배열을 반환합니다. let arrayIntegers = [1, 2, 3, 4, 5]; let arrayIntegers1 = arrayIntegers.slice(0, 2); // returns [1,2] let arrayIntegers2 = arrayIntegers.slice(2, 3); // returns [3] let arrayIntegers3 = arrayIntegers.slice(4); //r..

JSON 오브젝트에 대해서 설명해보세요.

JSON 오브젝트란? 데이터 포맷 중 하나인 JavaScript Object Notion 을 파싱하기 위한 메서드를 갖고 있는 오브젝트입니다. 대부분의 자바스크립트 글로벌 오브젝트는 생성자가 있는 반면에 JSON 오브젝트는 생성자가 없습니다. JSON 의 모든 메서드는 static 메서드입니다. JSON 문자열 형태는 네트워크 통신에 많이 이용되며, 파일로 떨어지는 경우 .json 확장자를 갖고, HTTP 통신에서는 application/json 형태의 MIME type 을 사용합니다. JSON.stringify() 메서드의 이름이 역할을 설명하고 있습니다. JSON 을 문자열 (plain text) 로 만들고 싶을 때 사용합니다. JSON.parse() 이름처럼 문자열 (plain text) 을 자바스..

call, apply, bind 의 차이를 말해보세요.

call(), apply(), bind() 의 차이는? 차이를 물어보았지만, 먼저 공통점에 대해 간단히 얘기하며 설명하자면, Function.prototype 아래에 있는 메서드들입니다. 그리고 세 함수 모두 this 를 바인딩하는 것과 관련이 있습니다. Function.prototype.call() call() 의 역할은 간단히 설명하자면, 첫번째 인자를 this 로 이용하고 이후의 인자들은 함수의 인자로 이용됩니다. 아래의 코드로 설명할 수 있습니다. function printProductStock(stock) { console.log(`Product name is ${this.name}`); console.log(`Product price is $${this.price}`); console.log(..

웹 개발자를 위한 자바스크립트의 모든 것 1장 ES2015 - ES2020 정리

Ecma, ECMAScript, TC39 자바스크립트는 Ecma International 에 의해 "ECMAScript" 로 표준화된다. ECMAScript 표준은 ECMA-262이다. 표준 담당자는 TC39(Technical Committee) 조직의 일원이다. ES6 와 ES2015 ES6 와 ES2015 는 같은 버전이다. 자바스크립트 버전은 ES1, ES2, ... 처럼 순차적으로 늘어나다 2015년부터 버전의 년도를 표기하기 위해 ES6, ES2015 라는 표기를 병행했다. 예정된 변경사항을 참조할 때는 ESnext ES.next 와 같은 표현을 사용한다. 자바스크립트 엔진의 역할 자바스크립트 구문 분석 인터프리트 혹은 기계어로 컴파일 사양대로 작동하는 환경 내에서 결과 실행 브라우저별 자바스크..

프로토타입 체인 (Prototype Chain) 이란 무엇인가요? 아는대로 말해보세요.

프로토타입 체인이란? const a = {}; a. 빈 Object literal notation 으로 a 를 정의한 뒤에 a. 을 콘솔에 입력하면, 아래 이미지와 같이 많은 프로퍼티 후보군이 나온다. 이 때 후보군이 나오는 이유가 바로 프로토타입 체인 때문이다. 우리는 분명 프로퍼티를 정의한 적이 없는데, 정의한적도 없는 프로퍼티를 이용할 수 있는 이유가 바로 프로토타입 체인이다. __defineGetter__ __defineSetter__ __lookupGetter__ __lookupSetter__ __proto__ city constructor greet hasOwnProperty isPrototypeOf propertyIsEnumerable toLocaleString toString valueOf..

JS 에서 오브젝트를 만드는 방법을 아는대로 말해보세요.

1. Object 생성자 let object = new Object();다만 퍼포먼스도 안좋고, Object 를 오버라이드하는 경우 예상치 못한 결과가 나올 수 있으니 사용하지 않는 게 좋다. Object lietral notation 이라 불리는 {} 를 사용하는 게 훨씬 퍼포먼스도 좋고 코드도 깔끔하다. 2. Object.create() 메서드 const person = { isHuman: false, printIntroduction: function () { console.log(`My name is ${this.name}. Am I human? ${this.isHuman}`); }, }; const me = Object.create(person); me.name = "Matthew"; // "na..

자바스크립트 라이브러리 Axios 란?

Axios 란? Javascript 진영에서 사용되는 Promise를 기반으로 한 HTTP 클라이언트이다. Isomorphic 한 라이브러리이다. 간단하게, 서버 사이드와 클라이언트 사이드 두 곳에서 모두 정상적으로 작동한다. 서버 사이드에서는 node.js 의 네이티브 http 모듈을 사용한다. 클라이언트 사이드에서는 XMLHttpRequests API 를 사용한다. 특징 브라우저에서 XMLHttpRequests 를 사용한다. 서버에서 http 모듈을 사용한다. Promise API 를 지원한다. 요청, 응답 인터셉터를 지원한다. 요청, 응답 데이터 변환을 지원한다. 요청을 취소할 수 있다. JSON 데이터에 대한 자동 변환이 가능하다. 클라이언트 사이드에서 XSRF 에 대한 방어를 지원한다. 인터셉터..

Socket.io 소켓 IO 란?

Socket.io 란? 소켓통신을 잘 모른다면 이 게시글을 먼저 읽고 오자. 실시간 양방향 통신을 구현하기 위해 가장 많이 사용되는 라이브러리이다. 다양한 언어로 구현되어 있는 구현체가 있으며, 이름처럼 주로 웹소켓을 이용한 소켓 통신을 하지만, 웹브라우저 지원이 되지 않거나 다양한 네트워크 문제가 존재하는 경우 폴링 방식으로 통신하기도 한다. 공식문서 본문 중... Socket.IO is a library that enables low-latency, bidirectional and event-based communication between a client and a server. Diagram of a communication between a server and a client. It is bui..

리덕스 툴킷 (Redux toolkit) 이란?

리덕스 툴킷(Redux toolkit) 이란? 리덕스를 있는 그대로 활용하려면, 매우 많은 보일러 플레이트 코드를 작성해야 한다. 또한, 너무 자유도가 높아서 다양한 형식으로 사용할 수 있다. 리덕스 툴킷은 리덕스의 보일러 플레이트 코드를 줄이고 표준을 강제해 Best Practice 의 형태로 사용하기 위해 탄생한 라이브러리이다. 툴킷 없는 리덕스 사용의 복잡함과 툴킷의 필요성 리덕스 작성의 일반적인 사이클은 이렇다. 액션 정의 -> 액션 함수 정의 -> 액션의 구체적 행위인 리듀서 정의 위 세가지의 코드를 작성해야 1개의 액션이 생성되는 것이다. 또한 다양한 이유로 부가 라이브러리가 사용된다. 불변성을 지키기 위한 immer 라이브러리 store 값을 효율적으로 핸들링하고, 불필요한 렌더링을 막기 위..