#react-query

프론트엔드 이직 준비로 어떤 것들을 하는게 좋을까요?

안녕하세요. 경력 2년차 프론트엔드 개발자입니다. 이전에 두 개의 회사에서 프론트엔드 개발자로 일했는데 불행하게도 두 회사 모두 임금체불로 인해 퇴사를 하게 되었습니다. 그래서 이번에는 50인 이상의 규모를 가진 회사로 이직하는 것을 목표로 이직을 준비하고 있습니다. Next.js, React, Typescript @tanstack/react-query, Context API, Recoil Vanilla-extract, emotion, styled-components, tailwind-css, Sass 위와 같은 스킬들을 공부 및 경험해보았고, Vanilla-extract, tailwind-css를 제외한 스킬들은 실제 업무에서도 활용하였습니다. 현재 저는 [1. 코딩테스트, 2. 기술블로그, 3. 개인프로젝트] 를 매일 반복하며 이직을 준비하고 있습니다. 이대로 계속 이직을 준비하면 될지, 아니면 다른 무언가를 더 준비해야할 지, 앞으로의 이직 준비 방향에 대해 알려주시면 감사하겠습니다. 추가로 혹시 이력서 피드백 해주실 수 있는 분 계시면 말씀 부탁드립니다... 서류에서 계속 떨어지다보니 개발자 입장에서 피드백을 꼭 받아보고 싶습니다...!

검색 모달 창에서 검색할 때 리액트 쿼리 사용 여부

안녕하세요, 현재 제가 검색 모달 창에서 텍스트를 입력하면 검색하는 작업을 하고 있습니다. 보통 useQuery 훅은 페이지 마다 데이터를 불러오는 경우 많이 사용하는 걸로 알고 있습니다. 제가 작업하는 검색 모달은 사용자가 검색 창을 누르면 검색 모달이 나와서 검색하는 기능이라 여기서도 React-Query에서 제공하는 useQuery를 쓰는지 궁금합니다!

개인 프로젝트 피드백 부탁드립니다!! (Next.js + firebase)

안녕하세요! 휴학 중에 개인 프로젝트 한번 만들어봤습니다! 아직 감이 잘 안 잡히다보니 chatGPT에 꽤나 의존했던 것 같습니다. 폴더 구조와 ssr, csr 사용 부분에서 피드백을 받고자 합니다! 또, containers 폴더 안 create 폴더에 있는 RouteChangeListener.tsx를 사용하여 퀴즈를 만들거나 푸는 도중에 현재 페이지를 벗어나려는 움직임을 감지하면 alert 창이 나오도록 설정하였습니다. 제가 생각해봤을 때 페이지가 이동했다가 다시 돌아오는 부분이 비효율적이라고 생각이 들어서 미들웨어나 다른 방법을 통해 해결할 수 있는지 여쭤보고 싶습니다. 감사합니다! 프로젝트 설명 : 퀴즈를 만들고 풀 수 있는 웹페이지 만들어봤습니다! vercel로 배포하였고, PWA 사용하여 모바일에서도 다운로드 가능하게 했습니다! 웹 앱 둘다 가능하지만 웹으로 봐주시는 것을 권장드립니다~!! 프로젝트 기술 스택: Next.js, react-query, zustand, firebase 테스트 아이디: 123@naver.com 테스트 비밀번호: 123123 GitHub 주소 : https://github.com/kmj0973/donquiz Vercel 배포 주소 : https://donquiz.vercel.app/ 따끔한 피드백 주시면 감사드리겠습니다!! 감사합니다!!

ReactNative ios build 에러 3일째 해결을 못했습니다.

