개발 이야기/front-end (18) 썸네일형 리스트형 자바스크립트 실행컨텍스트#2 - 코드의 실행과 관리 | 코드 평가, 실행, 실행의 결과는 어떻게 관리되는가 실행 컨텍스트 실행 컨텍스트, 알아두면 좋은 이유 식별자와 값의 바인딩을 관리하는 방식 호이스팅 발생 이유 클로저 동작 방식 이벤트 핸들러와 비동기 처리의 동작 방식 등 실행 컨텍스트를 알면 자바스크립트의 동작 원리를 이해할 수 있다. 이번 포스팅에서는 이해하기 조금 어려운 용어들이 나온다. 만약 환경 레코드에 대해 더 자세히 알고 싶다면 이 포스팅을 참고하면 된다. 🧚♀️모던 자바스크립트 딥 다이브 23장과 ECMAscript 스펙 참고하여 작성. 실행 컨텍스트의 구성 실행 컨텍스트는 '코드 평가 state', 'Function', 'Realm', 'ScriptOrModule' 네 개의 State 컴포넌트로 구성된다. 코드 평가 state(code evaluation state): 실행컨텍스트의 코드.. 자바스크립트 실행컨텍스트#1 - 환경 레코드 | 변수의 저장과 참조 방식 실행 컨텍스트를 배우기 앞서, 실행 컨텍스트를 구성하는 컴포넌트 중 하나인 *렉시컬 환경의 '환경 레코드(Environment Record)'를 알아보자. *렉시컬 환경(Lexical Environment): 식별자와 값을 관리하고, 외부 상위 스코프에 대한 참조를 기록하는 데 사용하는 자료구조. 환경 레코드와 외부 렉시컬 환경 참조에 대한 정보로 구성되어 있다. 환경 레코드(Environment Record) 환경레코드란? 🧚♀️ Environment Record is a specification type used to define the association of Identifiers to specific variables and functions, based upon the lexical nest.. phaser로 만든 웹 게임 데모 - 로즈마리오 로즈마리오 typescript, phaser 객체, 맵 이미지는 phaser3-example 레파지토리에서 가져옴 [Javascript] shallow copy, deep copy | 원시값과 객체의 copy 얕은 복사는 한 단계까지만 복사하고, 깊은 복사는 객체에 중첩된 객체까지 모두 복사한다. 얕은 복사를 하면 같은 객체를 참조함으로써 서로 영향을 주고, 깊은 복사는 별개의 값으로서 서로 영향을 주지 않는다. 이번 포스팅에서는 원시값과 객체의 특징을 알아보고 객체의 얇은 복사와 깊은 복사가 왜 이런 결과가 나오는지 다룬다. 원시값의 불변성 원시값(primitive)은 변경 불가능한 불변의 값이다. 원시값에는 String, Number, undefined, Boolean, Symbol, BigInt 6종류가 존재한다. 변수 변경 ≠ 원시값의 변경 변수 값이 변경되는 것을 원시값이 변경된다고 생각하면 안된다. 이전 포스팅에서 변수는 값을 담고 있는 메모리 공간 자체 또는 그 메모리 공간의 주소를 가리키는 식별.. Symbol을 사용하는 이유는 뭘까 | symbol usage ECMAScript로 표준화된 이후로 자바스크립트에는 string, number, boolean, null, undefined, object 6개의 데이터 타입이 있었다. 그리고 es6에서 새로운 데이터 타입 Symbol이 추가 되었다. symbol은 무엇이고 언제 사용하는 걸까? What is Symbol? 심볼, Symbol 심볼은 변경 불가능한 원시 타입의 값이며, 다른 값과 중복되지 않는 고유한 값이다. 심볼 값은 충돌 위험이 없는 오브젝트의 유일한 프로퍼티 키를 만들기 위해서 사용할 수 있다. 하위호환성을 유지하면서 표준을 확장한다든지, 고유한 상수값을 만드는 데 사용할 수 있다. const symbolA = Symbol('symbol') const symbolB = Symbol('symbol'.. 자바스크립트 범용화와 모듈 시스템 | ESM, CommonJS 모듈의 필요성 모듈은 기능에 따라 파일 별로 분리한 코드 조각을 말한다. 한 파일 내에 모든 코드를 관리한다면 변수나 함수가 중복되거나 다른 기능의 코드끼리 영향을 줄 수 있다. 따라서 기능 별로 코드를 분리해서 여러 파일로 나눈 뒤, 최종적으로 실행할 main 함수가 있는 파일에서 코드를 불러와 사용한다. 이때 분리된 파일끼리도 서로 영향이 없어야 한다. 예를 들어 A와 B 파일에서 전역변수 x를 선언했을 때 x가 덮어씌워지거나 하면 안된다. 따라서 *각 모듈은 자신만의 모듈 스코프를 가져야 한다. *스코프: 코드가 영향을 끼치는 범위 자바스크립트의 모듈 시스템 자바스크립트는 원래 웹페이지 내 보조 작업을 처리하기 위한 언어였다. 때문에 다른 프로그래밍 언어와 달리 모듈 시스템이 없다. 브라우저 내에서.. 변수와 표현식, 명령문 | Modern Javascript Deep Dive 4, 5장 책 Modern Javascript Deep Dive 4, 5장 내용 정리 변수란 무엇인가? 변수는 하나의 값을 저장하기 위해 확보한 메모리 공간 자체, 또는 그 메모리 공간을 식별하기 위해 붙인 이름을 말한다. 컴퓨터는 사람의 뇌처럼 연산에 필요한 데이터를 메모리 공간에 저장해놓고 연산할 때마다 메모리 주소에 있는 값을 참조하여 사용한다. 그렇게 하려면 메모리 공간의 주소를 알고 있어야 하는데, 변수는 메모리 주소를 가리킨다. 변수는 즉 값의 위치를 가리키는 이름이다. 변수 이름 식별자는 어떤 값을 구별해서 식별할 수 있는 고유한 이름을 말한다. 나라는 사람을 '홍두깨'라고 불러서 구분하는 것처럼 **메모리에 저장된 값을 식별할 수 있는 이름을 '변수 이름'**이라 한다. 그리고 **변수에 저장된 값을.. 자바스크립트의 역사 | EveryWhere Javascript가 되기까지 브라우저에서 동작하는 프로그래밍 언어였던 자바스크립트는 범용 프로그래밍 언어가 되기까지 ECMAScript, CommonJS 등 표준화를 거쳐왔다. 지금은 이 표준을 기반으로 자바스크립트는 어디에서나 사용할 수 있는 언어가 되었다. 자바스크립트의 역사를 보면 다른 언어들에 비해 프로그래밍 언어로서의 기반이 부족했던 자바스크립트가 범용 프로그래밍 언어로서의 자질을 갖추기 위해 어떤 과정을 거쳐왔는지 알 수 있다. Netscape와 Sun Microsystems가 Javascript 발표 1995년 넷스케이프(Netscape)는 동적인 웹 페이지를 만들기 위해서 브라우저에서 동작하는 가벼운 프로그래밍 언어를 만들기로 한다. 넷스케이프의 브랜든 아이크(Brendan Eich)가 스크립트 언어를 만들기 시작해 .. PR 날릴 때마다 번들 사이즈 측정하는 법 | size-limit, compressed-size-action size-limit 사용 계기 리액트 번들 사이즈 최적화 Bundle Size 최적화 참고: https://dev.to/mbernardeau/6-tips-to-optimize-bundle-size-50n9 default import 사용 default import와 member style import(global import) 했을 때 가져오는 파일 사이즈가 다르다... another-light.tistory.com 이전 포스팅에서는 bundle analyzer로 분석해 덩치가 큰 라이브러리를 가벼운 것으로 대체했다. 이렇게 사후약방문하기보다는 미리 번들 사이즈가 커지는 것을 예방할 방법이 없을까? analyze로 일일이 번들 사이즈를 추적하지 않고, PR을 날릴 때 기존보다 번들 사이즈가 얼마나 많아졌.. css rendering2 | box-sizing? position:absolute? box-sizing을 content box로 했을 때와 border box로 했을 때 레이아웃이 다른 이유가 뭘까요? 하나의 div로 stitch border를 표현하려면 어떻게 할까요? position: absolute 속성을 쓰면 왜 엘리먼트가 엉뚱한 곳에 위치하는 일이 생길까요? modern box와 position을 통해 알아봅시다. 코드스피츠 css 렌더링 2 코드스피츠 css 렌더링 2 모던 박스 www.notion.so another-light.tistory.com/65 css rendering - 기본 레이아웃 | CSS 속성은 사실 OO이다? CSS란? CSS(Cascading Style Sheets)는 종속형 스타일 시트 언어입니다. *마크업 언어의 스타일을 웹사이트에 표현하는 데 사용.. 이전 1 2 다음
