#훅

자기주도적인 개발이 너무 어렵습니다.

안녕하세요.🙇‍♂️ 올해 3월에 부트캠프를 수료하고 취업준비를 하고있는 프론트엔드 지망생입니다. 부트캠프를 통해 js, react, vue, tailwind, zustand등의 스택을 주로 사용하며 프로젝트를 만들었습니다. 부트캠프를 진행하면서 react에서 useEffect훅은 컴포넌트의 생명주기 사이 ~때에 사용한다, 페이지 라우팅 기능을 사용하려면 리액트 라우터 같은 라이브러리를 활용해서 써야한다, 테일윈드가 현재 개발시장에서 가장 많이 쓰이는 CSS 라이브러리다 이런 정도로 기술스택들이 학습되었습니다. 이제 부트캠프도 수료하고 혼자 공부하는 시간이 찾아왔는데 어떤것 부터 어느정도 까지 손을 대야할지 감이 잡히질 않습니다. 1. 어떤것 부터 해야하는지 예를 들어 현재 저에게 가장 부족하다고 생각하는 스택은 next 프레임워크, zustand 외의 전역 상태관리(recoil, redux), 필수 개발 외의 인프라적인 스택?(Storybook, monorepo, sentry, jest )이라고 생각하는데 이 지식들의 우선순위를 정하는 방법과 이 외에도 개발자 시장에서 반드시 장착하고 있어야 하는 필수 스택에 무엇이 있는지를 알고싶습니다. 2. 어느정도 까지 손을 대야할지 예를 들어 React 같은 경우엔 하나의 프로젝트를 만드는 역량까진 가능해졌지만 프로젝트 안에서 퀄리티 있는 디자인 패턴이라던지, 사용해보지 못한 수많은 리액트 메서드들을 딥다이브 해봐야 할 거 같은데, 어느정도 까지 공부해야 너무 깊게 들어가지 않고, 현재 개발시장에서 경쟁력 있는 지식을 쌓았다고 할 수 있는지의 경계를 모르겠습니다. 강사님의 강의에서 벗어나 혼자서 주도적인 학습을 진행하려고 하니 시간낭비를 하게 될 거 같고, 겉햝기 식으로 공부하는 나날을 보내게 될까 심적으로 큰 부담이 됩니다.. 현업 개발자님들의 조언을 듣고싶습니다!!🙇‍♂️🙇‍♂️🙇‍♂️

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

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

invalidateQueries가 실행되지 않습니다.

mutate 함수 내부에서 onSuccess:()=>{ queryClient.invalidateQueries({ queryKey: ["USERINFO"] }) navigate("/") } 를 실행하는데 mutate함수는 잘 실행되고 이후에 경로 이동도 잘되는데 useQuery훅 네트워크 요청 자체가 가질 않습니다. refetchType, refetchOnMount, enabled, refetchQueries, prefetchQueries등등 다 시도해 봤는데 안됩니다..! 거의 100번 정도 테스트해봤을때 2번정도? 우연치않게 됐던거같은데 이때 빼고는 전부 안됐습니다ㅜㅜ 어떻게 해야할까요??

invalidateQueries가 안먹힙니다.

사진 순서대로 1. 유저 정보 수정 Mutation훅 2. 유저 정보 수정 Mutation훅을 호출하는 컴포넌트 3. 유저 정보를 새로받아오는 Query 훅 입니다. invalidateQueries, refetchQueries, 옵션추가 등등 다해봤는데 쿼리를 무효화하는 요청이 아예안갑니다..ㅜ 쿼리키도 똑같은데 뭐가 문제일까요? 두번째 사진은 흐리게보여서 코드로 올립니다.

micro repo 세팅하면서 격은 문제(같은 문제 격는 분들 댁글)

