티스토리

I Love Cats
검색하기

블로그 홈

I Love Cats

catrulestheworld.tistory.com/m

깃헙주소 👉 https://github.com/Seokyung

구독자
0
방명록 방문하기
공지 환영해요! 모두보기

주요 글 목록

  • [JS] Babel과 Webpack 📌 ES6 모듈보다 별도의 모듈 로더를 사용하는 이유IE를 포함한 구형 브라우저는 ESM(ES6 모듈)을 지원하지 않음ESM을 사용하더라도 트랜스파일링이나 번들링이 필요함ESM이 아직 지원하지 않는 기능(bar import)이 있으며, 몇 가지 이슈가 존재함 📌 BabelBabel: ES6+/ES.NEXT로 구현된 최신 사양의 소스코드를 IE 같은 구형 브라우저에서도 동작하는 ES5 사양의 소스코드로 변환해 주는 트랜스파일러 📌 WebpackWebpack: 의존 관계에 있는 자바스크립트, CSS, 이미지 등의 리소스들을 하나(또는 여러 개)의 파일로 번들링하는 모듈 번들러Webpack을 사용하면 의존 모듈이 하나의 파일로 번들링되므로 별도의 모듈 로더가 필요 없음여러 개의 자바스크립트 파일을 하나로 번들.. 공감수 3 댓글수 2 2024. 10. 17.
  • [JS] 모듈 📌 모듈의 일반적 의미모듈(module): 애플리케이션을 구성하는 개별적 요소로서 재사용 가능한 코드 조각모듈이 성립하려면 모듈은 자신만의 파일 스코프(모듈 스코프)를 가질 수 있어야 함자신만의 파일 스코프를 갖는 모듈의 모든 자산은 캡슐화되어 다른 모듈에서 접근할 수 없음즉, 모듈은 개별적 존재로서 애플리케이션과 분리되어 존재함 모듈은 export 키워드를 통해 공개가 필요한 자산에 한정하여 명시적으로 선택적 공개할 수 있음모듈 사용자: 공개된 모듈의 자산을 사용하는 모듈모듈 사용자는 import 키워드를 통해 모듈이 공개한 자산 중 일부 또는 전체를 선택해 자신의 스코프 내로 불러들여 재사용할 수 있음모듈은 기능별로 분리되어 개별적인 파일로 작성되기 때문에 코드의 단위를 명확히 분리하여 애플리케이션.. 공감수 1 댓글수 0 2024. 10. 16.
  • [JS] 에러 처리 📌 에러 처리의 필요성에러나 예외적인 상황에 대응하지 않으면 프로그램은 강제 종료될 수 있음작성한 코드에서 언제나 에러나 예외적인 상황이 발생할 수 있다는 것을 전제하고 이에 대응하는 코드를 작성하는 것이 필요함 📌 try ...  catch ... finally 문try ...  catch ... finally 문으로 에러 핸들링을 할 수 있음try ...  catch ... finally 문을 실행하면 먼저 try 코드 블록이 실행되고, try 코드 블록에 포함된 문 중에서 에러 발생 시 발생한 에러는 catch 문의 err 변수에 전달되고 catch 코드 블록이 실행됨finally 코드 블록은 에러 발생과 상관없이 반드시 한 번 실행됨try { // 실행할 코드} catch (err) { /.. 공감수 0 댓글수 0 2024. 10. 13.
  • [JS] 제너레이터와 async / await 📌 제너레이터란?제너레이터(generator): 코드 블록의 실행을 일시 중지했다가 필요한 시점에 재개할 수 있는 특수한 함수제너레이터와 일반 함수의 차이:제너레이터 함수는 함수 호출자에게 함수 실행의 제어권을 양도할 수 있음제너레이터 함수는 함수 호출자와 함수의 상태를 주고받을 수 있음제너레이터 함수를 호출하면 제너레이터 객체를 반환함 📌 제너레이터 함수의 정의제너레이터 함수는 function* 키워드로 선언하며, 하나 이상의 yield 표현식을 포함함애스터리스크(*)의 위치는 fuction 키워드와 함수 이름 사이라면 어디든 상관 없지만 일반적으로 function 키워드 바로 뒤에 붙여서 사용함제너레이터 함수는 화살표 함수로 정의할 수 없음제너레이터 함수는 new 연산자와 함께 생성자 함수로 호출.. 공감수 1 댓글수 0 2024. 10. 13.
  • [JS] 프로미스 📌 프로미스 (Promise)프로미스(Promise): 비동기 작업이 맞이할 미래의 완료 또는 실패와 그 결과값을 나타내는 객체프로미스는 전통적인 콜백 패턴이 가진 단점을 보완하며 비동기 처리 시점을 명확하게 표현할 수 있음 📌 비동기 처리를 위한 콜백 패턴의 단점콜백 헬비동기 함수를 호출하면 함수 내부의 비동기로 동작하는 코드가 완료되지 않았다 해도 기다리지 않고 즉시 종료되어 비동기 함수 내부의 비동기로 동작하는 코드에서 처리 결과를 외부로 반환하거나 상위 스코프의 변수에 할당할 시 기대한 대로 동작되지 않음-> 비동기 함수는 비동기 처리 결과를 외부에 반환할 수 없고, 상위 스코프의 변수에 할당할 수도 없음비동기 함수의 처리 결과에 대한 후속 처리는 비동기 함수 내부에서 수행해야 하기 때문에 비.. 공감수 1 댓글수 2 2024. 9. 30.
  • [JS] REST API 📌 REST APIREST(REpresentational State Transfer): HTTP를 기반으로 클라이언트가 서버의 리소스에 접근하는 방식을 규정한 아키텍처REST API: REST를 기반으로 서비스 API를 구현한 것 📌 REST API의 구성구성 요소내용표현 방법자원 (resource)자원URI (엔드포인트)행위 (verb)자원에 대한 행위HTTP 요청 메서드표현 (representations)자원에 대한 행위의 구체적 내용페이로드 📌 REST API 설계 원칙1. URI는 리소스를 표현해야 한다.리소스를 식별할 수 있는 이름은 동사보다는 명사를 사용함이름에 get 같은 행위에 대한 표현이 들어가서는 안됨# badGET /getTodos/1GET /todos/show/1# goodGE.. 공감수 0 댓글수 0 2024. 9. 25.
  • [JS] Ajax 📌 Ajax란?Ajax(Asynchronous JavaScript and XML): 자바스크립트를 사용하여 브라우저가 서버에게 비동기 방식으로 데이터를 요청하고, 서버가 응답한 데이터를 수신하여 웹페이지를 동적으로 갱신하는 프로그래밍 방식Ajax는 브라우저에서 제공하는 Web API인 XMLHttpRequest 객체를 기반으로 동작함XMLHttpRequest는 HTTP 비동기 통신을 위한 메서드와 프로퍼티를 제공함Ajax의 등장으로 이전의 전통적인 방식(화면이 전환되면 서버로부터 새로운 HTML을 전송받아 웹페이지 전체를 처음부터 가시 렌더링하는 방식)이 획기적으로 전환함Ajax의 장점:변경할 부분을 갱신하는 데 필요한 데이터만 서버로부터 전송받기 때문에 불필요한 데이터 통신이 발생하지 않음변경할 필요.. 공감수 0 댓글수 0 2024. 9. 24.
  • [JS] 비동기 프로그래밍 📌 동기 처리와 비동기 처리자바스크립트 엔진은 단 하나의 실행 컨텍스트 스택을 갖기 때문에 동시에 2개 이상의 함수를 동시에 실행할 수 없음실행 컨텍스트 스택의 최상위 요소인 "실행 중인 실행 컨텍스트"를 제외한 모든 실행 컨텍스트는 모두 실행 대기 중인 태스크(task)들임대기 중인 태스크들은 현재 실행 중인 실행 컨텍스트가 pop 되어 실행 컨텍스트 스택에서 제거되어야 실행되기 시작함자바스크입트 엔진은 싱글스레드(single thread) 방식으로 동작함싱글 스레드 방식은 한 번에 하나의 태스크만 실행할 수 있기 때문에 처리에 시간이 걸리는 태스크를 실행하는 경우 블로킹(blocking, 작업 중단)이 발생함 동기(synchronous) 처리: 현재 실행 중인 태스크가 종료할 때까지 다음에 실행될 태.. 공감수 0 댓글수 2 2024. 9. 24.
  • [JS] 타이머 📌 호출 스케줄링호출 스케줄링(Scheduling a Call): 함수를 명시적으로 호출하지 않고 일정 시간이 경과된 이후에 호출되도록 타이머 함수를 이용해 함수 호출을 예약하는 것타이머를 생성할 수 있는 타이머 함수: setTimeout, setInterval타이머를 제거할 수 있는 타이머 함수: clearTimeout, clearInterval타이머 함수 setTimeout과 setInterval이 생성한 타이머가 만료되면 콜백 함수가 호출됨setTimeout 함수가 생성한 타이머는 단 한 번 동작하고, setInterval 함수가 생성한 타이머는 반복 동작함자바스크립트 엔진은 싱글 스레드(single thread)로 동작하기 때문에 타이머 함수 setTimeout과 setInterval은 비동기(.. 공감수 0 댓글수 0 2024. 9. 20.
  • [JS] 이벤트 📌 이벤트 드리븐 프로그래밍이벤트 핸들러(event handler): 이벤트가 발생했을 때 호출될 함수이벤트 핸들러 등록: 이벤트가 발생했을 때 브라우저에게 이벤트 핸들러의 호출을 위임하는 것이벤트 드리븐 프로글래밍(event-driven programming): 프로그램의 흐름을 이벤트 중심으로 제어하는 프로그래밍 방식. 이벤트와 그에 대응하는 함수를 통해 사용자와 애플리케이션은 상호작용 할 수 있음 📌 이벤트 타입이벤트 타입(event type): 이벤트의 종류를 나타내는 문자열 마우스 이벤트이벤트 타입이벤트 발생 시점click마우스 버튼을 클릭했을 때dbclick마우스 버튼을 더블 클릭했을 때mousedown마우스 버튼을 눌렀을 때mouseup누르고 있던 마우스 버튼을 놓았을 때mousemove.. 공감수 3 댓글수 5 2024. 9. 7.
  • [JS] DOM 📌 DOMDOM(Document Object Model): HTML 문서의 계층적 구조와 정보를 표현하며 이를 제어할 수 있는 API, 즉 프로퍼티와 메서드를 제공하는 트리 자료구조노드 객체들로 구성된 트리 자료구조 📌 노드HTML 요소와 노드 객체HTML 요소: HTML 문서를 구성하는 개별적인 요소HTML 요소는 렌더링 엔진에 의해 파싱되어 DOM을 구성하는 요소 노드 객체로 변환됨HTML 문서는 HTML 요소들의 집합으로 이뤄지며, HTML 요소는 중첩 관계를 가짐HTML 요소 간에는 중첩 관계에 의해 계층적인 부자(parent-child) 관계가 형성됨HTML 요소 간의 부자 관계를 반영하여 HTML 문서의 구성 요소인 HTML 요소를 객체화한 모든 노드 객체들을 트리 자료 구조로 구성함트리 .. 공감수 0 댓글수 0 2024. 8. 26.
  • [JS] 브라우저의 렌더링 과정 📌 브라우저의 렌더링 과정 브라우저는 HTML, CSS, 자바스크립트, 이미지, 폰트 파일 등 렌더링에 필요한 리소스를 요청하고 서버로부터 응답을 받음브라우저의 렌더링 엔진은 서버로부터 응답된 HTML과 CSS를 파싱하여 DOM과 CSSOM을 생성하고 이들을 결합하여 렌더 트리를 생성함브라우저의 자바스크립트 엔진은 서버로부터 응답된 자바스크립트를 파싱하여 AST(Abstract Syntax Tree)를 생성하고 바이트코드로 변환하여 실행함이때 자바스크립트는 DOM API를 통해 DOM이나 CSSOM을 변경할 수 있으며, 변경된 DOM이나 CSSOM은 다시 렌더 트리로 결합됨렌더 트리를 기반으로 HTML 요소의 레이아웃(위치와 크기)을 계산하고 브라우저 화면에 계산된 레이아웃을 기반으로 HTML 요소를 .. 공감수 0 댓글수 0 2024. 8. 19.
  • [JS] Map 📌 Map 객체Map 객체: 키와 값의 쌍으로 이루어진 컬렉션객체와 Map 객체의 차이객체Map 객체키로 사용할 수 있는 값문자열 또는 심벌 값객체를 포함한 모든 값이터러블XO요소 개수 확인Object.keys(obj).lengthmap.size 📌 Map 객체의 생성Map 객체는 Map 생성자 함수로 생성함Map 생성자 함수에 인수를 전달하지 않으면 빈 Map 객체가 생성됨Map 생성자 함수는 이터러블을 인수로 전달받아 Map 객체를 생성하며, 이때 인수로 전달되는 이터러블은 키와 값의 쌍으로 이루어진 요소로 구성되어야 함Map 객체에는 중복된 키를 갖는 요소가 존재할 수 없음// Map 객체의 생성const map1 = new Map();console.log(map1); // Map(0) {siz.. 공감수 0 댓글수 0 2024. 8. 18.
  • [JS] Set 📌 Set 객체Set 객체: 중복되지 않는 유일한 값들의 집합Set은 수학적 집합을 구현하기 위한 자료구조배열과 Set 객체의 차이배열Set 객체동일한 값을 중복하여 포함할 수 있음OX요소 순서에 의미가 있음OX인덱스로 요소에 접근할 수 있음OX  📌 Set 객체의 생성Set 객체는 Set 생성자 함수로 생성함Set 생성자 함수에 인수를 전달하지 않으면 빈 Set 객체가 생성됨Set 생성자 함수는 이터러블을 인수로 전달받아 Set 객체를 생성함이때 이터러블의 중복된 값은 Set 객체에 요소로 저장되지 않음중복을 허용하지 않는 Set 객체의 특성을 활용해 배열에서 중복된 요소를 제거할 수 있음// Set 객체의 생성const set1 = new Set();console.log(set1); // Set(.. 공감수 0 댓글수 0 2024. 8. 18.
  • [JS] 디스트럭처링 할당 📌 디스트럭처링 할당디스트럭처링 할당(Destructuring Assignment, 구조 분해 할당): 구조화된 배열과 같은 이터러블 또는 객체를 destructuring(비구조화, 구조 파괴)하여 1개 이상의 변수에 개별적으로 할당하는 것배열과 같은 이터러블 또는 객체 리터럴에서 필요한 값만 추출하여 변수에 할당할 때 유용함 📌 배열 디스트럭처링 할당ES6의 배열 디스트럭처링 할당은 배열의 각 요소를 배열로부터 추출하여 1개 이상의 변수에 할당함배열 디스트럭처링 할당의 대상(할당문의 우변)은 이터러블이어야 하며, 할당 기준은 배열의 인덱스임(우변에 이터러블을 할당하지 않으면 에러가 발생함)배열 디스트럭처링 할당을 위해서는 할당 연산자 왼쪽에 값을 할당받을 변수를 선언해야 하며, 변수는 배열 리터럴 .. 공감수 0 댓글수 0 2024. 8. 7.
  • [JS] 스프레드 문법 📌 스프레드 문법ES6에 도입된 스프레드 문법(전개 문법) ... 은 하나로 뭉쳐 있는 여러 값들의 집합을 펼쳐서(전개, 분산하여, spread) 개별적인 값들의 목록으로 만듦스프레드 문법을 사용할 수 있는 대상은 Array, String, Map, Set, DOM 컬렉션(NodeList, HTMLCollection), arguments와 같이 for ... of 문으로 순회할 수 있는 이터러블에 한정됨스프레드 문법 ... 은 피연산자를 연산하여 값을 생성하는 연산자가 아니기 때문에 스프레드 문법의 결과는 값으로 사용할 수 없으며 변수에 할당할 수 없음스프레드 문법의 결과물은 함수 호출문의 인수 목록, 배열 리터럴의 요소 목록, 객체 리터럴의 프로퍼티 목록과 같이 쉼표로 구분한 값의 목록을 사용하는 문.. 공감수 0 댓글수 0 2024. 8. 6.
  • [JS] 이터러블 📌 이터레이션 프로토콜이터레이션 프로토콜(Iteration Protocol): 순회 가능한 데이터 컬렉션(자료구조)을 만들기 위해 ECMAScript 사양에 정의하여 미리 약속한 규칙ES6에서는 순회 가능한 데이터 컬렉션을 이터레이션 프로토콜을 준수하는 이터러블로 통일하여 for ... of 문, 스프레드 문법, 배열 디스트럭처링 할당의 대상으로 사용할 수 있도록 일원화함이터러블 프로토콜(Iterable Protocol): Well-known Symbol인 Symbol.iterator를 프로퍼티 키로 사용한 메서드를 직접 구현하거나 프로토타입 체인을 통해 상속받은 Symbol.iterator 메서드를 호출하면 이터레이터 프로토콜을 준수한 이터레이터를 반환함이터레이터 프로토콜(Iterator Protoc.. 공감수 0 댓글수 0 2024. 7. 31.
  • [JS] 7번째 데이터 타입 Symbol 📌 심벌이란?심벌(Symbol): ES6에서 도입된 7번째 데이터 타입. 변경 불가능한 원시 타입의 값심벌 값은 다른 값과 중복되지 않는 유일무이한 값으로, 주로 이름의 충돌 위험이 없는 유일한 프로퍼티 키를 만들기 위해 사용함 📌 심벌 값의 생성Symbol 함수심벌 값은 Symbol 함수를 호출하여 생성해야 함생성된 심벌 값은 외부로 노출되지 않아 확인할 수 없으며, 다른 값과 절대 중복되지 않는 유일무이한 값임Symbol 함수는 String, Number, Boolean 생성자 함수와는 달리 new 연산자와 함께 호출하지 않음const mySymbol = Symbol();console.log(typeof mySymbol); // symbolconsole.log(mySymbol); // Symbol.. 공감수 1 댓글수 0 2024. 7. 27.
  • [JS] String 📌 String 생성자 함수표준 빌트인 객체인 String 객체는 생성자 함수 객체이므로 new 연산자와 함께 호출하여 String 인스턴스를 생성할 수 있음String 생성자 함수에 인수를 전달하지 않고 new 연산자와 함께 호출: [[StringData]] 내부 슬롯에 빈 문자열을 할당한 String 래퍼 객체를 생성함String 생성자 함수의 인수로 문자열을 전달하면서 new 연산자와 함께 호출: [[StringData]] 내부 슬롯에 인수로 전달받은 문자열을 할당한 String 래퍼 객체를 생성함String 생성자 함수의 인수로 문자열이 아닌 값을 전달하면서 new 연산자와 함께 호출: 인수를 문자열로 강제 변환한 후, [[StringData]] 내부 슬롯에 변환된 문자열을 할당한 String .. 공감수 0 댓글수 0 2024. 7. 24.
  • [JS] RegExp 📌 정규 표현식이란?정규 표현식(Regular Expression): 일정한 패턴을 가진 문자열의 집합을 표현하기 위해 사용하는 형식 언어(formal language)정규 표현식은 문자열을 대상으로 패턴 매칭 기능을 제공함패턴 매칭 기능: 특정 패턴과 일치하는 문자열을 검색하거나 추출 또는 치환할 수 있는 기능정규 표현식을 사용하면 반복문과 조건문 없이 패턴을 정의하고 테스트하는 것으로 간단히 체크할 수 있음 📌 정규 표현식의 생성정규 표현식 객체(RegExp 객체)를 생성하기 위해서는 정규 표현식 리터럴과 RegExp 생성자 함수를 사용할 수 있음정규 표현식 리터럴은 패턴과 플래그로 구성됨RegExp 생성자 함수를 사용하여 RegExp 객체를 생성할 수도 있음RegExp 생성자 함수를 사용하면 변.. 공감수 0 댓글수 4 2024. 7. 22.
  • [JS] Date 📌 표준 빌트인 객체 DateDate는 날짜와 시간(연, 월, 일, 시, 분, 초, 밀리초)을 위한 메서드를 제공하는 빌트인 객체이면서 생성자 함수임Date 객체는 UTC(협정 세계시, 기술적인 표기에서 사용됨)를 사용함현재 날짜와 시간은 자바스크립트 코드가 실행된 시스템의 시계에 의해 결정됨 📌 Date 생성자 함수Date 생성자 함수로 생성한 Date 객체는 내부적으로 날짜와 시간을 나타내는 정수값을 가짐(1970년 1월 1일 00:00:00(UTC)을 기점으로 Date 객체가 나타내는 날짜와 시간까지의 밀리초)Date 생성자 함수로 생성한 Date 객체는 기본적으로 현재 날짜와 시간을 나타내는 정수값을 가지며, 다른 날짜와 시간을 다루고 싶은 경우 Date 생성자 함수에 명시적으로 해당 날짜와 .. 공감수 0 댓글수 0 2024. 7. 22.
  • [JS] Math 📌 표준 빌트인 객체 MathMath는 수학적 상수와 함수를 위한 프로퍼티와 메서드를 제공함Math는 생성자 함수가 아니기 때문에 정적 프로퍼티와 정적 메서드만 제공함 📌 Math 프로퍼티Math.PI원주율 PI 값 (π ≈ 3.141592653589793)을 반환함Math.PI; // -> 3.141592653589793 📌 Math 메서드Math.absMath.abs 메서드는 인수로 전달된 숫자의 절대값을 반환함절대값은 반드시 0 또는 양수여야 함Math.abs(-1); // -> 1Math.abs(1); // -> 1Math.abs(''); // -> 0Math.abs([]); // -> 0Math.abs(null); // -> 0Math.abs(undefined); // -> NaNMath... 공감수 0 댓글수 2 2024. 7. 19.
  • [JS] Number 📌 Number 생성자 함수Numer 객체는 생성자 함수이기 때문에 new 연산자와 함께 호출하여 Number 인스턴스를 생성할 수 있음Number 생성자 함수에 인수를 전달하지 않고 new 연산자와 함께 호출하면 [[NumberData]] 내부 슬롯에 0을 할당한 Number 래퍼 객체를 생성함Number 생성자 함수의 인수로 숫자를 전달하면서 new 연산자와 함께 호출하면 [[NumberData]] 내부 슬롯에 인수로 전달받은 숫자를 할당한 Number 래퍼 객체를 생성함Number 생성자 함수의 인수로 숫자가 아닌 값을 전달하면 인수를 숫자로 강제 변환한 후 [[NumberData]] 내부 슬롯에 변환된 숫자를 할당한 Number 래퍼 객체를 생성함(인수를 숫자로 변환할 수 없다면 NaN을 [[N.. 공감수 0 댓글수 0 2024. 7. 17.
  • [JS] 배열 📌 배열배열(array): 여러 개의 값을 순차적으로 나열한 자료구조요소(element): 배열이 가지고 있는 값인덱스(index): 배열의 요소가 갖는 배열에서 자신의 위치를 나타내는 0 이상의 정수값배열은 요소의 개수, 즉 배열의 길이를 나타내는 length 프로퍼티를 가짐배열은 배열 리터럴, Array 생성자 함수, Array.of, Array.from 메서드로 생성할 수 있음배열은 인덱스와 length 프로퍼티를 가져 반복문을 통해 순차적으로 값에 접근하기 적합한 자료구조임객체와 배열의 차이객체배열구조프로퍼티 키와 프로퍼티 값인덱스와 요소값의 참조프로퍼티 키인덱스값의 순서XOlength 프로퍼티XO const arr = ['apple', 'banana', 'orange'];arr.length; .. 공감수 0 댓글수 0 2024. 7. 10.
  • [JS] ES6 함수의 추가 기능 📌 ES6 함수의 구분ES6 함수의 구분constructorprototypesuperarguments일반 함수 (Normal)OOXO메서드 (Method)XXOO화살표 함수 (Arrow)XXXX 📌 메서드ES6 사양에서 메서드는 메서드 축약 표현으로 정의된 함수만을 의미함ES6 메서드는 인스턴스를 생성할 수 없는 non-constructor이므로 prototype 프로퍼티가 없고 프로토타입도 생성하지 않음ES6 메서드는 자신을 바인딩한 객체를 가리키는 내부 슬롯 [[HomeObject]]를 가짐 (super 키워드 사용 가능)ES6 메서드는 본연의 기능(super)을 추가하고 의미적으로 맞지 않는 기능(constructor)은 제거함const obj = { x: 1, // foo는 메서드 f.. 공감수 0 댓글수 0 2024. 7. 1.
  • [JS] 클래스 📌 클래스와 생성자 함수의 차이클래스생성자 함수new 연산자 없이 호출하면 에러 발생함new 연산자 없이 호출하면 일반 함수로서 호출됨상속을 지원하는 extends와 super 키워드 제공(상속 관계를 구현을 더 간결하고 명료하게 함)extends와 super 키워드 지원 X호이스팅이 발생하지 않는 것처럼 동작함함수 선언문으로 정의된 경우 함수 호이스팅,함수 표현식으로 정의된 경우 변수 호이스팅 발생암묵적으로 strict mode가 적용됨암묵적으로 strict mode 적용 Xconstructor, 프로토타입 메서드, 정적 메서드의프로퍼티 어트리뷰트 [[Enumable] 값이 모두 false임프로퍼티 어트리뷰트 [[Enumable] 값이 true임 📌 클래스  정의class 키워드를 사용해 정의함표현.. 공감수 0 댓글수 2 2024. 6. 13.
  • [JS] 클로저 📌 렉시컬 스코프렉시컬 스코프: 함수를 어디에 정의했는지에 따라 상위 스코프를 결정하는 것함수의 상위 스코프를 함수를 정의한 위치에 의해 정적으로 결정되고 변하지 않음렉시컬 환경은 자신의 '외부 렉시컬 환경에 대한 참조'를 통해 상위 렉시컬 환경과 연결됨렉시컬 환경의 '외부 렉시컬 환경에 대한 참조'에 저장할 값, 즉 상위 스코프에 대한 참조는 함수 정의가 평가되는 시점에 함수가 정의된 환경(위치)에 의해 결정됨 📌 함수 객체의 내부 슬롯 [[Environment]]함수는 자신의 내부 슬롯 [[Environment]]에 자신이 정의된 환경(상위 스코프)의 참조를 저장함함수 객체는 자신이 존재하는 한 내부 슬롯 [[Environment]]에 저장한 렉시컬 환경의 참조(상위 스코프)를 기억함외부 렉시컬 .. 공감수 0 댓글수 0 2024. 6. 2.
  • [JS] 실행 컨텍스트 📌 소스코드의 타입소스코드의 타입에 따라 실행 컨텍스트를 생성하는 과정과 내용이 다름전역 코드(global code):전역에 존재하는 소스코드전역 변수를 관리하기 위해 최상위 스코프인 전역 스코프를 생성해야 함var 키워드로 선언된 전역 변수와 함수 선언문으로 정의된 전역 함수를 전역 객체의 프로퍼티와 메서드로 바인딩하고 참조하기 위해 전역 객체와 연결돼야 함전역 코드가 평가되면 전역 실행 컨텍스트가 생성됨함수 코드(function code): 함수 내부에 존재하는 소스코드지역 스코프를 생성하고 지역 변수, 매개변수, arguments 객체를 관리해야 함생성한 지역 스코프를 전역 스코프에서 시작하는 스코프 체인의 일원으로 연결해야 함함수 코드가 평가되면 함수 실행 컨텍스트가 생성됨eval 코드(eval.. 공감수 0 댓글수 0 2024. 5. 26.
  • [JS] this 📌 this 키워드this: 자신이 속한 객체 또는 자신이 생성할 인스턴스를 가리키는 자기 참조 변수this를 통해 자신이 속한 객체 또는 자신이 생성할 인스턴스의 프로퍼티나 메서드를 참조할 수 있음자바스크립트의 this는 함수가 호출되는 방식에 따라 this에 바인딩될 값, 즉 this 바인딩이 함수 호출 방식에 의해 동적으로 결정됨레시컬 스코프는 함수 정의가 평가되어 함수 객체가 생성되는 시점에 상위 스코프를 결정하는 반면 this 바인딩은 함수 호출 시점에 결정됨 📌 함수 호출 방식과 this 바인딩1. 일반 함수 호출일반 함수로 호출하면 함수 내부의 this에는 전역 객체가 바인딩됨 (기본적으로 this에는 전역 객체가 바인딩됨)strict mode가 적용된 일반 함수 내부의 this에는 un.. 공감수 0 댓글수 0 2024. 5. 14.
  • [JS] 빌트인 객체 📌 자바스크립트 객체의 분류표준 빌트인 객체ECMAScript 사양에 정의된 객체자바스크립트 실행 환경과 관계없이 언제나 사용할 수 있음전역 객체의 프로퍼티로서 제공되기 때문에 별도의 선언 없이 전역 변수처럼 언제나 참조할 수 있음호스트 객체ECMAScript 사양에 정의되에 있지 않지만 자바스크립트 실행 환경에서 추가로 제공하는 객체브라우저 환경 -> 호스트 객체로 클라이언트 사이드 Web API 제공Node.js 환경 -> Node.js 고유의 API를 호스트 객체로 제공함사용자 정의 객체기본 제공 객체가 아닌 사용자가 직접 정의한 객체 📌 표준 빌트인 객체자바스크립트는 Object, String, Number, Boolean, Symbol, Date, Math, RegExp, Array, Map.. 공감수 0 댓글수 0 2024. 5. 12.
    문의안내
    • 티스토리
    • 로그인
    • 고객센터

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

    © Kakao Corp.