time to wander

정재남님의 무근본 무계획 쇼핑몰 프로젝트 만드는 걸 따라하면서 새로운 것 투성이라 신기했다. 하나하나 차근차근 찾아보려고 우선 Vite의 공식문서부터 열고 가이드의 가장 첫 번째 섹션인 Vite를 사용해야 하는 이유부터 보는데 첫 문장부터 이해가 잘 되지 않았다...! 생각해보니 프로젝트 하면서 너무나 당연하게 export 와 import 를 사용했고, 이게 ES6 부터 지원하는 모듈이라는 건 알고 있었는데 자세히 알아본 적이 없어서 단어들이 생소하게 느껴진 거였다. 그럼 ES Module에 대해서 살펴보자! ES Module이란? ES Module은 ES6부터 도입된 모듈 시스템이다. export 및 import문을 사용하여 분리되어 있는 자바스크립트 파일 간의 접근을 가능하게 만들어준다. ES Mod..

nullish nullish 병합 연산자 (nullish coalescing operator) ?? 를 사용하면 짧은 문법으로 여러 피연산자 중 그 값이 '확정되어 있는' 변수를 찾을 수 있다. a ?? b 의 평가 결과는 아래와 같다. - a가 null도 아니고 undefined도 아니면 a - 그 외의 경우에는 b nullish 병합 연산자 ?? 없이 x = a ?? b 와 동일한 동작을 하는 코드는 다음과 같다. x = (a !== null && a !== undefined) ? a : b; 아래의 예시를 살펴보자. let firstName = null let lastName = undefined let nickName = 'zubetcha' console.log(firstName ?? lastNa..

Promise.all Promise.all은 파라미터로 주어진 Iterable 객체(보통은 배열의 형태가 많음)의 모든 프로미스를 이행한 후 새로운 프로미스를 반환한다. 이 때 반환되는 프로미스는 파라미터로 받은 배열 안의 프로미스의 결과값을 담은 새로운 배열을 result로 가지게 된다. 새로운 프로미스의 result 배열의 요소 순서는 Promise 이행 완료의 순서와는 상관 없이 Promise.all의 파라미터 배열의 요소 순서와 상응한다. Promise.all은 서로 관련된 여러 프로미스의 결과를 집계할 때 유용하며, 다음 코드를 실행하기 전에 연관되어 있는 비동기 작업들이 모두 이행이 완료되어야 하는 경우에 사용된다. 구문 Promise.all(iterable) // iterable은 배열 등과..

실행 컨텍스트 (Execution Context) 실행 컨텍스트는 코드를 실행하는 데 필요한 조건이나 환경 정보 등을 수집해 놓은 객체를 뜻한다. 실행 컨텍스트는 1) 전역 공간에서 익명 함수 실행 시, 2) eval 함수 실행 시, 3) 함수 실행 시, 4) {} 코드 블럭 사용 시 생성된다. if문, for문, switch문, while문 등의 반복문이나 조건문은 let과 const 키워드에 대해서는 별개의 독립된 공간으로서의 역할을 하지만 별도의 실행 컨텍스트가 생성되지는 않으며, 함수라 하더라도 함수의 실행 내용을 정의해 놓은 정의부가 아닌 실행문을 만나야 실행 컨텍스트가 생성된다. 아래 코드의 실행 순서와 출력값을 예측해보자. var a = 1; function outer () { console..

substring(), slice() 비교 두 메소드는 문자열의 indexStart 부터 indexEnd 의 직전까지 부분 문자열을 반환한다는 공통점이 있지만 차이점 또한 존재함 1. indexStart > indexEnd, 시작 인덱스가 종료 인덱스보다 큰 경우 substring() > indexStart 가 indexEnd 보다 큰 경우 두 위치를 바꿔서 처리함 slice() > indexStart 가 indexEnd 보다 큰 경우 빈 문자열을 반환함 2. index index 가 음수인 경우 index 를 0으로 처리 slice() > index 가 음수인 경우에는 문자열의 끝에서부터 인덱스를 계산 ex) 문자열의 마지막 인덱스는 음수로 표현하..

substring() method 형태: str.substring(indexStart, indexEnd) String 오브젝트의 시작 인덱스부터 종료 인덱스까지의 부분 문자열을 반환 indexStart: 반환할 문자열의 시작 인덱스 (반환 문자열에 포함) indexEnd (optional) : 반환할 문자열의 마지막 인덱스의 + 1 indexEnd에 해당하는 값은 반환되는 문자열에 포함되지 않음 indexEnd 가 생략된 경우, indexStart부터 문자열의 끝까지 모든 문자를 반환 indexStart == indexEnd 인 경우, 빈 문자열 반환 ' '; indexStart > indexEnd 인 경우, 두 인덱스의 자리를 바꾼 것처럼 메소드 실행 indexStart || indexEnd < 0 인..