이번 프로젝트에서 하나의 레포지토리에서 client, server, admin, common 4가지 패키지를 만들었습니다. client, server, admin은 common을 의존하도록 모노레포로 만들었고, client는 admin을 의존할 수 있게 micro로 만들었습니다. 간단한 패키지 설명: - client: 메뉴 헤더 등 구현, 페이지는 admin을 remote 해서 사용, React로 구현 - admin: 페이지에 나오는 콘텐츠의 전반적인 부분이 컴포넌트로 되어있음, React로 구현 - server: Node.js로 되어있고 실제 Spring 서버에서 준 데이터를 포맷하는 형태 - common: 공통 컴포넌트, 라벨 등 문제1: 다른 프로젝트에서 expose 되어있는 Next.js 프로젝트(scss로 스타일 구현)를 client에서 사용할 때 의존성 관련 오류가 생깁니다. client의 package.json에서 peerDependencies로 next를 설정해줘야 하는지, 양쪽 패키지(다른 프로젝트와 client)에서 Next.js와 React를 share 설정을 해야 되는지 잘 모르겠습니다. 여러 방법으로 시도는 해봤지만 의존성 오류나 Next.js에서 훅을 사용 못하는 오류 때문에 해결하지 못하고 있습니다. 문제2: 빌드 최적화를 위해 트리쉐이킹이나 코드 스플리팅을 해야 합니다. 웹팩에서 아래와 같이 코드 스플리팅을 하면 청크 파일 이름이 겹치기 때문에 filename을 해시값으로 설정해야 합니다. 여기서 문제가 생기는데, micro의 client처럼 remote 하는 부분에서 remote.js, app.js 청크가 필요하기 때문에 이름이 해시값으로 바뀌면 해당 청크를 찾을 수 없습니다. 또한 ModuleFederationPlugin이 빌드 시 자동으로 코드 스플리팅을 해준다는 이야기도 있는데, 이 부분은 정확하지 않습니다. 저와 같은 문제를 격고 있거나 해결하신 분들 같이 나눴으면 합니다.

[React] props vs (전역상태+커스텀훅)

안녕하세요. 다들 고생이 많으십니다. 코린이 질문하나 합니다. 제가 리액트 프로젝트를 진행하면서 처음에는 컴포넌트에 props drilling을 이용해 프로젝트를 만들었습니다. 만들고 나니 뭔가 나중에 이 프로젝트를 볼 때 부모 컴포넌트를 찾아가며 코드를 파악해야 하는게 좀 아쉽다고 생각하여 전역상태 + 커스텀 훅으로 변경하였습니다. 그런데 변경하고 나서 코드는 확실히 깔끔해지고 알아보기도 쉽긴 한데.. 콘솔을 찍어보면 처음 구현했던 것 보다 훨씬 많이 찍힙니다. 랜더링이 더 많이 일어나는거 같은데.. 이럴경우 그냥 처음처음 props drilling를 사용하는게 나을까요?

안녕하세요.. 정말 이것저것 다 해봤는데 안되네요 ㅠ

