본문 바로가기

전체 글

[모던 자바스크립트] var, let, const 키워드와 스코프 ES5까지 변수를 선언하는 유일한 방법은 var 키워드를 사용하는 것이었다. 하지만 var는 같은 스코프 내에서도 중복 선언이 가능하기 때문에 의도치 않게 먼저 선언된 변수 값이 변경되는 부작용이 발생할 수도 있다. var는 함수 레벨 스코프를, let과 const는 블록 레벨 스코프를 가진다. 1. var 키워드 1. 1 변수 중복 선언 허용 : var 키워드로 선언한 변수는 중복 선언이 가능하다. ++ var 키워드로 선언한 변수를 중복 선언하면 초기화문 유무에 따라 다르게 동작한다. 초기화문이 있는 변수 선언문은 자바스크립트 엔진에 의해 var 키워드가 없는 것처럼 동작하고 초기화문이 없는 변수 선언문은 무시된다. 1. 2 함수 레벨 스코프 : 블록 레벨 스코프가 아니므로 코드 블록 내( if문, .. 더보기
[모던 자바스크립트] 스코프 1. 스코프란 무엇인가? 간단히 말해, 식별자가 유효한 범위이다. 설명을 덧붙이자면, 모든 식별자(변수 이름, 함수 이름, 클래스 이름)는 자신이 '선언'된 위치에 따라서 다른 코드가 식별자 자신을 '참조'할 수 있는 유효 범위가 결정되는데 이를 스코프라고 한다. 자바스크립트 엔진이 식별자를 검색할 때 사용하는 규칙이라고도 할 수 있다. 스코프(유효 범위)를 통해서 식별자인 변수 이름의 충돌을 방지하여 같은 이름의 변수를 사용할 수 있게한다. 따라서 같은 스코프 내에서의 식별자는 유일해야하지만, 다른 스코프에서는 같은 이름의 식별자를 사용할 수 있다. ⚠️ var 키워드로 선언된 변수는 같은 스코프 내에서도 식별자의 중복 선언이 허용된다. 이는 나중에 혼돈을 일으킬 수 있다. 이 때문에 중복 선언을 허용.. 더보기
[ 모던 자바스크립트 ] 이벤트 루프란 무엇일까..? 자바스크립트는 싱글 스레드로 동작한다. 따라서 한 번에 하나의 태스크만 처리할 수 있다. 하지만 브라우저가 동작하는 것을 살펴보면 태스크가 동시에 처리되는 것 처럼 느껴진다. 이는 이벤트 루프(Event Loop)가 자바스크립트의 동시성을 지원하기 때문에 가능한 것이다. 이벤트 루프는 브라우저에 내장되어 있는 기능 중 하나이다. 1. 콜 스택, 힙 대부분의 자바스크립트 엔진은 크게 2개의 영역으로 구분할 수 있다. ∙ 콜 스택(call stack) : 소스 코드 평가 과정에서 생성된 실행 컨텍스트가 추가, 제거되는 스택 자료 구조인 실행 컨텍스트 스택. 함수를 호출하면 함수 실행 컨텍스트가 순차적으로 콜 스택에 푸시되어 순차적으로 실행된다. 자바스크립트 엔진은 단 하나의 콜 스택을 사용하기 때문에 실행중.. 더보기
[모던 자바스크립트] 16장. 프로퍼티 어트리뷰트 1. 내부 슬롯과 내부 메서드 내부 슬롯과 내부 메서드는 자바스크립트 엔진의 구현 알고리즘을 설명하기 위해 ECMAScript 사양에서 사용하는 의사 프로퍼티와 의사 메서드다. [[...]] 로 감싼 이름들이 내부 슬롯과 내부 메서드이다. 이들은 자바스크립트 엔진 내부 로직이므로 원칙적으로 개발자가 직접 접근하거나 호출할 수 있는 방법을 제공하지 않는다. 단, 일부 내부 슬롯과 내부 메서드에 한하여 간접적으로 접근할 수 있는 수단을 제공하기도 한다. 그 예가 [[Prototype]] 라는 내부 슬롯이다. 모든 객체는 [[Prototype]]이라는 내부 슬롯을 갖는데, 이 내부 슬롯의 경우 __proto__를 통해 간접적으로 접근할 수 있다. 2. 프로퍼티 자바스크립트 엔진은 프로퍼티를 생성할 때 프로퍼티.. 더보기
[모던 자바스크립트] 10장. 객체 리터럴 1. 객체란 무엇인가? : 간단히 말해, 원시 값을 제외한 나머지 값을 말한다. 원시 타입의 값은 변경 불가능한 값(immutable value)이지만, 객체 타입의 값은 변경 가능한 값(mutable value)이다. 객체는 0개 이상의 프로퍼티(키와 값)로 구성된 집합을 말한다. 이때, 함수도 프로퍼티 값으로 사용할 수 있는데, 일반 함수와 구분하기 위해 메서드(method)라고 부른다. // 2개의 프로퍼티와 1개의 메서드로 구성된 객체 예시. let person = { name: 'garden',// 키: name, 값: 'garden' age: 30// 키: age, 값: 30 increase: function () { this.num++; } }; 2. 객체를 생성하는 방법 객체 리터럴 Obj.. 더보기
[React] Create-react-app ( CRA ) (+타입스크립트) 1. 리액트 CRA로 시작하기 프로젝트 폴더를 만들고 싶은 위치에서 CLI(터미널)를 연 후, 아래의 명령어를 치면 바로 리액트앱을 손쉽게 세팅할 수 있다. npx 혹은 yarn 중에 원하는 것으로 CRA를 시작한다. npx create-react-app 만들고싶은_파일이름 yarn create react-app 만들고싶은_파일이름 ++ 타입스크립트를 사용하고자 할 경우, 뒤에 --template typescript를 붙여주면 된다. npx create-react-app my-app --template typescript 2. 앱 실행하기 npm start yarn start ⚠️ 주의!! 리액트를 처음 시작하고 초반에 많이 하는 실수가 있다!.. 리액트 앱을 만들고 그 폴더 위치에서 'yarn star.. 더보기
[모던 자바스크립트] 브라우저의 렌더링 과정 모던 자바스크립트..! 처음부터 쭉~ 공부하면 좋겠지만,,, 너무 내용이 많기 때문에 그때그때 알고 싶었던 것 부터 공부하면 더 내용이 머리에 잘 들어오지 않을까 싶다. 38장. 브라우저 렌더링 과정 - 파싱(parsing = 구문분석) : 프로그래밍 된 텍스트 문서의 문자열을 토큰(어휘 분석 = lexical analysis)으로 분해하고, 토큰의 문법적 의미와 구조를 반영하여 트리구조의 자료구조인 파스 트리(이것이 결국 DOM)를 생성하는 일련의 과정. - 랜더링(rendering) : HTML, CSS, Javascript로 작성된 문서를 파싱하여 브라우저에 시각적으로 출력하는 것. ✏️ 요청과 응답 브라우저의 핵심 기능 : 필요한 리소스(HTML, CSS, JavaScript, 이미지, 폰트 등의.. 더보기
[JavaScript] 객체 지향이란 무엇인가? 자바스크립트는 프로토타입 기반의 객체 지향 프로그래밍 언어이다. 자바스크립트를 이루고 있는 거의 모든 것이 객체이다. ( 원시 타입 값을 제외한 나머지 값이 모두 객체이다. ) 1. 객체 예를 들어, 사람은 '이름, 성별, 나이'의 속성을 가지고 있고, 각자의 구체적인 속성을 통해 사람을 구별할 수 있다. 이를 프로그래밍에 적용한 방식이 객체 지향 프로그래밍이다. 다양한 속성들 중에 프로그램에 필요한 속성들만 추려서 표현하는 것을 추상화라고 하며, 이렇게 필요한 속성들로 표현된 객체는 다른 객체와 구별할 수 있게된다. 이처럼, 속성을 통해 여러 개의 값을 하나의 단위로 구성한 복합적인 자료구조를 객체라고 한다. ➡️ 객체 지향 프로그래밍은 독립적인 객체의 집합으로 프로그램을 표현하려는 프로그래밍 패러다임.. 더보기

티스토리툴바