#browser

질문 2
해시태그 없이 키워드만 일치하는 질문은 개수에 포함되지 않아요.

일 년 전 · 털먹는토끼 님의 댓글 업데이트

리액트 쿼리 에러 핸들링 이슈

react query를 활용한 에러 핸들링이 안돼서 질문 올립니다... //mainpage.tsx const { data, refetch, isFetching } = FetchData(url); const handleSearch = () => { refetch(); } <QueryErrorResetBoundary> {({ reset }) => ( <ErrorBoundary onReset={reset} FallbackComponent={FallbackUI}> {resultVisible ? ( <Result searchData={searchData} isFetching={isFetching} /> ) : ( <EmptyResult /> )} </ErrorBoundary> )} </QueryErrorResetBoundary> react-error-boundary 라이브러리를 이용해 ErrorBoundary 컴포넌트를 가져왔습니다. ErrorBoundary 하위 컴포넌트 내에서 에러가 발생하면 FallbackComponent의 FallbackUI 컴포넌트가 렌더링 되도록 했습니다. //FallbackUI 컴포넌트 //에러가 발생히면 이 컴포넌트가 렌더링되어야합니다. const FallbackUI = ({ error, resetErrorBoundary }) => { return ( <div> <span>{error.message}...</span> <button onclick={resetErrorBoundary} /> 돌아가기 버튼 </div> ); }; export default FallbackUI; FallbackUI 에서 QueryErrorResetBoundary 에서 제공하는 resetErrorBoundary를 받아와 에러 발생 후 '돌아가기 버튼'을 클릭하면 쿼리오류를 처리하고 리셋해주도록 구현했습니다. //url을 파라미터값으로 받아와 api호출하는 함수 //위에 있는 mainpage.tsx 에서 사용하는 함수입니다. const FetchData = (url: string) => { const { error, data, refetch, isFetching } = useQuery({ queryKey: ["repoData"], queryFn: async () => { const res = await axios.get(url); console.log(res.data); return res.data; }, refetchOnWindowFocus: false, enabled: false, }); return { error, data, refetch, isFetching }; }; 리액트 쿼리를 이용해 api를 호출하는 함수입니다. //main.tsx const queryClient = new QueryClient({ defaultOptions: { queries: { retry: 0, throwOnError: true, }, }, }); ReactDOM.createRoot(document.getElementById("root")!).render( <React.StrictMode> <QueryClientProvider client={queryClient}> <BrowserRouter> <GlobalStyles /> <Provider store={store}> <App /> </Provider> </BrowserRouter> </QueryClientProvider> </React.StrictMode> ); 마지막으로 전역으로 에러 관리를 하도록 세팅해놨습니다. 그리고 QueryClient에 throwOnError 속성이 있어야 에러를 ErrorBoundary로 전달할 수 있다해서 추가해줬습니다. 이렇게 세팅해놨는데 에러발생하면 그냥 하얀색 화면만 나오고 fallbackUI가 나오지 않습니다... 원인이 뭘까요...ㅠㅠㅠ 혹시 몰라서 콘솔 에러코드도 올립니다.. 추가로 궁금한 점 1. useQuery 에서 반환하는 객체중 error 객체는 어떤 존재인지 궁금합니다. 2. useQuery 속성과 QueryClient 속성 모두 throwOnError : true 를 가지고 있던데 어떤 차이점인지 궁금합니다. 답변주시면 정말 감사하겠습니다!!!

개발자

#react

#react-query

#error-handler

#error-boundary

답변 1

댓글 1

조회 229

일 년 전 · 허형준 님의 새로운 답변

리액트 네이티브 라이브러리가 안 돼요

gradient랑 fontawsome도 그렇고 대부분의 npm install 해야하는 라이브러리들이 안 돼요... install하고 import를 해줘도 안드로이드 에뮬레이터에서 Render Error requireNativeComponent: "(추가하려는것)" was not found in the UIManager라고 뜨네요 밑에 문제가 있는거 알려주는 source 부분에서는 node_modules\invariant\browser.js 여기를 가르키는데 또 그 파일 찾아가서 코드를 봐보면 어디가 잘못된건지 모르겠어요 혹시 몰라서 적자면 밑에 코드 부분이 잘못됐다고 나와요

개발자

#react-native

#리액트네이티브

#render_error

답변 1

댓글 0

조회 68

2년 전 · 익명 님의 질문

react router dom cannot get

const router = createBrowserRouter([ { path: "/", element: <App />, children: [ { index: true, path: "/", element: <Login /> }, { path: "/filelist", element: <FileList /> }, { path: "/fileupload", element: <FileUPload /> }, ], }, ]); 이렇게 작성했는데 빌드후 cannot get이 뜹니다 ㅠㅠ

개발자

#react-router-dom

답변 0

댓글 0

조회 32

