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

React rendering performance test

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

5일 전
·
0개의 댓글

React rendering performance study

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

5일 전
·
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개의 댓글

react에서 프록시 서버 설정 후 재시작

package.json에서 프록시 서버를 지정하면앱을 한번 껏다 켜야 함터미널창에서 ctrl+c 이후 npm run start그렇지 않으면 프록시 서버가 적용되지 않음

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

Rules of hooks

hook을 사용을 하지만 가끔씩 이상하게 사용해서 리액트가 rule에 위반한다고 할 때가 있었다.이번에 react에서 hook의 규칙에 대해 알아보자.반복문, 조건문 또는 중첩된 함수 내에서 hook을 호출하면 안된다.대신 early return이 실행되기 전에 항상

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

Business logic & UI logic

redux와 react-query에 관한 글을 지난번에 작성할 때Business logic과 UI logic 이라는 단어가 나왔는데 이 단어들의 정확한 뜻을 알지 못해서 이번에 정리해보려한다.ex) 홈페이지 회원가입회원정보 작성회원가입 버튼이 과정 중 아이디 중복 검사

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

react-query

redux, mobx와 비슷한 상태관리 라이브러리기존 라이브러리 : 요청 -> 참조 혹은 예외처리react-query : 알아서 캐싱, 리패칭전역 state를 client와 server 로 구분client-state : 세션간 지속적이지 않는 데이터, 동기적, 클라이언

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

useRef()

javascript의 querySelector 같은 놈이다.const refContainer = useRef(initialValue);querySelectory로 가져오고 싶은 component에 ref 속성을 추가하고 ref={refContainer} 같은 형식으로

2021년 7월 29일
·
0개의 댓글

react-cookie 라이브러리

npm i react-cookie'cookie-name'이 쿠키의 key가 된다.쿠키 세팅 name(string): cookie namevalue(string|object): name에 해당하는 cookie의 값을 저장(object 가능)options(object) :

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

리액트 라우터와 코드 스플리팅

key words리액트 라우터웹팩 설정code splitting : 프로젝트 코드를 빌드 할 때 여러파일로 저장SEO서버사이드 렌더링contents리액트 라우터 사용해보기SPA에 대해 이해, 리액트 라우터(v4)를 사용하여 여러종류의 라우팅 방법 알아보기코드 스플리팅

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

react url query split

/something/detail?term=123 과 같이url 쿼리가 포함된 주소에서 query값 가져오기npm i query-stringhttps://www.npmjs.com/package/query-stringhttps://react-router.

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

Higher Order Component(작성중)

고차 컴포넌트, HOC : Higher Order Component컴포넌트 로직을 재사용하기 위한 React의 고급 기술React API의 일부가 아니며, 리액트의 구성적 특성에서 나오는 패턴컴포넌트는 props를 UI로 변환반면, 고차 컴포넌트는 기존 컴포넌트를 새로

2021년 7월 22일
·
0개의 댓글