시뮬레이션을 실행하려고 해도 스크립트 문제, iPhone 버전 범위 문제, 시뮬레이터 문제가 계속 발생합니다. 어떤 도움이라도 감사합니다. ReactNative를 처음 접했습니다. 저희 팀에서 저를 도울 수 있는 사람이 없습니다. #프로젝트 환경 mac M2 ruby -v ruby 2.6.10p210 (2022-04-12 revision 67958) [universal.arm64e-darwin23] node -v v20.10.0 pod --version 1.15.2 package.json { "name": "labts", "version": "0.0.1", "private": true, "scripts": { "android": "react-native run-android", "ios": "react-native run-ios", "lint": "eslint .", "start": "react-native start", "test": "jest" }, "dependencies": { "@react-native-community/async-storage": "^1.12.1", "@react-native-community/cli": "13.6.9", "@react-navigation/bottom-tabs": "^6.6.0", "@react-navigation/native": "^6.1.17", "@react-navigation/native-stack": "^6.10.0", "@tanstack/react-query": "^5.51.5", "@types/react-native-vector-icons": "^6.4.18", "axios": "^1.7.2", "date-fns": "^3.6.0", "immer": "^10.1.1", "react": "18.2.0", "react-native": "0.74.3", "react-native-calendars": "^1.1305.0", "react-native-date-picker": "^5.0.4", "react-native-dotenv": "^3.4.11", "react-native-get-random-values": "^1.11.0", "react-native-image-crop-picker": "^0.41.2", "react-native-image-zoom-viewer": "^3.0.1", "react-native-paper": "^5.12.3", "react-native-permissions": "^4.1.5", "react-native-safe-area-context": "^4.10.8", "react-native-screens": "^3.32.0", "react-native-splash-screen": "^3.3.0", "react-native-tab-view": "^3.5.2", "react-native-vector-icons": "^10.1.0", "react-native-vision-camera": "^4.5.1", "uuid": "^10.0.0", "yarn": "^1.22.22" }, "devDependencies": { "@babel/core": "^7.20.0", "@babel/preset-env": "^7.20.0", "@babel/runtime": "^7.20.0", "@react-native/babel-preset": "0.74.85", "@react-native/eslint-config": "0.74.85", "@react-native/metro-config": "0.74.85", "@react-native/typescript-config": "0.74.85", "@types/react": "^18.2.6", "@types/react-native-dotenv": "^0.2.2", "@types/react-test-renderer": "^18.0.0", "babel-jest": "^29.6.3", "babel-plugin-module-resolver": "^5.0.2", "eslint": "^8.19.0", "jest": "^29.6.3", "prettier": "2.8.8", "react-test-renderer": "18.2.0", "typescript": "5.0.4" }, "engines": { "node": ">=18" } } PodFile require Pod::Executable.execute_command('node', ['-p', 'require.resolve( "react-native/scripts/react_native_pods.rb", {paths: [process.argv[1]]}, )', __dir__]).strip platform :ios, '12.0' use_frameworks! #use_modular_headers! prepare_react_native_project! linkage = ENV['USE_FRAMEWORKS'] if linkage != nil Pod::UI.puts "Configuring Pod with #{linkage}ally linked Frameworks".green use_frameworks! :linkage => linkage.to_sym end target 'nexlabts' do config = use_native_modules! use_react_native!( :path => config[:reactNativePath], # An absolute path to your application root. :app_path => "#{Pod::Config.instance.installation_root}/.." ) target 'nexlabtsTests' do inherit! :complete # Pods for testing end post_install do |installer| # https://github.com/facebook/react-native/blob/main/packages/react-native/scripts/react_native_pods.rb#L197-L202 react_native_post_install( installer, config[:reactNativePath], :mac_catalyst_enabled => false, # :ccache_enabled => true ) end end 제가 아래 에러 3가지에 대해 제가 해본 방법들입니다. 1. node 재설치 node_module 폴더 삭제, package-rock.json 삭제 후 재설치 npm install --legacy-peer-deps yarn install 2. Xcode가 node 읽을 수 있도록 설정 sudo ln -s "$(which node)" /usr/local/bin/node 3. Podfile 내 platform 설정 수정 platform :ios, '12.0' or platform :ios, '14.0' 4. Pods 재설치 rm -rf ~/Library/Developer/Xcode/DerivedData or rm -rf ~/Library/Developer/Xcode/DerivedData/* rm -rf Pods rm Podfile.lock pod install --repo-update Xcode \> Product \> Clean Build Folder. cd ./ios pod cache clean -all pod install --repo-update cd ../ npx react-native run-ios --no-packager --simulator="iPhone 15" or npx react-native run-ios --simulator="iPhone 15" or yarn start > i(run ios) Err 1. cocoaPods 설치할 때 [!] CocoaPods could not find compatible versions for pod "React-RuntimeHermes": In Podfile: React-RuntimeHermes (from ../node_modules/react-native/ReactCommon/react/runtime) Specs satisfying the React-RuntimeHermes (from ../node_modules/react-native/ReactCommon/react/runtime) dependency were found, but they required a higher minimum deployment target. Err2. iOS 실행할때 run-ios --no-packager --simulator="iPhone 15" Build description signature: fc1341421f84b87c5245d346c2c17b66 Build description path: /Users/nowonjae/Library/Developer/Xcode/DerivedData/nexlabts-argvodqcybjfcybstpulfpghnzvm/Build/Intermediates.noindex/XCBuildData/fc1341421f84b87c5245d346c2c17b66.xcbuilddata /Users/nowonjae/Desktop/project/NeXLabRN/ios/nexlabts.xcodeproj:1:1: error: Unable to open base configuration reference file '/Users/nowonjae/Desktop/project/NeXLabRN/ios/Pods/Target Support Files/Pods-nexlabts/Pods-nexlabts.release.xcconfig'. (in target 'nexlabts' from project 'nexlabts') warning: Unable to read contents of XCFileList '/Target Support Files/Pods-nexlabts/Pods-nexlabts-resources-Release-output-files.xcfilelist' (in target 'nexlabts' from project 'nexlabts') warning: Unable to read contents of XCFileList '/Target Support Files/Pods-nexlabts/Pods-nexlabts-frameworks-Release-output-files.xcfilelist' (in target 'nexlabts' from project 'nexlabts') error: Unable to load contents of file list: '/Target Support Files/Pods-nexlabts/Pods-nexlabts-frameworks-Release-input-files.xcfilelist' (in target 'nexlabts' from project 'nexlabts') error: Unable to load contents of file list: '/Target Support Files/Pods-nexlabts/Pods-nexlabts-frameworks-Release-output-files.xcfilelist' (in target 'nexlabts' from project 'nexlabts') warning: Run script build phase 'Bundle React Native code and images' will be run during every build because it does not specify any outputs. To address this warning, either add output dependencies to the script phase, or configure it to run in every build by unchecking "Based on dependency analysis" in the script phase. (in target 'nexlabts' from project 'nexlabts') warning: Run script build phase '[CP] Embed Pods Frameworks' will be run during every build because it does not specify any outputs. To address this warning, either add output dependencies to the script phase, or configure it to run in every build by unchecking "Based on dependency analysis" in the script phase. (in target 'nexlabts' from project 'nexlabts') error: Unable to load contents of file list: '/Target Support Files/Pods-nexlabts/Pods-nexlabts-resources-Release-input-files.xcfilelist' (in target 'nexlabts' from project 'nexlabts') error: Unable to load contents of file list: '/Target Support Files/Pods-nexlabts/Pods-nexlabts-resources-Release-output-files.xcfilelist' (in target 'nexlabts' from project 'nexlabts') warning: Run script build phase '[CP] Copy Pods Resources' will be run during every build because it does not specify any outputs. To address this warning, either add output dependencies to the script phase, or configure it to run in every build by unchecking "Based on dependency analysis" in the script phase. (in target 'nexlabts' from project 'nexlabts') --- xcodebuild: WARNING: Using the first of multiple matching destinations: { platform:iOS Simulator, id:B5AA2E84-4F83-4749-A986-A1FCE5E398A3, OS:17.5, name:iPhone 15 } { platform:iOS Simulator, id:B5AA2E84-4F83-4749-A986-A1FCE5E398A3, OS:17.5, name:iPhone 15 } ** BUILD FAILED ** ] Err3. Xcode 로 Build 할때 (Any iOS Simulator Device (arm64, x86_64)) Command PhaseScriptExecution failed with a nonzero exit code

이력서에 잘만든 프로젝트 1개 vs 다수 프로젝트

