티스토리

코딩을 쉽게 해보자

검색하기

블로그 홈

코딩을 쉽게 해보자

hjkim95.tistory.com/m

꿀단지코딩 님의 블로그입니다.

구독자: 1

방명록 방문하기

주요 글 목록

[코어 자바스크립트] 정리 Deep Dive를 각 장마다 나눠서 게시글을 올렸었는데, 나중에 다시 읽으려고 보니 너무 분산돼있는 것 같고 주니어 개발자로서 반복해서 보기에 minor한 내용들이 많았던 것 같아 이제부터는 필요한 내용만 적어두려고 한다. 그래서 이 책은 한 게시글에 몰아서 작성하려고 한다.(200pg밖에 안됨) 정재남의 코어 자바스크립트는 게시글을 작성하기 전에 미리 다 읽었는데, Deep Dive가 백과사전이라면 코어 JS는 허들이 있는 JS의 핵심 개념을 이해하기 쉽게 잘 설명하는 책이다. 목차 데이터 타입 실행 컨텍스트 this 콜백 함수 클로저 프로토타입 클래스 1. 데이터 타입 데이터 타입의 종류 원시형: number, string, boolean, null, undefined, Symbol 참조형: ob.. 공감수 0 댓글수 0 2023. 3. 18.
[React-beta] Escape Hatches - Ref로 DOM 다루기 [번역] React는 컴포넌트를 자주 다루지 않아도 되도록 자동으로 DOM을 렌더 출력과 일치하도록 업데이트한다. 하지만 React에 의해 다뤄지고 있는 Dom elements를 접근해야 하는 경우가 있다. 예를 들어, 노드를 focus하거나 스크롤, 이것의 크기나 위치를 측정할 때다. React에서는 이러한 방법을 기본적으로 하는 방법을 제공하지 않으므로, ref를 Dom node에 사용해야할 것이다. 노드에 ref를 가져오기 React에 의해 다뤄지는 DOM node에 접근하기 위해서는 useRef를 import 해야한다. 그 이후, 컴포넌트 안에서 ref를 선언하고, 마지막으로 DOM node에 ref 어트리뷰트를 넘긴다. import { useRef } from 'react'; const myRef = u.. 공감수 0 댓글수 0 2023. 2. 10.
[React-beta] Escape Hatches - Ref로 값 참조하기 [번역] https://beta.reactjs.org/learn/referencing-values-with-refs Referencing Values with Refs A JavaScript library for building user interfaces beta.reactjs.org 컴포넌트가 어떠한 정보를 "기억"하기를 바라고 그 정보가 새로운 렌더링을 일어나지 않길 원한다면, ref를 쓸 수 있다. 컴포넌트에 ref 추가하기 useRef 훅을 React에서 import하면 쓸 수 있다. 컴포넌트 안에서 useRef훅을 가져와 참조하고 싶은 초기값을 전달하면 const ref = useRef(0); // useRef는 이러한 object를 반환한다. { current: 0 // The value you pa.. 공감수 0 댓글수 0 2023. 2. 9.
[Deep Dive] 49장 - Babel과 Webpack을 이용한 ES6+/ES.NEXT 개발 환경 구축 크롬, 사파리, 파이어폭스, 엣지와 같은 에버그린 브라우저의 ES6 지원율은 약 98%로 거의 대부분의 ES6 사양을 지원한다. 하지만 IE 11의 ES6 지원율은 약 11%다. 구형 브라우저에서 문제 없이 동작시키기 위한 개발 환경을 구축하는 것이 필요하다. 대부분의 프로젝트가 모듈을 사용하므로 모듈 로더도 필요하다. ES6 모듈(ESM)은 대부분의 모던 브라우저에서 사용할 수 있다. 하지만 다음과 같은 이유로 아직까지는 ESM보다는 별도의 모듈 로더를 사용하는 것이 일반적이다. IE를 포함한 구형 브라우저는 ESM 지원 X ESM을 사용하더라도 트랜스파일링이나 번들링이 필요한 것은 변함 X ESM이 아직 지원하지 않는 기능(bare import 등)이 있고 점차 해결되고는 있지만 아직 몇가지 이슈가 .. 공감수 0 댓글수 0 2023. 2. 7.
[Deep Dive] 48장 - 모듈 1. 모듈의 일반적 의미 애플리케이션을 구성하는 개별적 요소로서 재사용 가능한 코드 조각 일반적으로 모듈은 기능을 기준으로 파일 단위를 분리한다. 이때 모듈이 성립하려면 모듈은 자신만의 파일 스코프(모듈 스코프)를 가질 수 있어야 한다. 모듈은 애플리케이션이나 다른 모듈에 의해 재사용되어야 의미가 있다. 따라서 모듈은 공개가 필요한 자산에 한정하여 명시적으로 선택적 공개가 가능하다. 이를 export라 한다. 모듈 사용자는 모듈이 공개(export)한 자산 중 일부 또는 전체를 선택해 자신의 스코프 내로 불러들여 재사용할 수 있다. 이를 import라 한다. 2. 자바스크립트와 모듈 모든 JS 파일은 하나의 전역을 공유한다. 따라서 분리된 JS 파일들의 전역 변수가 중복되는 등의 문제가 발생할 수 있다... 공감수 0 댓글수 0 2023. 2. 6.
[Deep Dive] 47장 - 에러 처리 1. 에러 처리의 필요성 발생한 에러에 대해 대처하지 않고 방치하면 프로그램은 강제 종료된다. try ... catch 문을 사용해 발생한 에러에 적절하게 대응하면 프로그램이 강제 종료되지 않고 계속해서 코드를 실행시킬 수 있다. 직접적으로 에러를 발생하지는 않는 예외적인 상황이 발생할 수도 있다. 예외적인 상황에 적절하게 대응하지 않으면 에러로 이어질 가능성이 크다. 이에 따라 언제나 에러나 예외적인 상황이 발생할 수 있다는 것을 전제하고 이에 대응하는 코드를 작성하는 것이 중요하다. 2. try ... catch ... finally 문 반환하는 값을 if 문이나 단축 평가 또는 옵셔널 체이닝 연산자를 통해 확인해서 처리하는 방법 try ... catch ... finall 문 일반적으로 2번째 방법.. 공감수 0 댓글수 0 2023. 2. 5.
[Deep Dive] 46장 - 제너레이터와 async / await 1. 제너레이터란? ES6에서 도입된 제너레이터는 코드 블록의 실행을 일시 중지했다가 필요한 시점에 재개할 수 있는 특수한 함수다. 일반 함수와의 차이는 제너레이터 함수는 함수 호출자에게 함수 실행의 제어권을 양도할 수 있다. 제너레이터 함수는 함수 호출자의 함수의 상태를 주고받을 수 있다. 제너레이터 함수를 호출하면 제너레이터 객체를 반환한다. 2. 제너레이터 함수의 정의 function* 키워드로 선언 하나 이상의 yield 표현식을 포함 이것을 제외하면 일반 함수를 정의하는 방법과 같다. // 제너레이터 함수 선언문 function* genDecFunc() { yield 1; } // 제너레이터 함수 표현식 const genExpFunc = function* () { yield 1; }; // 제너.. 공감수 1 댓글수 0 2023. 2. 1.
[Deep Dive] 45장 - 프로미스 JS는 비동기 처리를 위한 하나의 패턴으로 콜백 함수를 사용한다. BUT 전통적인 콜백 패턴은 콜백 헬로 인해 가독성이 나쁘고 비동기 처리 중 발생한 에러의 처리가 곤란하며 여러 개의 비동기 처리를 한 번에 처리하는 데도 한계가 있다. ES6에서는 비동기 처리를 위한 또 다른 패턴으로 프로미스를 도입했다. 프로미스는 전통적인 콜백 패턴이 가진 단점을 보완하며 비동기 처리 시점을 명확하게 표현할 수 있다는 장점이 있다. 1. 비동기 처리를 위한 콜백 패턴의 단점 1-1. 콜백 헬 비동기 함수를 호출하면 함수 내부의 비동기로 동작하는 코드가 완료되지 않았다 해도 기다리지 않고 즉시 종료된다. 비동기 함수 내부의 비동기로 동작하는 코드는 비동기 함수가 종료된 이후에 완료된다. 비동기 함수 내부의 비동기로 동작.. 공감수 0 댓글수 0 2023. 1. 31.
[Deep Dive] 44장 - REST API REST는 HTTP를 기반으로 서버의 리소스에 접근하는 방식을 규정한 아키텍처 REST API는 REST를 기반으로 서비스 API를 구현한 것 1. REST API의 구성 자원, 행위, 표현의 3가지 요소로 구성된다. REST는 자체 표현 구조로 구성되어 REST API 만으로 HTTP 요청의 내용을 이해할 수 있다. 구성 요소 내용 표현 방법 자원(resource) 자원 URI(엔드포인트) 행위(verb) 자원에 대한 행위 HTTP 요청 메소드 표현(representations) 자원에 대한 행위의 구체적 내용 페이로드 2. REST API 설계 원칙 가장 중요한 기본적인 원칙은 두 가지다. URI 리소스를 표현하는 데 집중하고 행위에 대한 정의는 HTTP 요청 메소드를 통해 하는 것 1. URI는 리.. 공감수 0 댓글수 0 2023. 1. 30.
[Deep Dive] 43장 - Ajax 1. Ajax란? JS를 사용하여 브라우저가 서버에게 비동기 방식으로 데이터를 요청하고 서버가 응답한 데이터를 수신하여 웹페이지를 동적으로 갱신하는 프로그래밍 방식이다. Ajax는 브라우저에서 제공하는 Web API인 XMLHttpRequest 객체를 기반으로 동작한다. XMLHttpRequest는 HTTP 비동기 통신을 위한 메서드와 프로퍼티를 제공한다. 이전의 웹페이지는 html 태그로 시작해서 html 태그로 끝나는 완전한 HTML을 서버로부터 전송받아 웹페이지 전체를 처음부터 다시 렌더링하는 방식으로 동작했다. 따라서 화면이 전환되면 서버로부터 새로운 HTML을 전송받아 웹페이지 전체를 처음부터 다시 렌더링했다. 전통적인 방식은 다음과 같은 단점이 있다. 이전 웹페이지와 차이가 없어 변경할 필요가.. 공감수 0 댓글수 0 2023. 1. 28.
[Deep Dive] 42장 - 비동기 프로그래밍 1. 동기 처리와 비동기 처리 실행 컨택스트 스택에 함수 실행 컨텍스트가 푸시되는 것은 바로 함수 실행의 시작을 의미한다. 함수의 실행 순서는 실행 컨텍스트 스택으로 관리한다. JS 엔진은 단 하나의 실행 컨텍스트 스택을 갖는다. 함수를 실행할 수 있는 창구가 단 하나이며, 동시에 2개 이상의 함수를 동시에 실행할 수 없다는 것을 의미한다. JS 엔진은 싱글 스레드 방식으로 동작한다. 한번에 하나의 태스크만 실행할 수 있기 때문에 처리에 시간이 걸리는 태스크를 실행하는 경우 블로킹(작업 중단)이 발생한다. function sleep(func, delay) { const delayUntil = Date.now() + delay; while (Date.now() < delayUntil); func(); } .. 공감수 0 댓글수 0 2023. 1. 27.
[Deep Dive] 41장 - 타이머 1. 호출 스케줄링 함수를 명시적으로 호출하면 함수가 즉시 실행된다. 만약 함수를 명시적으로 호출하지 않고 일정 시간이 경과된 이후에 호출되도록 함수 호출을 예약하려면 타이머 함수를 사용한다. 이를 호출 스케줄링이라 한다. JS는 타이머를 생성할 수 있는 타이머 함수 setTimeout과 setInterval, 타이머를 제거할 수 있는 타이머 함수 clearTimeout과 clearInterval을 제공한다. JS 엔진은 단 하나의 실행 컨텍스트 스택을 갖기 때문에 두 가지 이상의 태스크를 동시에 실행할 수 없다. 즉, JS엔진은 싱글 스레드로 동작한다. 이러한 이유로 setTimeout과 setInterval은 비동기 처리 방식으로 동작한다. 2. 타이머 함수 2-1. setTimeout / clear.. 공감수 0 댓글수 0 2023. 1. 26.
[Deep Dive] 40장 - 이벤트 1. 이벤트 드리븐 프로그래밍 이벤트 핸들러: 이벤트가 발생했을 때 호출될 함수 이벤트 핸들러 등록: 이벤트가 발생했을 때 브라우저에게 이벤트 핸들러의 호출을 위임하는 것 이벤트와 그에 대응하는 함수(이벤트 핸들러)를 통해 사용자와 애플리케이션은 상호작용을 할 수 있다. 이와 같이 프로그램의 흐름을 이벤트 중심으로 제어하는 프로그래밍 방식을 이벤트 드리븐 프로그래밍이라 한다. 2. 이벤트 타입 이벤트 타입은 이벤트의 종류를 나타내는 문자열이다. 3. 이벤트 핸들러 등록 이벤트 핸들러는 이벤트가 발생했을 때 브라우저에 호출을 위임한 함수 즉, 이벤트가 발생하면 브라우저에 의해 호출될 함수가 이벤트 핸들러다. 이벤트 핸들러를 등록하는 방법은 3가지가 있다. 3-1. 이벤트 핸들러 어트리뷰트 방식 3-2. 이.. 공감수 0 댓글수 0 2023. 1. 23.
[Deep Dive] 39장 - DOM 브라우저의 렌더링 엔진은 HTMl 문서를 파싱하여 브라우저가 이해할 수 있는 자료구조인 DOM을 생성한다. DOM은 HTML 문서의 계층적 구조와 정보를 표현하며 이를 제어할 수 있는 API, 즉 프로퍼티와 메서드를 제공하는 트리 자료구조다. 1. 노드 1-1. HTML 요소와 노드 객체 HTML 요소는 HTML 문서를 구성하는 개별적인 요소를 의미한다. HTML 요소 간에는 중첩 관계에 의해 계층적인 부자관계가 형성된다. 이러한 HTML 요소간의 부자 관계를 반영하여 HTML 문서의 구성 요소인 HTML 요소를 객체화한 모든 노드 객체들을 트리 자료 구조로 구성한다. 트리 자료구조 트리 자료구조는 노드들의 계층 구조로 이뤄진다. 노드 객체들로 구성된 트리 자료구조를 DOM이라 한다. 1-2. 노드 객체.. 공감수 0 댓글수 0 2023. 1. 3.
[Deep Dive] 38장 - 브라우저의 렌더링 과정 구글의 V8 JS 엔진으로 빌드된 JS 런타임 환경인 Node.js의 등장으로 JS는 웹 브라우저를 벗어나 서버 사이드 애플리케이션 개발에서도 사용할 수 있는 범용 개발 언어가 되었다. 브라우저 HTML, CSS, 자바스크립트로 작성된 텍스트 문서를 어떻게 파싱(해석)하여 브라우저에 렌더링하는지 살펴보자 파싱 파싱(구문 분석)은 프로그래밍 언어의 문법에 맞게 작성된 텍스트 문서를 읽어 들여 실행하기 위해 텍스트 문자열을 토큰으로 분해하고 토큰에 문법적 의미와 구조를 반영하여 트리 구조의 자료구조인 파스트리를 생성하는 일련의 과정을 말한다. 일반적으로 파싱이 완료된 이후에는 파스 트리를 기반으로 중간 언어인 바이트코드를 생성하고 실행한다. 렌더링 렌더링은 HTML, CSS, JS로 작성된 문서를 파싱하여 .. 공감수 0 댓글수 0 2023. 1. 2.
[Deep Dive] 37장 - Set과 Map 1. Set Set 객체는 중복되지 않는 유일한 값들의 집합이다. Set 객체는 배열과 유사하지만 다음과 같이 차이가 있다. 구분 배열 Set 객체 동일한 값을 중복하여 포함할 수 있다. O X 요소 순서에 의미가 있다. O X 인덱스로 요소에 접근할 수 있다. O X 1-1. Set 객체의 생성 Set 생성자 함수로 생성한다. 생성자 함수에 인수를 전달하지 않으면 빈 Set 객체가 생성된다. Set 생성자 함수는 이터러블을 인수로 전달받아 Set 객체를 생성한다. 이때 이터러블의 중복된 값은 Set 객체에 요소로 저장되지 않는다. 1-2. 요소 개수 확인 Set.prototype.size 프로퍼티를 사용한다. 1-3. 요소 추가 Set.prototype.add 메서드를 사용한다. JS의 모든 값을 요소.. 공감수 0 댓글수 0 2023. 1. 1.
[Deep Dive] 36장 - 디스트럭처링 할당 디스트럭처링 할당)구조 분해 할당)은 구조화된 배열과 같은 이터러블 또는 객체를 destructuring(비구조화, 구조 파괴)하여 1개 이상의 변수에 개별적으로 할당하는 것을 말한다. 배열과 같은 이터러블 또는 객체 리터럴에서 필요한 값만 추출하여 변수에 할당할 때 유용하다. 1. 배열 디스트럭처링 할당 ES5에서 구조화된 배열을 디스트럭처링하여 1개 이상의 변수에 할당하는 방법은 각각 해야 했었다. 배열 디스트럭처링 할당의 대상(할당문의 우변)은 이터러블이어야 하며, 할당 기준은 배열의 인덱스다. 변수에 기보본값을 설정할 수 있고, 기본값보다 할당된 값이 우선한다. Rest 파라미터와 유사하게 Rest 요소 ...을 사용할 수 있다. Rest 요소는 Rest 파라미터와 마찬가지로 반드시 마지막에 위치.. 공감수 0 댓글수 0 2022. 12. 31.
[Deep Dive] 35장 - 스프레드 문법 ES6 하나로 뭉쳐 있는 여러 값들의 집합을 펼쳐서 개별적인 값들의 목록으로 만든다. for ... of 문으로 순회할 수 있는 이터러블에 한정된다. 스프레드 문법의 결과물은 값으로 사용할 수 없고 쉼표로 구분한 값의 목록을 사용하는 문맥에서만 사용할 수 있다. 함수 호출문의 인수 목록 배열 리터럴의 요소 목록 객체 리터럴의 프로퍼티 목록 1. 함수 호출문의 인수 목록에서 사용하는 경우 Math.max 2. 배열 리터럴 내부에서 사용하는 경우 스프레드 문법을 배열 리터럴에서 사용하면 ES5에서 사용하는 기존의 방식보다 더욱 간결하고 가독성 좋게 표현할 수 있다. 2-1. concat // ES5 var arr = [1, 2].concat([3, 4]); console.log(arr); // [1, 2, .. 공감수 0 댓글수 0 2022. 12. 31.
[Deep Dive] 34장 - 이터러블 1. 이터레이션 프로토콜 ES6에서 도입된 이터레이션 프로토콜은 순회 가능한 데이터 컬렉션(자료구조)을 만들기 위해 ECMAScript 사양에 정의하여 미리 약속한 규칙이다. ES6 이전에는 통일된 규약 없이 각자 나름의 구조를 가지고 for 문, for ... in 문, forEach 메서드 등 다양한 방법으로 순회할 수 있었다. ES6에서는 순회 가능한 데이터 컬렉션을 이터레이션 프로토콜을 준수하는 이터러블로 통일하여 for ... of 문, 스프레드 문법, 배열 디스트럭처링 할당의 대상으로 사용할 수 있도록 일원화 했다. 이터레이션 프로토콜에는 이터러블 프로토콜과 이터레이터 프로토콜이 있다. 이터러블 프로토콜 이터레이터 프로토콜 1-1. 이터러블 이터러블 프로토콜을 준수한 객체를 이터러블이라 한다... 공감수 0 댓글수 0 2022. 12. 29.
[Deep Dive] 33장 - 7번째 데이터 타입 Symbol 1. 심벌이란? ES6에서 도입된 7번째 데이터 타입 변경 불가능한 원시 타입의 값 다른 값과 중복되지 않는 유일무이한 값 주로 이름의 충돌 위험이 없는 유일한 프로퍼티 키를 만들기 위해 사용한다. 프로퍼티 키로 사용할 수 있는 값은 빈 문자열을 포함하는 모든 문자열 또는 심벌 값이다. 2. 심벌 값의 생성 2-1. Symbol 함수 외부로 노출되지 않아 확인할 수 없으며, 다른 값과 절대 중복되지 않는 유일무이한 값 new 연산자와 함께 호출 x Symbol 함수에는 선택적으로 문자열을 인수로 전달할 수 있다. 설명으로 디버깅 용도로만 사용되며, 값 생성에 어떠한 영향 X 심벌 값에 대한 설명이 같더라도 생성된 심벌 값은 유일무이한 값이다. 2-2. Symbol.for / Symbol.keyFor 메서.. 공감수 0 댓글수 0 2022. 12. 28.
[Deep Dive] 32장 - String 1. String 생성자 함수 String 생성자 함수의 인수로 문자열을 전달하면서 new 연산자와 함께 호출하면 String 래퍼 객체를 생성한다. 배열과 유사하게 인덱스를 사용하여 각 문자에 접근 할 수 있다. 문자열은 원시 값이므로 변경할 수 없다. (에러 발생 X) 인수로 문자열이 아닌 값을 전달하면 문자열로 강제 변환한 후 객체 생성 new 연산자를 사용하지 않고 생성자 함수를 호출하면 문자열 반환 2. length 프로퍼티 문자열의 문자 개수 반환 3. String 메서드 String 객체의 메서드는 언제나 새로운 문자열을 반환한다. 문자열은 변경 불가능한 원시 값이기 때문에 String 래퍼 객체도 읽기 전용(read only)객체로 제공된다. 3-1. String.prototype.inde.. 공감수 0 댓글수 0 2022. 12. 25.
[Deep Dive] 31장 - RegExp 1. 정규 표현식이란? 일정한 패턴을 가진 문자열의 집합을 표현하기 위해 사용하는 형식 언어(formal language)다. 문자열을 대상으로 패턴 매칭 기능을 제공한다. 패턴 매칭 기능이란 특정 패턴과 일치하는 문자열을 검색하거나 추출 또는 치환할 수 있는 기능을 말한다. 2. 정규 표현식의 생성 정규 표현식 리터럴과 RegExp 생성자 함수를 사용할 수 있다. 일반적인 방법은 정규 표현식 리터럴 사용 정규 표현식 리터럴은 패턴과 플래그로 구성된다. const target = 'Is this all there is?'; // 패턴: is // 플래그: i => 대소문자를 구별하지 않고 검색한다. const regexp = /is/i; // test 메서드는 target 문자열에 대해 정규 표현식 re.. 공감수 0 댓글수 1 2022. 12. 24.
[Deep Dive] 30장 - Date Date는 날짜와 시간을 위한 메서드를 제공하는 빌트인 객체이면서 생성자 함수다. UTC는 국제 표준시를 말한다. KST는 UTC에 9시간을 더한 시간이다. 현재 날짜와 시간은 JS 코드가 실행된 시스템의 시계에 의해 결정된다. 1. Date 생성자 함수 Date는 생성자 함수다. Date 객체는 기본적으로 현재 날짜와 시간을 나타내는 정수값을 가진다. Date 생성자 함수로 객체를 생성하는 방법은 4가지가 있다. 1-1. new Date() 현재 날짜와 시간을 가지는 Date 객체를 반환한다. new 연산자 없이 호출하면 Date 객체를 반환하지 않고 날짜와 시간 정보를 나타내는 문자열을 반환한다. 1-2. new Date(milliseconds) 1970년 1월 1일부터 인수로 전달된 밀리초만큼 경과.. 공감수 0 댓글수 0 2022. 12. 24.
[Deep Dive] 29장 - Math 1. Math 프로퍼티 Math.PI 원주율 PI 값을 반환한다. 2. Math 메서드 2-1. Math.abs인수로 전달된 숫자의 절대값을 반환한다. 절대값은 반드시 0 또는 양수이어야 한다. 2-2. Math.round 인수로 전달된 숫자의 소수점 이하를 반올림한 정수를 반환한다. 2-3. Math.ceil 인수로 전달된 숫자의 소수점 이하를 올림한 정수를 반환한다. ex) 1.4의 소수점 이하를 올림하면 2가 되고, -1.4의 소수점 이하를 올림하면 -1이 된다. 2-4. Math.floor 인수로 전달된 숫자의 소수점 이하를 내림한 정수 반환 2-5. Math.sqrt 인수로 전달된 숫자의 제곱근을 반환 2-6. Math.random 임의의 난수를 반환 0~에서 1 미만의 실수다. 즉, 0은 포함.. 공감수 0 댓글수 0 2022. 12. 22.
[Deep Dive] 28장 - Number 1. Number 생성자 함수 표준 빌트인 객체인 Number 객체는 생성자 함수 객체다. 따라서 new 연산자와 함께 호출하여 Number 인스턴스를 생성할 수 있다. new 연산자를 사용하지 않고 Number 생성자 함수를 호출하면 Number 인스턴스가 아닌 숫자를 반환한다. 2. Number 프로퍼티 2-1. Number.EPSILON ES6에서 도입됐다. 1과 1보다 큰 숫자 중에서 가장 작은 숫자와의 차이와 같다. 약 2.220..... 이다. 부동소수점 산술 연산은 정확한 결과를 기대하기 어렵다. 정수는 2진법으로 오차 없이 저장 가능하지만 부동소수점을 표현하기 위해 가장 널리 쓰이는 표준인 IEEE 754는 2진법으로 변환했을 때 무한소수가 되어 미세한 오차가 발생할 수밖에 없는 구조적 한.. 공감수 0 댓글수 0 2022. 12. 22.
[Deep Dive] 27장 - 배열 1. 배열이란? 여러 개의 값을 순차적으로 나열한 자료구조 배열이 가지고 있는 값을 요소(element)라고 부른다. JS에 배열이라는 타입은 존재하지 않는다. 배열은 객체 타입이다. 구분 객체 배열 구조 프로퍼티 키와 프로퍼티 값 인덱스와 요소 값의 참조 프로퍼티 키 인덱스 값의 순서 X O length 프로퍼티 X O 2. 자바스크립트 배열은 배열이 아니다. 자료구조에서 말하는 배열은 동일한 크기의 메모리 공간이 빈틈없이 연속적으로 나열된 자료구조를 말한다. 즉, 배열의 요소는 하나의 데이터 타입으로 통일되어 있으며 서로 연속적으로 인접해 있다. 이러한 배열을 밀집 배열(dense array)이라 한다. JS의 배열은 자료구조에서 말하는 배열과 다르다. 배열의 요소를 각각 위한 메모리 공간은 동일한 .. 공감수 0 댓글수 0 2022. 12. 17.
[Deep Dive] 26장 - ES6 함수의 추가 기능 1. 함수의 구분 ES6 이전까지 JS 함수는 별다른 구분 없이 다양한 목적으로 사용되었다. 이는 언뜻 보면 편리한 것 같지만 실수를 유발시킬 수 있으며 성능 면에서도 손해다. var foo = function () { return 1; }; // 일반적인 함수로서 호출 foo(); // 1 // 생성자 함수로서 호출 new foo(); // foo {} // 메서드로서 호출 var obj = { foo: foo }; obj.foo(); // 1 ES6 이전의 모든 함수는 일반 함수로서 호출할 수 있는 것은 물론 생성자 함수로서 호출할 수 있다. ES6 이전의 모든 함수는 callable이면서 constructor이다. ES6 이전의 모든 함수는 사용 목적에 따라 명확한 구분이 없으므로 호출 방식에 특별.. 공감수 0 댓글수 0 2022. 12. 11.
[Deep Dive] 25장 - 클래스 1. 클래스는 프로토타입의 문법적 설탕인가? JS는 프로토타입 기반 객체지향 언어다. 프로토타입 기반 객체지향 언어는 클래스가 필요 없는 객체지향 프로그래밍 언어다. ES5에서는 클래스 없이도 생성자 함수와 프로토타입을 통해 객체지향 언어의 상속을 구현할 수 있다. ES6에서 도입된 클래스와 생성자 함수는 모두 프로토타입 기반의 인스턴스를 생성하지만 정확히 동일하게 동작 X 1. 클래스를 new 연산자 없이 호출하면 에러, BUT 생성자 함수를 new 연산자 없이 호출하면 일반 함수로서 호출 2. 클래스는 extends와 super 키워드 제공 3. 클래스는 호이스팅이 발생하지 않는 것처럼 동작 BUT 함수 선언문으로 정의된 생성자 함수는 함수 호이스팅이, 함수 표현식으로 정의한 생성자 함수는 변수 호이.. 공감수 0 댓글수 0 2022. 12. 9.
[Deep Dive] 24장 - 클로저 클로저는 JS의 고유의 개념 X 함수를 일급 객체로 취급하는 함수형 프로그래밍 언어에서 사용되는 중요한 특성 클로저는 JS의 고유의 개념이 아니므로 클로저의 정의가 ECMAScript 사양에 등장하지 않는다. MDN에서는 클로저에 대해 다음과 같이 정의한다. A closure is the combination of a function and the lexical environment within which that function was declared 클로저는 함수와 그 함수가 선언된 렉시컬 환경과의 조합이다. const x = 1; function outerFunc() { const x = 10; function innerFunc() { console.log(x); // 10 } innerFunc().. 공감수 0 댓글수 1 2022. 11. 30.
[Deep Dive] 23장 - 실행 컨텍스트 실행 컨텍스트(execution context)는 자바스크립트의 동작 원리를 담고 있는 핵심 개념이다. 실행 컨텍스트를 이해하면 자바스크립트가 스코프를 기반으로 식별자와 식별자에 바인딩된 값(식별자 바인딩)을 관리하는 방식 호이스팅이 발생하는 이유 클로저와 동작 방식 태스크 큐와 함께 동작하는 이벤트 핸들러와 비동기 처리의 동작 방식 을 이해할 수 있다. 1. 소스코드의 타입 ECMAScript 사양은 소스코드(ECMAScript code)를 4가지 타입으로 구분한다. 4가지 타입의 소스코드는 실행 컨텍스트를 생성한다. 소스코드의 타입 설명 전역 코드(global code) 전역에 존재하는 소스코드를 말한다. 전역에 정의된 함수, 클래스 등의 내부 코드는 포함되지 않는다. 함수 코드(function co.. 공감수 0 댓글수 0 2022. 11. 25.

문의안내

티스토리
로그인
고객센터

티스토리는 카카오에서 사랑을 담아 만듭니다.