프론트엔드 (37) 리액트 쿼리와 리액트 라우터 리액트쿼리, 리액트 라우터 함께 사용하여 데이터 가져오기import { useLoaderData } from 'react-router-dom';function HomePage () { const navigate = useNavigation(); const params = useParams(); //const data = useLoaderData(); // ⭐️ 위 loader() 함수에서 반환된 값을 사용하지 않고 useQuery를 계속 사용한다. // fetchQuery를 사용하면 react-query가 해당 요청을 보내고 응답 데이터를 캐시에 저장하게 되므로, useQuery에서는 캐시된 데이터를 사용하게 된다. // 다른 화면으로 나갔다가 다시.. react query로 데이터 전송하기- mutation, 쿼리 무효화 const { mutate, isPending, isError, error } = useMutation({ // mutationKey: 전송은 응답 데이터를 캐시 처리하지 않기 때문에 필수로 필요한 것은 아님 mutationFn: createNewEvent,})// 여기서 받아오는 mutate함수로 이 함수를 언제 실행할지 지정할 수 있다.Mutation을 사용하여 Post요청하기useQuery는 데이터를 가져올 때 사용useMutation는 데이터를 전송할 때 사용useMutation 사용법useMutation 사용const { mutate, isPending, isError, error } = useMutation({ // mutationKey: 전송은 응답 데이터를 캐시 처리하지 않기 때문에.. react query로 Get요청하기 - 캐시처리, 동적쿼리, 요청 취소, 비활성화 🧐 Tanstack Query란?http 요청을 전송하고 프론트엔드 UI를 백엔드 데이터와 동기화된 상태로 유지하는데 이용하는 라이브러리 Tanstack Query가 반드시 필요한건 아니고, useEffect와 fetch로 충분히 구현할 수 있다.하지만 Tanstack Query를 사용하면 훨씬 깔끔하고 수월하게 개발할 수 있다.또한, 캐싱처리나 refetch트리거 등 고급 기능을 이용할 수 있다.🔧 설치, 사용법, 이점설치npm install @tanstack/react-query사용법- tanstack query는 HTTP요청을 전송하는 로직이 내장되어 있지 않고, 요청을 관리하는 로직을 제공: 요청 데이터와 발생 가능한 오류를 추적하는 역할 등 - 모든 get요청에서 query key를 이용해 .. React + JS 뒤로가기 방지 구현 모든 작성화면에서 뒤로가기를 눌렀을 때, 이를 한번 더 확인하는 컨펌을 띄우자는 요구사항이 들어왔다. MDN을 살펴보면 뒤로가기 수행 시 popstate 이벤트 가 발생한다고 한다. popstate - Web API | MDNWindow 인터페이스의 popstate 이벤트는 사용자의 세션 기록 탐색으로 인해 현재 활성화된 기록 항목이 바뀔 때 발생합니다. 만약 활성화된 엔트리가 history.pushState() 메서드나 history.replaceState() 메서developer.mozilla.org 해당 이벤트에 대한 처리는 모든 작성화면에서 공통적으로 사용되므로 커스텀훅을 만들어 필요한 곳에서 사용해주었다. 🚫 뒤로가기 막기history.pushState() 메서드는 브라우저의 세션 기록 스택에.. [JS] 개인정보 마스킹 함수 (이름, 이메일, 전화번호) 프론트엔드에서 데이터를 마스킹할 일은 흔치 않을 거라고 생각하지만, 한번 더 마스킹 처리가 필요할 때 꺼내쓰기 용이한 함수이다. 기본적인 부분이 처리되어 있고,요구사항에 따라 메소드 내부 조건문을 추가하거나,새로운 메소드를 추가하면 두고두고 용이하게 사용할 수 있을 것 같다. export const maskingFunc = { checkNull: str => typeof str === 'string' ? !str.trim() : !str, /* ※ 이메일 마스킹 ex1) 원본 데이터 : abcdefg12345@kakao.com 변경 데이터 : abcd********@kakao.com */ email: function(str){ const originStr = str; const emailStr =.. Next.js Auth 설정 + 새창으로 로그인하기 1. 구글 클라이언트 아이디, 시크릿 얻기 (주제에 살짝 벗어나므로 접어두었다.) 더보기1. 새프로젝트 생성 Google 클라우드 플랫폼로그인 Google 클라우드 플랫폼으로 이동accounts.google.com 2. API 및 서비스 > OAuth 동의 화면 3. 유저타입에서 ‘외부’ 선택 4. 각 필드에 해당사항 입력 5. 사용자 인증 정보 > 사용자 인증 정보 만들기 > OAuth 클라이언트 ID일단 로컬에서 돌릴거여서 브라우저 요청에 사용되는 URL은 localhost:3000 으로 하고, 리디렉션 URI는 /api/auth/callback/google 로 해야 정상적으로 작동한다. (약속된 거라고 함)6. 다하면 뜨는 모달에서 아이디 비밀번호를 env에 담아둔다 2. Next Auth 사용하기.. nextJS로 만들고 vercel로 배포한 홈페이지 도메인 이전하기 회사에서 NextJS로 개발하고 Vercel로 배포한 홈페이지의 도메인 변경 요청이 들어왔다. (참고로 도메인은 타사이트에서 구매해두었던 도메인을 vercel에 등록하여 사용하고 있었음)처음에는 그냥 vercel 에서 redirect만 해주고 끝났다고 생각했는데,생각해보니 SEO를 위해 등록해둔 서치콘솔에서도 기존 도메인을 신규 도메인으로 연결해주는 작업이 남아있었다.서치콘솔에서 방법을 찾아보니, 아래와같이 장황하고 긴 글이 있어서 너무 어렵게 느껴졌으므로,실제로 내가 해준 것들 위주로만 간단하게 정리하고자 한다.사이트 이동 및 이전 | Google 검색 센터 | 문서 | Google for Developers1. Vercel 에서 새 도메인으로 redirect1-1. 도메인 추가Project S.. [로그인 구현] 권한별 렌더링 1. 로그인 기능 구조로그인이 필요한 페이지와 그렇지 않은 페이지들로그인이 불필요한 페이지: 리액트 라우터 사용해서 컴포넌트 물어가도록 작성로그인이 필요한 페이지: 로그인 되어있는지 없는지 판단 후 처리이렇게 처리될 경우, 반복되는 로그인 확인 코드&로직들이 발생한다.페이지 이동할 때마다 로그인이 되었는지 확인해야하기 때문에 반복되는 로그인 확인 코드&로직들이 발생한다.반복되는 코드는 모듈화, 재사용하기-> 껍데기 컴포넌트 Authorization은 로그인이 필요한 페이지들을 담아가서 로직에 맞게 렌더링해줌실제 적용동작 살펴보기2. 레이아웃 컴포넌트RouterInfo 활용해서 사이드바 정보 생성사이드바, 헤더 등 레이아웃으로 감싸주기3. 유저 권한에 따라 접근 제어되는 웹 만들기 (admin)Missio.. 이전 1 2 3 4 5 다음
