분류 전체보기
![](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FblEbEm%2FbtsHBoZ4sn0%2FsLqMmvxP0DHuz0zrPjEOek%2Fimg.png)
[JS] 모던 자바스크립트 Deep Dive - 23. 실행 컨텍스트
소스코드의 타입소스코드의 타입설명전역 코드 (Global Code)전역에 존재하는 소스코드. 전역에 정의된 함수, 클래스 등의 내부 코드는 포함X함수 코드 (Function Code)함수 내부에 존재하는 소스코드. 함수 내부에 중첩된 함수, 클래스 등의 내부 코드는 포함Xeval 코드 (Eval Code)빌트인 전역 함수인 eval 함수에 인수로 전달되어 실행되는 소스코드모듈 코드 (Module Code)모듈 내부에 존재하는 소스코드. 모듈 내부의 함수, 클래스 등의 내부 코드는 포함X1️⃣ 전역 코드전역 변수를 관리하기 위해 최상위 스코프인 전역 스코프를 생성해야 한다. 전역 코드가 평가되면 전역 실행 컨텍스트가 생성된다. 2️⃣ 함수 코드함수 코드는 지역 스코프를 생성하고 지역 변수, 매개변수, ar..
![](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FoueKJ%2FbtsHwAMqugN%2FlEdFrbVDZlkCYXNeTmxc1K%2Fimg.png)
[C#] Inkspire - Map 기반 스토리 진행 시스템 구현
✒️Inkspire: GPT 생성 게임 스크립트 기반 사용자 맞춤형 텍스트 RPG [기획] Inkspire : NLP와 생성형 AI 기술을 사용한 텍스트 RPG서문 컴퓨터공학전공에 진입하고 열심히 커리큘럼을 쫓아 이런저런 과제를 청산하다 정신을 차려보니 어느덧 3학년 2학기를 수강하고 있는 빌리. 입학하고 전공을 선택하던 게 꼭 엊그제 같은billyboo.tistory.com 기획과 개발을 마치고 벌써 프로젝트 마무리 단계에 접어든 Inkspire.초기 기획을 실제 어플리케이션으로 구현하면서 정말 다양한 문제를 마주했지만, 그중에서 가장 해결하기 까다로웠던 문제를 고르라면 게임 플레이 시스템을 구축하는 과정을 고르고 싶다. 사실상 어플리케이션의 정체성과 게임성을 결정짓는 부분이라 개발 기간 외에 가장 ..
![](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FFNufI%2FbtsHt1W9vhA%2F0pv5tp9ai52cGufchh11c0%2Fimg.png)
[JS] 모던 자바스크립트 Deep Dive - 22. this
this 키워드자신이 속한 객체 또는 자신이 생성할 인스턴스를 가리키는 자기 참조 변수동작을 나타내는 메서드는 자신이 속한 객체의 상태, 즉 프로퍼티를 참조하고 변경할 수 있어야 한다. 메서드가 자신이 속한 객체의 프로퍼티를 참조하려면 먼저 자신이 속한 객체를 가리키는 식별자를 참조할 수 있어야 한다. this를 통해 자신이 속한 객체 또는 자신이 생성할 인스턴스의 프로퍼티나 메서드를 참조할 수 있다. this는 자바스크립트 엔진에 의해 암묵적으로 생성되며, 코드 어디서든 참조할 수 있다. 함수 내부에서 arguments 객체를 지역 변수처럼 사용할 수 있는 것처럼 this도 지역 변수처럼 사용할 수 있다. 단, this가 가리키는 값, 즉 this 바인딩은 함수 호출 방식에 의해 동적으로 결정된다. ?..
![](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FOwl3b%2FbtsHsHeGNzd%2FHngcxAIUsL3bWtkYdM8LU0%2Fimg.png)
[JS] 모던 자바스크립트 Deep Dive - 21. 빌트인 객체
자바스크립트 객체의 분류1️⃣ 표준 빌트인 객체 (Standard built-in objects / Native Objects / Global Objects)ECMAScript 사양에 정의된 객체를 말하며 어플리케이션 전역의 공통 기능을 제공한다.2️⃣ 호스트 객체 (Host Objects)ECMAScript 사양에 정의되어있지 않지만 자바스크립트 실행 환경에서 추가로 제공하는 객체를 말한다.3️⃣ 사용자 정의 객체 (User-defined Objects)표준 빌트인 객체와 호스트 객체처럼 기본 제공되는 객체가 아닌 사용자가 직접 정의한 객체를 말한다.표준 빌트인 객체자바스크립트는 Object, String, Number, Boolean, Symbol, Date, Math, RegExp, Array, M..
[JS] 모던 자바스크립트 Deep Dive - 20. Strict Mode
strict mode (엄격 모드)자바스크립트 언어의 문법을 조금 더 엄격하게 적용하여 오류를 발생시킬 가능성이 높거나 자바스크립트 엔진의 최적화 작업에 문제를 일으킬 수 있는 코드에 대해 명시적인 에러를 발생시킨다. strict mode의 적용전역의 선두 또는 함수 몸체의 선두에 'use strict';를 추가전역의 선두에 추가할 경우 스크립트 전체에 strict mode가 적용된다. 함수의 몸체의 선두에 추가하면 해당 함수와 중첩 함수에 strict mode가 적용된다. 코드의 선두에 'use strict';를 위치시키지 않으면 strict mode가 제대로 동작하지 않는다. 전역에 strict mode를 적용하는 것은 피하자전역에 적용한 strict mode는 스크립트 단위로 적용된다. 스크립트 단..
![](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FbXhJrc%2FbtsHmu6BLhL%2FdoBWJjLGzKSPPmFr6ePTF1%2Fimg.png)
[JS] 모던 자바스크립트 Deep Dive - 19. 프로토타입
자바스크립트는 명령형, 함수형, 프로토타입 기반 객체 지향 프로그래밍을 지원하는 멀티 패러다임 프로그래밍 언어이다. 즉, 객체 기반의 프로그래밍 언어이며 자바스크립트를 이루고 있는 거의 "모든 것"이 객체이다. 원시 타입의 값을 제외한 나머지 값들 (함수, 배열, 정규 표현식 등)은 모두 객체이다. 객체 지향 프로그래밍(OOP, Object Oriented Programming)절차지향적 관점에서 벗어나 여러 개의 독립적 단위, 즉 객체의 집합으로 프로그램을 표현하려는 프로그래밍 패러다임추상화 : 다양한 속성 중에서 프로그램에 필요한 속성만 간추려내어 표현하는 것객체 : 속성을 통해 여러 개의 값을 하나의 단위로 구성한 복합적인 자료구조즉, 객체지향 프로그래밍은 독립적인 객체의 집합으로 프로그램을 표현하..
![](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FVU3dY%2FbtsHduRX52h%2FmW1uRk0Ke4Hrv1WcHOhKO0%2Fimg.png)
[JS] 모던 자바스크립트 Deep Dive - 18. 함수와 일급 객체
일급 객체1️⃣ 무명의 리터럴로 생성할 수 있다. 즉, 런타임에 생성이 가능하다. 2️⃣ 변수나 자료구조(객체, 배열 등)에 저장할 수 있다.3️⃣ 함수의 매개변수에 전달할 수 있다.4️⃣ 함수의 반환값으로 사용할 수 있다. 자바스크립트의 함수는 위의 모든 조건을 만족하므로 일급 객체이다. 함수 객체의 프로퍼티함수는 객체이므로 프로퍼티를 가질 수 있다. console.dir 메서드를 사용하면 다음과 같이 함수 객체의 내부를 들여다볼 수 있다. function square(number) { return number * number;}console.dir(square);arguments, caller, length, name, prototype 프로퍼티는 모두 함수 객체의 데이터 프로퍼티이다. 하지만 __p..
![](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FdYNuKw%2FbtsHaTlUtS6%2Fk4QNFIyX18jJDaP0Z8MtKk%2Fimg.png)
[JS] 모던 자바스크립트 Deep Dive - 17. 생성자 함수에 의한 객체 생성
Object 생성자 함수 new 연산자와 함께 Object 생성자 함수를 호출하면 빈 객체를 생성하여 반환한다.빈 객체를 생성한 이후 프로퍼티 또는 메서드를 추가하여 객체를 완성할 수 있다. Object 생성자 함수 이외에도 String, Number, Boolean, Function, Array, Date, RegExp.Promise 등의 빌트인 생성자 함수를 제공한다. 객체를 생성하는 방법은 객체 리터럴을 사용하는 것이 더 간편하다. 특별한 이유가 없는 한 Object 생성자 함수를 사용하여 객체를 생성하는 방식은 유용하지 않다. 생성자 함수 (Constructor)new 연산자와 함께 호출하여 객체 (인스턴스)를 생성하는 함수인스턴스 (Instance)생성자 함수에 의해 생성된 객체✅객체 리터럴에 ..
![](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2F25xeP%2FbtsG2lVef1r%2FFq10MKg1EdH4XvBpIGNKeK%2Fimg.png)
[JS] 모던 자바스크립트 Deep Dive - 16. 프로퍼티 어트리뷰트
내부 슬롯과 내부 메서드이중 대괄호로 감싼 이름들자바스크립트 엔진의 구현 알고리즘을 설명하기 위해 ECMAScript 사양에서 사용하는 의사 프로퍼티(Pseudo Property)와 의사 메서드(Pseudo Method)이다. ECMAScript 사양에 등장하는 이중 대괄호로 감싼 이름들이 내부 슬롯과 내부 메서드이다. 내부 슬롯 & 내부 메서드 는 자바스크립트 엔진에서 실제로 동작하지만 개발자가 직접 접근할 수 있도록 외부로 공개된 객체의 프로퍼티는 아니다.즉, 자바스크립트 엔진의 내부 로직이므로 원칙적으로 자바스크립트는 내부 슬롯과 내부 메서드에 직접 접근하거나 호출할 수 있는 방법을 제공하지 않는다.단, 일부 내부 슬롯 & 메서드에 한하여 접근할 수 있는 수단을 제공한다.[[Prototype]] 내..
![](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2F8btAG%2FbtsGZa18MYi%2FGSK3sUUMVWCHhsXMJVWmR1%2Fimg.png)
[JS] 모던 자바스크립트 Deep Dive - 15. let const와 블록 레벨 스코프
var 키워드로 선언한 변수의 문제점✅ 변수 중복 선언 허용var 키워드로 선언한 변수는 중복 선언이 가능하다.동일한 이름의 변수가 이미 선언되어 있는 것을 모르고 변수를 중복 선언하면서 값까지 할당했다면 의도치 않게 먼저 선언된 변수 값이 변경되는 부작용이 발생한다. var x = 1; var y = 1; // var 키워드로 선언된 변수는 같은 스코프 내에서 중복 선언을 허용한다.// 초기화문이 있는 변수 선언문은 자바스크립트 엔진에 의해 var 키워드가 없는 것처럼 동작한다.var x = 100; // 초기화문이 없는 변수 선언문은 무시된다.var y; console.log(x); // 100console.log(y); // 1✅함수 레벨 스코프함수 외부에서 var 키워드로 선언한 변수는 코드 블록..