React

프로젝트를 진행 하던 중 textarea를 사용하고, 여기 사용자가 입력한 데이터를 서버로 전송 그리고 이를 받아 출력하는 과정에서 문제가 생겼다. 그 문제는 이제 사용자가 입력한 내용에 태그까지 포함이 되는 것이다.위와 같이 내용에 태그까지 같이 포함된 것이다. 이는 내용 읽는데 문제 있을 뿐만 아니라 보안상의 문제가 생길수도 있다.이렇게 입력값에 태그까지 포함된 이유가 있다. {} 내부의 값이 HTML 코드가 포함된 문자열인 경우HTML 태그를 인코딩해서 처리하므로, 브라우저에는 태그가 그대로 보이게 된다. 이러한 이유로 태그가 보이는 것이다.근데 여기에 문제가 태그가 그대로 보인다면 XSS 공격에 취약해진다. 1. XSS란?웹 해킹 공격 중 XSS라는 공격 기법이 있다. 이는 Cross Site S..

1. 원하는 기능위와 같이 조건에 따라 각자 다른 페이지에서 다른 헤더를 보여주게 합니다.2. 사용한 기술useMatch 필요한 패스를 변수로 선언한다. const prId = useMatch("pr/:_id"); const prIdEdit = useMatch("pr/:_id/edit");그리고 하나의 변수로 이를 묶는다.const headerMatch = prId || prIdEdit ||패스를 할당 받은 변수를 if문으로 조건을 준다. if (headerMatch) { return ( 제목 ); }그러면 저 조건에 맞은 페이지는 위의 헤더를 보여줄 것이고, 그게 아니라면 다른 헤더를 보여준다.해결 방법1. useMatch(패스)..

1. persist 미들웨어persist는 Zustand 상태를 지정된 스토리지에 저장하고, 페이지를 새로고침하거나 애플리케이션을 다시 열 때 해당 상태를 복원하는 역할을 한다. 1-2. 특징상태 저장 및 원본: 상태를 브라우저의 localStorage 또는 sessionStorage 같은 스토리지에 저장한다.기본 키 제공: 저장소에서 상태를 구분하기 위한 키를 설정할 수 있다.직렬화/역직렬화: 상태를 JSON형식으로 저장하고 복원한다.선택적 상태 저장: 필요한 특정 상태만 선택적으로 저장할 수 있다.import { create } from 'zustand';import { persist } from 'zustand/middleware';const useStore = create( persist( ..

1. Fetch-on-render1-1. 개념데이터를 컴포넌트가 렌더링된 이후에 가져온다.일반적으로 useEffect를 사용하여 데이터 fetching을 실행하고, 상태를 업데이트하여 화면에 데이터를 렌더링한다.1-2. 장점구현이 간단하고, React의 기존 생명 주기를 따른다.초기에 최소한의 코드로 시작하기에 적합하다.1-3. 단점컴포넌트가 먼저 렌더링되고 데이터를 가져오는 동안 빈 상태나 로딩 화면이 보인다.사용자 경험(UX)이 떨어질 수 있다. function Component() { const [data, setData] = React.useState(null); React.useEffect(() => { fetch('/api/data') .then((response) => re..

1. useMutationReact Query 라이브러리에서 제공하는 훅으로, 서버에 데이터를 생성, 수정, 삭제하는 비동기 작업을 간단하고 효과적으로 처리할 수 있도록 도와준다. 주로 POST, PUT, DELETE 요청과 같은 작업에 사용되며, React 상태 관리와 결합하여 데이터 갱신 및 UI 업데이트를 효율적으로 처리한다. 1-1. 주요 특징비동기 데이터 조작: 데이터를 서버에 전송하거나 수정하는 작업을 처리한다.상태 관리isLoading: 요청이 진행중인지 나타냄isError: 요청이 실패했는지 나타냄isSuccess: 요청이 성공했는지 나타냄옵션을 통한 제어성공 또는 실패 시 호출되는 콜백 함수를 설정할 수 있음(onSuccess, onError 등)자동 리패치데이터 변경 후 React Qu..

1. React useQueryReact Query에서 제공하는 훅으로, 서버에서 데이터를 가져오고 이를 관리하는 강력한 도구이다. 비동기 데이터 패칭, 캐싱, 업데이트, 에러 핸들링 등을 간편하게 처리할 수 있다. 1-1. 주요 특징비동기 데이터 패칭데이터를 서버에서 가져오기 위해 사용된다. 내부적으로 데이터를 자동으로 가져오고 캐싱한다.캐싱 및 데이터 일관성같은 키(queryKey)로 요청하면 이미 캐싱된 데이터를 사용하고, 필요 시 다시 패칭한다.자동 갱신 및 리패치데이터를 갱신하거나 특정 조건에서 자동으로 다시 요청한다.로딩 및 에러 상태 관리데이터 로드 상태, 에러 발생 여부를 간단하게 확인할 수 있다. 1-2. 기본 사용법import { useQuery } from '@tanstack/rea..