본문 바로가기

coding59

async-await function in useEffect useEffect는 일반적으로 리액트에서 데이터 가져오기가 일어나는 곳이다. 데이터 가져오기는 비동기 함수를 사용하는 것을 의미하고 useEffect를 사용하는 것은 생각만큼 간단하지 않을 수 있다. 잘못된 방법 useEffect에서 데이터 가져오기 수행하는 잘못된 방법 한가지: ... // ❌ 이렇게 하지 마세요 useEffect(async () => { const data = await fetchData(); }, [fetchData]) ...리턴하는 데이터가 소리를 지르는 코드가 될 것이다. 여기서 문제는 useEffect의 첫번째 인수가 아무것도 반환하지 않거나(정의되지 않음) 함수를 반환하는 함수여야 하는데, 비동기 함수는 함수로 호출할 수 없는 Promise를 반환한다. useEffect 후크.. 2022. 2. 22.
개발_일지 / 무한 스크롤 / Infinite Scroll / Intersection Observer API 들어가기 무한 스크롤의 일반적으로 알려진 해결방법(=스크롤 이벤트)은 신뢰성이 부족하고 브라우저나 사이트에 부하를 주기때문에 좋지 못한 사용자 경험을 낳는다. Intersection Observer API는 감시하고자 하는 요소가 다른 요소(viewport)에 들어가거나 나갈때 또는 요청한 부분만큼 두 요소의 교차부분이 변경될 때 마다 실행될 콜백 함수를 호출한다. 즉, 사이트는 요소의 교차를 지켜보기 위해 메인 스레드를 사용할 필요가 없어지고 브라우저는 원하는 대로 교차 영역 관리를 최적화 할 수 있다. 개발하기 IntersectionOberver VS IntersectionObserverEntry IntersectionObserverEntry의 인스턴스가 IntersectionOberver 콜백에 전.. 2022. 2. 14.
[크롬 익스텐션] Clipboard 개발 일지 설계하기 textarea 생성 만든 textarea 안보이게 스타일링 body에 추가 getSelection()과 createRange()를 사용해 clipboard할 텍스트 선택 Document.execCommand() 명령어로 copy하기. getSelection 영역 초기화 놓쳤던 부분 textArea 엘리먼트에 자체 focus(), select()를 사용하였더니 크롬 확장자 개발 특성상 크롬 확장자와 기존 페이지의 input이 충돌하여 먹지 않아서 document.getSelection(), getSelection.createRange()를 이용해야 했음. 이전 소스: const textArea = document.createElement('textarea'); textArea.va.. 2022. 2. 14.
gqg로 git commit 하기 gqg 설치 $ brew install gpg 사용할 이름과 이메일을 설정 $ gpg --gen-key gpg (GnuPG) 2.2.27; Copyright (C) 2021 Free Software Foundation, Inc. This is free software: you are free to change and redistribute it. There is NO WARRANTY, to the extent permitted by law. Note: Use "gpg --full-generate-key" for a full featured key generation dialog. GnuPG needs to construct a user ID to identify your key. Real name: gi.. 2022. 2. 8.