안녕하세요. 리액트와 리액트 쿼리를 이용해 프로젝트를 진행 중 입니다. 저는 일단. src/hooks/useProduct.jsx 라는 커스텀 훅 을 만들었습니다. 제 계획은 1. 맨 처음 최상단 Home.jsx 에서 useProduct 라는 커스텀 훅 호출 2. 자식컴포넌트에 data를 전달 3. Search.jsx에서 받은 filter값으로 커스텀 훅 안의 query 재실행 4. 바뀐 상태는 Home.jsx 가 다시 받고 자식 컴포넌트에게 전달. 1~3까지는 콘솔찍어가면서 잘 되는데 4.는 되지 않습니다. (쿼리 데이터가 바뀌어도 4이 재 실행이 안됨..) ㅠㅠㅠㅠㅠㅠㅠ 쿼리 옵션도 줘보고 전역 상태도 만들어보고 이것저것 다 해봤는데 ㅠㅠ 혹시 아시는분 계신가요..? 어떠한 답변도 정말 감사히 받겠습니다 간략 코드첨부) Home.jsx const Home = ()=>{ const { data, error, isLoading } = useProduct(); return ( <Search /> <List data={data?.product} /> ); }; export default Home; Search.jsx const Search = () => { ```일부코드생략``` const { updateQuery } = useProduct (); const handleSubmit = () => { const searchData = { productId }; updateQuery(productId); }; } return( ```일부코드생략``` <button onClick={handleSubmit}> 조회 </button> ) } export default Search; useProduct.jsx const useProduct = () => { const [queryData, setQueryData] = useState(); const { data, error, isLoading } = useQuery({ queryKey: ["product", queryData], queryFn: () => fetchProduct(queryData), }); const updateFilters = (queryData) => { setQueryData(() => (queryData); }; return { data, error, isLoading, updateQuery , }; export default useProduct ;

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) 이부분은 안찍히네요 결과적으로, 리스트의 변동이 없습니다. 혹시 아시는분 답변주시면 정말 감사하겠습니다 ㅠㅠ

리액트쿼리 데이터 리패칭 이렇게 하는거 아닌가요?

home.jsx const { data, error, isLoading } = useFilteredApartmentData(); <List data={data.result} /> 훅.jsx const useFilteredApartmentData = () => { const queryClient = useQueryClient(); const [filters, setFilters] = useState({ skip: 0, take: 15 }); const { data, error, isLoading } = useQuery({ queryKey: ["aaa", filters], queryFn: () => fetchFilteredApartmentData(filters), placeholderData: keepPreviousData, enabled: !!filters, }); const mutation = useMutation({ mutationFn: (filter) => { fetchFilteredApartmentData(filter); }, onSuccess: () => { queryClient.invalidateQueries({ queryKey: ["aaa", filters] }); }, }); const updateFilters = (newFilters) => { console.log(newFilters); setFilters(newFilters); mutation.mutate(newFilters); }; return { data, error, isLoading, updateFilters, }; }; export default useFilteredApartmentData; 여기서 처음에 데이터 패칭은 잘 이루어 지는데 fillter가 바뀌면 훅의 updateFilters 가 동작하여 새로운 데이터를 list에 다시 뿌리려고하는데 화면에 변화가 없습니다 ㅜㅜ 이렇게 하는거 아닌가요??

useEffect 훅에 대해 질문있습니다.

현재 리액트를 공부중인데 useEffect에 대해서 계속 헷갈리더라구요. useEffect는 처음에 렌더링이 될 때 최초에 한번만 실행이 된다. 그리고 주로 API 데이터작업을 할 때 사용한다...라는 정도만 알고 있는데 한번만 실행이 된다라는 말과 API 관련코드를 주로 왜 useEffect안에 작성이 되는지 이 부분이 이해가 되지 않더라구요. useEffect에 대해 구글링도 하고 공식문서도 읽어봤지만 아직 기초를 공부하고 있는 저에게는 설명이 너무 어렵더라구요. 그래서 useEffect에 대해서 정말 이해하기 쉽게 설명해주시면 너무 감사드리겠습니다.

React JWT 재갱신 방법이 또 있을까요?

안녕하세요 회사에서 기존 인증시스템을 개편하면서 프론트에서 JWT를 관리하게되었는데 현재 axios intercepter response를 통해서 재갱신을 하고 있는데 기존로직과 충돌되는 부분이 많아 재갱신이 안될때가 있었습니다. 현재 access token은 store에 저장되고 있고, refresh token은 쿠키에 저장되고 있어서 새로고침시에 refresh token을 통해 갱신하고있습니다. 그런데 현재 재갱신 방법을 바꾸고싶은데 혹시 axios intercepter말고 다른 방법은 없을까요? 현재 고려중인 방법은 커스텀훅, HOC 구조로 개편하는 방법을 생각중인데 다른 방법이 있는지 궁금합니다.

리액트 쿼리에서 사용자 인증관련 코드 질문있습니다.

아래 코드처럼 리액트쿼리로 사용자 인증 코드를 구현했습니다. ( 외국 개발자분 코드 분석해서 거의 복붙하고 조금 수정 ) 간단히, api요청을 해서 유저 정보를 받아 로컬스토리지에 저장해서 사용하는 코드입니다. 이 훅을 프라이빗 라우터 및 로그인 버튼 or 사용자 이름 표시 UI 에 사용중인데요 쿼리 캐시 때문에 계속 요청을안하고 그값만 계속 사용중인데 이 사용자의 토큰 유효기간이 지났는데도 계속 그 값만 사용중입니다. 이 분기처리를 어떻게 해줘야할지를 모르겠습니다. 처음엔 refetchOnMount: false,를 true로 바꿔주고 토큰 유효값이 지나면 에러를 뱉어주는거를 보고 흡족해했으나 네트워크탭을 살펴보니 새로고침, 페이지 인아웃 할때마다 계속 요청을하고있어서 다시 고민에빠졌습니다. 어떤식으로 해줘야 할까요?.. 가장 생각나는건 statleTime 값을 토큰 유효기간 값만큼 설정해주면 될까 인데.. 이렇게해줘도되나요?

리액트쿼리 사용법 이게맞나요?

좀 이상합니다.. 상황이, 1. 로그아웃 후 게시물작성 페이지로 접근하면 프라비잇 라우터 컴포넌트 + 사용자인증 훅 (리액트쿼리) 로 인해 '/' 로 잘 튕겨집니다. 2. 로그인 후 게시물 작성페이지로 접근하면 '/' 로 튕겨집니다. 최소 두번은 게시물 작성 페이지로 접근하던가, 새로고침후 접근해야 접근이 가능합니다. axios header 토큰 및 유저 정보 불러오는 api에서 리턴해주는 값들을 다 콘솔찍어서 확인해봤는데 이상없었습니다. 딱한군데 사용자인증 훅쪽만 이상이있었습니다. 아래 코드에 삽입된거에서 콘솔(userLoginInfo) 하면 언디파인이 나오는데요.. 신기한게 fetchUserInfo에서 콘솔 res.data하면 유저정보가 잘찍힙니다..ㅠㅠ 혹시 뭐떄문에그런걸까요?

리액트 로그인질문..

react + 파이어베이스만 써오다가 react + express 조합을 오랜만에 사용중인데 긴가민가한점이있어서 질문드립니다 ㅠㅠ import axios from 'axios'; const instance = axios.create({ baseURL: process.env.REACT_APP_API_BASE_URL, timeout: 2500, headers: { 'Content-Type': 'application/json', withCredential: true, }, }); instance.interceptors.request.use( (config) => { const token = localStorage.getItem('token'); if (token) { config.headers['Authorization'] = token; } else { delete config.headers['Authorization']; } return config; }, (error) => { return Promise.reject(error); } ); export default instance; 이렇게 인터셉터를주어서, 요청할 때마다 토큰을 전달하고있습니다. 그리고 프라이빗 라우터 + 유저정보 인증 훅을 사용해서 로그인사용자만 접근가능하게 페이지를 설정해줬습니다. 근데 질문 1. 네트워크탭 Request Headers 에서 Authorization을 확인해보면 토큰정보가 그대로 노출되고있는데요 원래 이렇게되나요? 질문 2. Bearer + token 이렇게 보내는 경우는 포스트맨이나 이런걸로 테스트할때만 Bearer 을 붙여서 보내주면될까요? 질문 3. 검색 키워드가 생각이안나서 질문으로 올립니다. 아주 옛날에는 (4년전) App.tsx에서 if(localstorage.token){ setAuthToekn(token); } 이런식으로 하고, setAuthToken함수는 import axios from 'axios'; const setAuthToken = (token) => { if (token) { axios.defaults.headers.common['x-auth-token'] = token; } else { delete axios.defaults.headers.common['x-auth-token']; } }; export default setAuthToken; 이런식으로 되어있었는데요, 요즘은 제가 짠 코드처럼 axios.인터셉터 식으로 하는게 맞나요? 질문 4. 그럼 요즘도 회원가입/로그인시 로컬스토리지에 유저 정보 (닉네임 이름 이메일, 토큰정보)만 저장해두고 로그인하면, 로그인버튼이 회원 닉네임으로 변하게 해준다던가.. 이런식으로 분기처리를 하나요? ( 저는 이렇게하고있어서요.. 로딩처리를 줄수도있겠지만 깜빡거리는게 싫고, 또 로컬스토리지로안하면 로그인버튼으로 잠깐바꼇다가 회원닉네임이 표시되더라구요) 질문5. (질문4와 이어집니다.) 만약 질문4처럼하면 사용자가 사이트에 계속 로그인중인데, 이 토큰이 끝났는지 판단하려는 코드를 따로 작성해줘야할까요? 예를들면, App.tsx에 서버 api/auth같은거에 요청보내는 로직을 작성해서, 토큰만보내서 유효한 토큰인지 아닌지, 유효하지않은토큰이면 에러를 리턴시켜준다던가, 리프레쉬토큰을 발급시켜서 연장시켜준다던가 이런식으로하면될까요? 마지막으로 질문이 좀 많고 중구난방인데 죄송스럽고 조심스럽네요..

비지니스로직 분리 질문드려요!

사이드 프로젝트를 완료했고 비지니스로직을 분리하고 싶습니다 hooks라는 폴더를 만들어 action과 api로 나눠 action에는 파이어베이스를 사용하기에 여러가지 행동적인 함수 ( 좋아요 기능, 글쓰기 기능, 조회수 등등) Api에는 탄스택쿼리를 사용하기에 해당되는 쿼리 로직들을 나눌려고 합니다. 훅을 사용하는것처럼 하나의 파일에 하나의 로직을 담아야하나요? 아니면 비슷한것끼리 파일에 넣고 export로 여러개를 두어야하나요? 제 스타일대로 하면 될꺼 같지만 현업에서는 어떤식으로 비지니스 로직을 분리하고 관리하는지 궁금해요 TMI. 로그인 페이지 하나 적용해봤는데 코드가 완전 깔끔하고 이컴포넌트에서 무엇을 하는지 딱 보여서 좋네요!!

리액트 쿼리 로직을 커스텀 훅으로 만들 때, 어디까지 추상화를 하시나요?

안녕하세요. 현재 프로젝트에서 기존 데이터 페칭 로직들을 전부 리액트 쿼리로 옮기면서, 고민이 생겨 질문을 드립니다. 클라이언트 상태와 서버 상태로 폴더를 나누고, 쿼리 로직들을 커스텀 훅으로 만들고 있습니다. 그런데 이 커스텀 훅의 추상화를 어디까지 해야할지 고민이 됩니다. 3개의 서비스 페이지가 있고, 사용하는 쿼리 내부의 로직이 비슷할 경우, 아래의 두 가지 방법을 생각해 봤습니다: 1. 재사용을 위해 매개변수로 URL, URL parameter, Query key를 추가 2. 유지보수를 위해 URL parameter만 매개변수로 추가하고, 개별 커스텀 훅 생성 예시 코드로, 1번의 코드는 `useDashboard('/data', startDate, endDate, 'service01/dashboard');` 이런식으로 사용을 하고, 2번의 코드는 `useService01Dashboard(startDate, endDate);, useService02Dashboard(startDate, endDate);...` 이렇게 사용을 합니다. 현재는 2번의 방식으로 구현을 하고 있습니다. 그 이유로는 불러오는 서버 데이터가 대부분 동일하지만 다른 경우도 있어서 타입을 다르게 줘야했고, URL을 쉽게 구분하기가 어려워서 한 곳에서 관리하고 싶었습니다(URL이 REST API 설계와 다소 거리가 있습니다.). 결론은, 함수 호출자의 입장(데이터를 불러오는 함수)에서 어디까지 알아야하나?가 고민입니다. 리액트 쿼리 깃허브에서 예시도 보고, 이렇게 글을 쓰다보니 현재로썬 2번이 더 맞다고 생각이 들긴 합니다. 여러분은 보통 어떤식으로 구현을 하시는지 궁금해서 이렇게 질문을 드리게 되었습니다. 어떤 의견이라도 좋으니 답변을 주시면 정말 감사할 것 같습니다!

Next.js 서버 컴포넌트, 클라이언트 컴포넌트 어떤 식으로 분리해야 하나요??

현재까지 React를 사용하다가 SEO측면이나 사용자 경험 등 여러 방면에서 서버 사이드 렌더링이 갖는 장점이 크다 생각하여, Next로 프로젝트를 하면서 공부하는 중입니다. 지금까지 Next로 프로젝트를 진행하면서, 구글에 찾아봐도 명쾌하게 답을 얻지 못한 문제가 있어서 질문드립니다! 공식문서에서는 최대한 서버 컴포넌트로 만들고, 상호작용이 필요한 부문만 최대한 작게 클라이언트 컴포넌트로 만드는 것을 추천하고 있습니다. 이 말은 당연하게도 이해가 잘 되었습니다. 하지만 제가 만들고 있는 프로젝트에는 검색 페이지, 유저 페이지 등이 있습니다. 검색 페이지를 예로 들면, 사용자가 입력한 검색어를 쿼리 파라미터로 검색 결과 페이지에 넘겨주게 되고, 해당 검색어에 해당하는 데이터를 불러와야 합니다. 그 과정에서 검색어를 useParams()를 사용해서 받아오게 되는데, 이러한 훅을 사용하려면 클라이언트 컴포넌트여야 합니다. 그렇게 최상단에서 검색어를 파싱해서 데이터를 불러와 자식 컴포넌트들에게 넘겨주게 되면, 결국 루트가 클라이언트 컴포넌트가 되어 버리는데, 이런 검색 결과 페이지와 같은 경우엔 SSR이 큰 의미가 없나요?? 비슷한 원리로, 유저의 마이페이지와 같은 경우엔 유저 정보를(userId 등) 이용해서 데이터를 불러와 해당 유저의 정보를 보여주게 되는데, 유저 정보를 프론트 서버에서 페이지를 보내주는 시점에는 알 수 없습니다. 때문에 검색 페이지와 비슷하게 recoil의 atom 등과 같은 곳에서 유저 정보를 빼와서 데이터를 불러오게 될텐데, 그럼 이 경우에도 루트가 클라이언트 컴포넌트가 되어 버립니다. 이렇게 동적으로 발생하는 데이터를 이용해서 데이터를 불러오는 페이지는 SSR이 큰 의미가 없는 것인지 궁금합니다!! 개발 초보라 완전히 잘못 이해하고 있는 것일 수도 있지만, 바로 잡아주시면 감사하겠습니다!

리액트쿼리(useQuery) 질문이 있습니다.

개인 프로젝트에서 useQuery를 커스텀 훅으로 사용중입니다. (v5 사용중이며, staleTime과 gcTime은 기본값 사용중. staleTime 0, gcTime은 5분) 테스트를 위해 컴포넌트에서 자체 state를 변경했습니다. 리랜더링이 되기에 훅 안에 있는 useQuery도 다시 실행되는 걸 기대했습니다. 그런데 network탭을 보니 서버 요청이 안되더라구요..!(최초 요청 하나만 표시) 데이터가 stale한 상태에서 state변경시 useQuery는 데이터를 다시 fetch해와야하는 것 아닌가요~? 왜 이런지 궁금합니다..!

프론드엔드 개발시 사용하면 좋은 꿀팁들을 전수받고 싶습니다!!

안녕하세요 올해 컴공 3학년 프론트 개발 시작한지 5개월된 감자입니다.. 다름이 아니라 프론트로 프로젝트를 진행하고 있는데 주로 훅이나 css적으로는 간단한 마진 position 등을 기반으로만 작성하고 있는데 이렇게 하는 것보다 더 효율적이고 좋은 꿀팁들이 있을 것 같아서 질문합니다. 감사합니다!

리액트 쿼리 useQuery에서 데이터가 잘못 나오는 부분

하나의 컴포넌트에서 두개의 useQuery를 사용중입니다. 각각의 useQuery는 다른 쿼리키를 갖고 있으며 하나는 상품정보, 하나는 카테고리 정보를 불러옵니다. 그런데 '간혹' 상품정보 쿼리에서 카테고리 정보를 불러올때가 있습니다. 코드를 일부 보여드리겠습니다. // 상품정보 불러오는 코드(커스텀 훅) export default function useGetProduct(productId: number) { return useQuery(["getProduct", productId], () => getProduct(productId), { onError: (err) => alert(err), }); } // 카테고리 정보 불러오는 코드(커스텀 훅) export default function useGetCountByCategory() { return useQuery(["getCountByCategory"], getCountByCategory, { select: (res) => res.result.productCountsByCategory, }); } 두 코드에서 쿼리키가 완전 다르다고 생각합니다. 그런데 에러가 나서 네트워크 탭을 보면 상품정보 request의 response에 카테고리 정보 response가 담겨옵니다(백엔드 쪽은 스웨거를 통해 여러번 시도했는데 동일하게 데이터가 오고 있구요). 어떤 부분이 문제일까요!? 리액트 쿼리가 아주 애를 먹이네요..! 지식을 나눠주신다면 감사하겠습니다.

react query 내에서 과연 react hook을 사용해도 괜찮을까요? 에러 내용을 어떻게 뽑아내면 좋을까요?

안녕하세요. 이번에 로그인 시 에러가 날 때, 서버에서 보내주는 각각의 데이터값이 있는데 그것을 추출해서 활용하려고 합니다. 우선 아래 코드와 같이 useMutation (v5) 를 사용했구요. onError 에서 그 값을 추출해서 리턴하고 싶어했습니다. (error 의 타입은 Error 나 AxiosError 하면 해결되는 줄 알았는데, message 값까지 들어가면 타입 정의가 되지 않더라구요.. any를 바꿀 팁도 알려주시면 감사하겠습니다 ㅎ..) (* mutation 의 error의 return 값은 null 로 찍혔습니다..! *) 여튼, 콘솔로 값은 읽을 수 있으나 isError 값이나, error 객체도 원하는 결과값이 나오지 않고, 외부 리턴값으로 활용하는 방법이 떠오르지 않아, 일단 2가지 방법으로 추출을 시도했었습니다. - let 변수를 활용해서 상단에 선언 후에, error 시 재선언하여 값을 입력 - state를 정의하여 setState값으로 입히기 첫번째 방법은 항상 undefined로 읽혀지고, 두번째 방법은 서버 응답 속도에 따라서 값이 받아질 때가 있고, 아닌 경우는 기본 defaultState 값으로 읽혀집니다. 또한, 하나의 hook 내에서 다른 hook 을 선언해버리면 리액트의 훅 규칙을 어기는 것으로 알고 있습니다. 그러기에 위 방법은 옳지 않은 방법인 것 같아서, 옳은 에러 데이터 추출방법을 알고 싶습니다. 감사합니다 :)

