안녕하세요, 오늘은 React Query의 setQueryData 함수를 편리하게 사용하기 위해 만든 useSetQueryData 훅에 대해 소개하려고 합니다. 배경 이전에는 주로 캐싱 데이터를 업데이트할 때 UI 업데이트를 위한 Optimistic Update 용도로 사용하고는 했는데, 최근 프로젝트에서 수많은 ApI 요청으로 인한 서버 비용을 개선하기 위해 캐시를 수정하게 되었습니다. 동기 Optimistic Update를 처음 접했을 때 인피니티 쿼리에 적용하면서 다가가기 어렵고, 시간도 꽤 소요되었던 경험이었어, 처음 접하시는 분들이 더 쉽게 활용할 수 있도록 쿼리 캐시 수정용 훅을 만들었습니다. setQueryData 용도 빠른 UI 업데이트 어떠한 데이터를 수정, 삭제, 생성 (mutate) ..
안녕하세요 오늘은 nextJS에서 제공하는 layout(v.13) getLayout()에 대해 다뤄보겠습니다. 회사 보일러플레이트에서는 현재 기존에 전역레벨에만 사용하던 Redux toolkit을 과감히 버리고 현재는 전역 / 지역마다 상태를 관리할 수 있는 React context API를 사용하고 있습니다. 실제로 사용하는 범위에서 상태와 핸들러를 관리하다보니 코드의 응집도가 높아서 매우 만족하며 사용하고 있습니다. context api의 렌더링 이슈는 use-context-selector가 나온 뒤로 적용시켜 리랜더링의 이슈도 해결 되었죠. 공통된 로직과 패턴에는 provider를 각 페이지마다 감싸줘 공통된 로직과 패턴이라면 같이 사용할 수 있어 유용하게 사용하고 있는데요. 작업을 하다보니 페이지..
7. (부록) 메모리 누수 디버깅 가이드 (feconf 2023 토스플레이스 세션을 듣고) 지난 6개의 포스팅에 걸쳐 클로저에 대해 깊게 이해해 보는 시간을 가졌습니다. 특히 지난 포스팅에서는 클로저 사용 시 주의할 점도 살펴보았는데요. 만약, 예상치 못한 성능이슈가 발생한다면 어떤 방법으로 디버깅할 수 있을까요? 이번 포스팅에서는 feconf 2023 토스플레이스 세션 메모리 누수 디버깅 가이드를 듣고 적용해본 경험을 공유합니다. * 간단히 다룰 포스팅이기 때문에 자세한 설명은 링크로 첨부된 세션을 직접 보시는 것을 권장합니다. 목차 자바스크립트에서 함수는 “값"이다. 고차함수 클로저의 이해 클로저와 메모이제이션 리액트에서의 클로저 클로저 사용 시 주의할 점 (부록) 메모리 누수 디버깅 가이드 (fe..
6. 클로저 사용 시 주의할 점 지금까지의 내용을 정리해보면 클로저의 특징을 이해하고 리액트에서 클로저가 어떻게 사용되는지 살펴보았습니다. 이제 저희는 클로저를 이해했으며, 리액트에서의 훅이 클로저와 밀접하게 관련되어 있음을 알게 되었습니다. 따라서 클로저를 잘못 사용한다면 즉, 훅을 올바르게 활용하지 못한다면 예기치 않은 문제가 발생할 수 있다는 점을 생각하시게 될 것 같습니다. 목차 자바스크립트에서 함수는 “값"이다. 고차함수 클로저의 이해 클로저와 메모이제이션 리액트에서의 클로저 클로저 사용 시 주의할 점 (부록) 메모리 누수 디버깅 가이드 (feconf 2023 토스플레이스 세션을 듣고) 그리고 이슈가 발생했을 때 이슈를 바라보는 관점도 달라지실 것 같습니다. 클로저를 제대로 이해하기 전에는 흔한..
5. 리액트에서의 클로저 지난 포스팅에서는 클로저를 활용한 메모이제이션의 예시 까지 살펴보았습니다. 지금까지 이 흐름을 잘 따라와주셨더라면 리액트에서 클로저를 어떻게 활용하고 있는지 감이 오실 수도 있을 것 같습니다. 혹시 React hook이 떠오르지 않으셨나요? 이번 포스팅에서는 리액트가 클로저를 어떻게 활용하고 있는지에 대해 다루겠습니다. 목차 자바스크립트에서 함수는 “값"이다. 고차함수 클로저의 이해 클로저와 메모이제이션 리액트에서의 클로저 클로저 사용 시 주의할 점 (부록) 메모리 누수 디버깅 가이드 (feconf 2023 토스플레이스 세션을 듣고) 리액트가 클래스형 컴포넌트였을 때는 render() 메서드를 통해 상태 변경을 감지할 수 있었습니다. 반면 함수형 컴포넌트는 렌더링이 발생하면 함수..
4. 클로저와 메모이제이션 지난 포스팅에서는 고차함수가 개발자로 하여금 일반적인 문제를 추상화로 만들 수 있게 어떻게 도와주는지 살펴보았습니다. sortBy라는 고차함수 예제를 들면서 고차함수이면서 클로저패턴을 가지고 있다고 하고 마무리를 하였습니다. 이번 포스팅에서는 클로저가 무엇인지 예제를 통해 살펴보고 활용하는 방안을 소개해드리려고 합니다. 목차 자바스크립트에서 함수는 “값"이다. 고차함수 클로저의 이해 클로저와 메모이제이션 리액트에서의 클로저 클로저 사용 시 주의할 점 (부록) 메모리 누수 디버깅 가이드 (feconf 2023 토스플레이스 세션을 듣고) 클로저의 특성을 활용한 대표적인 예시가 메모이제이션 입니다. 값을 저장하고 달라지지 않는 이상 저장된 값을 반환하는 형태이죠. 인자에 어떤 숫자를..
3. 클로저의 이해 지난 포스팅에서는 고차함수가 개발자로 하여금 일반적인 문제를 추상화로 만들 수 있게 어떻게 도와주는지 살펴보았습니다. sortBy라는 고차함수 예제를 들면서 고차함수이면서 클로저패턴을 가지고 있다고 하고 마무리를 하였습니다. 이번 포스팅에서는 클로저가 무엇인지 예제를 통해 살펴보고 활용하는 방안을 소개해드리려고 합니다. 목차 자바스크립트에서 함수는 “값"이다. 고차함수 클로저의 이해 클로저와 메모이제이션 리액트에서의 클로저 클로저 사용 시 주의할 점 (부록) 메모리 누수 디버깅 가이드 (feconf 2023 토스플레이스 세션을 듣고) 클로저의 가장 기본적인 개념은 외부 함수 내에 중첩된 내부 함수라는 것입니다. 그리고 스코프 레벨에 접근할 수 있다는 특징이 있는데요. 자체 선언 내에서..
안녕하세요 자바스크립트에서의 함수를 다룬 지난 포스팅에 이어서 이번 포스팅에서는 고차함수에 대해 다뤄보겠습니다. 목차 자바스크립트에서 함수는 “값"이다. 고차함수 클로저의 이해 클로저와 메모이제이션 리액트에서의 클로저 클로저 사용 시 주의할 점 (부록) 메모리 누수 디버깅 가이드 (feconf 2023 토스플레이스 세션을 듣고) 2. 고차함수 지난 포스팅의 내용을 정리해 보면 자바스크립트에서 함수는 데이터형이기 때문에 저장되고 전달되고 반환하는 예시를 살펴볼 수 있었습니다. 예시에서는 인자로서 다른 함수를 취하는 함수까지 있었지만, 다른 함수를 반환하지는 않았는데요. 함수를 인자로 받고 또 반환하며 이를 출력하는 고차함수에 대해 알아보겠습니다. 고차함수란 1. 다른 함수를 인자로 받거나 2. 다른 함수를..
- Total
- Today
- Yesterday
- React
- 프로그래머스
- 항해99
- 프로그래머스 자바스크립트
- cs50
- reactquery
- 자바스크립트알고리즘
- 실전프로젝트
- 파이썬알고리즘
- 자바스크립트 비동기 처리
- 자바스크립트 클로저
- github
- 타입스크립트
- GIT
- network
- html
- 자바스크립트
- 리액트
- python
- 알고리즘자바스크립트
- javascript
- css
- 백준
- 네트워크
- 클로저
- 프로그래머스 베스트앨범 자바스크립트
- 모두를위한컴퓨터과학
- 모두를 위한 컴퓨터 과학
- 리액트네이티브
- 무한스크롤
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | |||
5 | 6 | 7 | 8 | 9 | 10 | 11 |
12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 | 20 | 21 | 22 | 23 | 24 | 25 |
26 | 27 | 28 | 29 | 30 | 31 |