안녕하세요. 2년 반 정도 백엔드 개발자로 일하다가 작년 9월에 퇴사하고 11월부터 Next.js, typescript 등의 스택으로 포트폴리오용 사이트를 지금까지 제작중입니다..... 주말빼고 매일 8~9시간을 투자했는데 아직 프로젝트가 안 끝난 이유는 다음과 같습니다.... 1. React, js 지식은 있었지만 Next, typescript, react-query, recoil 등 다른 기술스택은 새로 공부해야했는데, 제대로 쓰고싶은 마음에 공부기간이 너무 길었던것 같아요 (공부욕심이 있어서 너무 하나하나 꼼꼼하게 보고 노션에 정리도 하고 하느라 프로젝트 진행이 지체된게 있습니다... ) 2. 실서비스에 가깝게 만들고 싶다는 욕심으로 프로젝트 규모는 컸지만 협업하던 사람들은 프로젝트 경험이 아예 없거나, 작업한지 1~2달만에 취업 등의 이유로 그만두고 올해 상반기부터 저 혼자서만 프론트/백엔드 모두를 작업했는데, 혼자서도 구현하고 싶은 기능이나 전체적인 퀄리티를 못내려놔서 수정에 시간이 많이 걸렸습니다 애초에 프로젝트 시작할때, 새로 배우는 기술스택이지만 실서비스에 가까운 프로젝트 만들면서 실무에서 무리없이 쓸 만큼 경험을 해보자는 생각이었고, 실제로 원없이 욕심부리고 고생하고 배우면서 스스로 자신감이 생긴 상태이긴 한데요.. 앞으로 조금이긴 하지만 프로젝트도 아직 마무리가 안 되었고, 취준기간동안 한 프로젝트가 이것 하나밖에 없는게 이제서야 돌아봐지면서 이력서 쓸 내용이 걱정이 되네요ㅠ..... 프로젝트 하나지만 하면서 배운것, 경험한건 정말 많아서 지금당장 실무 한다고 해도 겁나지 않고 이 프로젝트에 대해서 기술적으로 무슨 고민을했고 뭘 배웠는지 구체적으로 쓰는건 자신이 있는데요.. 다른 이력서들 랠릿 등에서 보면 프로젝트 하나가지고 자세하게 쓴 경우는 거의 없더라구요.. 지금이라도 간단하게 프로젝트를 하나 더 해야하는걸까요.... 아니면 알차게 쓰면 프로젝트 하나로도 좋은 이력서 만들수 있는걸까요ㅠ?.....

NextJs 확장 fetch로 서버 컴포넌트에서 동적으로 api를 받는 방법

안녕하세요. 선배 개발자 선생님들. 오늘도 한 단계 성장하기 위해 질문을 남겨봅니다. 저는 NextJs, App router 방식으로 코드를 구현중이며, 서버 상태는 React-Query로 상태값을 관리하고 있었습니다. 왜 리액트 쿼리를 사용했는가? why? 1. Optimistic update, 무한스크롤에 대해 공부하고 적용해보고 싶었습니다. 2. 클라이언트 상태, 서버 상태를 나눈다는 개념이 너무 좋아서 서버 상태는 React-Query로 다뤘습니다. 3. statleTime, gcTime을 조정하여 캐싱기능이 좋았습니다. 갑자기 문득 나는 NextJS를 잘 쓰고 있는건가? 리액트랑 폴더 구조 말고는 다른게 없는거 아닌가? 라는 생각이 들었고, NextJs의 기능을 최대한 활용하고 나머지 불편한 부분이 생긴다면 외부 라이브러리를 사용하자! 라는 생각이 들었습니다. 그래서 저는 React-Query로 상태를 관리하던걸 NextJs의 확장 fetch로 바꿀려고 합니다. Optimistic update, 무한스크롤 기능을 제외하고 나머지 모든 서버 상태는 확장 fetch로 바꿀려고 합니다. 페이지네이션 페이지네이션 처럼 사용자와 상호 작용하는 부분, 즉 동적으로 데이터를 받아오게 하기 위해 url을 변경한 뒤, [id]/page.tsx에서 param로 받던지 혹은 header()를 통해 params를 받아서 처리를 할 수 있다고 생각하고, 저는 header()로 params를 받아서 처리를 했습니다. 모달에서의 페이지네이션 그런데 문제는 모달을 띄우고, 모달 내부에서 페이지네이션이 있는 경우 어떻게 데이터를 동적으로 받아오는지 고민을 해봐도 방법이 없는 것 같습니다. 1. 모달에서 다음 페이지 클릭시 url을 변경한다. -> 안해봤지만 동작을 할 수 있더라도 뭔가 느낌적으로 아닌 것 같습니다. 2. 클라이언트 컴포넌트에서 상태값을 서버 컴포넌트로 전달한다 -> 불가능 궁금한 점 1. 모달 내부에서 페이지네이션을 처리할때 url을 변경해서 서버 컴포넌트에서 확장 fetch로 데이터를 관리하는 게 적절할까요? 2. 모달 내부에서는 페이지네이션을 처리할 때는 react-query로 데이터를 관리하는 걸 확장 fetch로 바꿀 수 없는 건가요?? 바꿀 필요가 없는 건가요? 3. 더 좋은 방법이 있는 건가요?

웹사이트 프로젝트 피드백 주시면 감사하겠습니다!..

안녕하세요! 저는 현재 대학교 3학년 마치고 휴학 중인 코린이입니다.... 제가 실력이 너무 부족한 느낌이라서 혼자 프로젝트를 진행해도 이게 맞는 코드인지 잘 모르겠네여 ㅠㅠ.. 코드는 client쪽만 봐주시면 됩니당! 따끔한 피드백 부탁드립니다! 감사합니다 반응형이 아니라서 ㅠㅠ 웹으로 봐주셔야합니다~ 기술 스택 : nextjs, typescript, react-query 사이트 주소 : https://bestanimals.vercel.app/ 깃허브 주소 : https://github.com/kmj0973/bestanimals

Nextjs 탭 기능 질문

Next 14 앱라우터 버전과 react-query를 사용하고 있습니다. 게시물 목록을 보여주는 페이지를 만들고 있고 게시물의 카테고리를 필터링 해주는 탭을 만드려고 하는데요. 기존에 React에서 할땐 searchparams 값을 넘겨주는 식으로 필터링이 됐는데 next에서는 url을 바꾸는 식으로 하려면 페이지 이동을 해야 하는 것 같아서 이걸 페러렐 라우트로 처리를 해야할지 url 처리 없이 가야할지 고민이 됩니다 ㅠㅠ

react-query,

