programming (118) 썸네일형 리스트형 Next App Router 환경 + MSW 설정 작업에 사용될 파일 구조 1. MSW 설치 npm i -D msw@1.3.2 [Usage] npx msw init [options] npx msw init public public 폴더 아래 mockServiceWorker.js 파일이 생성된 것을 확인 package.json 에 msw workinDirectory 세팅 된 것을 확인 "msw": { "workerDirectory": "public" } 2. MSW 구동 세팅 1. fake api/data 세팅 - api/mocks/fake-api/search-api.ts import { rest } from "msw"; import { validData } from "../fake-data/search-data"; // GET method인 /get-n.. [React] S3 Url 일정 시간 동안 not Found 리턴 되는 경우 Video 처리 방안 aws s3 버킷에 에셋을 올리고 나서 url 을 리턴 받는데, 비디오의 경우 일정 시간 동안 해당 url 이 not Found 를 리턴한다 아마도 인코딩 시간동안은 접근이 안되는 것으로 추정(카카오 스토리지도 동일한 현상) 해결방법으로 not Found 를 받는 경우 비디오 요소를 리랜더링 해서 해당 url 에 접근 재시도 일정 주기 & 제한된 횟수 만큼 solution1) 비디오 자체를 리랜더링 내부 state 를 태그의 key 로 사용하여 리랜더링 될 수 있도록 한다 태그의 onError 속성 사용 component/VideoWithErrorCheck.tsx import { useState } from "react"; export default function VideoWithErrorCheck({.. 소셜 로그인 - 카카오 로그인 CORS 에러 발생할 때 - NextJS (frontend) 별건 아니고... 초창기에 흔히 하기 쉬운 실수..(?) Access to fetch at 'https://accounts.kakao.com/login?continue=https%3A%2F%2Fkauth.kakao.com%2Foauth%2Fauthorize%3Fresponse_type%3Dcode%26redirect_uri%3Dhttp%253A%252F%252Flocalhost%253A3000%252Flogin%26through_account%3Dtrue%26client_id%3Dff30835bba2350bfe5fcf200c1eb4891' (redirected from 'https://kauth.kakao.com/oauth/authorize?client_id=ff30835bba2350bfe5fcf200c.. 리액트 에러 바운더리를 사용하여 에러 핸들링하기 (+ react-query) 에러 케이스 에러가 발생하는 원인 관점에서 두가지 케이스가 있다. 1. 프론트 에러 : 주로 Type Error, 참조 에러 등 2. 백엔드 API 에러 : HTTP 케이스와 웹사이트 로직에 따라서 세부로 나뉨 (Get / Post / Put / Delete .. 등) 처리 방안 1. 프론트 에러 a) axios 요청 전부터 에러 발생 (accessToken 없음) 👉 토큰 없음 메시지 Toast UI 표출 & 로그인 페이지로 이동 b) 참조에러 👉 발생하는 컴포넌트를 ErrorBoundary 로 감싸고 fallBackComponent 처리 + Uncaught Error 메시지 제공 2. 백엔드 API 에러 a) GET 조회 결과 빈 데이터 👉 에러로 처리하지 않고, 200 성공에 데이터가 없는 경우 보.. Frontend 관점 HTTP 응답 상태 코드(RESTful API) * 케이스를 마주할 때마다 업데이트 할 예정 Frontend 에서 처리하기 용이하면서도 RESTful API 관점을 잃지 않고 HTTP 응답 상태 코드를 어떻게 약속할지에 대한 생각과 의견이다. 상태 코드 Case 1. GET 조회 시 빈 데이터 - customer/order/{userId} : userId 에 해당하는 order 리스트를 조회했는데, 해당 유저의 오더 건이 없는 경우 - product?word={text} : 쿼리로 조회시 검색 결과가 없는 경우 [응답] status : 200 response : { result : true, data: [] } [추가 고려사항] - result : true / false 의 용도를 어떻게 정의해야 하는가? - 사실상 result : false 인 케이.. [immer] Array for문 돌리면서 연속적인 setState 안되는 이슈 setState 업데이트는 async 작업이다 연속적으로 빠르게 도는 경우 모든 update를 보장할 수 없다 immer 의 produce 함수 안에서 필요한 내용을 만들어서 setState 한다→ Functional update form of the state setter Bad Case // 1. MLList 필터링 & 인덱스 찾기 const targetIdxList = checkedProductId.map((item) => { return productListData[productPackageIdx].MLList.findIndex((el) => el.productId === item); }); // 2. 인덱스 맵 돌려서 값 변경 targetIdxList.forEach((itemIdx) => { i.. [React Custom Hook] 수동으로 새로고침한 경우에만 특정 함수를 trigger 시키는 hook(url Params 삭제) (useDeleteUrlParamsWhenManualRefresh) 1. 수동으로 새로고침한 경우에만 특정 함수를 trigger 시키는 hook(url Params 삭제) 로컬스토리지와 beforeunload 이벤트 사용 input 삭제할 url parms key list 참조 How to detect refresh event in browser ReactJS Window: beforeunload event React | How to detect Page Refresh (F5) useDeleteUrlParamsWhenManualRefresh.ts 코드 // input 삭제할 url parms key list import { useEffect } from "react"; import { useSearchParams } from "react-router-dom"; expor.. [React Custom Hook] Form 의 required field 확인하는 hook (useFormValidation) 1. Form 의 required field 확인하는 hook input fromRef: 타겟 Form element formDataState : 관리되는 form 데이터 state submitFlag : 제출 버튼 눌렀는지 여부 output isFormValidated : validation 통과 되었는지 boolean useFormValidation.ts 코드 import { useEffect, useState } from "react"; // input : formRef, 제출할 formData, submitFlag // output : 통과 여부 export const useFormValidation = ({ formRef, formDataState, submitFlag }) => { const .. [React Custom Hook] Resize 될 때마다 현재 window 의 width가 breakpoint 보다 up 인지 down 인지 물어보는 hook (useResizeBreakpoints) 1. Resize 될 때마다 현재 window 의 width가 breakpoint 보다 up 인지 down 인지 물어보는 hook input : 없음 output breakpoints : up / down 메소드를 가지고 있는 객체 useResizeBreakpoints.ts 코드 import { useState, useEffect } from "react"; interface GridBreakpoints { xs: number; sm: number; md: number; lg: number; xl: number; xxl: number; } interface Breakpoints { up: (bp: keyof GridBreakpoints) => boolean; down: (bp: keyof GridBrea.. [React Custom Hook] 타겟 element 가 viewport 안에 보이는지 판단하는 hook (useVisibilityObserver) 1. 타겟 element 가 viewport 안에 보이는지 판단하는 hook input element: 관찰하고자 하는 타겟 element React.ref rootMargin : 관찰 타겟 주위의 여백, new IntersectionObserver() 생성자에, option 으로 들어가는 값. 예시. "10px 20px 30px 40px" (위, 오른쪽, 아래, 왼쪽). 값은 백분율이 될 수 있습니다. 기본값은 0. 타겟 주변의 여백도 포함해서, 그 여백까지 타겟으로 보고, viewport 에서 사라졌는지 판단함. IntersectionObserver.option.rootMargin 더보기 output isVisible : 해당 타겟이 현재 viewport 안에 보이는지 여부 boolean. obser.. 이전 1 2 3 4 5 ··· 12 다음
