Dev Diary 💻

Intro 안녕하세요. 이번 새로 프로젝트를 시작하면서 yarn 에서 yarn berry를 도입하기로 결정했습니다. 이번시간에는 Yarn Berry에 대해 알아보도록 하겠습니다. What is yarn berry? Yarn Berry는 JS 패키지 매니저인 Yarn의 다음 버전입니다. yarn version 2부터 yarn berry라고 부릅니다. What is the difference between yarn and yarn berry? 가장 달라진 점은 Plug'n'Play (PnP) 시스템이라고 할 수 있습니다. PnP 시스템은 node_modules 폴더를 사용하지 않고, 패키지의 종속성을 프로젝트의 단일 디렉토리 트리에 직접 설치합니다. 일반적으로 npm 이나 yarn version 1을 사용할..

16.1 내부 슬롯과 내부 메서드 내부 슬롯 (internal slot)과 내부 메서드 (internal method)는 JS 엔진의 구현 알고리즘을 설명하기 위해 ECMAScript 사양에서 사용하는 의사 프로퍼티 pseudo property와 의사 메서드 pseudo method 입니다. 모든 객체는 [[Prototype]] 이라는 내부 슬롯을 갖습니다. 내부 슬롯은 JS 엔진의 내부 로직이므로 원칙적으로 직접 접근할 수 없지만 __proto__를 통해 간접 접근이 가능합니다. 16.2 프로퍼티 어트리뷰트와 프로퍼티 디스크립터 객체 Js 엔진은 프로퍼티를 생성할 때 프로퍼티의 어트리뷰트를 기본값으로 자동 정의합니다. 프로퍼티의 상태란 값 (value), 값의 갱신 가능 여부 (writable), 열거..

15.1 var 키워드로 선언한 변수의 문제점 15.1.1 변수 중복 선언 허용 var 키워드로 선언한 변수는 중복 선언이 가능합니다. 15.1.2 함수 레벨 스코프 var 키워드로 선언한 변수는 오로지 함수의 코드 블록만을 지역 스코프로 인정합니다. 함수 레벨 스코프는 전역 변수를 남발할 가능성을 높이고 전역 변수가 중복 선언되는 경우가 발생합니다. 15.1.3 변수 호이스팅 var 키워드 변수 선언 시 변수 호이스팅에 의해 변수 선언문이 스코프의 선두로 끌어 올려진 것처럼 동작합니다. // 이 시점에는 변수 호이스팅에 의해 이미 foo 변수가 선언됨 (1.선언 단계) // 변수 foo는 undefined로 처기화 됨 (2. 초기화 단계) console.log(foo); // undefined // 변..