안녕하세요. 리액트쿼리 최신v5를 사용하면서 어려움에 처해 글을 남기게 되었습니다. 제가 만든 코드는 아래와 같습니다. Home.jsx (맨처음 데이터를 받아서 List에 뿌려주는 역할) const { data, error, isLoading } = useFilteredApartmentData(); console.log('home data',data) <List data={data.speechCommands} /> Search.jsx (사용자 검색) const { updateFilters } = useFilteredApartmentData(); //커스텀훅 const handleSubmit = (filter) => { updateFilters(filter); }; useFilteredApartmentData .jsx (훅) const useFilteredApartmentData = () => { const [filters, setFilters] = useState({ skip: 0, take: 15 }); const { data, error, isLoading } = useQuery({ queryKey: ["apartments", filters], queryFn: () => fetchFilteredApartmentData(filters), placeholderData: keepPreviousData, enabled: !!filters, }); console.log("훅안에서 새로운데이터", data); const updateFilters = (newFilters) => { console.log(newFilters); setFilters((prevFilters) => ({ ...prevFilters, ...newFilters, })); }; return { data, error, isLoading, updateFilters, }; }; export default useFilteredApartmentData; 저의 계획은 search.jsx에서 사용자의 검색을 받으면 훅의 updateFilters 를 실행시키고 useState가 바뀌니 useQuery의 재 시작과 함께 새로운 데이터를 받아 List에서 새로운 데이터를 뿌리는 것이었습니다. 그런데 console.log("훅안에서 새로운데이터", data); 이 부분도 새로운 데이터로 잘 찍히는데 문제는 Home.jsx 에서 console.log('home data',data) 이부분은 안찍히네요 결과적으로, 리스트의 변동이 없습니다. 혹시 아시는분 답변주시면 정말 감사하겠습니다 ㅠㅠ

Next.js 질문

아직 next의 개념을 잘 몰라서.. 혼란스러움에 질문드립니다..ㅠㅠ 전역상태에서 state를 꺼내서 사용하거나 react-query, pagination같은것들은 모두 csr로 변경해서 코드를 짜야하던데 그러다보니 page가 거의 use client로 도배되었는데요… 그럼 SSR의 장점들을 모두 잃어버리는건가요…? getStaticProps나 getServerSideProps들을 사용해서 이러한 문제들을 해결할 수 있다는데, 이것들로 해결해야하는걸까요..? 🥲

react-query로 이미지를 가져올 때, 이미지가 깜빡거리는 문제를 해결하고 싶어요.

React 프로젝트에서 차량 데이터 목록(차량 모델 사진, 차량명, ....등)을 보여주는 웹 프로젝트를 진행하고 있습니다. 차량 데이터 목록 화면에서 react-query를 통해 가져온 데이터는 (예시 데이터) const data = [{id: number, car_name: string, model_name, car_model_image: number...}, {.....} ] 이런식으로 가져와서 map을 통해 CarCard 컴포넌트에 데이터를 props로 보내어 현재 출력하고 있습니다. 여기서 이미지 같은 경우는 백엔드에서 차량 모델 이미지를 가져오는 api를 따로 만들어놓아서, props로 전달받은 car_model_image 즉, 차량 모델 이미지의 id를 통해서 차량 모델 이미지 api에 데이터를 요청해서 이미지를 출력하고 있습니다. 이때. 페이지를 전환하거나, 한 페이지에서 아무동작을 하지 않아도 게속 이미지가 깜빡거리면서 재렌더링이 되고, 계속 무한정으로 이미지를 호출하는 문제가 발생하였습니다. map을 통해 CarCard를 호출하고 CarCard 안에서 이미지를 호출함에 따라서 계속 이미지가 깜빡깜빡 거리는 것 같은데, 컴포넌트 안에서 이미지를 호출할 때 어떻게 하면 무한정으로 이미지를 불러오지 않도록 하고 깜빡거림을 없앨 수 있을까요 ?...어떻게 해결해야 할지 감이 안 잡혀요.... //차량 목록 페이지 한 부분 ... const { data } = useGetCarList(); //useQuery를 통해 서버에서 데이터 전달받음 // const data = [{id: number, car_name: string, model_name, car_model_image: number...}, {.....} ] 이런식 .... return ( <div> data.map((data: CarData) => { return ( <Carcard ascCarData={data} key={Math.random()} handleClick={() => handleClick(data)} isActive={true} /> ); }) </div> ) //Carcard 컴포넌트 const { data: carImage } = useGetCarModeImage(ascCarData.car_model_image); // 이미지 데이터 가져오기

React-query로 실시간 데이터 반영

리액트를 통해 버스 위치 데이터를 받아서 버스 위치를 실시간으로 보여주는 앱을 개발하고 있는데요, 리액트 쿼리를 활용해 10초마다 refetch하여 데이터를 업데이트하려고 하는데 계속 자동으로 캐싱되어 처음 가져온 데이터만 10초마다 가져오네요 ㅠ (개발자 도구에서 disable cache를 하면 잘 가져옴) 새로고침를 해도 마찬가지 입니다. const { data, isLoading, error, refetch } = useQuery(["busPos"], getData, { refetchIntervalInBackground: true, refetchInterval: 10000, cacheTime: 10000, }); 어떻게 하면 데이터를 잘 업데이트할 수 있을까요?? Open api 사용 중인데 요청 헤더에 캐시 컨트롤을 노 캐시로 하면 cors 에러가 뜹니다 ㅠ

Next.js에서 코드 스플리팅을 적용할 예정인데 궁금한 점이 있습니다.

Next.js에서 제공해주는 dynamic을 사용해서 스플리팅을 할 건데 어떤 경우에 옵션을 사용하면 좋을 까요?? ProjectCardContainer에는 react-query로 api를 비동기적으로 호출받고 있습니다. const ProjectCardContainer = dynamic( () => import('@/components/container/ProjectCardContainer') ); 위의 부분처럼 받아오거나 const ProjectCardContainer = dynamic( () => import('@/components/container/ProjectCardContainer'), { ssr: false, } ); 그리고 위의 ssr을 해체하는 경우 ssr을 해체하는 경우에는 공식문서에서 window나 외부 API같은 작업을 할 때 사용한다 하는데 여기서 말하는 외부 API가 서버에서 가져오는 API가 맞나요??

Next와 React-query의 prefetch에 대해

