My Boundary As Much As I Experienced

Element.style 속성과 GetComputedStyle() 메소드의 차이점 쿼리셀렉터 혹은 getElement... 메소드로 가져온 HTMLElement의 css 속성을 조작하는데엔 2가지 방법이 있다. Element.style와 getComputedStyle이다. (사실 추가로 css in JS인 스타일드 컴포넌트를 쓰면 state로 조작할 수 있긴 하다..) 이 두 개의 차이점을 알아보자. 아래는 각기 다른 형태로 작성된 엘리먼트들이다. 첫 번째 엘리먼트 두 번째 엘리먼트 첫 번째 엘리먼트는 인라인 방식으로 해당 엘리먼트에 글자색 스타일을 직접 선언하고, 두 번째 엘리먼트는 body태그 바깥에서 style 태그를 이용해서 외부에서 선언하도록 했다. Element.style 을 활용 elemen..

계속 까먹어서 적어둔다. .text { overflow: hidden; // 넘치는거 보이지 않게 처리 white-space: nowrap; // 2줄 처리 안 되게 text-overflow: ellipsis; // ... 처리 } /* 참고점 overflow나 white-space 설정이 저렇게 되어 있지 않으면 text-overflow는 작동하지 않는다. 그리고 부모 컨테이너의 width도 지정되어 있어야 한다. */ css in js이든 css이든 재사용 가능한 테마를 지원하므로 지정해서 원하는 곳에 추가해주면 좋다.

문제 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 } 객체 리터럴 방식은 간편하게 객체를 생성할 수 있지만, 동일한 프로퍼티를 가진 객체를 여러개 생성할 경..