nextjs에서 react query queryClient 처리

이전에 React를 사용할때는 queryClient를 한번 선언한 후 export하고 invalidateQueries를 실행하는 곳에서 import하여 사용했습니다. 물론 QueryClientProvider에 주입도 선언한 queryClient 그대로 사용했구요. nextjs에서 queryClient를 react처럼 export해서 사용하지 않고 컴포넌트 내부에서 사용하는 이유가 있을까요? 궁금합니다. 또한 invalidateQueries를 사용할 때는 항상 컴포넌트나 커스텀 훅에서 useQueryClient()를 사용해야되는건가요?

React - native 학습 러닝 커브에 대한 질문입니다.

안녕하세요. 올해 하반기에 부트캠프를 통해 React 프론트엔드 및 MERN 스택 기반의 백엔드를 어느 정도 맛본 프론트엔드 지망생입니다. 현재 어느 React 라이브러리와 firebase를 이용해 작은 사이드 프로젝트를 협소하게나마 배포해본 경험이 있습니다. 다음 사이드 프로젝트를 진행할 계획이 있는데 많은 사례에서 앱으로의 출시를 위해 React - native 기술 스택을 택하는 경우가 많더라구요. 그래서 React - native가 리액트를 기반으로 만들어진 모바일 기술인 만큼 연관성이 꽤나 높다고 들었는데 해당 기술을 습득하는 데에 어느 정도 걸리는지 여쭤보고 싶습니다. 당연히 기본적인 리액트의 훅에 대한 이해는 있으며 리덕스와 contextAPI를 기반으로 주로 상태 관리를 하고 recoil , React query 같은 것은 찍먹을 약간 해본 상태입니다. 또한 리액트 네이티브 학습은 그냥 바로 공식 문서를 보면서 따라갈지, 아니면 유튜브 등에 올라온 강의를 수강할지 여쭤보고 싶습니다.

