전체 글

useLayoutEffect

컴포넌트가 unmount 될 때 video의 src 태그를 한 번 비워줄 필요가 있었다. 기존 코드에서 video src 세팅을 ref로 분리하고, useEffect를 통해 처리하고자 하였다. 만약 기존 코드가 아래와 같았다면, const VideoPlayer = ({ videoUrl }: { videoUrl?: string }) => { return ; } 다음과 같이 수정하였다. const VideoPlayer = ({ videoUrl }: { videoUrl?: string }) => { const videoRef = useRef(null); useEffect(() => { if (videoRef.current && videoUrl) { videoRef.current.src = videoUrl; }..

React Query의 InvalidateQueries가 동작하지 않을 때

문제상황 생성 API를 호출한 뒤 성공한 경우 invalidateQueries 를 통해 기존에 조회했던 쿼리를 무효화시키고 데이터를 새로 조회해오고자 했다. React Query DevTools를 통해 쿼리 조회 결과를 살펴보면 다음과 같다. 맨 처음에 ["PRODUCTS",false] 쿼리를 먼저 조회하였다. 해당 컴포넌트가 unmount 되면서 해당 쿼리 결과는 inactive 상태가 되었다. 이후 ["PRODUCTS",true] 쿼리를 조회하여 현재 fresh 상태의 쿼리 결과를 가지고 있다. 이후 Product 리스트에 새 상품을 추가하면서 해당 쿼리 결과를 업데이트 시킬 필요가 있었고, 아래 두 가지의 방법 중 후자의 방법으로 업데이트를 처리하고자 했다. 1️⃣ 낙관적 업데이트 처리 2️⃣ 쿼리..

Intersection Observer API를 활용한 무한스크롤 구현

Intersection Observer API란 Intersection Observer API는 타겟 요소와 상위 요소 또는 최상위 document 의 viewport 사이의 intersection 내의 변화를 비동기적으로 관찰하는 방법입니다. - MDN 화면 상의 Target Element 노출 여부를 감지하는 API 이다. 스크롤 이벤트 감지 방법과의 비교 scroll event를 감지하여 구현한다. 이때 throttle 혹은 debounce 과 같은 처리가 추가로 필요하며 throttle/debounce 를 사용하는 경우 쓰레드 메모리를 차지하고 성능에도 좋지않다. scrollTop + window.clientHeight 등을 사용해서 끝에 도달했는지 계산한다. 이때clientHeight이나 off..

[React] 일정시간동안 이벤트 발생이 없으면 콜백 함수 실행

화면에서 일정시간동안 입력이 없으면 메인화면으로 전환되는 기능이 필요했다. 기능을 구현하기 위해 아래와 같은 커스텀 훅을 만들었다. useEventTimeout 지정한 이벤트의 발생으로부터 일정 시간 이후에 콜백 함수를 실행시킨다. 먼저, 파라미터로 다음과 같은 값을 받았다. callback : 콜백 함수 events : 트리거를 발생시킬 이벤트 이름 리스트 timeout : 콜백 함수의 실행 딜레이 시간 이때 기본값으로 events는 사용자의 입력을 감지하기 위해 click과 keypress 이벤트를 설정했고 timeout은 5분으로 지정하였다. 구현은 Debounce와 동일한 개념으로 개발하였다. [Javascript] Throttle 과 Debounce 참고 [Javascript] Throttle ..

React-Query 정리

React Query는 리액트 애플리케이션에서 global state 없이 서버 데이터 가져오기, 캐싱, 동기화 및 업데이트를 쉽게 만들어 주는 서버 상태 관리 라이브러리다. React Query의 등장 React 는 서버에서 데이터를 가져오거나 업데이트하는 명확한 방법을 제공하지 않는다. 따라서 개발자들은 데이터를 가져오기 위한 처리를 따로 해주어야 했다. 일반적으로 컴포넌트에서 hook을 사용하여 데이터를 가져와 상태를 관리하거나, 전역 상태 관리 라이브러리를 사용하여 store에 비동기 데이터를 저장하고 가져왔다. 이때 store 는 전역 상태를 관리하는 저장소로 theme 나 locale 과 같은 client state 관리에는 적합하지만, 서버에서 가져오는 데이터 server state 관리에는..

크롬에서 막혀있는 포트

도커로 react를 배포하던 중 아래와 같이 포트포워딩으로 설정한 6000 포트로 접속이 되지 않았다. 구글링해본 결과, 6000포트는 크롬에서 기본적으로 막혀있는 포트 중 하나였다. 8080 포트로 변경후 다시 접속해보니 정상 접속이 되었다. default Chrome blocks the following ports 크롬에서 기본적으로 막혀있는 포트는 아래와 같다. 1, // tcpmux 7, // echo 9, // discard 11, // systat 15, // netstat 13, // daytime 17, // qotd 20, // ftp data 19, // chargen 21, // ftp access 37, // time 22, // ssh 23, // telnet 25, // smtp..

Proxy 서버로 CORS 해결하기

cors 문제를 해결하는 방법에는 두 가지가 있다. 서버에서 CORS 해결 클라이언트에서 proxy 서버 이용 2번 방법을 통해 cors를 해결해보자. react를 배포했을 시 nginx 서버를 사용했다면 proxy_pass를 통해 쉽게 해결할 수 있다. nginx를 사용하여 cors 해결하기 다음과 같이 설정 파일에 원하는 api endpoint를 지정하여 proxy_pass로 해당 api 서버 주소를 적어주면 된다. 이후 /api/*로 호출하는 경우 해당 리액트 앱의 도메인:포트를 거쳐 호출되므로 cors가 발생하지 않는다. /etc/nginx/conf.d/default.conf client_max_body_size 200M; server { #add_header Access-Control-Allow..

Docker 명령어 정리

Docker Image 생성 -f : 도커파일 path -t : 도커 이미지 이름:태그 (태그 안붙이면 latest) $ docker build -f DockerFile -t sample:0.1 . Docker Container 실행 -d : 백그라운드로 실행 -p : 포트포워딩 설정 --name : 컨테이너 이름 설정 $ docker run -d -p 80:80 --name sample sample:0.1 Docker Container 내부 접속 $ docker exec -it sample /bin/bash Docker Image 삭제 $ docker rmi sample:0.1 # 사용하지 않는 이미지 삭제 $ docker image prune # 사용하지 않는 이미지 전부 삭제 $ docker ima..

Github pages 배포하기

1. 깃허브 Repository 생성 깃허브에서 레파지토리를 하나 생성한다. 이후 프로젝트에서 깃허브 레파지토리 생성 첫화면에 나오는 명령어를 참고해서 소스를 push한다. git init git add * git commit -m 'first commit' git remote add origin https://github.com/JIHYE-P/react-github-pages.git git push -u origin master 2. gh-pages 패키지 설치 깃허브에 배포하기 위해 아래 명령어를 통해 gh-pages 패키지를 설치한다. npm install gh-pages --save-dev 3. package.json 수정 패키지 설치 후에 package.json을 열고 아래 항목들을 수정한다. ..

Github 특정 파일 커밋 기록 삭제

문제 git에 API 키와 같은 보안상 문제가 될 수 있는 설정 정보를 담고 있는 파일을 올려둔 것을 발견했다. public 레파지토리는 아니었지만 추후에 언제든 public 레파지토리로 변환될 수 있어 해당 파일을 삭제하려고 했다. 단순히 파일만 삭제하면 git에 이미 커밋된 기록을 통해서 볼 수 있기 때문에 해당 파일과 해당 파일이 커밋된 이후의 전체 커밋 기록을 변경할 필요가 있었다. 해결 아래 명령어를 통해서 해결했다. git filter-branch --tree-filter 'rm -f {filename}' --prune-empty HEAD참고 Github 특정 파일 기록 삭제