react 19 및 ESLint (exlint-plugin-react-compiler 또는 최신 react-hooks 규칙)에서 새로 추가된 규칙으로 발생하는 문제가 있습니다. useEffect(() => { setIsLoading(true); fetch("http://localhost:3000/posts") .then((reponse) => { return reponse.json(); }) .then((data) => setPosts(data)) .finally(() => { setIsLoading(true); }); }, []); useEffect 내부에서 조건 없이 동기적으로 setState를 호출하면 컴포넌트가 마운트되자마자 불필요한 리렌더링 연쇄가 일어나기 때문에 위와 같은 코드 작성을 금지한다고 하는데, 최신 문법에 맞는 방법은 어떻게 작성하면 좋을지 궁금합니다
안녕하세요, 선생님. Zustand 스토어에 타입을 지정하는 부분이 궁금해서 질문드립니다. 강의에서는 다음과 같이 상태와 액션을 Store 타입으로 선언한 뒤, create 함수의 제네릭으로 전달했습니다. type Store = { count: number; increase: () => void; decrease: () => void; }; const useStore = create<Store>((set, get) => ({ count: 0, increase: () => { const count = get().count; set({ count: count + 1 }); }, decrease: () => { set((store) => ({ count: store.count - 1, })); }, })); 처음 코드를 작성했을 때는 get() 의 반환값과 set 의 콜백 매개변수인 store 에서 타입 오류가 발생해서, 저는 해당 부분마다 타입을 직접 지정해야 한다고 생각했습니다. 그런데 강의를 보니 놀랍게도 create<Store> 처럼 제네릭만 지정해도 set 과 get 에 관련된 타입 오류가 모두 해결되었습니다. 여기서 제가 궁금한 점은 다음과 같습니다. 1. Store 타입에는 왜 count , increase , decrease 처럼 스토어 객체에 들어갈 상태와 액션만 작성하면 되는 건가요? 2. 처음 Zustand를 사용하는 사람은 Store 타입을 이런 형태로 작성해야 한다는 것을 공식 문서의 TypeScript 예제를 보고 알게 되는 건가요? 3. 아니면 패키지의 .d.ts 나 .d.mts 같은 타입 선언 파일을 직접 확인하고, create 와 StateCreator 의 타입 구조를 해석해서 작성하는 건가요? 4. create<Store> 에 지정한 타입이 내부의 set , get , 그리고 set 콜백의 store 타입까지 전달되기 때문에 오류가 해결된 것인지도 궁금합니다. 실제로 라이브러리를 사용할 때는 공식 문서의 사용법을 먼저 따라 하고, 타입이 적용되는 원리가 궁금하거나 오류가 발생했을 때 타입 선언 파일을 확인하는 방식이 일반적인지도 궁금합니다. AI가 아닌 정환선생님이 직접 답변 부탁드리겠습니다.
몽고 DB 접속 중인데요 강의내용 같이 mongodb+srv://admin:qwe123!!@cluster0.ic4ilij.mongodb.net/react_blog?retryWrites=true&w=majority&appName=Cluster0 하고 Connection whit Conection String "Connect"를 누르면 Unable to connect: querySrv ENOTFOUND mongodb. tcp.cluster0.ic4ilij.mongodb.net 라는 메시지와 함께 접속이 안되고 있습니다. 원인과 해결 방안을 여쭤 봅니다. -- 감사합니다.
React 마스터 클래스: Part 3 - 실무 핵심 라이브러리 정복 (TypeScript, Zustand, React Hook Form, TanStack Query)
62강 실습 자료로는 ' [Solution] Stale-While-Revalidate: 사용자에게는 캐시를, 뒤에서는 갱신을' 에 관한 내용이 나와야하는데, 현재는 '[Pain] 수동으로 관리하던 전역 로딩/에러 상태가 로직을 오염시킬 때' 로 나와있습니다. 62강 실습 자료 교체 부탁드립니다.
안녕하세요 정환님, 이렇게 바로 또 질문을 드릴 줄은 몰랐는데.. 이번 포스트 작성 중 이탈 방지 기능 개발을 하다가 "확인 버튼"을 누르게 되면 정상적으로 모든 모달이 종료가 되지만, "취소 버튼"을 누르게 되면 AlertModal이 종료되지 않고 계속 리렌더링이 되는 현상이 발생합니다ㅠㅠ 해당 부분에 대해 저번처럼 메일로 프로젝트 파일을 압축해서 보내드려도 되는지 여쭤봅니다!
안녕하세요 정환님. 저는 정환님의 강의를 모두 구매해서 수강하고 있는 수강생입니다. 현재는 바이브 코딩 강의를 제외한 강의들을 모두 수강했고, 지금은 복습을 진행하고 있습니다. 복습과 함께 프론트엔드 신입 지원용 개인 프로젝트를 준비하고 있는데, 정환님께 배운 내용을 최대한 활용해 보고 싶어서 질문드립니다. 개인 프로젝트 기술 스택은 Next.js + TanStack Query + Supabase 기반으로 생각하고 있습니다. 1. 제가 이전에 영어학원에서 근무한 경험이 있어서, 그 경험을 바탕으로 영어와 관련된 서비스를 만들어보려고 합니다. 예를 들어 영어 원서 학습 서비스나 영어 단어장 서비스 등을 생각하고 있는데, 이런 주제가 프론트엔드 신입 포트폴리오용 개인 프로젝트로 적절할지 궁금합니다. 2. 혹시 프론트엔드 신입 포트폴리오용으로 추천해 주실 만한 프로젝트 주제가 있을까요? 3. 현재 React, TypeScript, Next.js, TanStack Query를 학습하고 복습 중입니다. 신입 프론트엔드 개발자로 취업하기 위해 어느 정도 수준까지 준비하는 것이 좋을지, 그리고 추가로 공부하면 좋을 부분이 있다면 조언 부탁드립니다. 4. 정환님의 바이브 코딩 강의를 수강한 이후에는 AI를 활용한 프로젝트도 하나 진행해 보고 싶습니다. 프론트엔드 신입 포트폴리오 관점에서 추천해 주실 만한 AI 프로젝트 주제가 있을까요? 5.포트폴리오를 준비하는 입장에서 아래 항목들의 우선순위를 어떻게 가져가는 것이 좋을지도 궁금합니다. 현재 준비 기간이 넉넉하지 않아 세 가지를 모두 진행하지 못할 수도 있다는 생각이 들어서, 어떤 순서로 준비하는 것이 가장 효과적일지 조언 부탁드립니다. 1) 개인 프로젝트 2) AI 프로젝트 3) 팀 프로젝트 질문이 많았는데 시간 내어 읽어주셔서 감사합니다. 정환님 강의를 통해 정말 많은 도움을 받고 있습니다. 항상 좋은 강의 만들어주셔서 감사드립니다.
제공되는 react_ code.zip 중에 .. D:\su\code\SECTION11\11-02 D:\su\code\SECTION11\11-03 안에 소스가 없네요. 당연히 제가 작성하면 되겠지만... 참조하는 차원에서.. ㅡㅡ;; 소스를 얻을 수 있을까요? 다른 폴더안에는 소스가 제공되고 있는데 말이줘 ..