리액트 state에 대해 질문있습니다.

안녕하세요 현재 리액트 기초를 공부중인 초보자입니다. 우선 인강을 보면서 공부를 하고 있는데 인강에 나와있는 프로젝트 코드를 봤을땐 전부는 아니지만 어느정도 이해가 되고 하는데 아무것도 안적힌 상태에서 혼자 코드를 작성할려고 하니 하나도 모르겠더라구요. 예를 들어 useState훅을 그 자체 문법으로는 이해가 되는데 이걸 혼자 코드를 작성할때는 언제 작성을 하면되는지 생각조차 나지 않는데 아 이럴때 useState를 쓰면되겠다하고 쉽게 이해할 수있는 방법이 있다면 알려주시면 너무 감사하겠습니다.

마이그레이션 진행 순서에 문제가 있습니다.

현재 React 기반으로 구현을 진행한 웹 프로젝트를 Next 13 버전으로 마이그레이션을 진행하려고 합니다. 예전에 작성된 코드라 파일 구조도 엉망이고 쓸모없는 훅을 사용하거나 불필요한 재렌더링을 유발하는 코드가 많아 몇몇 부분들은 다시 작성해야하고 리팩토링도 진행할 계획입니다. 또한 상태 관리 툴도 사용하지 않은 상황이라 상태 관리 툴을 적용시키는 작업도 해야합니다. 그런데 여기서 먼저 마이그레이션을 진행한 뒤에 다른 작업들을 진행할지 마이그레이션을 가장 마지막에 진행할지 고민입니다. 첫 마이그레이션이다보니 조금이라도 현명하고 효율적인 방식으로 접근해보고 싶습니다. 어떤 방식으로 진행하는 것이 좋을까요?

