profile
움직이는 만큼 행복해진다
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개의 댓글

리액트에서 리덕스의 list로 컴포넌트 그리기

컴포넌트에 list 자체를 전달해서 컴포넌트 안에서 처리 하는 방법좋지 않음 : 기존에 설정된 값들(store read-only 속성제거)을 변경해야 함(방금 작업한 코드)컴포넌트 밖에서 array.map() 을 사용해서 그리기 내일 시도 해보고 비교 글을 블로그에 정

2021년 8월 31일
·
0개의 댓글

useEffect dependency

내가 이해한 useEffect는 처음에 한번 실행되고 dependency array안의 값이 변경될 때 마다 실행되는 것으로 알고 있다.그런데 가끔 dependency로 함수를 전달하는 것을 보았는데 왜 그걸 전달하는지 이해가 되지 않아서 이번 기회에 찾아보았다.결론

2021년 8월 27일
·
0개의 댓글

redux done, styled components props

redux store에 loading도 있는데 done이라는 변수는 필요 없을 것 같았는데 필요한 경우가 생겼다.컴포넌트에서 직접 비동기 통신을 하면async await으로 Promise에서 정상 응답이 오길 기다렸다가 진행하는 것이 가능했는데리덕스사가를 이용하게 되면

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

react 띄어쓰기

react에서 string\[] 을 리턴하는데 구분하는 쉼표 다음의 띄어쓰기가 적용이 안되는 문제가 있었다.span으로 감싸서 리턴하던 것을 백틱으로 감싸서 리턴하는 것으로 바꾸니 백틱안에선 ', '의 띄어쓰기도 잘 인식한다.검색해보니  를 사용하라는 포스트들이 많던데

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

react에서 cdn(외부 자바스크립트) 추가

react에서 외부 자바스크립트 파일을 사용하고자 할 때

2021년 8월 3일
·
0개의 댓글