2년 전 · 조찬우 님의 답변 업데이트

iOS 개발 시, 사용자 개인정보 조회 및 전송 범위에 대한 질문(DevceID/MACAdress/IP)

안녕하세요. iOS 개발하면서 어려움이 있어서 이렇게 질문 남깁니다. Q. iOS 디바이스에서 활동기록을 서버로 전송하고 싶은데, DeviceID 혹은 MAC 주소를 조회해서 서버에 전송하는 행위가 법적이나 애플 약관상 이슈가 없는지 궁금합니다. 제가 검색해보면, Apple 정책은 다음과 같습니다. 링크: https://developer.apple.com/app-store/user-privacy-and-data-use/ "Can I fingerprint or use signals from the device to try to identify the device or a user? No. Per the Apple Developer Program License Agreement, you may not derive data from a device for the purpose of uniquely identifying it. Examples of user or device data include, but are not limited to: properties of a user’s web browser and its configuration, the user’s device and its configuration, the user’s location, or the user’s network connection. Apps that are found to be engaging in this practice, or that reference SDKs (including but not limited to Ad Networks, Attribution services, and Analytics) that are, may be rejected from the App Store." 제가 인지하기론, 디바이스를 특정짓는 정보는 서버에 전송하는 것을 불법으로 알고 있는데, 제가 암묵지로만 알고 있다보니, 정확한 근거를 찾고 싶어서 질문드립니다! 긴글 읽어주셔서 감사합니다!

개발자

#ios

#privacy

#security

#programming

#아이폰

답변 2

댓글 2

조회 192

2년 전 · 최건 님의 질문

firebase authentication

html에서 아래 같이 data를 전송했을 때 백엔드에서 const {createUserWithEmailAndPassword,signInWithEmailAndPassword,signOut,browserSessionPersistence, setPersistence}= require("firebase/auth"); const db = require("../config/firestore"); const {email,password} = req.body; console.log(email,password) await signInWithEmailAndPassword(auth,email,password) res.redirect("/api/home") 로 받으면 첫 번째 로그인시 Cannot POST /auth/login가 뜨면서 로그인이 안되고 뒤로 갔다가 다시 로그인을 하면 로그인이 완료되는 오류가 발생합니다... firestore은 form 데이터를 받아 저장하는 것에 오류가 발생하지 않는데 왜 authentication에서는 이러 오류가 발생하는지 궁금합니다 ㅠㅠ 해결 방안도 궁금합니다 ! ㅠㅠ

개발자

#firebase

#firebase-authentication

답변 0

댓글 0

조회 62

2년 전 · 익명 님의 새로운 댓글

Next.js(13.4.0) 모든 페이지에서 토큰 유/무 판단하기

현재 signup, signin, home, save, mypage 총 5개의 페이지가 있습니다. home, save, mypage에서 refresh-token의 존재 유/무에 따라서 signin 경로로 redirect 시키려고 합니다. 로그인을 하면 localStorage에 access-token 저장, browser cookie에 refresh-token이 저장됩니다. 로그인 후에 임의로 refresh-token 값을 지웠을 때, signin 경로로 redirect 시켜주기 위해 각 페이지에서 getServerSideProps를 사용하여 refresh-token의 존재 유/무를 판단하여 redirect를 시켜주고 있습니다. 현 상황처럼 각 페이지에서 인증을 처리하는 것이 아닌 모든 페이지에서 공통으로 인증을 처리하는 방법이 있는지 궁금하여 질문드립니다.

개발자

#next.js

#typescript

#인증

답변 1

댓글 1

조회 524

2년 전 · 익명 님의 질문 업데이트

ESLINT 어떤 것을 수정해야 내용처럼 fix 되는 현상을 막을 수 있을까요?

안녕하세요~ eslint, prettier에서 제가 무엇을 잘못했는지 계속 아래처럼 코드가 수정되고 있습니다. const res = (await request) < User > (context, `/users/${id}`); 어떻게 하면 고칠 수 있을까요? 1. (await request) 소괄호 제거 2. < User > 제너릭 사이 공백 제거 결론: const res = await request<User>(context, `/users/${id}`) 로 만들고 싶습니다.. 아래는 eslint 적용한 내용 입니다. ``` //eslint.config.js module.exports = { env: { browser: true, es2021: true, }, extends: [ 'plugin:react/recommended', 'airbnb', 'plugin:storybook/recommended', ], parser: '@typescript-eslint/parser', parserOptions: { project: ['./tsconfig.json'], ecmaVersion: 2018, sourceType: 'module', createDefaultProgram: true, }, plugins: ['react', '@typescript-eslint', 'prettier', 'import'], rules: { 'react/react-in-jsx-scope': 'off', 'react/jsx-props-no-spreading': 'off', 'import/prefer-default-export': 'off', 'implicit-arrow-linebreak': 'off', 'react/jsx-filename-extension': [ 2, { extensions: ['.js', '.jsx', '.ts', '.tsx'], }, ], 'object-curly-newline': [ 'error', { ObjectPattern: { multiline: true, minProperties: 2, }, ImportDeclaration: 'never', ExportDeclaration: { multiline: true, minProperties: 3, }, }, ], 'import/extensions': [ 'error', 'ignorePackages', { js: 'never', mjs: 'never', jsx: 'never', ts: 'never', tsx: 'never', }, ], 'import/order': [ 'error', { alphabetize: { order: 'asc', }, groups: [ 'builtin', 'external', 'internal', 'parent', 'sibling', 'index', 'object', 'type', ], }, ], 'import/no-unresolved': 'off', }, settings: { 'import/resolver': { typescript: { alwaysTryTypes: true, }, node: { paths: ['src'], }, }, }, }; ```