14.1 변수의 생명주기 14.1.1 지역 변수의 생명주기 지역 변수의 생명 주기는 함수의 생명 주기와 일치합니다. function foo() { var x = 'local' // 변수 x 생성, 변수 x에 값 할당 console.loog(x) return x // 변수 소멸 } foo(); console.log(x); // x is not defined 호이스팅은 스코프를 단위로 동작합니다. 호이스팅은 변수 선언이 스코프이 선두로 끌어 올려진 것처럼 동작하는 JS 고유의 특징을 말합니다. 14.1.2 전역 변수의 생명 주기 함수와 달리 전역 코드는 명시적인 호출 없이 실행됩니다. var 키워드로 선언한 전역 변수는 전역 객체의 프로퍼티가 됩니다. 이는 전역 변수의 생명 주기가 전역 객체의 생명 주기와 ..

Intro 안녕하세요. 모바일 네비게이션 메뉴에서 스크롤 이동을 표현해야 했습니다. 여러 방법이 있겠지만 저는 특정 요소 위치로 스크롤 이동할 수 있는 scrollIntoView 함수를 사용했습니다. Syntax scrollIntoView() scrollIntoView(alignToTop) scrollIntoView(scrollIntoViewOptions) alignToTop - true : aligned to the top 상단 기준 스크롤 이동 | scrollIntoViewOptions: {block: "start", inline: "nearest"} - false : aligned to the bottom 하단 기준 스크롤 이동 | scrollIntoViewOptions: {block: "end",..

13.1 스코프란?모든 식별자(변수 이름, 함수 이름, 클래스 이름 등)는 자신이 선언된 위치에 의해 다른 코드가 식별자 자신을 참조할 수 있는 유 범위가 결정되비다. 이를 스코프라고 합니다. 즉 스코프는 식별자가 유효한 범위를 말합니다. var x = 'global' function foo() { var x = 'local' console.log(x) //local } foo() console.log(x) //global 13.2 스코프의 종류코드는 전역과 지역으로 구분할 수 있습니다 13.2.1 전역과 지역 스코프전역이란 코드의 가장 바깥 영역을 말합니다. 전역은 전역 스코프를 만듭니다. 전역 변수는 어디서든 참조할 수 있습니다. 13.2.2 지역과 지역 스코프지역이란 함수 몸체 내부를 말합니다. 지..

12.1 함수란? 프로그래밍 언어의 함수는 일련의 과정을 문(statement)으로 구현하고 코드 블록으로 감싸서 하나의 실행 단위로 정의한 것입니다. 함수 내부로 입력을 전달받는 변수를 (parameter), 입력을 (argument), 출력을 반환값return value)라고 합니다. 12.2 함수를 사용하는 이유 코드의 재사용 측면, 유지보수와 편의성을 높이고 코드의 신뢰성을 높이는 효과가 있습니다. 12.3 함수 리터럴 리터럴은 사람이 이해할 수 있는 문자 또는 약속된 기호로 사용해 값을 생성하는 표기 방식을 말합니다. 즉 리터럴은 값을 생성하기 위한 표기법입니다. 따라서 함수 리터럴도 평가되어 값을 생성하며, 이 값은 객체입니다. 즉 함수는 객체입니다. 12.4 함수 정의 1. 함수 선언문 fu..

자비스크립트가 제공하는 7가지 데이터 타입 (숫자, 문자열, 불리언, Null, undfined, 심벌, 객체 타입)은 크게 원시 타입과 객체타입으로 구분할 수 있습니다. - 원시 타입의 값은 변경 불가능한 값입니다. 객체 타입의 값은 변경 가능한 값입니다. - 원시 값을 변수 할당 시 변수(확보된 메모리 공간)에는 실제 값이 저장됩니다. 객체 변수 할당 시 변수(확보된 메모리 공간)에는 참조 값이 저장됩니다. - 원시 값 변수를 다른 변수에 할당 시 값에 의한 전달 (pass by value)라고 하고, 객체를 가리키는 변수를 다른 변수에 할당하면 참조에 의한 전달 (pass by reference)라고 합니다. 11.1 원시 값 11.1.1 변경 불가능한 값 const o = {}; // const ..

* 07장 연산자, 08장 조건문, 09장 일부 부분은 패스합니다. * 9.1 타입 변환이란? 개발자가 의도적으로 값의 타입을 변환하는 것을 명시적 타입 변환 또는 타입 캐스팅이라 합니다. 개발자와 의도와 상관없이 JS엔진에 의해 암묵적으로 타입이 변환되기도 합니다. 이를 암묵적 타입 변화 또는 타입 강제 변환이라 합니다. 9.2 암묵적 타입 변환 JS엔진은 표현식을 평가할 때 코드의 문맥을 고려해 암묵적으로 데이터 타입을 강제 변환 할 때가 있습니다. '10' + 2 // '102' 7 * '10' // 70 9.4 단축 평가 9.4.4 옵셔널 체이닝 연산자 ES11에 도입된 옵셔널 체이닝 연산자 ?. 는 좌항의 피연산자가 null 또는 undefined인 경우 undefined를 반환하고, 아니라면 ..

이 글은 모던 자바스크립트 Deep Dive 바탕으로 정리한 내용입니다. 6.1 숫자 타입 자바스크립트는 C/Java와 달리 하나의 숫자 타입만 존재합니다. 6.2 문자열 타입 문자열 타입은 텍스트 데이터를 나타내는 데 사용합니다. 6.3 템플릿 리터럴 ES6부터 템플릿 리터럴이라고 하는 새로운 문자열 표기법이 도입되었습니다. 백틱을 사용합니다. 6.4 불리언 타입 불리언 타입의 값은 논리적 참, 거짓을 나타내는 true와 false 뿐입니다. 6.5 undefined 타입 undefined 타입의 값은 undefined가 유일합니다. undefined는 개발자가 의도적으로 할당하기 위한 값이 아니라 자바스크립트 엔진이 변수를 초기화할 때 사용하는 값입니다. 변수에 값이 없다는 것을 명시하고 싶을 때는 ..