My Boundary As Much As I Experienced

문제 Next.js 환경에서 window 객체에 접근해야되는 일이 생겼다. useInnerWidth하는 훅을 만들어서 resize 이벤트를 감지해서 위 gif 스티커들의 좌표와 크기를 반응형으로 조절해주는 기능을 구현하기 위해 필요했다. 그런데 Next.js 환경에선 window객체에 접근하면 referenceError: window is not defined라는 에러를 반환한다. 원인 Next.js에선 기본적으로 ssr로 페이지를 로딩하기 때문에 window 전역 객체가 브라우저를 뜻하지 않는다. 그러므로 구글에서 next.js의 window객체 접근 에러에 대해 찾아보면 흔히 'csr로 전환하기 위해서 "use client"를 해주면 해결된다.'라고 흔히 답을 찾을 수 있는데 이것만으로는 부족할 수 ..

자바스크립트 파싱에 의한 DOM 생성이 중단되는 문제를 근본적으로 해결하기 위해 HTML5부터 script 태그에 async와 defer 어트리뷰트가 추가되었다. async와 defer 어트리뷰트는 다음과 같이 src 어트리뷰트를 통해 외부 자바스크립트 파일을 로드하는 경우에만 사용할 수 있다. 즉, src 어트리뷰트가 없는 인라인 자바스크립트에는 사용할 수 없다. async와 defer 어트리뷰트를 사용하면 HTML 파싱과 외부 자바스크립트 파일의 로드가 비동기적으로 동시에 진행된다. 하지만 자바스크립트의 실행 시점에 차이가 있다. async 어트리뷰트 html파싱과 외부 자바스크립트 파일의 로드가 비동기적으로 동시에 진행된다. 단, 자바스크립트의 파싱과 실행은 자바스크립트 파일의 로드가 완료된 직후 ..

ES6에서 도입된 스프레드 문법 ...은 하나로 뭉쳐 있는 여러 값들의 집합을 펼쳐서 개별적인 값들의 목록으로 만든다. // ...[1,2,3]은 [1,2,3]을 개별 요소로 분리한다. (-> 1, 2, 3) console.log(...[1,2,3]) // 문자열은 이터러블이다. console.log(..."hello") // h e l l o // Map과 Set은 이터러블이다. console.log(... new Map([[ "a", 2 ], [ "b" , 2 ]])); // [ "a", 2 ], [ "b" , 2 ] console.log(... new Map([1,2,3]); // 1 2 3 // 이터러블이 아닌 일반 객체는 스프레드 문법의 대상이 될 수 없다. console.log(... {a: ..