안녕하세요 ! Next14 버전과 tanstack-qeury를 이용해 프로젝트를 진행하던 도중 궁금한 점이 생겨 질문드립니다. Next의 서버 컴포넌트에서 data를 prefetching 하여 사용하려면 다음과 같은 단계를 밟아야 하는 것으로 알고 있습니다. 1. 서버 컴포넌트에서 queryClient.prefetchQuery를 사용해 데이터를 불러오고 이를 dehydrate하여 HydrationBoundary 내에 state로 넘겨준다. 2. 데이터를 사용하는 컴포넌트에서 useQuery로 동일한 데이터를 불러오면 해당 데이터는 prefetch 된 상태로 넘어와 이를 사용한다. 현재 이를 토대로 아래 예시코드와 같이 작성하여 사용중입니다. 이 때 하위 컴포넌트에서 prefetch한 데이터를 사용하려면 useQuery를 써야하기에, 'use client' 를 사용해야하고, 그렇게 되면 그 하위 컴포넌트도 전부 Client Boundary에 들어오게 되는 것으로 알고있는데, 그럼 "Next를 사용하며 얻을 수 있는 장점이 줄어들지 않나 ?" 라는 의문이 생겼습니다. 제가 사용법을 잘못 알고있다거나 Next의 개념에 대해 부족한걸까요 ? 또, HydrationBoundary로 감싸지 않고 queryClient.getQueryData를 이용해 직접 데이터를 가져와 이를 props로 전달해도 기능은 정상적으로 작동하는데, 이 둘의 차이점이 정확히 무엇인가요 ?

useSuspenseQuery의 SSR 요청

안녕하세요, Next.js (v13-14), react-query (v5), page router 환경일 때, useSuspenseQuery와 Suspense를 사용했는데 찾아보니 useSuspenseQuery는 컴포넌트 렌더링 시점에 데이터를 로딩하도록 설계가 되어 있어서 Next.js에서 getStaticProps or getServerSideProps 함수를 사용하지 않아도 서버에서 api 요청이 보내지는게 맞을까요? 제가 테스트해보니 위의 가정 했던 것 처럼 동작하는것을 확인을 했지만 문서에서는 그런 내용을 찾을 수가 없어서 질문을 올려봅니다. 감사합니다!

Next.js의 SSG와 react-query의 useSuspenseQuery

Next.js v14의 페이지 라우터 및 react-query v5의 useSuspenseQuery를 사용하여 Suspense를 사용할 때 페이지 컴포넌트에서 getStaticProps를 사용하지 않아도 SSG 빌드 타임에서 API request 하는 현상이 발생해서 찾아보니 useSuspenseQuery가 컴포넌트 렌더링 시점에 데이터 로딩하도록 설계가 되어 있기 때문에 빌드 타임에서 HTML을 만들 때 결국 API request 하게 되는 것이라고 이해했었는데 제가 이해한 부분이 맞을까요? react-query(tanstack-query)나 next.js의 공식문서에는 그러한 내용을 찾기가 어려워서 정확한 정보인지 알고 싶습니다!

프론트엔드 취준생의 고민을 들어주세요

안녕하세요. 3개월간 프론트엔드 부트캠프 수료후 독학 + 사이드 프로젝트 진행하고 있는 27세 취준생입니다. 디자이너였기에 눈에 보이는 것과 사용자경험을 만드는 것이 흥미롭고 뿌듯함을 느꼈고 그래서 프론트엔드에 흥미가 생겨 커리어전환을 하기로 했었습니다. 백엔드 쪽도 흥미가 있어서 먼저 프론트로 공부 및 취업 후 백엔드도 차차 공부해나가려고 했어요. 다행히 전 공부하고 새로운 것을 익히는 것을 좋아하기에 개발자가 적성에 맞는다고 생각합니다. 후에 학점은행제나 방통대를 다니면서 컴공에 대해서 공부를 하려는 목표도 있습니다. 요즘 시장이 좋지 않아서, 특히 프론트엔드는 많이 힘들더라고요. 채용시장을 보니 일반 기업들은 백엔드 직군과 자바를 사용하는 개발자를 많이 뽑는 것 같더군요. 그래서 아예 자바 백엔드 교육을 국비로 듣고 그쪽으로 취업을 해야할까 하는 생각도 듭니다… 물론 프론트도 제대로 해보지 않은 상태에서 분야를 바꾸는 것이 좋지 않다고 생각하지만 향후를 생각하면 시간을 좀 투자하더라도 백엔드로 진입하는 것이 유리하지 않나 생각도 드네요… 공부할 의지는 있고 열심히 할 자신도 있습니다. 독학도 나태해지지 않고 꾸준히 이어나갈 자신도 있어요. 다만 지금 방향을 잡지 못하고 있는 상태라 막막한 상태입니다. 부트캠프 커리큘럼과 교육이 좋지 못했기에 국비를 신중히 알아보고는 있으나 찾다보면 어디가 좋은지 더 혼란스럽기만 하고, 나이가 있는지라 마음이 조급해지니 판단도 잘 서지 않습니다. ㅜㅜ 어떻게 하면 좋을지 조언이나 충고 해주시면 감사할 것 같습니다. 현재 배운 언어 : 자바스크립트 스텍 : react,typescript,nextjs, tailwind, styled-component,recoil, react-query

제가 하고있는일이 ”프론트엔드“일까요?

제가 하고있는일이 프론트엔드인가 헷갈립니다. 프론트엔드는 아닌것 같습니다. 저는 프론트엔드 개발자를 지망했으며, react-query, axios등등 서버와의 통신을 하여 웹페이지를 만드는 공부를 하였습니다. 저는지금 코딩교육업체에서 일하고있고. 제가 참여하는 프로젝트는 스크래치(블록코딩)의 소스코드를 이용해 새로운 블록을 만들어 회사의 로봇을 움직이게 하거나 스크래치 gui를 확장, 개선하는 업무를 하고있습니다. 스크래치는 크게 scratch-gui(스크래치의 gui, 구버전의 react사용), scratch-vm(virtual machine, 스트래치에서 사용되는 블록을 정의하고 새로운 블록을 선언하거나, 블록들을 실행가능하게끔 ASTtree로 만들어 실행시키는 프로그램 nodejs임) 두개의 오픈소스 프로젝트로 구성이 되어있고, 제가 참여하는 프로젝트는 이 두개의 프로젝트를 회사에 맞게 확장, 수정시킨 프로젝트에서 작업하고 있습니다. 아직 한달이 채 되지도 않은시점에서 의문이 들었습니다. scratch-gui 가 react, redux를 사용하지만 HTTP통신을 하지도 않는데 이런 업무를 프론트엔드 개발자라고 할수있는가? 입니다. 다른회사들의 요구기술스택을 보면 제가 다니는 회사와의 기술스택과는 많이 동떨어진 느낌입니다. 물론 찾다보면 비슷한 기술스택을 가진 회사도 있겠지요... 하지만 인생의 첫 커리어인데, 꼬여버리지 않을까 걱정입니다.

createStore 리액트

