programming (118) 썸네일형 리스트형 [React Custom Hook] async 로 Mock Data 제공하는 hook (useFakeFetch) 1. async 로 Mock Data 제공하는 hook input resolvedData: 제공할 mock data waitingTime : setTimeout 기다리는 시간, 몇 초 후 리턴 output { loading, setLoading, data, setData } : 로딩, 리턴받는 데이터 state useFakeFetch.ts 코드 import { useEffect, useState } from "react"; interface FakeFetchResult { loading: boolean; setLoading: React.Dispatch; data: T[]; setData: React.Dispatch; } const useFakeFetch = (resolvedData: T[], waitin.. useQuery enable (false) 비활성화 일때 isLoading = true 인 이슈 useQuery 를 사용하면서 특정 조건에 따라서 query 를 실행/미실행 하려고 한다 const { data, error, isLoading } = useQuery( ["test", "detail", id], () => getDetail({ id }), {enabled: !!id} ) id가 있을 때만 query 요청하기 조건 기준이 되는 값은 반드시 queryKey 에 포함이 되어있어야 enabled 가 작동된다 id 가 없어서 query 요청을 안하는 경우인데도 isLoading = true 로 설정되어, 로딩 스피너가 계속 돌았다. 이에 대한 해결책은 react-query v4에서 isInitialLoading이라는 새로운 인자를 반환해준다. react-query 공식 문서에서 isInitial.. useEffect 마운트 되었을때는 실행하지 않고, dependancies 가 실제로 변경된 경우에만 실행 시키기 // 최초 마운트시 실행 되지 않고, dependencies 가 실제 변경된 경우에만 실행 const didMount = useRef(false); useEffect(() => { if (didMount.current) { setValue("connectProductId", null); } else didMount.current = true; }, [watch("countryId")]); blob/json 형태로 리턴받은 데이터를 엑셀 파일로 추출하기(Get 방식 /Post 방식) 목적 : 테이블 데이터를 엑셀로 Export 방법1) 프론트에서 처리 -> UI 상 보여지는 테이블 데이터를 그대로 엑셀 추출 방법2) 백엔드에서 처리 -> 프론트에서 가공되지 않은 원본 데이터를 추출 1. 프론트 처리 엑셀 처리를 위한 라이브러리 사용 https://www.npmjs.com/package/xlsx xlsx SheetJS Spreadsheet data parser and writer. Latest version: 0.18.5, last published: 2 years ago. Start using xlsx in your project by running `npm i xlsx`. There are 4148 other projects in the npm registry using xlsx... 무한 스크롤 구현기(React, Scrollevent, Throttle, Intersection Observer API) 목표 : React 에서 무한 스크롤 구현하기 (Infinity Scroll in React) 여정 : scroll Event Listener -> Throttle 로 최적화 -> Intersection Observer API 사용 1. 단순 구현 스크롤 이벤트를 참조하여 다음 데이터 API 호출 코드 구현 가정 fetchData() 는 API 를 요청하는 함수 예제에서는 console.log('fetch API 요청') 찍히는 걸로 API 요청을 대신함 useEffect(() => { const handleScroll = () => { const { scrollTop, offsetHeight } = document.documentElement; if (window.innerHeight + scrollT.. JWT 로 로그인 인증 구현하기 로그인 JWT(accessToken, refreshToken) 플로우 websequencediagrams 스크립트 title JWT login process (evaluation-iic) frontend->backend: login (/auth/access_token) backend -> backend : 유저 확인 (access_token, refresh_token 발급) backend->frontend: login 응답 (access_token, refresh_token) frontend -> frontend : localStorage에 저장(access_token, refresh_token) frontend-> backend: 데이터 요청 (ex) GET /evaluation/group) with .. Sass 컴파일러 vscode 에서 사용하기 1. npm 설치 npm install sass -g 2. 버전 정보 확인 설치 완료 됐으면 버전확인하면서 잘 설치되었는지 확인합니다. npm show sass version 3. Vs code에서 확장 프로그램 설치 SASS 컴파일을 자동으로 해주는 플러그인 live Sass compiler - 만든 이 : Glenn Marks 4. sass complier 경로 설정 1. vscode 좌측 톱니바퀴 - 설정 클릭 2. 설정 json 파일 수정을 위해 우측 상단 설정 열기 클릭 3. 아래 구문 추가 { "liveSassCompile.settings.formats": [ // This is Default. { "format": "expanded", "extensionName": ".css", "saveP.. 개발환경에서 CORS 에러 관련 프록시 설정 프론트 : localhost:3000 띄워서 로컬에서 개발 API서버(백) : http://~.com dev서버를 올려서 해당 dev 서버에 요청 브라우저에서 보내는 요청 → CORS 발생 브라우저는 localhost:3000을 달고 있는데, 다른 주소(API서버)로 부터 온 응답값을 허용하지 않음 (동일출처가 아니기 때문) 해결책 : 브라우저에서 나가는 요청을 API 서버 주소로 둔갑시킨다 proxy 설정 http-proxy-middleware 패키지 설치 src/setupProxy.js api/ 로 시작하는 요청 url 인 경우 설정한 target 주소에서 요청하는 것으로 둔갑해줌 /api 부분은 빠져야 하므로 pathRewrite 도 시켜준다 const { createProxyMiddleware }.. Recoil 새로고침 시 user 데이터 유지하기 로그인시 받는 유저 데이터 recoil state 는 새로고침시 날아감 새로고침시 마다 유저 정보를 API 요청 → XXXXXX recoil state 를 persist localStorage를 사용하는 방법이 있음 새로고침시 localStorage에 저장해둔 값을 state에 다시 입력 localStorageEffect.js function localStorageEffect(key) { return ({ setSelf, onSet }) => { const savedValue = localStorage.getItem(key); if (savedValue != null) { setSelf(JSON.parse(savedValue)); } else { // 로컬 스토리지에 저장된 값이 없으면 로그아웃 처리 l.. AWS amplify 로 React 배포하기 (+ blank 빈 페이지 보이는 에러 잡기) npx create-react-app create-react-app으로 설치한 리액트 앱 레포지토리는 빌드 설정을 webpack 을 따로 설정해 주지 않아도 된다. AWS amplify는 풀스택 애플리케이션 구축, 배송 및 호스팅 지원하는 솔루션이다 그동안 클라우드 컴퓨터 생성을 위해 리눅스 서버를 하나 생성하고, 서버를 관리하는 방식으로 배포를 했다면, 그냥 github page 나 vercel 등 과 같이 레포지토리만 지정하고, 빌드 스크립트만 등록하면 알아서 배포를 다해준다 작업 방식은 공식문서나 제야에 널려있으니 참고 https://aws.amazon.com/ko/amplify/ 풀 스택 개발 - 웹 및 모바일 앱 - AWS Amplify 실시간 및 오프라인 기능이 포함된 iOS, Android,.. 이전 1 2 3 4 5 6 ··· 12 다음
