profile
움직이는 만큼 행복해진다

setInterval in react

react에서 setInterval의 아이디를 useRef로 받으려 했으나 타입이 NodeJS.Timer라는 타입으로 setInterval 리턴이 표시되어서 그것으로 지정하면 되지 않았다그래서 window.setInterval로 수정 후 아래와 같이 지정할 수 있었다일

2일 전
·
0개의 댓글
·
post-thumbnail

useEffect cleanup function

useEffect의 return 즉, cleanup 함수가 실행되는 조건이 화면에서 해당 컴포넌트가 보이지 않게 되는 것으로 알고 있었는데 아니었다화면에서 없어질 때(go home 링크를 눌러서 해당 페이지가 더 이상 보이지 않게 될때) 실행되는 것도 맞지만useEff

3일 전
·
0개의 댓글
·

react 특정 directory 배포

react가 아닌 일반적인 서버사이드 웹 사이트와 같이 배포를 하려는 경우nginx에서 설정된 경로에 맞게package.json의 build명령어에 PUBLIC_URL=react앱경로 를 추가해주면 된다그리고 빌드된 파일들을 웹서버(nginx)에 배포할 경로에 넣어주면

2022년 8월 28일
·
0개의 댓글
·

react 모달 배경 클릭 시 창 닫기

react를 사용하지 않고 javscript로 구현시1\. 모달 배경에 eventListener를 달고 2\. 모달 배경에 속한 모달창엔 모달창의 id또는 class 이름을 넣은 다음3\. event.target.closest 메서드를 이용해서 모달창의 아이디가 찾아지

2022년 3월 11일
·
0개의 댓글
·

트리구조 검사 O(n^2) 개선하기

list\[] 와 listAchildren\[] 중 하나라도 겹치는 부분이 있는지 검사하는 것을 개선listAchildren의 parentId(listA의 id)를 list\[] 컴포넌트에 전달해서 list\[] 의 아이템들의 parentId가 listA의 id와 같은

2022년 2월 23일
·
0개의 댓글
·
post-thumbnail

TIL - 2021.12.23

target은 정확히 선택된 element(최하위)가 선택되는 반면currentTarget은 핸들러가 있는 element가 선택 됨https://velog.io/@edie_ko/JavaScript-event-target%EA%B3%BC-currentTarget

2021년 12월 23일
·
0개의 댓글
·

Next - Redux (toolkit)

Next에 Redux 세팅 기존 프로젝트 세팅 store 세팅 reducer enhancer : middleware (+composeWithDevTools) Redux(store)적용 - wrapper (== Provider) app.tsx에 적용되어 있음 red

2021년 12월 20일
·
0개의 댓글
·

react-infinite-scroll-component

infinite scroll을 예전에 구현했을 땐 직접 구현했었는데 회사에서 라이브러리를 사용했기 때문에 이것에 대한 사용방법을 익히고 다시한번 예전에 구현했던 코드를 상기시키는 시간을 가져보려 한다scrollableTarget : 여러 컨텐츠 리스트에 의해 스크롤이

2021년 12월 10일
·
0개의 댓글
·

useEffect vs useLayoutEffect

실행 순서 컴포넌트 렌더링 - 화면 업데이트 - useEffect실행비동기적으로 실행DOM과 인터렉션이 없는 경우에 사용(대부분 경우)실행 순서 컴포넌트 렌더링 - useLayoutEffect 실행 - 화면 업데이트동기적으로 실행됨렌더링 직후 DOM요소의 값을 읽을 때

2021년 12월 1일
·
0개의 댓글
·

Recoil

Facebook에서 만든 React 상태 관리 라이브러리Redux, MobX의 API는 단순하지 않고, React에서 사용하기 위해 나온 것이 아님react-redux, mobx-react 같이 wrapper 라이브러리가 있음React 스럽게(?) API와 동작 방식으

2021년 11월 23일
·
0개의 댓글
·

React.Children.toArray()

react의 virtual dom은 key값으로 각각의 객체를 구분하고그 객체의 props가 바뀌었는지 확인을 한다Array.prototype.map을 사용해서 반복적인 컴포넌트를 그리는 경우에 React.Children.toArray()으로 감싸주면 자동으로 uniq

2021년 11월 17일
·
0개의 댓글
·

React.lazy and (next.js) Suspense

React.lazy와 Suspense를 사용하면 코드 스플리팅을 하기 위해 state를 따로 선언하지 않고간편하게 컴포넌트 코드 스플리팅을 할 수 있다고 한다.컴포넌트를 렌더링 하는 시점에비동기적으로 로딩할 수 있게 해주는 유틸 함수리액트 내장 컴포넌트코드 스플리팅된

2021년 11월 14일
·
0개의 댓글
·
post-thumbnail

Next.js version 12

이번에 Next.js의 버전 12가 나온 것에 대해 알아보자. Next.js 12 공식 영상 및 문서 https://youtu.be/dMBYI7pTR4Qhttps://nextjs.org/blog/next-12Update today by running

2021년 11월 9일
·
0개의 댓글
·
post-thumbnail

TinyMCE React integration

WYSIWYG, 웹 텍스트 에디터, TinyMCE를 리액트에서 사용하기

2021년 10월 16일
·
0개의 댓글
·
post-thumbnail

React rendering performance test

이번에 styled components를 사용 시 re-rendering 되는 것을 확인했다.하지만 react에서 re-rendering 되는 것과 실제 브라우저에서 re-rendering 되는 것을 달랐다.virtual dom이 실제로 변경된 영역만 re-render

2021년 10월 11일
·
0개의 댓글
·

React rendering performance study

렌더링 최적화 : 리소스 로딩 이후 주요 렌더링 경로 분석, React Profiler를 통해 개선메모리 관리 : 사용자의 텍스트 입력, 마우스 클릭과 같은 상호 작용 간에 발생하는 메모리 누수를 찾아 개선네트워크 환경에 따라 달라 질 수 있다.답답함을 느낄 환경모바일

2021년 10월 11일
·
0개의 댓글
·
post-thumbnail

re rendering conditions

https://github.com/Ark-inflearn/inflearn-clone-front/issues/83sprint 라고 할 수 있을지 모르겠지만Ark 프로젝트 진행을 하다보니 기술부채를 쌓고 넘어갔던 문제들을 이번에 두 가지만 해결하고자 한다.re-r

2021년 10월 5일
·
0개의 댓글
·

typesafe-actions

Typesafe utilities designed to reduce types verbosity and complexity in Redux Architecture.Redux 아키텍처에서 유형의 장황함과 복잡성을 줄이기 위해 설계된 Typesafe 유틸리티입니다.액션을

2021년 9월 23일
·
0개의 댓글
·

useRef를 변수처럼 사용하기

useRef는 DOM 조작을 위해서만 사용하는 줄 알았는데 useState와 비슷하게도 사용할 수 있었다단, useRef에 담긴 값은 useRef.current에 저장되며 화면은 re-render 되지 않는다.(state 또는 prop이 변하지 않았기 때문)useRef

2021년 9월 23일
·
0개의 댓글
·

react drag and drop list

지난번 순수 javascript만으로 animation이 있는 drag and drop list를 만들려다가 잘 되지 않았다.javascript drag and drop 구현 시도와 시행착오javascript로 직접 구현하려 했으나 애니메이션발동 도중 DOM을 변경하거

2021년 9월 19일
·
0개의 댓글
·