안녕하세요 리액트 초보입니다. (이걸 기술 토픽 카테고리에 적합한지는 모르겠네요.. ) 리액트를 다루는 기술 책으로 리액트를 공부하던 와중에 리덕스로 상태 관리하는 부분에서 막혔습니다. 책에서는 redux의 createStore를 사용하는데 현재에는 모든 것이 rtk 라이브러리를 사용하더라고요.. (createSlice 등..) 프레센테이셔널 컴포넌트 같은 것도 없어졌고 (어쩐지 불편하더라..!) 미들웨어라는 것을 많이 사용하지 않고 react-query 같은 것을 사용하더라고요!! 그래서 제 질문은 그냥 책대로 공부해보는게 맞을까요?? 이제는 잘 사용하지 않는다는 것을 알고난 이후로 하기 싫어졌지만... 현직자분들이 필요하다고 하시면 찡찡거리기 그만하고 공부하겠습니다.. 그리고 별개로 책 내용이 최신 버젼(?)으로 정리가 된 사이트/ 또는 정리해본 블로그 있으면 추천 부탁드립니다! 감사합니다

react-query 와 zustand

현재 react-query와 zustand를 같이 쓰면서 고민이 있습니다. 현재코드는 useQuery를 통해 데이터를 가져오고 그 데이터를 가공해서 zustand에 넣어놓고 데이터를 수정하거나 추가등의 변화가있을 때 useMutaion onSuccess -> queryClient.invalidateQueries를 통해 자동으로 갱신하게 로직을 작성했어요. 이렇게 작성하면 데이터를 수정하거나 추가등의 변화가있을 때 마다 최신데이터가 갱신되기는 하지만 서버에 재요청을 해야하는 단점이 있어서 useMutaion onSuccess -> queryClient.invalidateQueries를 통해 자동으로 갱신하는 부분을 zustand에 추가로 데이터를 넣어주고 새로고침할때만 useQuery로 데이터를 받아오는 방식으로 변경할려고 해요. 근데 이렇게되면 새로고침하지 않으면 다른사람이 갱신한 데이터는 가지고 있지 못하게 되요. 서버 요청횟수를 줄이는 것보다 최신데이터를 가지고 있는게 더 중요한가요? 제 지인은 유저는 사이트안에서 계속왔다갔다 거릴거라 대부분은 최신데이터를 즉각적으로 갱신시켜줄 필요가 없다고 하고 저도 이 말이 맞는거같은데 다른사람들은 어떻게 생각할지 궁금해서 질문드립니다..

자식 컴포넌트 suspense 적용 질문 드립니다.

안녕하세요, 다름이 아니라 suspense컴포넌트를 사용하려는 중, 작은 문제가 있어 질문글을 올리게 되었습니다. 페이지 헤더가 있고 헤더의 부모래퍼 영역에서 모든 api호출이 일어나고 props drilling으로 자식 컴포넌트에 데이터를 적용합니다. 하지만 부모 영역은 헤더 전체이므로 스켈레톤 처리가 어렵습니다. 단, 자식 영역은 데이터가 로드 될 때 까지 스켈레톤 처리를 하고싶은데, 이 때 suspense를 어떻게 하면 적용할 수 있는지 궁금합니다. 현재는 react-query를 사용하여 isLoading 변수를 받아 해당 변수에 따라 명령형으로 스켈레톤 처리를 진행하고있습니다.

신입개발자 방향성 고민

취준기간이 오래된 탓에 지금 재직중인 회사 최종합격발표를 통보받고, 통보받은 당일에 서류합격 연락이 5~6곳이 오더군요 최종합격한 곳 보다 조건이 더 좋은곳들이 많았지만 스트레스를 그만받고 싶었습니다. 그래서 다른회사들 면접은 다 포기하고 무작정 갔습니다. 입사결정하게 된 가장 큰 이유는 제가 프론트엔드쪽으로 공부를 하다보니 백엔드에도 관심이 생겼었는데, 면접을 보면서 풀스택 개발자로 키워주겠다. 많이 배울수있을거다 라는 말들이 가장 결정적이었죠 현재 입사 2개월차. 그때 선택을 많이 후회하고 있습니다. 많이 배울수있는 환경이 아닙니다. 너무바빠 저를 신경쓰지 않는, 못하는 느낌입니다 취준할때 프론트엔드만 공부했던 터라 백엔드 영역은 아예 무지한 상태로 들어와서 처음 회사 프로젝트를 클론받고 와 이게 뭐지 싶더라구요 오래된 기술스택과, 한 파일에 천줄이 넘어가는 코드를 보고 많이 당황을 했죠.. jsp, jquery로 이루어진 코드와 공통적으로 사용되는 코드들을 모듈화해서 사용하는것이 아닌, 코드자체를 복붙해서 사용한다던지.. 서버에 어떻게 요청을 보내는지 또는 렌더링 속도가 느리든 빠르든 캐싱이나 최적화 쪽은 아예 신경을 쓰지않고 그냥 돌아가면 상관없다고 생각하고 개발을 하고있는것같아요.. 코드리뷰나 깃 브랜치관리도 하지 않습니다 수정하고 이상없다싶으면 바로 merge합니다.. 지금은 그래도 근무외시간에 틈틈히 공부하여 spring으로 이루어진 백엔드 영역을 어느정도 이해하고 로직, 패턴이 어떻게 돌아가는지도 파악하고 간단한 기능들은 백단 프론트단을 혼자 구현할 정도는 되었습니다. 그러나 현재 업무는 선임개발자분들이 짠 코드를 테스트만 하고있구요... (화면상에서 이벤트가 정상 작동하는지만 확인, 발생하는 오류나 문제에 대한 코드수정은 하지않음) 코드 작성은 거의 하지않습니다. 가끔 코드짜는 업무를 주시면 재미는 있는데 1~2시간이면 다 끝나버리고 그 후에는 퇴근시간까지 저 혼자 공부하거나 멍을 때리고 있는 시간이 많아 현타가 많이오네요 연차가 높아진다고 이 회사에서 제대로된 개발을 하느냐도 사실 잘 모르겠습니다. 10년이 넘어간 개발자 분들도 새로운 기능추가나, 마이그레이션 같은 기능추가를 자발적으로 하신다기 보단 고객사에서 요청하면 그제서야 합니다. 제가 노력을 안하느냐? 그것도 사실 잘 모르겠습니다. 처음 적응기간때는 집에와서 공부하는게 좀 힘들었지만 요즘은 하루에 2시간정도는 하려고 노력을 많이 하고있습니다. 회사에서도 계속 선임분들에게 저 할일없을까요 ! 물어보고 있구요. 이 회사를 계속 다니면서 제가 공부하던 react, react-query 등과 같은 스택은 사용도 못하고 잡일, 단순 노가다같은 일을 반복해가며 이 회사에 남아있는게 과연맞는건지.. 남아있는 다고 한들 제대로된 개발업무를 할 수 있을지 의문입니다. 제가 추구하던 방향성은 바쁘고 야근이 많더라도 제실력을 키우면서 같이 성장할 수 있는 환경을 원했었는데 지금와서야 선택지가 많았는데 왜 여길왔을까 싶은 후회가 많이 되네요. 사실 적을게 더많지만 너무 흉만 보는거같네요.. 좋은점은 퇴근은 빨리한다 정도 말고는 없는거같습니다. 퇴근 이후에 따로 공부를할 때, react쪽을 더 공부해서 다시 취업을 알아보는게 맞는건지 어떻게 성장을 해나가야 할지 사실 잘 모르겠습니다. 이와같은 상황에서 어떻게하는게 맞는지 조언을 좀 구하고싶습니다!

