https://developer.mozilla.org/ko/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context#%EC%8C%93%EC%9E%84_%EB%A7%A5%EB%9D%BDhttps://developer.mozilla.org/ko/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context#%EC%8C%93%EC%9E%84_%EB%A7%A5%EB%9D%BD 쌓임 맥락 - CSS: Cascading Style Sheets | MDN 쌓임 맥락(stacking context)은 가상의 Z축을 사용한 HTML 요소의 3차원 개념화입니다. developer.moz..

nullish coalescing operator (||와 ?? 차이) 자바스크립트에는 널 병합 연산자라는 것이 있다. 문법적으로는 ??으로 쓰인다. 왼쪽 피연산자가 null이거나 undefined일때 오른쪽 피 연산자를 반환하고, 그렇지 않으면 왼쪽 피연산자를 반환한다. 근데 ||도 비슷한 효과를 가지고 있다. 다만, ||는 null, undefined 뿐만 아니라 falsy값에 해당하는 경우도 오른쪽 피연산자를 반환한다. 즉 ||를 사용하면 falsy값인 " "나 0, NaN일때에도 오른쪽 피연산자가 반환된다. 왜냐하면 ||는 왼쪽 피연산자를 강제로 boolean으로 형변환하게 때문이다. 이러한 " "나 0, NaN의 falsy값을 유효한 값으로 생각한 경우에는 ||를 사용하면 안되는 것이다.

컴퓨터 공학에서의 side effect란 함수의 로컬 상태를 함수 외부에서 변경하는 경우, side effect가 발생했다고 한다. 이 개념을 react에 적용하면, function component 외부에서 로컬 상태의 값이 변경되는 것이 side effect라고 할 수 있다. 흔한 경우로 비동기 처리가 있을 것이다. 즉, react에서 side effect란, 리액트 컴포넌트가 화면에 렌더링 된 이후에 비동기적으로 처리되어야하는 부수적인 효과들을 side effect라고 일컫는다. 그럼 모든 비동기 로직은 useEffect에 들어가야하는가? 아마 그럴 수도 있을 것 같다. (내 생각) 만약, 어떤 버튼이 눌렸을때 어떤 비동기 로직이 트리거되어야한다면, 로컬상태로는 해당 버튼이 눌렸는지에 대한 상태를 ..

function A () { this.a = "a"; } A.prototype.aa = "aa"; function B () { this.b = "b"; } B.prototype = new A(); or B.prototype = Object.create(A.prototype) B.prototype.constructor = B; var b = new B(); B가 A를 상속하고 있다. 근데 상속하는 방법은 2가지로 나뉜다. 첫번째는 B의 prototype으로 new 연산으로 A를 주는것. 두번째는 B의 prototype으로 Object.create()에 A의 프로토타입을 주는 것이 있다. 둘다 b객체가 A의 prototype인 aa를 부를 수 있다. 하지만, b.a는 new 연산으로 B prototype에 ..

화살표함수와 일반 함수와의 차이 화살표 함수는 작성도 편리하고 보기에도 간결하다. 하지만 읽고 쓰기 편하다는 이유로만 사용되지는 않을 것이다. 화살표함수와 일반함수와의 가장 큰 차이는 this, prototype, arguments 정보를 생성하지 않는다는 것이다. this 정보를 생성하지 않아서, 호출이 되더라도 누가 자신을 호출했는지에 대한 정보를 생성하지 않고, 현재 선언된 외부 렉시컬 환경의 this를 그대로 사용한다. prototype을 사용하지 않아서, new 명령어를 통해서 인스턴스를 생성할 수도 없고, 상속도 구현불가하다. 즉, 화살표함수는 읽고 쓰기 간편하고, 익명함수라서 콜백함수로 쓰기에 용이하며, 몇가지 정보들이 생략되어있어서 상대적으로 가볍다. 또한, 외부 렉시컬 환경의 this를 ..

자바스크립트가 Prototype 기반 언어가 됨으로써 얻을 수 있는 이점은? 자바스크립트는 처음 설계될 당시 부터, 간단하고 쉬운 언어를 지향했다. 그렇기 때문에 기존의 언어들이 지향했던 Class와 같은 구조를 채택하는것 보다, Prototype 기반언어를 채택해서 좀 더 가볍게 하려는 철학때문에 Prototype 기반 언어를 채택하게 되었다. 어떻게 가벼워지냐하면, function A() {} A.prototype.hi = "hi"; 위 코드가 있다고 해보자. new A()으로 생성된 모든 인스턴스는 hi를 모두 복사하지 않는다. 왜냐하면 A라는 함수의 Prototype Object는 1개이고, hi는 그 Prototype Object에 존재하기 때문이다. 즉, 1개의 Prototype을 공유하기 때..

iframe은 일반적으로 권장되지 않는 방법으로 인식되어있다. 하지만 이번 우테코 프로젝트에서는 iframe을 이용하여 프로젝트를 진행했다. 프로젝트 주제는 댓글 모듈이었는데, 어떤 스크립트를 실행하면 원하는 웹 페이지의 어딘가에 댓글을 작성할 수 있는 UI와 기능이 제공되는 서비스였다. 처음에는 그냥 원하는 요소를 지정하면 그 밑에 UI를 추가하면 되겠거니 했으나, 그렇게 되면 댓글모듈의 UI의 rem단위들이 웹 페이지 별로 다르게 적용되어 동작하게 된다. 즉, 스타일의 분리가 이루어지지 않는다. 그리고, 댓글 기능이 있는 어느곳에서나 홍보같은 스팸성 댓글이 수두룩하게 도배되기 마련이다. 만약 이것들이 SEO에 반영이 된다면 어떨까? 스팸성 댓글이 달렸음에도 관리를 즉시 하지 않는다면, 바로 해당 웹페..

https://github.com/donavon/hook-flow/blob/master/hook-flow.pdf 위 그림은 리액트의 훅을 표시한것이다. 마운트 단계 마운트 단계에서는 Lazy Initializer가 동작한다. 이것은 useState( () => 1); 처럼 useState의 인자로 콜백함수를 넘겨서 초기화하는 것을 뜻한다. 이렇게하면 useState(1)가 함수 호출시 매번 초기화되는 것과 달리, 마운트 시점에 딱 1번만 초기화할 수 있다. 업데이트 단계 업데이트라 함은 당연히 상태값에 따른 Render가 수행될것이다. 근데, 이는 아마 Virtual DOM의 Render일 것이다. 실제 DOM의 렌더는 Browser paints screen 단계에서 일어난다. 2개의 Effect 근데 ..