#hook

리액트 프로젝트에 FSD 아키텍처 적용. 이 구성이 맞을까요?

안녕하세요. 현재 진행 중인 리액트 프로젝트에서 유지보수성과 확장성에 어려움을 느껴 폴더 구조를 Feature-Sliced Design(FSD) 아키텍처 기반으로 전면 리팩토링했습니다. 기존에는 `components/`, `pages/`, `apis/` 등 기능과 역할이 섞인 구조로 되어 있어, 코드의 위치가 불분명하고 협업에 어려움이 있었습니다. 이를 해결하고자 다양한 아키텍처를 조사한 끝에, FSD의 레이어 개념(Layers)에 맞춰 다음과 같은 방식으로 구조를 정리했습니다. - `app/`: `App.js`, `index.js` 등 프로젝트 진입점과 글로벌 설정 파일을 포함 - ` entities/`: `User`, `Article`, `CodingZone` 등 주요 도메인의 데이터 모델과 API 연동 담당 - `features/`: 로그인, 게시글 작성, 코딩존 출석 등 각 기능별로 모듈화하고, 필요한 경우 `hooks/` 등의 내부 디렉토리로 세분화 - `pages/`: 라우팅과 연결된 실제 페이지 컴포넌트 관리 (예: `CreatePage`, `EditPage` 등) - `widgets/`: 재사용 가능한 독립 UI 요소들 (예: `Footer`, `Navbar`, `Pagination` 등) - `shared/`: 공통 API, 유틸, 모달 컴포넌트 등 여러 기능에서 공유되는 요소들을 배치 기능 중심의 구조로 바꾸면서, 각 요소의 역할이 명확해지고 코드 탐색 및 유지보수가 훨씬 쉬워졌습니다. 현재는 복잡한 비즈니스 로직이 없어 `processes/` 레이어는 생략했지만, 추후 워크플로우가 필요한 기능이 생긴다면 도입할 계획입니다. 제가 구성한 이 폴더 구조와 레이어 분리가 실제 FSD 아키텍처 가이드에 부합하는 방향인지, 혹시 보완하거나 개선할 부분이 있다면 조언을 구하고 싶습니다. 자세한 내용은 블로그에 정리해 두었습니다. 👉 [https://juncci.tistory.com/4](https://juncci.tistory.com/4) 읽어주셔서 감사합니다!

공부를 어떻게 해야할 지 모르겠습니다

실습 중인 회사에서 제이쿼리, php를 이용해서 웹 개발을 맡고 있습니다. 인원이 10명도 안되기 때문에 웹 개발자가 없어서 AI와 구글에만 의존해서 진행하고 있습니다. 그래서 성능이나 최적화 신경도 안 쓰고 오로지 구현에만 초점을 두고 일하고 있습니다. 회사의 다른 웹 프로젝트는 NextJS로 개발되었어서 따로 NextJS도 공부를 하고 있습니다. 하지만 기존과는 달리 리액트의 기술들(hook 등)이 전혀 와닿지 않습니다. 리액트의 성향과 맞지 않는건지, 구현만 집중하는 제가 동작 원리나 기본 구조를 소홀해서 그런건지 생각이 많아집니다. 1. 구현만 생각하던 제가 기본부터 다시 잡으려면 어떤식으로 공부할 지 모르겠습니다. (조금만 아는 내용이면 빨리 넘어가는 나쁜 습관 때문에 메타인지 능력이 부족합니다...) 2. 주변에서 리액트가 쉽다고는 하는데 저는 아닌 거 같습니다... 리액트가 성향에 안 맞다고 하면 다른 걸 배워야 할까요? 아니면 더욱 리액트를 집중적으로 공부를 해야할까요

data fetching은 어디서 하는 게 좋은 것일까요?

안녕하세요. 저는 프론트엔드 개발자가 되기 위해 공부중인 취준생입니다. 피드백을 적극 환영하기에 많은 피드백 혹은 의견을 많이 남겨주시면 감사하겠습니다. 저는 데이터 페칭을 어디서 하는 게 좋을지 고민 중이라 글을 남깁니다. 아래와 같이 3개로 글을 구성해봤습니다. 1. 현재 개발상황 2. 현재 저의 데이터 페칭 위치 3. 궁금한 점 1. 현재 개발상황 저는 개인 프로젝트로 Next.js와 React Query를 사용하여 개발하고 있습니다. 현재 Next.js의 App Router를 사용 중이며, 프로젝트 구조는 아래와 같습니다. app: page.tsx, layout.tsx components: 최소 2번 반복 사용되는 재사용 가능한 컴포넌트 container: 일반적인 컴포넌트 (조합 등) hook, service 등 2. 현재 저의 데이터 페칭 위치 현재 데이터 페칭은 최상단의 app -> page.tsx에서 수행하고 있으며, 자식 컴포넌트에는 데이터를 props로 전달하고 있습니다. 이러한 이유는 prop drilling이 발생하더라도 데이터 페칭을 한 곳에서 처리하면 코드 이해가 쉬울 것 같아서입니다. 현재로서는 전역 상태 라이브러리를 사용하지 않아 최대 4단계까지 prop drilling이 발생하고 있지만, 전역 상태 라이브러리를 도입하면 prop drilling 문제는 해결될 것으로 생각하고 있습니다. 추가적으로 현재 이렇게 구현하면서 data fetch할때 필요한 query값들도 최상단에서 관리해야하는 불편함이 있었습니다. -> 최상단에서 관리해야 하는 상태값이 늘어남 3. 궁금한 점 3-1. 아래의 2가지 data fetching 방법 중 어느것이 적절한지? 합리적인지 의견이 궁금합니다. - 최상단에서 Fetching - 장점 : 한 곳에서 Fetching하기에 코드 일관성, 가독성, 코드를 이해하는데 좋다고 생각 - 단점 : prop drilling, 추가적인 전역 상태 관리 해야한다고 생각 - 필요한 컴포넌트에서 Fetching - 장점 : 필요한 컴포넌트에서 fetching 하기에 prop driling과 같은 불필요한 코드 작성 할 필요 x - 단점 : 어떤 컴포넌트에서 fetching 했는지 파악하기 힘들어짐 3-2. 현재 최상단에서 모든 데이터 페칭을 하고 props로 전달하는 방식 vs 필요한 컴포넌트에서 데이터 페칭을 하는 두 가지 방식 중 어느 것이 더 많이 사용되는 패턴인지 궁금합니다. 3-3. React Query는 서버 상태 관리, 캐싱, Optimistic Update와 같은 기능을 위해 도입했습니다. 그러나 prop drilling을 해결하기 위해 React Query에서 가져온 서버 데이터를 전역 상태 라이브러리에 담게 되면 서버와 클라이언트 상태를 구분하는 의미가 없어지는 것 같다는 생각이 듭니다. 제가 잘못 사용하고 있는것인지 궁금합니다.

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

안녕하세요. 리액트와 리액트 쿼리를 이용해 프로젝트를 진행 중 입니다. 저는 일단. 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 ;

타입스크립트 타입지정

리액트 쿼리로 OptimisticUpdate 를 구현했는데 onError 에서 context 타입 지정을 어떻게 해야할지 모르겠습니다 ㅠㅠ context : 타입 하면 오류나고, data : 타입 = context 해도 오류나고 as 를 쓰면 해결되긴 하는데 더 좋은 방법 없을까요? ㅠㅠㅠ 'use client'; import { useState } from 'react'; import { toast } from 'react-toastify'; import { usePostLikeCount } from '@/hooks'; interface LikeContextType { previousLikeCount: number; previousIsLike: boolean; } export const useOptimisticLike = ( boardId: number, initialLikeCount: number, initialIsLike: boolean, refetch: () => void ) => { const [optimisticLikeCount, setOptimisticLikeCount] = useState(initialLikeCount); const [optimisticIsLike, setOptimisticIsLike] = useState(initialIsLike); const { mutate: postMutate } = usePostLikeCount(boardId, { onMutate: async (): Promise<LikeContextType> => { setOptimisticLikeCount((prev) => optimisticIsLike ? prev - 1 : prev + 1 ); setOptimisticIsLike((prev) => !prev); return { previousLikeCount: optimisticLikeCount, previousIsLike: optimisticIsLike, }; }, onError: (err, variables, context) => { const data: LikeContextType = context; if (data) { setOptimisticLikeCount(data.previousLikeCount); setOptimisticIsLike(data.previousIsLike); } toast.error('좋아요 업데이트에 실패했습니다.'); }, onSuccess: () => { refetch(); }, }); const uploadLike = () => { postMutate(); }; return { optimisticLikeCount, optimisticIsLike, uploadLike, }; };

리액트에서 라디오그룹이 원하는대로 동작하지 않아요..

react-hook-form을 사용하고있고, medias는 useFieldArray를 사용하는중인데요. medias에 feeFlag라는 값이 있고 이 값은 '1' | '0' 둘중에 하나인데요. 값이 0인 경우에는 라디오그룹에서 버튼이 yes/no 왔다갔다 선택이 되는데.. 서버의 값이 1인 경우에는 yes에서 고정된 상태로 no가 선택이 되지 않습니다. 뭐가 문제인지를 도통 모르겠어서요.. 이틀째 라디오그룹 버튼 선택이 안되는 문제에 막혀있습니다... ㅠㅠ

react-hook-form 및 react-table을 사용하면서 문제가 풀리지 않아서 질문드려요..

캠페인 데이터 안에 매체 데이터들이 있는데요. 매체 데이터의 이름으로 테이블을 만들고 테이블의 행을 클릭하면, 해당 행에 연관된 데이터를 보여주고, 수정이 가능한 폼?을 만들고있는데요. 캠페인 폼을 서브밋할 경우 매체에서 변경된 값은 정상적으로 콘솔에 찍히는데 테이블의 다른 매체를 선택해도 생성일이 변경되지 않는 문제가 있는데요.. 어떤게 문제인지 잘 모르겠습니다.. 첨부한 스크린샷에서 처럼 예를 들어.. 매체명11 - 생성일 5월1일 매체명22 - 생성일 5월2일 매체명33 - 생성일 5월3일... 이런식으로 데이터가 있다고하면 매체를 선택할때마다 생성일도 같이 변해야 되는데 변경이 안됩니다..ㅠ 폼 하나로 캠페인 및 캠페인 안에 있는 매체들의 데이터를 한번에 서브밋 하고싶어서 저런식으로 구성을했어요.. 뭐가 문제인지 도무지 모르겠어요.. 도와주세요!..

react-hook-form 복잡한 form에서 궁금점이 있습니다 !

안녕하세요 현재 진행하는 프로젝트에서 form을 recoil로 관리하고있습니다. 이유는 form과 화면구성이 너무 복잡한 형태라 props drilling도 심하고 (부모에서 자식까지 5~7 depth) 관리해야하는 데이터가 많아 store에서 관리하고있습니다. react-hook-form이 복잡한 form에서 효율을 낸다고 해서 마이그레이션 해볼까 생각중인데 궁금점이 있어 작성합니다 ! 1. 이렇게 전역적으로 관리를 해야하는 복잡한 form에서도 좋은 효율을 내고 전역 상태관리 라이브러리보다 좋은 방향일까요?! (FormProvider 를 사용) 2. form에서는 input 필드만이 아닌, tab클릭, 드랍다운 클릭, 체크박스 클릭, 이미지 업로드, 라디오 클릭 등등 이러한 경우가 많은데 react-hook-form 을 사용해도 좋은 방향인가요?! 어떨때 react-hook-form을 사용하면 좋은지 궁금합니다 !

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

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

Next.js 14 서버액션을 사용한 폼 데이터 처리 중 질문입니다.

next.js 14의 서버액션을 사용해서 사용자로부터 form으로 데이터를 입력받아 DB에 저장하고 첨부파일을 서버에 업로드하는 모듈을 개발중입니다. 문제점은, 첨부파일을 input으로 입력받아 서버액션 함수로 formData로 넘겨주는데, 서버액션 함수에서 첨부파일의 파일명에 한글이 포함됐을 경우 파일명의 한글이 유니코드로 보이는 문자열로 찍히고 있습니다. // Form.jsx "use client"; // [other code] export default function Form() { const [formState, formAction] = useFormState(inquiryAction, { success: undefined, message: "", }); const { register, handleSubmit, reset, formState: { errors }, } = useForm(); const onSubmit = (data) => { const formData = new FormData(); const jsonData = JSON.stringify(data); formData.append("jsonData", jsonData); data.attachment[0] && formData.append("attachment", data.attachment[0]); formAction(formData); }; return ( <form action={handleSubmit(onSubmit)}> // [other code] <FileInput label="첨부파일" {...register("attachment")} error={errors} resetTrigger={resetTrigger} /> // [other code] </form> ); } // inquiryAction.js "use server"; import { connectDB } from "./connectDB"; export async function inquiryAction(prevState, formData) { const fields = JSON.parse(formData.get("jsonData")); const attachment = formData.get("attachment"); console.log(attachment); } Form 컴포넌트는 클라이언트 컴포넌트이고, react-hook-form과 next14의 서버액션을 사용하기 위해, form의 action에는 react-hook-form의 handleSubmit함수에 onSubmit 함수를 인자로 전달합니다. onSumbit 함수에서 서버액션 함수를 가져와 처리를 하고 있습니다. 그런데 여기서 서버함수쪽에서 첨부파일을 받을 때 한글 파일명이 다 깨지고 있네요... 기존에 api route와 fetch api를 사용했을 땐 문제가 없었는데.. 제가 놓치고 있는 부분이 있을까요?

Textfield 공통컴포넌트 설계질문

현재 Textfield를 위한 공통 컴포넌트를 설계하고 있습니다. Textfield에서 maxlength와 현재 value의 갯수를 보여주는 기능과, react-hook-form을 사용할수 있으며, 아이콘(버튼)을 클릭하면 특정 이벤트가 수행되는등 여러가지 기능을 아울러 수행하여 어디든 사용할수 있도록 하고싶습니다. 설계하면서 고민이 드는것이 있는데요. 저는 이모든것들을 props로 제어하려 합니다. 이유는 다음과 같은데요! 합성컴포넌트로 설계할경우 아이콘, 버튼의 갯수가 늘어나거나 위치가 변경됐을때 변화에 유연하겠지만 Textfield와 같은 공통컴포넌트의경우 기능, 디자인이 잘 변화하지 않기때문에 이런 결정을 했습니다! 혹시 다른분들은 어떻게 설계하시고 계신가요? 또는 관련된 레포나 문서 추천해주시면 감사하겠습니다.

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 을 선언해버리면 리액트의 훅 규칙을 어기는 것으로 알고 있습니다. 그러기에 위 방법은 옳지 않은 방법인 것 같아서, 옳은 에러 데이터 추출방법을 알고 싶습니다. 감사합니다 :)