웹팩 빌드 궁금합니다.

안녕하세요. 젠킨스 + 깃헙 통해서 깃헙 훅으로 젠킨스에서 웹팩 자동빌드를 하고 있는데요. 어떤 소스가 어떤 output파일에 영향을 준건지 파일 리스트를 매 빌드때 뽑아 보고싶습니다. 혹시 마지막 빌드때 어떤 output파일이 바뀐건지 알 수 있는 방법이 있을까요? 추가로 다른 js들에서 거의 공통으로 import 하는 js 는 한번 수정하면 다른 js 들이 다 재빌드 되는느낌이던데 보통 이런 공통소스들은 다들 어떻게 관리하시는지 궁금합니다! 혹시 도움될만한 내용 아신다면 한번만 도움 부탁드립니다 ㅠ.ㅠ

redux를 사용하는 react 커스텀 훅 테스트 어떻게 개선하면 좋을까요?

안녕하세요! 커스텀 훅을 테스트하다가 궁금한 점이 생겨 질문드립니다. 예시 코드와 같이 redux-toolkit을 사용하고 있으며 커스텀 훅 내부에서 redux store에 접근하고 있습니다. 이렇게 사용하는 것이 잘못된 걸까요? 커스텀 훅을 테스트하다가 useAppSelector를 사용하고 있는데 Provider를 제공하지 않았기 때문에 에러가 발생하는 것을 보고 해결 방법은 문서에 있지만 이 방법이 좋은 방식일까 궁금해졌습니다. 제 생각으로는 장바구니와 관련된 함수들을 useBasket에 모아서 관리할 생각이었습니다. 따라서 장바구니 정보를 갖고 있는 basket store를 useBasket 안에서 가져오는 것이 맞다고 생각했습니다. 혹시 이렇게 하는 것보다 더 좋은 방법이 있을까요? 개선하기 위해 더 배워야 할 것들에 대해 조언이 필요합니다!

