워크플로우 관련 기능을 만들기 위해 react-beutiful-dnd를 사용하였다. onDragEnd 함수에서 목록에 대한 값들을 업데이트하는 setState들을 사용하였다. 일반적인 경우 매우 정상적으로 작동되지만, 빠르게 사용하였을 경우 key값이 중복되었다고 하며 에러가 발생하였다. 구글링을 통해 확인한 결과, useState가 비동기적으로 작동하기 때문에 발생하는 에러라는 것을 확인하였다. 해당 문제는 react18에 도입된 flushSync를 setState에 사용하니 해결되었다. 하지만 flushSync의 경우, 성능저하를 일으킬 수 있으므로 일반적인 상황에서는 추천하지 않고, 공식문서에서도 최후의 수단으로 사용하라고 나와있었다. 최선이 아닌 차선의 방법이였지만, 이미 왠만한 방법들은 다 시도..

기존에는 ejs를 사용하였기에 express서버 하나만을 배포하여 전부 해결할 수 있었지만, react를 공부하면서 디자인 패턴도 같이 조금씩 공부하다보니 react와 api 서버를 분리하여 배포를 해보고 싶었다. react와 api 서버(nestjs)를 배포하기 위해 nginx를 사용하였다. /etc/nginx/site-available의 default 파일에 해당 코드들을 추가해주면 된다. react, vue와 같은 fe파일들 설정 listen 포트 설정 도메인 설정 location의 root 설정(index.html 파일이 들어있는 위치) 이렇게 설정해놓고 도메인에 접속하면 배포가 완료된 것을 확인할 수 있다. ※ react나 vue의 경우, router를 설정할 시 배포 환경마다 추가로 설정해야되..