리액트에서 컴포넌트 내부 함수 위치

리액트로 컴포넌트를 작성하다보면, 해당 컴포넌트에서만 사용되는 함수나 hook이 생기게되는데요. 이 함수들이 너무 길어지면, 별도 파일로 분리하고 싶다는 생각이 강하게 드는 것 같습니다.. utils에 두기에는 유틸이라고 하기엔 너무 이 컴포넌트와 밀접하게 연관되어있어서 조금 아쉽고, hooks에 두기에는 공용으로 사용될 것도 아닐뿐더러 이렇게하면 과도하게 hooks가 많아져서 아쉽고.. AComponetFuncs라고 하기엔 또 애매하고.. 고민이 많아지네요. 관련해서 조언이나 찾아보면 좋을 키워드 추천 부탁드립니다. 다들 어떻게 파일로 분리하시나요?

모바일 뷰에서 팝업이, 뒤로가기 제스처를 취했을 때 이전 페이지로 넘어가지 않고 팝업만 닫히게 구현하고 싶어요.

안녕하세요. 이번에 웹뷰 뿐만 아니라 모바일 뷰까지 같이 개발을 진행하고 있는데, 팝업의 기능 구현에 어려움을 겪고 있어 질문을 남깁니다. 웹뷰 같은 경우는 바로 팝업을 닫을 수 있지만, 모바일 같은 경우에는 무심결에 뒤로가기 제스처를 통해서 팝업을 닫으려는 유저가 있을 수 있다고 생각합니다. 그래서 뒤로가기 제스처가 발동 시, 이전 페이지로 렌더링을 시도하는 것을 막고 해당 팝업을 unmount 시키고 싶은데 방법이 잘 생각나지 않네요. **개발환경은 프론트 (react) 입니다. 그냥 간단하게 생각한다면 모바일 뷰일 때를 dom 으로 감지 후에 해당 팝업이 mount 된 상태에서 navigation(-1) 같은 동작을 감지하여, 이전 페이지로 이동 대신 팝업을 unmount 시키게, useEffect 등으로 감시하면 될 것 같은데, 어떻게 구현해야 될까요? + 현재 react-router-dom v6.2를 사용하고 있는데, useBlocker를 활용하면 해결될 것 같습니다..! https://reactrouter.com/en/main/hooks/use-blocker