개발자

#eslint

#prettier

답변 0

댓글 0

조회 85

2년 전 · 권준수 님의 새로운 댓글

Next.js에서 URL 파라미터에 한글 입력시 오류가 발생합니다.

[Next.js 13.4.1] 아무 경로나 그냥 URL에 http://localhost:3000?test=테스트 대충 이렇게 쳐도 ---------- Failed to fetch RSC payload. Falling back to browser navigation. TypeError: Failed to execute 'fetch' on 'Window': Failed to read the 'headers' property from 'RequestInit': String contains non ISO-8859-1 code point. ---------- 위와 같은 오류가 발생합니다. 여기저기 구글링 해본 결과 URL에 유니코드 문자가 들어가면 이런 문제가 발생하는 것 같은데 Next.js 공식문서에도 없는 거같고... 파라미터의 한글을 urlencode로 변환도 해보고 별짓을 다해봤는데 해결이 안되네요 어떻게 해야할까요?

개발자

#next.js

답변 1

댓글 1

조회 842

2년 전 · 손정현 님의 답변 업데이트

vscode에서 언어를 설치 할 때 오류

대학생이 되어 vscode를 이용해 공부와 코딩으로 하려고 하는데 파이썬과 다른 프로그래밍 언어를 설치 할 때 오류가 뜨고 설치되지 않습니다. 어디다 마땅히 물어 볼 곳이 없어서 지푸라기 잡는 심정으로 질문 드립니다. ㅠㅠ 구글과 마이크로소프트 사이트에서도 검색했지만 나오지 않아서 질문합니다 🥺 혹시나 이유를 아시는분 또는 도움을 주실 수 있으신분은 답변 부탁드립니다 🥺 에러 로그 남깁니다. 2023-02-10 15:07:18.575 [error] Error: Untrusted,Untrusted,Untrusted at vscode-file://vscode-app/c:/Users/user/AppData/Local/Programs/Microsoft%20VS%20Code/resources/app/out/vs/code/electron-browser/sharedProcess/sharedProcessMain.js:88:89578 at Array.reduce (<anonymous>) at E (vscode-file://vscode-app/c:/Users/user/AppData/Local/Programs/Microsoft%20VS%20Code/resources/app/out/vs/code/electron-browser/sharedProcess/sharedProcessMain.js:88:89564) at ne.D (vscode-file://vscode-app/c:/Users/user/AppData/Local/Programs/Microsoft%20VS%20Code/resources/app/out/vs/code/electron-browser/sharedProcess/sharedProcessMain.js:88:80916) at async ne.z (vscode-file://vscode-app/c:/Users/user/AppData/Local/Programs/Microsoft%20VS%20Code/resources/app/out/vs/code/electron-browser/sharedProcess/sharedProcessMain.js:88:78417) at async ne.installFromGallery (vscode-file://vscode-app/c:/Users/user/AppData/Local/Programs/Microsoft%20VS%20Code/resources/app/out/vs/code/electron-browser/sharedProcess/sharedProcessMain.js:88:74855) 2023-02-10 15:07:18.599 [error] Untrusted,Untrusted,Untrusted: Error: Untrusted,Untrusted,Untrusted at vscode-file://vscode-app/c:/Users/user/AppData/Local/Programs/Microsoft%20VS%20Code/resources/app/out/vs/code/electron-browser/sharedProcess/sharedProcessMain.js:88:89578 at Array.reduce (<anonymous>) at E (vscode-file://vscode-app/c:/Users/user/AppData/Local/Programs/Microsoft%20VS%20Code/resources/app/out/vs/code/electron-browser/sharedProcess/sharedProcessMain.js:88:89564) at ne.D (vscode-file://vscode-app/c:/Users/user/AppData/Local/Programs/Microsoft%20VS%20Code/resources/app/out/vs/code/electron-browser/sharedProcess/sharedProcessMain.js:88:80916)

개발자

#vscode

#python

#error

답변 1

댓글 0

추천해요 1

조회 277