NextJS13 app라우터 컴포넌트 설계 질문드립니다.

안녕하세요. NextJS13을 사용하여 팀 프로젝트를 진행하고 있습니다. 프로젝트 내 게시판 페이지에서 페이지네이션을 개발하던 도중 궁금한 내용이 있어 질문드립니다. 현재 게시판 메인페이지에서 데이터를 가져와서 페이지네이션 컴포넌트로 프롭스로 전달하는 형태로 로직을 구현하였습니다. 과정에서 상태관리가 필요하여 훅을 사용하기위해 페이지 전체를 'use client' 키워드를 사용하여 클라이언트 컴포넌트로 변경하였는데 데이터 렌더링 부분은 서버에서 렌더링하려면 Container 컴포넌트를 별개로 생성하여 최상위 컴포넌트에서 데이터를 불러오고 프롭스로 전달하는 형태로 구현을 하면좋을지 솔루션을 듣고싶습니다. 기존에는 SEO등을 고려하여 사용자와 상호작용하는 부분(input, form 등등..)에 한해 클라이언트 컴포넌트로 구성하였는데 위와 같이 데이터를 불러오고 가공하는도중 리액트 훅이 필요할때 어떻게 설계하시는지 궁금합니다.

프론트엔드 테스트시 모킹 범위가 궁금합니다.