React에서 Custom hook 사용법에 관하여 질문있습니다.

react custom hook이란 로직의 재사용성을 위하여 로직들을 묶어놓는 용도로 사용한다고 배웠는데 종종 custom hook에서 component까지 render하는 함수를 제공하는 케이스들을 본것같아 궁금한것이 있습니다. 질문이 두가지 있습니다. 1. Custom hook에서 component 렌더링해주는 함수까지 제공하는 것이 custom hook의 용도에 알맞은 것일까요? 관련된 component를 제공해주는 것까지 재사용할 로직에 포함된다고 생각하면 되는걸까요? 2. 두번째는 react 렌더링에 관련된 질문입니다. custom hook에서 export default const useComponent = () => { const [value, setValue] = useState(''); const InputComponentByCustomHook = () => { return (<input value={value} onChange={(e)=>setValue(e.target.value)} />); } return [InputComponentByCustomHook ]; } 로 선언해준 후, 이를 app에서 사용하는 경우에 const App = () => { const [RenderedComponentByCustomHook] = useComponent() return (<> <InputComponentByCustomHook /> </>) } 이 경우에는 자꾸 input에 값을 입력할때 한글자 한글자마다 focus가 풀리길래 왜 그런가에 대해서 알아보니 value값이 변경될때마다 InputComponentByCustomHook컴포넌트가 계속 새롭게 만들어져서 focus가 풀린다고 하더라구요. 그런데 아래와 같이 const App = () => { const [RenderedComponentByCustomHook] = useComponent() return (<> { InputComponentByCustomHook() } </>) } 함수를 실행하여 return으로 컴포넌트를 전달해주는 경우에는 input에 값을 입력해도 focus가 풀리지않습니다. value 값이 변경될때마다 InputComponentByCustomHook 함수는 계속해서 재생성되는 것은 알겠는데 앞선 케이스와 달리 이친구는 계속 input 컴포넌트가 유지되는 이유가 무엇일까요? 함수가 재생성되더라도 return에 전달되는 컴포넌트들은 재생성되지 않는 것인가요?