React-query 사용하면, waterfall 이 미친듯이 증가해요

안녕하세요 데이터 캐싱 때문에, React-query를 사용하려고 하는데요 react-query를 사용하기만 하면 Newtwork 눌러보면 bundle.js의 waterfall이 13초가 찍히면서 초기 랜더링이 13초가 걸리더라구요.. 이게 무엇인지랑 어떻게 해결해야하나요.. react query 사용하지 않으면 1초도 안걸리면서 랜더링합니다..

부트캠프 최종발표 내용에 관해서

선생님들 안녕하세요. 부트캠프에서 셀프세차장 예약 앱을 주제로 약 두달여간의 개발을 진행했고, 3일 뒤에 최종발표만을 남겨두고 있습니다. 부트캠프 운영진 측에서 최종발표 내용으로 개발 주안점을 둔 부분을 주로 다뤘으면 좋겠다고 하셨습니다. 발표 내용을 미리 구성해봤는데, 선생님들께서 보시고 조언 좀 주시면 감사하겠습니다. 저희 팀 개발 스택은 다음과 같습니다. FE: React, Redux-thunk, React-query BE: Spring Boot, MySQL, Amazon S3 아래와 같이 발표 내용을 구성해 봤습니다. 1. 프론트엔드 a. 아토믹 패턴의 활용 - 기획단계에서부터 모든 컴포넌트들을 미리 설계해놓고 atom, molecule등의 레벨로 미리 나눠놨다. 덕분에 개발을 빠르게 진행할 수 있었고, 유저들에게 일관된 인터페이스를 제공한다. b. 예외처리 - 유저들에게 보다 친절한 에러를 제공하기 위해 백엔드와 협의하여 세부 에러코드들을 정의했다. 각 컴포넌트들을 에러 바운더리로 감싸 GET 요청이 실패한 경우에는 Fallback UI로 화면을 덮어줬다. 그리고 각 API들의 onError 콜백을 부여하여 Mutation 요청이 실패한 경우에는 alert로 알려준다. c. 상태관리 - props drilling 현상을 방지하기 위해 redux-thunk를 사용해 세차장 정보를 불러올 때마다 세차장 정보를 전역 상태로 관리하여 자식 컴포넌트로 넘겨주게 구성했다. 2. 백엔드 a. 예약 신뢰성 - 사용자가 요청한 예약이 운영 시간을 준수하고 중복 예약이 방지되도록 예약 검증을 철저히 하였다. b. 예외 처리 - 명확한 예외 처리 및 상태코드 할당 c. 권한 - 역할 기반 권한 관리, 사용자 인증 및 JWT 토큰 처리 여기까지입니다. 내용을 잘 구성했는지 모르겠습니다. 제가 경험해본 프로젝트 중 가장 규모가 큰지라 발표 내용이 부족하진 않은지 걱정이 많이 됩니다. 발표 평가위원이 주로 개발자라고 하셔서, 개발자의 시선으로 봤을 때 위 주제들이 어떠한지 고견을 듣고 싶습니다. 감사합니다.

(SSR 새로고침 문제)NextJS page에서 redux persist gate 설정하면 Client컴포넌트로 인식되는 문제

NextJS Pages Router에서 유저 데이터를 상태관리하기위해 redux를 사용했으나, 새로고침 시 데이터가 날라가는 문제를 해결하기 위해 persist gate를 사용했습니다. 하지만 redux persist gate를 사용하면 클라이언트 컴포넌트로 인지되는 문제가 있습니다. 궁금한 것 1) persist gate를 잘못써서 생긴 문제일까요? 아님 persist gate를 쓰면 안될까요? 2) 해결 방법으로 생각 해본 것은, "persist gate를 사용하지 않고 매 새로고침 시 저장되어있는 local storage에서 데이터를 새로 가져온다." 입니다. 3) ssr시 상태관리 새로고침 다른 방법으로 해결해본 경험 있으시면 아무렇게나 대답해주시면 감사하겠습니다!!! ----------------------------------------------- 문제의 코드 위치: https://github.com/bbookng/zippyziggy-v2/blob/main/frontend/zippy-ziggy/src/pages/_app.tsx 문제의 코드: import GlobalStyle from '@/styles/Global.style'; import useDarkMode from '@/hooks/useDarkMode'; import { media } from '@/styles/media'; import { darkTheme, lightTheme } from '@/styles/theme'; import type { AppProps } from 'next/app'; import { ThemeProvider, createGlobalStyle } from 'styled-components'; import normalize from 'styled-normalize'; import '@/styles/index.css'; import { QueryClient, QueryClientProvider } from '@tanstack/react-query'; import AppLayout from '@/layout/AppLayout'; import store, { persistor } from '@/core/store'; import { PersistGate } from 'redux-persist/integration/react'; import { Provider } from 'react-redux'; import { ReactQueryDevtools } from '@tanstack/react-query-devtools'; import 'toastify-js/src/toastify.css'; import { ToastContainer } from 'react-toastify'; import 'react-toastify/dist/ReactToastify.css'; import DefaultHead from '@/components/Head/DefaultHead'; import Construction from './construction'; const queryClient = new QueryClient({ defaultOptions: { queries: { refetchOnWindowFocus: false, // default: true }, }, }); function App({ Component, pageProps }: AppProps) { const { colorTheme, toggleTheme } = useDarkMode(); return ( <Provider store={store}> <PersistGate persistor={persistor}> <QueryClientProvider client={queryClient}> <ThemeProvider theme={colorTheme === 'dark' ? darkTheme : lightTheme}> <AppLayout toggleTheme={toggleTheme}> <Component {...pageProps} /> ... </AppLayout> </ThemeProvider> <ReactQueryDevtools initialIsOpen={false} /> </QueryClientProvider> </PersistGate> </Provider> ); } export default App;

