styled-components 성능자주 변경되는 styled 노드는 attr 함수를 통해서 style을 정의해주는 게 성능상 좋다.(개발 콘솔에 waring을 띄어줌)const PointerStyled = styled.div.attrs({ style: ({ isDragging, playRate }) => ({ left: `${isDragging === 'true' ? 0 : playRate}%` })})` position: absolute; transition: 0s; width: ${pointerWidth}px; height: 10px; background: blue; border-radius: 10px;` React does not recognize the `[whatever]` prop on a ..

This synthetic event is reused for performance reasons. If you're seeing this, you're accessing the property `target` on a released/nullified synthetic event. This is set to null. If you must keep the original synthetic event around, use event.persist(). this.setState((state) => ({ checkedSong: { ...state.checkedSong, [name]: ev.target.checked // 요놈이 문제 } })) 위와 같이 event 속성을 직접적으로 비동기 함수에 적용할 때 ..

리액트를 다루는 기술 - 김민준 velopert 라는 닉네임으로 더 유명한 분이 출간한 리액트 입문 서적으로 리액트와 관련하여 구글에서 검색하면 제일 많이 나오는 페이지가 이 저자분의 블로그가 아닐까 싶다. 본인도 리액트를 처음알았던 몇년 전부터 자주들렀던 블로그인데 포스트 하나에도 정성과 고생이 느껴졌다. 이 책은 그 정성과 고생으로 나온 결과물로 보인다. 책 내용 중 많은 부분이 실제로 블로그에서 다뤘던 내용인데 이를 좀더 순차적으로 접근할 수 있게 책으로 담아냈다. 개인적으로 블로그에 자주 들렀던 편이기 때문에 책에 담겨져 있는 내용들을 많이 알고 있는 편이다. 그래서 블로그와는 다른 내용을 기대했었는데 기존 블로그에 포스팅된 내용과 유사한 부분이 많아서 아쉽다. 그래도 복습겸 내용을 하나하나 따라..

HTML 구조를 다루는 DOM 파서 CSS 구조를 다루는 CSSOM 파서이 둘의 작업이 완료되면 렌더링 트리를 만들어 렌더링이 시작되고 페인팅되어 브라우저에서 우리가 볼 수 있게 된다. 문제는 이 파서들의 작업을 멈추게 하는 경우가 있다는 것. 크롬 개발자도구의 네트워크 탭 하단을 보면 DOMContentLoaded 항목의 속도가 표시되어 있는데 의미하는 바는 다음과 같다.HTML 다운로드 시간 + HTML DOM 빌드 시간 렌더링을 빠르게 구축한다는 것은 DOMContentLoaded 에 해당하는 시간을 줄이고 파서 차단을 최소화 시킨다는 말이다. HTML, CSS, JS 상호작용 메커니즘서버에 http 요청시 서버는 HTML 을 응답하는데 이 과정에는 우리가 인지하지 못하는 컴퓨터간의 효율적인 낮은 ..

1. 비동기 처리요청에 대한 응답이 끝날때 까지 다음 작업을 기다릴 필요가 없다면 비동기로 처리한다. 이는 작업 순서(비지니스)를 정확히 알고 있어야 하며 코드의 의존관계를 잘 파악해야만 적절히 적용 가능하다. 그리고 단순히 비동기를 사용하는 것으로 그치는게 아니라 어느 지점에서 비동기와 동기를 구분해서 사용해야 하는지 깊게 고민해봐야 하며 연속적인 비동기 작업중에 중간중간 필요한 작업을 배치시켜 효율을 극대화 할 수 있어야 한다. 2. 이미지 처리 - 레이지 로드다양한 종류의 리소스가 있지만 가장 큰 용량 중 하나가 이미지다.그렇기 때문에 이미지 요청은 가장 나중으로 미루는 것이 사용자 경험상 좋다.브라우저 별로 최대 요청 상태에 있는 커넥션 갯수가 한정되어 있기 때문에 요청에 대한 응답이 오래 걸릴 ..

기존에는 모놀리식 프로젝트에서 마이크로 분산 아키텍처를 적용하여 서비스 구축을 하는 경우가 많아졌다. 오래 전 구축해서 아직도 현역으로 사용되는 시스템들을 보면 모놀리식으로 적용된 것을 어렵지 않게 볼 수 있다. 모놀리식에서 마이크로식의 서비스가 주목받았던 큰 사건은 아마도 오래전 넷플릭스 장애가 터지면서라고 들었다. 들은 얘기다... 아주 사소한 장애가 발생했지만 모놀리식 아키텍처로 구축된 서비스는 시스템 전체가 다운되는 잊을 수 없는 고통을 남겼다. 이를 계기로 시스템을 잘게 나누어서 마이크로 아키텍처를 구현하는 계기가 되었다는 이야기를 들었다. 어쨌든 현대의 인터넷 서비스들은 고가용성을 목표로 구축된다. 이에 효과적이라 평가받는 아키텍처인 마이크로서비스는 중요한 아키텍처로 자리잡았다. 이런 방향을 ..