블로그를 이사했습니다 👩‍🔧👩‍🔧 네이버 블로그 > velog > 개인 블로그 > tistory로 정말 정말 정착! 티스토리 블로그 바로가기

IE11에서 SCRIPT5022 SecurityError 아마 리액트-타입스크립트 프로젝트를 하면서 만나는 수많은 IE의 에러 중 하나 읽어보니 문제는 웹소켓을 로컬 도메인에서 열려고 할 때 생기는 에러라고 한다. ✨ 해결방법 : 인터넷 옵션에 들어가서 보안 관련 항목을 변경해준다 internetoption ✨ 또 다른 해결방법 : 인터넷 옵션에 들어가서 localhost 주소를 추가해준다. internetoption 출처: stackoverflow IE11에서 SCRIPT5022 SecurityError ✨ 해결방법 : ✨ 또 다른 해결방법 :

useMemo Memoization은 동일한 값을 리턴하는 함수가 있을 때, 해당 값을 메모리에 저장해서 필요할 때마다 재사용 하는 것. 즉, 자주 사용하는 값을 캐싱하는 것. 여기서 알 수 있는 것은 함수 컴포넌트의 경우 렌더링 될 때 모든 내부의 변수가 초기화 되면서 다시 렌더링하게 된다. valueMemo를 보면 의 구조를 알 수 있다. 두개의 인자를 가지고 있으며, callback 함수와 의존성 배열을 가지고 있다. 의존성 배열을 통해 값을 원하는 순간에만 업데이트 후 다시 저장할 수 있다. 하지만 그렇다고 해서 불필요한 값까지 저장하게 된다면 성능저하로 이어질 수 있다 👉 메모리에 값을 저장하는 것이기 때문

✨ useRef 은 mutable ref object를 리턴함. reference는 read-only이거나 mutable하다. read-only : 읽기 전용 / mutable : 변경 가능한. ref 객체를 리액트에 전달하면 리액트는 속성에 상응하는 DOM node값을 set한다. 여기서 중요한 것은 는 마운트 될 때 DOM node에 set되고, DOM node가 사라지면 로 변경된다. 즉 useRef()는 초기 값을 그대로 읽거나 혹은 초기 값에서 변경되는 값을 사용한다. useRef()는 언제 사용할까? 📍 옵션 1: DOM Element Ref 주로 useRef()를 사용하는 방법 중 하나는 DOM element를 참조할때이다. 초기 값은 로 설정한다. 이때는 DOM 엘리먼트를 참조하는 것이기 때문에 값은 읽기-전용으로 사용된다. DOM Element를 참조할 때는 어떤 엘리먼트를 참조하는지 type을 지정해준다. >>>> 👉 최대한 자세하게 타입을 지정해준다. 만약…

인데 할당되기 전에 사용되었다고? 예시를 들어보자 분명 let age로 선언되었는데 왜 저런 에러가 뜰까? 우리는 여기서 알아야 한다. 는 할당(assigned) 된 것이 아니라 선언(declare) 된 것이다. 여기서 알 수 있는 것은 만약에 if문이 실행되지 않으면 는 선언만 되었을 뿐 할당되지 않았다. 즉 전혀 할당되지 않은 것이다. 근데 왜 할당되지 않은 것일까? 해답은 여기있다 우리가 age를 number type으로 지정하였기 때문에 다른 값이 들어오면 에러가 뜨게 된다. ✨ 해결 방법 undefined 값도 괜찮은 경우 : 초기 값인 undefined도 함께 타입으로 지정해준다. 무조건 number 타입으로 지정될 경우 : Definite Assignment Assertions을 사용한다. Definite Assignment Assertions이란 컴파일러에게 값이 무조건 할당되어 있다고 컴파일러에게 전달하는 경우이다. 즉 처음은 으로 지정되지만 값이 할당되면 numb…

타입스크립트와 EventTarget 타입스크립트를 사용하면서 이벤트 타깃을 사용하면 종종 에러를 마주하곤 한다. 빠르게 그 이유를 말하자면, EventTarget은 Element type으로부터 상속받지 않기 때문에 에러를 만나게 되는 것이다. 그렇기에 id 혹은 class와 같은 속성을 인지하지 못하는 것이다. 즉, 이벤트 타깃은 EventTarget의 타입이 있다. 그럼 왜 Element type에서 상속받지 않는 것일까? 나도 이 생각을 가장 많이 했다. 결론적으로 우리가 이벤트를 실행시킬 때 가장 많이 하는 일은 앨리먼트에 이벤트를 붙이기 때문이다! 하지만 우리가 알아야 할 것은 모든 이벤트 타깃이 HTML elements에 한정되지 않는 다는 것이다 예를 들면, , , , 등.. ✨ 해결방법1 : Target의 타입을 지정해준다. e.target이 Element라는 것을 알려준다. inline으로 사용한다. 만약에 이벤트의 target 속성만 사용할 경우 이렇게 적어준다…

1. react-custom-scrollbars 이름처럼 스크롤바를 간단하게 바꿔주는 라이브러리 첫 doc에는 생각보다 자세하게 안나와있는데 v2 doc에 자세하게 나와있다. 스크롤과 스크롤바를 커스텀하기 위해서는 track, thumb의 기존 props를 받은다음 커스텀하는 방법이 있는데 document가 깊숙하게 숨겨 있어서 가져와봤다. 여기서 중요한 것은 clasName을 똑같이 작성해줘야 기존에 라이브러리가 지정한 기본 스타일을 변경할 수 있다! 출처 : react-custom-scrollbars 출처2 : react-custom-scrollbars-2 2. react-scrollmagic 아마 대부분 리액트로 프로젝트를 변경하면서 제이쿼리에서 스크롤 애니메이션을 사용할 때 자주 사용하는 라이브러리 일 것이다. 스크롤 매직은 리액트에서도 사용할 수 있다! 사용방법은 너무 간단하다. 오히려 제이쿼리로 사용했을 때보다 더 직관적인거 같기도하다 😘 해당 라이브러리의 유일한 단점은…

해당 게시글은 width를 기준으로 작성되었습니다 👩‍🎨 1. offsetWidth vs clientWidth의 차이 는 border까지 포함한 길이를 뜻한다. offsetWidth 설명사진 는 컨텐츠 크기를 기준으로 한다. (padding 포함) 그림에서도 볼 수 있지만 스크롤바는 포함되지 않는다. clientWidth 설명사진 2. (offsetWidth vs clientWidth) vs getBoundingClientRect()의 차이 💡 2.1 getBoundingClientRect()은 많은 일을 해! 우선 getBoundingClientRect() 메서드는 객체를 리턴한다. 이는 엘리먼트의 사이즈와 뷰포트를 기준으로 한 엘리먼트의 위치를 반환한다. getBoundingClientRect()으로 리턴 받을 수 있는 값 : /, /, , , , getBoundingClientRect()메서드 설명 여기서 와 는 offsetWidth와 일치한다. 즉 padding, borde…

1. Property ‘getBoundingClientRect’ does not exist on type ‘EventTarget’.ts(2339) 타입스크립트 event.target 대신 사용할 수 있는 해답 적당히 해석해보면 React.MouseEvent는 target 대시 parameter로 currentTarget을 받을 수 있다는 내용이다. 출처: https://github.com/facebook/react/issues/16201 1. Property ‘getBoundingClientRect’ does not exist on type ‘EventTarget’.ts(2339)