제너릭 타입을 분리해 재사용하는 방법을 알려주세요.

React Query의 useQuery를 재사용 가능한 hook로 만들고 있습니다. config라는 options 객체를 hook를 사용하는 쪽에서 전달하고 싶었고 아래의 코드까지 도달했습니다. 실행은 되지만 <ResponseType, AxiosError, ParsedType> 제네릭 타입이 UseQueryOptions와 useQuery에서 중복으로 사용되고 있는게 마음에 들지 않습니다. 저 제네릭 타입을 별도로 분리해서 재사용할 수 없을까요?

react-konva circle blur처리

react-konva hook 방식으로 circle를 mouse cursor 처럼 이용하고 싶은데 속도 저하되지 않고 circle fill이 white에 opacity 적용하여 blur처리 가능하도록 하려면 어떻게 해야하나요? blur 적용해도 circle 투명하게 보여요

Next.js의 SSR을 잘 활용해보고 싶은데, 방법을 잘 모르겠어요

안녕하세요. 프론트엔드 개발 공부를 하고 있는 학부생입니다. HTML부터 차근차근 학교 공부하듯이 바닐라 JS, React, Next.js 12를 인터넷 강의를 통해 배웠고 지금은 Next.js 13 프로젝트를 개발 중에 있습니다. 저의 짧은 지식 선에서 Next.js의 두드러지는 장점으로는 SSR을 꼽을 수 있다고 생각했는데요, Next.js 13 버전에서는 서버 컴포넌트와 클라이언트 컴포넌트를 구분하여 클라이언트 컴포넌트의 경우 “use client” 코드를 적어주어야 하잖아요. 근데 개발을 하다 보니 거의 모든 컴포넌트에 react hook이 들어가다 보니 모든 컴포넌트 파일에 “use client” 코드를 적고 시작하며 제가 생각했던 Next.js의 장점을 전혀 활용하고 있지 못하다는 생각이 들어 컴포넌트 분리를 잘못하고 있는 건지 React를 쓰던 버릇이 들어 Next.js를 100% 활용하고 있지 못한 건지 의문이 듭니다. 선배님들의 의견과 조언이 궁금합니다!!