React 버튼 클릭 시 api 호출 후 페이지 이동하면 api호출이 취소됩니다..

제목 그대로 버튼 클릭 시 onClick함수에 react-query로 axios api 통신하는 함수 2개를 호출 후 페이지를 이동하는데 페이지가 이동하면서 api 호출이 취소됩니다.. 비동기라 그런것인지 통신 후 페이지가 이동되게 할 수는 없을까요?

React 상태관리 라이브러리에 대해서 질문있습니다 !

안녕하세요 새로운 프로젝트를 들어가기전 라이브러리를 고민중입니다. 한번도 사용해보지않은 zustand 혹은 jotai 를 사용해보고싶은데… 보통 zustand나 jotai를 사용할때 비동기처리 같은 부분도 해당 라이브러리만 이용하는지… 아니면 redux나 react-query 를 같이 사용하는지 궁금합니다…! 그리고 다른분들도 선호하시는 라이브러리가 있으시면 알려주십셔 !!! 감사합니다 !!!

카카오 로그인 accessToken 어디에 저장해야 할까요??

[상황] 현재 하고 있는 동아리 프로젝트에서 카카오 로그인을 구현하기로 했습니다. 저는 프론트엔드 파트이고, 프로젝트는 react, recoil 쓰고 있습니다. +) 팀원이 react-query 써서 백엔드와 통신을 하자고 합니다. [질문] 카카오 로그인에서 인가코드를 백엔드에 보내면, 백엔드에서 accessToken과 refreshToken을 넘겨주는데 이걸 어디에 저장해야 할까요?? 둘다 http response로 헤더에 실어서 보내준다고 합니다! 백엔드에서 쿠키에 넣어주지는 않고 토큰을 보내준다는데, 이걸 어떻게 관리해야 할까요?? localStorage에 저장하는건 매우 위험하다는 글을 봐서, 어떤식으로 관리해야 할지 모르겠습니다. 스토리지에 저장 안 하면, 보통 recoil로 atom에 저장해두고 쓰나요..? 로그인 구현이 처음이라 막막한데 도와주세요ㅠㅠ

선배님들께 입사 한 달 차 프론트 커리어 고민상담 받고싶습니다.

안녕하세요. 저는 입사 이제 한 달 차가 되어가는 신입 프론트엔드 개발자 입니다. 저는 개발을 좋아하고 관심이 많아서 작년 12월부터 프론트 공부를 시작하게 됐습니다. 그리고 운이 좋게 6월에 취업을 하게 되었습니다. 프론트엔드 개발을 하면서 js, ts, next.js, react-query, redux, zustand등 배워야할 게 정말 많았습니다. 그래서 프로젝트를 하면서 얕게나봐 최신 기술을 많이 공부해봤습니다. 하지만 제가 취업한 회사에서는 하드웨어 기술적 제약때문에 최신 기술을 사용하지 못하고 사용적인 제한이 굉장히 많아서 커리어적으로 성장을 할 수 있을지 고민이 많이 됩니다. 물론 아직 부족하기 때문에 배울 것이 많다는 것을 알지만 요즘 it회사들을 보면 회사 기술 사용 스택을 보면 ts, react-query, next.js, storybook 등 트랜디한 기술을 많이 사용하는 것 같습니다. 경력 없는 신입 취업도 요즘 힘들고 해서 경력을 쌓고 이직을 해야하나 생각을 하고 있는데 최소 1년을 경력을 쌓으려고 생각을 하고 있습니다. 제가 목표로 하는 회사의 기술 스택을 봤는데 ts, react-query, next.js, zustand, emotion 등을 쓰고 있더라고요. 하지만 개발을 하다보면 js공부가 핵심이고 많이 부족하구나를 많이 느낍니다.. 신입 이직을 할 때 중요한 점이 무엇인지 궁금합니다. 3년차 미만이면 코딩테스트를 준비해야할 수도 있다고 하는데 알고리즘 공부를 꾸준히 하는 것이 중요할까요?? 그리고 저런 기술들을 사용한 사이드 프로젝트를 얼마나 해야할까요?? 혹자는 하나만 프로젝트 제대로 해도 면접에서 말하기 부족하다고 하는데, 요즘 취업 준비생들의 스펙을 보면 프로젝트도 많이하고 하는 것 같아서 궁금합니다.. 그리고 선배님들 성장 비결은 무엇인지 무엇으로 공부를 많이 하는지도 궁금합니다. 요즘 저는 깃허브에서 완성된 프로젝트 코드를 보면서 공부를 좀 해보고 있는데 괜찮을까요?? 적다보니 두서없이 적었는데 읽어주셔서 감사합니다. 커리어적 조언과 신입 이직을 위해서 무엇을 준비해야하는지 어떻게 하면 이런 상황에서 성장을 할 수 있는지 궁금합니다..!! 욕심은 많은데 부족함을 많이 느껴서 이렇게 글 적어봅니다..

리액트에서 유닛테스트에 대해 질문이 있습니다!(RTL)

요즘 테스팅에 관심이 생겨서 기존에 있던 프로젝트로 유닛 테스트를 하나씩 해보고 있습니다. 유닛테스트 중 어떻게 테스트하는게 좋은 방법인지 궁금해서 질문드립니다 아래와 같은 카테고리 컴포넌트에서 React-Query를 사용하고 있습니다. 별로의 useQuery를 커스텀 훅으로 분리시켜놓은 상태이구요. 다음 컴포넌트를 유닛테스트 한다고 했을때, useCategoryQuery hook과 ui 부분에 대한 테스트는 별도로 분리시켜야 하는걸까요?? 분리해야 한다고 했을 때에는 useCategoryQuery 훅은 모킹하는게 맞는 부분인가요?? useQuery를 테스팅 하는 래퍼런스를 찾아봤는데 useQuery에 대한 테스트만 진행하는 로직 같아서 아리송해서 질문드립니다ㅠㅠ!