Typescript + React로 작업을 하다보면, Third Party와 React 모듈에서 'BivarianceHack'이라는 것으로 타입이 정의된 것을 심심찮게 볼 수 있습니다.BivarianceHack은 Bivariance를 사용할 수 있는 우회 통로입니다.그

덕지덕지 붙어있는 useEffect를 제거해보자.

얼마전 회사 동료로 부터 다음과 같은 코드리뷰를 받았습니다. 회사에서 짠 코드를 가져올 순 없으니, 어떤 form이었는지 예시를 간단히 만들어 보았습니다. CreateUserForm과 EditUserForm입니다. !codesandbox[relaxed-pine-mb

복수의 마진이 겹칠 때 상쇄되는 현상이다. MDN에서는 다음과 같이 설명하고 있다.여러 블록의 위쪽 및 아래쪽 바깥 여백(마진)은 경우에 따라 제일 큰 여백의 크기를 가진 단일 여백으로 결합(상쇄)되곤 합니다. 이런 동작을 여백 상쇄라고 부릅니다.MDN 문서에서는 언급

클로저와 모듈패턴으로 구현하는 리액트

요즘 자바스크립트 공부를 나름 열심히 하고 있습니다.그런데 이런 "이론"적인 것들을 도대체 어디서 써먹지..라는 생각이 들기도 했습니다.아직 실무 경험이 없어서 그렇겠지만 안 와닿는 건 어쩔 수 없는 것 같습니다.그런데 이번에 우연히 useState, useEffect

타입스크립트를 사용하는 가장 큰 이유라고 할 수 있다. 자바스크립트는 dynamic typing동적 타이핑 언어이다. 다음 예시를 보자콘솔에는 다음과 같이 출력된다.이번에는 인수로 전달되는 값을 문자열로 바꿔 보자콘솔에는 다음과 같이 출력된다. 자바스크립트가 문자열을

CSS에서 애니메이션을 구현할 경우, transition과 animation 속성에서 'ease\*'값을 줄 때가 있다. 막연하게 애니메이션을 부드럽게 해준다는 개념만 알고있었는데, 더 이상 헷갈리지 않게 각각의 속성값을 정리 해보겠다.css transition위 그래

Object.keys메소드를 호출하면 객체의 프로퍼티를 열거할 수 있다.for...in 구문을 사용해도 객체의 프로퍼티를 열거할 수 있다.상속받은 프로퍼티를 열거하느냐에 있다.Object.keys는 상속받은 프로퍼티는 열거하지 않는다.반면, for...in 구문은 상속

리액트로 프로젝트를 하면서 모달 컴포넌트를 만들 때 생각지 못한 부분에서 오류가 났습니다.아래 코드는 모달 컴포넌트를 portal을 통해 root가 아닌 다른 요소에 렌더링하고 있습니다.다만, 다음과 같이 오류가 발생합니다. getElementById의 반환 값은 HT

공식 문서에 따르면이라고 하는데... 설명이 무척 어렵게 느껴진다. :sweat:예시를 통해 무엇을 의미하는지 알아보자다음과 같이 간단히 모달 컴포넌트를 만들어 보았다.App.js에서 모달이 열려있는지(modalOpen) 상태관리를 하며 렌더링 해준다.이처럼 모달 컴포

리액트를 사용하다보면, 다음과 같이 '<></>' 혹은 '<React.Fragment><React.Fragment/>'를 사용하는 경우를 자주 볼 수 있다.그렇다면 왜 이렇게 사용해야 할까?이유는 에러메세지를 보면 알 수 있다.여러 개의 JSX e