안녕하세요 테스트에 대해 궁금한 것이 있어 질문을 작성하게 되었습니다. 리액트를 사용한 프로젝트에 테스트를 도입할 계획입니다. 해당 프로젝트의 주문과 결제 과정까지를 테스트할 수 있는 테스트 코드를 작성하고 싶습니다. 주문 과정까지의 api 호출이 굉장히 많은 상황입니다. 품절, 프로모션, 상품 정보 조회 등등 테스트를 할 때 주문 과정까지에 필요한 "모든 api"를 msw를 사용하여 모킹을 한 후 테스트를 진행해야 하는건가요? 하나 더 궁금한 것은 react에서 유닛테스트를 하게 된다면 각각의 함수를 테스트하게 되는 것인지 궁금합니다. 그렇다면 컴포넌트를 제외한 함수들은 모두 테스트를 하기 위해 커스텀 훅으로 만들거나 컴포넌트 외부에서 정의해야 하는 건가요?

React Query 커스텀훅 제작시 파일 분리 어떻게 해야할까요

현재는 /users API 관련 커스텀훅 작성시 useUsersQuery.ts useUserQuery.ts useCreateUserMutation.ts useUpdateUserMutation.ts useDeleteUserMutation.ts 과 같이 기능별로 ts파일을 모두 작성하였는데 문득 불필요하게 파일을 많이 생성하는거 아닌지 생각이 들었습니다. 실제 프로젝트를 진행하시면서 어떻게 커스텀훅을 제작하는지 궁금합니다. 폴더 구조도요!