ding-co100 [Trouble Shootings #1] React - 콜백 함수 내부에서 여러 setState 함수 호출 시 업데이트 순서 에러 얼마 전 회사에서 작업을 하다가 onClick 같은 이벤트 핸들러 (콜백 함수) 내부에서 두 가지의 setState (setter) 함수를 호출시키는 작업을 했던 적이 있습니다. 사실 함수는 하나의 일만 수행하는 것이 기본적인 원칙이라 많이 들어서 제가 올바르게 코딩을 한 것 같지는 않았습니다. 하지만 의식의 흐름대로 하다 보니깐 그런 작업이 일어났는데 업데이트 순서에 대한 에러가 발생하였습니다. 아무래도 당연한 것이 useState 훅으로부터 반환되는 setter 함수는 비동기적으로 발생하는 것으로 알고 있습니다. 그래서 업데이트 순서가 제 생각대로 올바르게 동기식으로 이뤄지지 않는 것입니다. 구글링 해본 결과 즉시 실행 함수를 이용해서 각각 호출하면 된다 라고 하였지만 제 경우는 해결이 안되었습니다... 2022. 9. 17. [개발 일기] - 22.09.17.Sat (feat. 인피니티 스크롤) 22.09.17.Sat 오늘도 어김없이 JS를 이용하여 알고리즘 2문제를 풀었습니다. 이후 react-query를 이용한 infinite scroll 부분 관련하여 학습하였습니다. 생각보다 내용들을 이해하는 것이 쉽지는 않았습니다. useInfiniteScroll 훅으로 부터 반환되는 여러 property, 그리고 옵션들이 다양했습니다. 학습을 진행하면서 특히 캐싱이라는 것이 브라우저에서 정말 중요하다는 것을 다시금 깨닫게 되었습니다. 회사 업무에서도 모바일 인피니티 스크롤을 구현할 부분이 생겨서 react-query를 이용하였는데 코드를 잘 이해하지는 못하더라도 구현은 해두었습니다. 하지만 라이브러리를 이용하지 않고 자바스크립트의 내장 객체를 이용하거나 몇 가지 조금 방법이 있긴 한데 아무래도 최적화 .. 2022. 9. 17. [개발 일기] - 22.09.16.Fri (feat. 검색 기능) 22.09.16.Fri 오늘은 회사 업무로 검색 스크린 위주로 퍼블리싱 및 FE 작업을 진행하였습니다. 제가 알기로 검색 기능은 디바운스 및 쓰로틀링을 활용하는 등 최적화 부분이 필요한 것으로 알고 있습니다. 사용자가 검색 키워드 한 글자씩 입력할 때마다 서버로 API 요청을 보내는 것은 상당히 무거운 작업이기 때문입니다. (기존 겸상 서비스를 만들 때 시간이 없어서 그냥 검색 API를 붙였는데 클라이언트에서 버벅거리는 현상을 느꼈습니다.) 그리고 아직 API 작업은 하지 않아서 데이터가 어떤 URL로 어떤 컬럼을 가진 형태로 올지 모르는 상태입니다. BE 구현은 따로 없고 Shopify 플랫폼의 StoreFront, Hydrogen을 사용하는 것으로 알고 있습니다. 한번도 사용해보지 않은 서비스여서 잘.. 2022. 9. 16. [Topic #자료구조 03] Binary Tree with Traverse, DFS/BFS, height 구현 with JavaScript class Node { constructor(value) { this.value = value; this.left = null; this.right = null; } } class BinaryTree { constructor() { this.root = null; } // Self, L, R #preOrder(node) { if (node) { process.stdin.write(node.value + ' > '); this.#preOrder(node.left); this.#preOrder(node.right); } } traversePreOrder() { process.stdin.write('PreOrder: '); this.#preOrder(this.root); console.log(); } // L.. 2022. 9. 12. 이전 1 ··· 10 11 12 13 14 15 16 ··· 25 다음 반응형