심벌이란? 심벌은 ES6에서 도입된 7번째 데이터 타입으로 변경 불가능한 원시 타입의 값이다. 심벌 값은 다른 값들과 중복되지 않는 유일무이한 값이다. 따라서 주로 이름의 충돌 위험이 없는 유일한 프로퍼티 키를 만들기 위해 사용된다. 심벌 값의 생성 Symbol함수 심벌 값은 Symbol 함수를 호출하여 생성한다. 다른 원시값, 즉 문자열, 숫자, 불리언, undefined, null 타입의 값은 리터럴 표기법을 통해 값을 생성할 수 있지만 심벌 값은 Symbol 함수를 호출해서 생성해야 한다. 이때 생성된 심벌 값은 외부로 노출되지 않아 확인할 수 없으며, 다른 값과 절대 중복되지 않는 유일무이한 값이다. const mySymbol = Symbol(); console.log(typeof mySymbol..

자바스크립트의 암묵적인 행위로 인한 고통.. 아래 예제에서 실행 결과는 무엇일지 생각해보자. function foo(){ x = 10; } foo(); console.log(x); // ? foo 함수 내에서, 아직 선언하지 않은 x 변수에 값 10을 할당했다. 이때 x 변수를 찾아야 x에 값을 할당할 수 있기 때문에 자바스크립트 엔진은 x 변수가 어디에서 선언되었는지 스코프 체인을 통해 검색하기 시작한다. 자바스크립트 엔진은 먼저 foo함수의 스코프에서 x 변수의 선언을 검색한다. -> 없다. 상위 스코프에서 x 변수의 선언을 검색한다 -> 없다. 끝내 전역 스코프에서 x 변수의 선언을 검색한다 -> 없다. 끝내 결과는? 전역 스코프에도 x변수 선언이 존재하지 않기 때문에 ReferenceError가 ..

일급 객체란? 다음과 같은 조건을 만족하는 객체를 일급 객체라 한다. 무명의 리터럴로 생성할 수 있다. 즉, 런타임에 생성이 가능하다. 변수나 자료구조(객체, 배열)에 저장할 수 있다. 함수나 매개변수에 전달할 수 있다. 함수의 반환값으로 사용할 수 있다. 자바스크립트의 함수는 다음 예제와 같이 위의 조건을 모두 만족하므로 일급 객체이다. // 1. 함수는 무명의 리터럴로 생성할 수 있다. // 2. 함수는 변수에 저장할 수 있다. // 런타임(할당 단계)에 함수 리터럴이 평가되어 함수 객체가 생성되고 변수에 할당된다. const increase = function (num) { return ++num } const decrease = function (num) { return --num } // 2. ..

tailwind의 사용 방식 tailwind는 클래스에 "w-full h-full inline-flex items-center justify-center h-11 rounded-md px-8 ..." 이런 식으로 축약어들을 때려넣어 스타일링 해주는 방식으로 사용된다. 축약어들이 낮선게 많아 러닝커브가 상당히 있는 편인거 같다. tailwind의 장점 (headless ui) 1. css in js에 비해 성능이 좋다. css in js는 애초에 성능보다 개발자 경험을 중시한 라이브러리이다. csr 방식에 최적화되어 있으며 브라우저가 js를 다 로딩하기 전까지는 내용물을 보여주기 힘들다. css in js는 js파일을 많이 로딩해야되기 때문에 브라우저 메모리를 많이 잡아먹는다. 그러나 tailwind는 순..

생성자 함수 생성자 함수(constructor function)와 일반 함수에 기술적인 차이는 없습니다. 다만 생성자 함수는 아래 두 관례를 따릅니다. 함수 이름의 첫 글자는 대문자로 시작합니다. 반드시 'new' 연산자를 붙여 실행합니다. Object 생성자 함수 new 연산자와 함께 Object 생성자 함수를 호출할 수 있다. 일반적으로 잘 사용하지 않는다 const newObj = new Object() 객체 리터럴 중괄호 내에 0개 이상의 프로퍼티를 정의하여 생성하는 방법 객체 리터럴 외의 생성 방식은 모두 함수를 이용해 객체를 생성한다 const obj = { a: 1, b: 2, c: 3 } 객체 리터럴 방식은 간편하게 객체를 생성할 수 있지만, 동일한 프로퍼티를 가진 객체를 여러개 생성할 경..

정의 내부 슬롯과 내부 메서드는 ECMAScript에서 정의한 의사 프로퍼티Pseudo Property, 의사 메서드Pseudo Method이다. (css의 가상 선택자Pseudo Selector처럼, 실제로 있는 태그는 아니지만 기능 상 존재하는..? 느낌인듯!) ECMAScript 사양에 정의된 대로 구현되고 JS 엔진에서 실제로 동작하는 방식을 구성한다. 그러나 개발자가 직접 접근하거나 호출할 수 있도록 공개된 객체의 프로퍼티는 아니다. 내부 슬롯과 내부 메서드는 형태는 이중 대괄호로 감싸서 표현된다. 실제 확인 방법 우리가 한 번 쯤 들어본 [[prototype]]도 내부 슬롯이다. 직접 [[prototype]]을 프로퍼티 체이닝으로 접근할수는 없지만 객체를 console.log해보면 개발자 도구..

이미 한 번 변수 호이스팅에 대해 다뤄본 적이 있지만 자바스크립트 스터디에서 심화적으로 다뤄보기로 했다. 1. 변수 호이스팅이란? 자바스크립트에서 호이스팅(Hoisting)은 변수 선언과 함수 선언을 코드의 맨 위로 끌어올려지는 현상을 일컫는다. 그래서 개발자가 어느 라인 위치에 코드를 선언해도, 실행 되기전 코드가 최상단으로 끌어올려지고 실행되게 된다. 2. var 변수 호이스팅의 특성 var 키워드로 변수를 선언하면 변수 호이스팅에 의해 변수 선언문이 스코프의 선두로 끌어 올려진 것처럼 동작한다. 즉, 변수 호이스팅에 의해 var 키워드로 선언한 변수는 변수 선언문 이전에 참조할 수 있다. 단 할당문 이전에 변수를 참조하면 언제나 undefined를 반환한다. 3. 호이스팅의 원인 (실행 컨텍스트) ..