React에서 api 관리를 어떻게 하나요?

안녕하세요 리액트 공부중에 궁금한 것이 생겨서 질문 드립니다. React에서 api를 관리 할 때 따로 'src/api/serach.js' 이렇게 따로 만들어서 호출하는 형식으로 api 관리를 하고 있는데, 실무에서는 이 api 를 만들 때 클래스로 만들어서 호출하는 방식을 선호하나요? 아니면 hook으로 만들어서 호출하는 방식을 선호하나요?

(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;

NextJS 폴더 구조 (pages 폴더 아래에 components)

안녕하세요, 회사 프로젝트 폴더 구조를 잡아야 하는데 궁금한 게 있습니다. (NextJS 버전은 12 사용 중) next.config.js에서 아래의 설정 후 pages 폴더 아래 components를 두는 구조를 사용하시는 분 계실까요? pageExtensions: ['page.tsx', 'page.ts', 'page.jsx', 'page.js'] https://nextjs.org/docs/pages/api-reference/next-config-js/pageExtensions 아래와 같은 구조가 괜찮다고 판단되어 사용하려고 하는데 어떨지 의견 좀 여쭤보고 싶습니다. - apps/ --- pages/ ----- Main/ ------- page.ts ------- component.ts ------- hook.ts ------- test.ts --- shared-components/ ------- Button.ts ------- Input.ts 기존에는 pages 폴더에는 index.js만 두고 components 폴더 아래에 모든 컴포넌트들을 두는 구조로 사용 중인데, 프로젝트의 페이지가 많아지면서 특정 페이지에서만 사용하는 독립적인 컴포넌트들이 많아지다 보니 components 폴더에 있는 파일들이 구분이 잘 안됩니다. 어떤 페이지에서 사용하는 컴포넌트인지, 재사용 가능한 컴포넌트인지 명확한 구분이 어려워서 위와 같은 구조를 고민해보았는데 혹시 실제 비슷하게라도 사용 중인 곳이 있는지 궁금합니다. components 폴더 아래 page 별로 구분할 수도 있지만, 독립적인 컴포넌트는 page.ts와 같이 있는 게 조금 더 유지보수면에서 편할 것 같아 고민해보았습니다. 더 좋은 의견이 있다면 환영입니다. 어떤 폴더 구조를 사용하고 계시는지, 추천할만한 구조가 있다면 꼭 의견 부탁드리겠습니다!

키보드 후킹 관련 질문

개인적으로 키보드 Hooking 프로그램을 제작 해 보았습니다 예를 들면 1번키를 누르면 키 조합 Alt + Left 가 실행되는 프로그램입니다, 키 로그를 통해 들어가는 입력 값들도 확인해서 정상인 것을 확인하였습니다. 문제는 윈도우 내레이터를 실행하고 브라우저에서 설정한 키 들을 사용하면 발생합니다 키보드 Hooking으로 처리한 동작이 동작 하지 않습니다.(일부는 작동함) 제 예상으로는 내레이터가 Hooking 보다 먼저 처리가 되고 그 다음 Hooking이 처리되는 것 같은데 내레이터 같은 윈도우 프로그램보다 먼저 처리되게 할 수는 없을까요?

타입스크립트 이벤트 타이핑 방식에 관하여

안녕하세요 타입스크립트 코드 작성 중 궁금한 부분이 생겨 이렇게 질문 글 올려봅니다. 만들어 놓은 custom hook 중 모달 or 레이어 창을 닫는 close라는 함수가 hook 안에 있습니다. 함수는 아래 코드와 같이 생겼습니다. 이 함수는 usehook의 의도에 맞게 코드 전역에서 사용 되는데 컴포넌트 내부에서 이 함수를 사용할 때 이벤트 객체의 타입이 사용하는 곳마다 다르기 때문에, close 함수의 파라미터인 이벤트 객체의 타입을 결정하는데 고민이 있었습니다. 어느 곳은 input 같은 태그에서 onClick 함수 내에서 사용하기에 React.MouseEvent, 어느 곳은 eventListener에서 사용하기 때문에 그냥 MouseEvent로 추론 되는 등 여러가지 이벤트 타입이 존재했습니다. 그래서 모든 이벤트에서 상속 받는 BaseSyntheticEvent를 close 함수를 정의하는 곳에서 이벤트 객체의 타입으로 지정을 해주었는데 이게 좋은 방법이 맞을까요? 혹은 이벤트 객체 타입이 아니더라도 비슷한 경우에는 어떻게 작성하는 것이 좋은 방법일까요?

채팅 기능 client 가 null 값이 돼요

하나의 페이지에서 connectHandler를 작동하고 또다른 페이지에서 sendHandler를 작동하려고 하는데 이렇게 해서는 useChat()이 리렌더링 되면서 client 값이 초기화가 되더라구요 값을 유지하고 싶고 recoil에 client를 담는 건 불가능이라고 떠서... connectHandler와 sendHandler를 다른 hooks로 분리하는 방법도 생각해봤는데 그러면 또 client값이 connect한 값이 아니더라구요 무슨 방법이 있을까요? 제발 도와주세요 ㅠㅠ (한 페이지에서 connectHandler, sendHandler, disconnectHandler 실행하면 잘 작동합니다!) import { CompatClient, Stomp } from "@stomp/stompjs"; import { useRef } from "react"; import { useRecoilState } from "recoil"; import { inputMessageState, messageState } from "../../states/chatting"; export function useChat() { const [messages, setMessages] = useRecoilState(messageState); const [inputMessage, setInputMessage] = useRecoilState(inputMessageState); const token = localStorage.getItem("accessToken"); // 채팅 연결 구독 const client = useRef<CompatClient>(); const connectHandler = () => { client.current = Stomp.over(() => { const sock = new WebSocket("wss://m-ssaem.com:8080/stomp/chat"); return sock; }); client.current.connect( { token: token, }, () => { client.current && client.current.subscribe(`/sub/chat/room/1`, onMessageReceived, { token: token!, }); }, ); }; const onMessageReceived = (message: any) => { setMessages((prevMessage) => [...prevMessage, JSON.parse(message.body)]); }; // 채팅 나가기 const disconnectHandler = () => { if (client.current) { client.current.disconnect(() => { window.location.reload(); }); } }; // 채팅 보내기 const sendHandler = () => { if (client.current && inputMessage.trim() !== "") { client.current.send( `/pub/chat/message`, { token: token, }, JSON.stringify({ roomId: 1, message: inputMessage, type: "TALK", }), ); setInputMessage(""); } }; return { connectHandler, disconnectHandler, sendHandler, }; }

DRF를 자세히 공부해보고싶은데 독학으로 하려니 자꾸 턱턱걸립니다... django 백엔드에서 프론트엔드로 보낸 data가 안불러와져요

django rest framework로 웹을 개발하는 것을 공부하는 중인데 막히는부분이 많아서 점점 괴로워지네요. 이거를 보면서 독학하고 있는데요. https://wikidocs.net/book/9596 django views.py에서 response(data)를 발신하는 것까지는 되는데 next.js를 이용한 프론트에서 data를 받아오지 못하고 있어요... 왜 그럴까요? 디버그 메시지가 안뜨니 더 알기가 어렵네요. # backend/views.py """ from django.shortcuts import render from django.http import HttpResponse from rest_framework.decorators import api_view, permission_classes from rest_framework.permissions import AllowAny from rest_framework.response import Response # Create your views here. @api_view(['GET']) @permission_classes([AllowAny]) def hello_world(request): return Response('Hello, World!') # frontend/index.js """ import React, { useState, useEffect } from "react"; // config.js export const BACKEND_URL = "http://127.0.0.1:8000/"; const Home = () => { // State to store the data fetched from the backend const [data, setData] = useState(""); // useEffect hook to fetch data from the backend when the component mounts useEffect(() => { // Fetch data from the backend API using the '/api/hello' endpoint fetch("${BACKEND_URL}api/hello") .then((response) => response.json()) .then((data) => setData(data)); }, []); // Render the component JSX return ( <div> <h1>Welcome to Fine-Tuning Chatbot!</h1> <p>{data}</p> </div> ); }; export default Home; """ pure django-template를 이용해서 홈페이지 만들고 그 원리를 이해하는 것까지는 되는데 DRF는 정말 다른 세상이라고 느껴지네요...ㅎㅎ 좋은 강의나 책이 있으면 추천부탁드립니다. ㅠㅠ 위에 언급한 강의로 RESTful 배워보려는데, 기술스택이 많아서 그런건지 정보량도 많고 어렵네요 ㅠ

react query 좋은 코드?? 구현하는 법

react query로 채팅목록을 구현중입니다. 질문하고 답변이 오면 답변을 가공해서 recoil에 저장을하고 화면에 렌더링합니다. 이때 가공해야할것이 많고 오는 답변에 따라서 처리도 다 제각각이라 react query를 사용하는 부분이 코드가 매우 지저분합니다. 예를 들면 아래와 같이 되어있습니다. useSend = () => { // 각종 react query hook 선언 // recoil 상태값 선언 // recoil hook (각종 데이터 변형 처리) return useMutation( api 함수 호출, {onMutate: () => { api 호출하기전에 처리 }, onSuccess: () => { api 성공시 처리 응답으로 온 data를 렌더링 처리를 위해 각 구성을 달리해서 recoil에 저장하기도하고 (데이터 저장하는 hook도 따로 있음) 응답으로 온 data값에따라 또 다른 react query hook을 호출하기도 합니다. }) 이렇게 react query를 날리는 hook은 따로 만들었으나 이 안에서 하는일이 너무 많습니다. react query를 사용하는 코드들을 몇개 검토해보았는데.. 죄다 setquerydata로 저장을하고 그럼 useQuery에서는 다시 api를 호출하지않아도 리스트가 재렌더링되는 등의... 한마디로 backend에서 온 데이터를 그대로 쓰는?? 이런 예제들만있어서 참고가 잘 안되네요. 이럴경우 어떻게 구현하는 것이 좋을까요?? 약간의 팁도 감사합니다.

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

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

radio 버튼 클릭시 변경하는 form 값이 한박자 늦게 변경되는 문제가 있습니다.

radio버튼에서 onClick으로 react hook form에 있는 값을 바꾸고 있습니다. styled-compontent에서 props값을 전달하면 될것 같은데 한 박자 늦게 바뀝니다. 제 생각에는 랜더링이 onClick이 반영되기 전에 실행되고 있는 것 같은데 한 박자 늦게 랜더링을 시키는 방법이 따로 있는 걸까요? 아니면 styled-component의 props를 버튼 클릭했을 때 연동시킬 수 있는 방법이나 키워드가 따로 있나요?

Nextjs 13 서버 컴포넌트 데이터 페칭 질문있습니다.

어제 공식문서를 공부를 조금 해봤는데 데이터 페칭은 왠만하면 서버컴포넌트 측에서 한다고 봤습니다! 근데 만약 데이터를 페칭하는데 필터를 거치는 데이터는 어떻게 해야할까요? 예를들면 리스트가 있는데 낮은가격순 높은가격순 등등으로 필터링을해서 다시 데이터를 리렌더링해야하는데 이럴경우 state로 하려합니다. 근데 서버컴포넌트에선 useHook같은걸 못써서 어떻게 해야할지 잘모르겠습니다. 이럴경우 그냥 클라이언트 컴포넌트로 만들고 리액트쿼리 써야하는걸까요?

프론트엔드 준비 1년 시점에서 백엔드 공부해봐도 좋을까요?

안녕하세요. 프론트엔드 준비한지 1년정도 된 병아리입니다. HTML/CSS/JS는 퀄리티는 좋지 않지만 클론코딩, 인터렉티브 페이지 등 구현은 자주했었고 프로젝트는 바닐라JS로 한번 진행해봤습니다. React는 한달 바싹 공부하고 3개월짜리 프로젝트를 진행해보았습니다. React는 state, 기본hook, styled-component등 거의 기본문법만 사용하고 구현하였습니다. 현재 JS는 DeepDive책을 읽으며 객체지향, 프로토타입 등을 공부하고 있고 React는 상태관리 Redux 등을 공부하고 있습니다. 우연한 기회에 강의를 무료로 듣게 되었는데 웹 접근성, 프론트엔드 A to Z 두가지가 있습니다. 위 두가지는 끌리지않아서 백엔드쪽을 보니 간단한 API를 만드는 자바스프링 강의가 있더라구요. 두번의 프로젝트를 진행하면서 힘들었던점이 백엔드 지식이 전무하다보니 의사소통이 걸려서 아직 서버와의 통신에 대한 지식도 부족하고 프론트쪽을 구현하면서 이렇게 서버와 연결하면 정상적으로 구동이 될까?라는 의구심이 끊임없이 들었던터라 들어보려합니다. 자바는 생활코딩으로 경험해보았고 스프링은 경험이 없습니다. 프론트에 더욱 집중하는것이 좋은지, 백엔드도 어떻게 구현되는지 찍먹해보는게 좋은지 조언을 구하고 싶습니다.