전체보기 (7) 썸네일형 리스트형 Reflow와 Repaint Reflow와 Repaint는 무엇인가? Reflow는 특정 액션이나 이벤트에 의해서 DOM에 존재하는 Element의 크기나 위치가 변경될 경우 영향을 받는 모든 Element의 너비, 높이와 같은 모든 수치를 다시 계산하는 과정이다. Repaint는 Reflow가 끝난 후 사이즈가 모두 계산된 렌더 트리를 가지고 화면에 Element들을 다시 그리기 시작하는데 이 동작을 Repaint라고 한다. Repaint는 Reflow가 일어난 후에만 수행되는 것이 아니라 color, background-color와 같이 Element의 수치가 변경되지 않는 스타일을 변경할 경우 Reflow는 일어나지 않지만 Repaint는 발생하게 된다. 브라우저의 렌더링 과정과 함께 보는 Reflow, Repaint 위의 그.. Closure가 뭔가요? 짜잔! 폐쇄입니다. 이상 Closure가 무엇인가에 대한 포스팅이였습니다~ Execution Context Closure가 무엇인지 알기 위해서는 우선 Execution Context에 대하여 알고 있어야 합니다. Execution Context는 javascript 코드를 실행하기 위한 환경 정보를 모아둔 객체입니다. 기본적으로 생성되는 Global Context를 제외하면 eval을 통해 코드를 실행하거나 함수를 호출할 때 Context 정보를 생성합니다. Context가 생성되면 Call Stack에 쌓이게 되며 해당 Context의 작업이 종료되면 Call Stack 밖으로 나가게 됩니다. 이때 중요한 것은 Call Stack 밖으로 나가게 되더라도 Context는 바로 해제되지 않습니다. jav.. React-Query LifeCycle 과 Caching react-query는 다음과 같은 라이프 사이클을 가지고 있습니다. Idle idle 상태는 enabled flag가 false이고 initalData 또한 존재하지 않는 상태입니다. initalData가 존재한다면 fresh 데이터로 취급하기 때문에 이를 원하지 않는다면 initalStale을 통해 stale한 데이터로 만드는 것을 고려해봐야 합니다. Fetching API를 호출중인 상태 입니다. Fresh query instance의 데이터가 최신 데이터라고 간주하는 상태입니다. staleTime이 지나면 stale 상태가 됩니다. 이때 fetch 해온 데이터는 queryClient에 caching 됩니다. Stale query instance의 데이터가 최신 데이터가 아니라고 간주하는 상태입니다.. Debounce와 Throttle Debounce와 Throttle이 무엇인가? Debounce와 Throttle은 자주 사용되는 이벤트나 함수의 실행 빈도를 줄여 성능적인 이점을 취하는 기법입니다. Debounce 요청이 들어온 뒤 일정 시간 뒤에 요청을 수행합니다. 만약 지정된 시간이 지나지 않았는데 요청이 들어온다면 이전 요청은 취소됩니다. Throttle 일정 시간 내에 한 번만 요청을 수행합니다. 지정된 시간 간격 내에 최대 1번의 요청만 수행됩니다. setTimeout을 사용한 구현 setTimeout을 사용한 방식의 문제점 setTimeout이나 setInterval을 사용한 방식은 예상한대로 동작하지 않을 수 있습니다. javascript는 싱글 스레드로 동작하기에 setTimeout이나 setInterval과 같은 비동기.. React-Query 사용해보기 react-query? react-query는 서버의 상태를 fetching 해오거나, caching, synchronizing, updating을 쉽게 할 수 있도록 도와주는 라이브러리 입니다. react-query를 사용하기 이전에는 서버에서 데이터를 받아오는 작업을 수행하기 위해 redux나 mobx를 사용하여 비동기 작업을 수행 후 store에 저장한 뒤 데이터를 각 component에서 가져와 사용하였습니다. 하지만 이럴 경우 몇 가지 단점이 생기게 됩니다. 서버 데이터 이외에 isLoading이나 isError와 같은 상태가 많아집니다. 서버에 데이터를 요청시 response가 왔는지 에러가 발생하였는지에 관한 상태를 체크하기 위해서 입니다. 서버에 요청을 보내기 위한 코드와 데이터 가공을 위.. CRA (create-react-app)을 사용한 boilerplate 만들기 CRA는 무엇인가? CRA는 React 개발을 위한 여러 가지 설정 작업을 미리 해둔 Boilerplate입니다. CRA를 사용하는 이유는 다음과 같습니다. 1. react 프로젝트를 구성할 때 필요한 eslint, babel, webpack과 같은 종속성을 신경쓰지 않아도 된다. 2. 프로젝트 구성에 필요한 각 패키지들의 설정에 많은 시간을 소요하지 않아도 된다. 3. react 프로젝트 구성에 필요한 많은 양의 패키지를 깔끔하게 react-scripts하나로 퉁칠 수 있다. 하지만 CRA를 사용하다 보면 Webpack이나 babel의 설정을 변경해야 하는 경우들이 생기는데 이를 위해 eject나 customize-cra와 같은 것들을 사용합니다. CRA의 eject를 사용하지 않는 이유 eject는 .. 2021년 회고 회고를 시작하기 전에 저는 2021년까지는 병원 자동화 솔루션 업체에서 근무하는 프로그래머였습니다. 그렇다 보니 의료 장비나 실제 검사에 관한 지식이 많은 편은 아닙니다. 혹여나 회고를 읽으시다 틀린 점이 보일 경우에는 댓글로 남겨주시면 감사하겠습니다. 회사 업무 LIS Interface 유지보수 지난해에 이어서 연초에는 여러 장비들을 신규 개발하거나 유지보수를 하였습니다. I-Stat I-Stat은 Abbott Laboratories에서 만든 현장 검사 화학 분석 기기입니다. 응급실로 실려온 환자의 전혈 검체를 카트리지에 넣게 되면 2분 이내로 POCT(Point Of Care Testing, 간이 신속검사)의 결과를 얻을 수 있습니다. 검사의 결과는 I-Stat의 서버 컴퓨터로 전송이 되며 서버 컴.. 이전 1 다음
