리액트(React): 모달 팝업시 뒷배경(오버레이) 스크롤 되지 않게 하기

body 태그의 css를 변경합니다. position을 fixed로 하고, top의 위치를 현재 스크롤 위치로 설정한 뒤 overflow-y: scroll; width: 100%; 을 추가 지정하면 스크롤바로 인해 배경의 위치가 움직이지 않고도 스크롤 방지를 할 수 있습니다. useEffect를 사용해 css를 변경하며, 모달이 사라질 때에는 useEffect의 return을 사용해 body의 cssText를 리셋시킨 다음 window,scroll을 이용해 현재 스크롤 위치로 더보기…

워드프레스 ‘댓글 승인제’를 사용중인 경우 댓글 달았을 경우 메시지 표시하기

워드프레스는 특성상 해외 스팸 댓글이 많이 달리기 때문에 사이트를 운영중인 경우 위의 설정처럼 댓글 승인제를 설정하고 사용하는 경우가 많습니다. 그런데 댓글 승인제를 설정해도 댓글 후 아무런 경고 메시지를 보내지 않기 때문에 댓글을 다는 사용자가 시스템 오류 등으로 댓글이 안달린 것으로 착각할 수 있습니다. 그래서 댓글 작성 후 성공 메시지를 표시하려면 더보기…

리액트(React): Redux-saga 기초 사용법 요약 (상태 관리시 부수효과 관리하는 미들웨어)

리액트(React): React Redux 요약 정리 redux-saga 깃허브 역할 redux-saga는 애플리케이션에서 일어나는 사이드 이펙트(side effects) (데이터를 불러오는 비동기 처리나 브라우저 캐쉬에 접근하는 행위들)을 쉽게 관리하며 효과적인 실행, 손쉬운 테스트 그리고 에러 핸들링을 쉽게 해준다.   특징 saga 패턴을 차용 (참고 블로그) 미들웨어로서 역할을 수행 (React는 Redux 액션을 수행하면 Redux-Saga에서 디스패치하여 Redux의 더보기…