173만명의 커뮤니티!! 함께 토론해봐요.
해결됨
비개발자 4주만에 수익화 서비스 만들기: AI 바이브코딩 웹 + 앱 ALL IN ONE
Google Search Console에 Sitemaps로 이동하여 sitemap.xml, rss.xml, robots.txt를 제출하였습니다. robots.txt는 오류 발생, rss.xml, sitemap.xml은 가져올 수 없음 이라는 상태가 발생하였는데 GPT나 Cursor에게도 물어봤는데 같은 에러 발생하였습니다.어떻게 해결하면 될까요? 네이버 서치 어드바이저에는 등록을 완료하였는데 특이사항은 없습니다.
해결됨
한 입 크기로 잘라먹는 React.js 실전 프로젝트 - SNS 편
안녕하세요 강사님 강의를 열심히 수강하고 있는 학생입니다. 백엔드 개발자인데 프론트도 배워볼까 하다가 강사님의 강의가 눈에 들어와 열심히 수강중입니다 😃 백엔드에서는 TDD와 같은 방법으로 어플리케이션 테스트를 많이 하는데 이런 리액트 앱같은 경우에는 테스트를 어떻게 하나요? 특히 실무에서는 어떻게 테스트 하는지 궁금합니다. tanstack-query같은 로직적인 부분만 테스트 UI요소들까지 로드해서 렌더링 시 정상 동작하는지 테스트 통합테스트 사람이 일일이 눌러가며 테스트 어떤식으로 테스트하는지 궁금해서 남겨봅니다 감사합니다 😃
해결됨
한 입 크기로 잘라먹는 React.js 실전 프로젝트 - SNS 편
[2:10] zotai 가 아니고 jotai 인거 같아요.
해결됨
한 입 크기로 잘라먹는 React.js 실전 프로젝트 - SNS 편
강의 하단에 vercel.json 내용이 담긴 노트가 안보이는 것 같은데 누락 된 것이 아닌가 싶어서 Q&A 남깁니다! { "rewrites": [ { "source": "/(.*)", "destination": "/" } ] }
미해결
한 입 크기로 잘라먹는 React.js 실전 프로젝트 - SNS 편
강의에서 comment-editor.tsx 의 취소 버튼을 조건부 렌더링하는 코드를 수정하는 과정에서 아래와 같은 조건을 사용하고 있는데요. 이렇게 되면 props.type === "REPLY" 일때만 의도대로 동작하고, props.type === "EDIT" 일때는 취소 버튼이 렌더링 되지 않습니다. {props.type === "EDIT" || (props.type === "REPLY" && ( <Button disabled={isPending} variant={"outline"} onClick={() => props.onClose()} > 취소 </Button> ))} 아래와 같이 렌더링 조건 부분을 괄호로 감싸주면 의도대로 동작하도록 수정됩니다! {(props.type === "EDIT" || props.type === "REPLY") && ( <Button disabled={isPending} variant={"outline"} onClick={() => props.onClose()} > 취소 </Button> )}
해결됨
한 입 크기로 잘라먹는 React.js 실전 프로젝트 - SNS 편
안녕하세요 좋은강의 감사합니다. 로그인의 비동기 관리 함수인 useSignInWithPassword 가 왜 mutations에 속하는지 궁금해서 질문남깁니다. 데이터를 전혀 변경하는게 없는 로그인처리인데 왜 mutations에 두셨는지 궁금합니다.
미해결
한 입 크기로 잘라먹는 React.js 실전 프로젝트 - SNS 편
말그대로 input 입력시 리스트가 리렌더링 되는거로 데브툴에서 보이는데 리스트 리렌더링이 안되게 하려면 어떻게 해야 하나요? 일전 한입리액트에서는 contextApI를 사용해서 그런가 생각을 하고 넘어갔었는데 지금도 동일하네요.
미해결
한 입 크기로 잘라먹는 React.js 실전 프로젝트 - SNS 편
강의 28:25 정도에 컨텐츠 부분 테일윈드 클래스 설정에 오타인지 확인해 주세요. break-words 가 word-break 를 표기한 건 가요? 아니면 테일윈드 버전에 따른 클래스 네임 변경인가요? {/* 2-1. 컨텐츠 */} <div className="line-clamp-2 break-words whitespace-pre-wrap"> {post.content} </div> 그리고 좋아요 버튼, 댓글 버튼 부분 에서 border-1 도 border 로 수정해야 할 듯 합니다. border 의 1은 단위를 생략하는 것으로 압니다.
미해결
한 입 크기로 잘라먹는 React.js 실전 프로젝트 - SNS 편
선생님 제공 자료 eslint.config.js 파일에서 아래 코드로 작성되어 있는데 no-explicit-any 규칙이 오타난 걸까요? 강의는 2:40 쯤입니다 "@typescript-eslint/no-explicity-any": "off",
미해결
한 입 크기로 잘라먹는 React.js 실전 프로젝트 - SNS 편
이미 가입된 이메일로 다시 회원가입 시도하면 강의에서는 400 오류?가 발생하는데 저는 오류는 발생하지 않고 response에서 session 부분만 null 로 오는데 빠진 설정이 있을까요?
미해결
한 입 크기로 잘라먹는 React.js 실전 프로젝트 - SNS 편
안녕하세요, 선생님. 강의 너무 잘 듣고 있습니다! 강의 수강 중 이해가 되지 않는 부분이 있어 질문남깁니다. 질문부분: (4.7) 캐시 데이터 다루기 1 (8:05~) 질문내용: " ['todos'] 에 대해 쿼리 무효화할 경우 ['todos', id] 쿼리키에 대해서도 불필요하게 리페칭이 수행된다." 부분이 잘 이해가 가질 않습니다. 구글링하고 챗지피티에 물어본 결과, 두 개는 각각 다른 쿼리키 배열로 판정될 거라고 생각했습니다. 따라서 앞선 내용의 '리페칭'은 수행되지 않을 것이라고 예상했습니다. 제가 어느 부분을 놓치고 있는지 보충 설명 해주시면 감사하겠습니다:)
미해결
한 입 크기로 잘라먹는 React.js 실전 프로젝트 - SNS 편
관련 섹션: 42. (6.2) 회원가입 구현하기 질문 내용 회원가입 요청을 보냈을 때 반환되는 data 객체 안에 user 값은 있는데, session 값이 null입니다. 강의에서 알려주신 대로 진행했고, 한 가지 다르게 진행한 부분은 Supabase 이메일 세부옵션에 'Confirm email'이 존재하지 않아 이 부분만 off 처리를 하지 못했습니다. 회원가입 요청을 보내면 반드시 data 객체 안에 session값까지 포함되어야 할까요?
해결됨
한 입 크기로 잘라먹는 React.js 실전 프로젝트 - SNS 편
todo.ts에서 26번째줄에 사진과 같이 뜨는데 왜 이렇게 뜨는지 궁금합니다.
해결됨
한 입 크기로 잘라먹는 React.js 실전 프로젝트 - SNS 편
안녕하세요. 섹션 3 퀴즈에서 5번 문제 관련 질문 드립니다. 질문: persist 미들웨어 사용 시, 액션 함수가 기본적으로 저장되지 않는 이유는 무엇일까요? 해설: persist 미들웨어는 상태를 JSON 형태로 저장하기 때문에, JSON으로 직렬화할 수 없는 함수는 저장하지 않아요. 따라서 serialize 옵션으로 상태만 저장하는 것이 좋습니다. 강의에서 serialize 가 아닌 partialize 로 설명해주셨는데, 이 부분 확인 부탁드립니다.
해결됨
한 입 크기로 잘라먹는 React.js 실전 프로젝트 - SNS 편
안녕하세요. 좋은 강의 잘 수강하고 있습니다! 다름이 아니라 포스트 삭제 후에 무한 스크롤이 작동하지 않는 문제가 발생했습니다. 문제 상황은 다음과 같습니다. 첫 페이지(다음 페이지의 데이터를 페칭하지 않은 상태)에서 작성한 포스트를 삭제 이후 페이지 최하단까지 스크롤 했지만 무한 스크롤 데이터 페칭이 이루어지지 않음 부족한 실력이라 AI의 도움을 받아 원인을 분석했을 때 다음과 같았습니다. 아래는 AI의 답변입니다. 무한 스크롤이 작동하지 않는 원인 분석: getNextPageParam 의 로직 useInfinitePostData 훅에서 다음 페이지를 불러올지 결정하는 로직은 다음과 같습니다: // src\hooks\queries\use-infinite-posts-data.ts // ... const PAGE_SIZE = 5; // ... getNextPageParam: (lastPage, allPages) => { if (lastPage.length < PAGE_SIZE) return undefined; // 🚫 문제의 원인 return allPages.length; }, 이 로직은 "마지막으로 불러온 페이지의 항목 개수가 PAGE_SIZE (5개)보다 적으면, 더 이상 데이터가 없으므로 undefined 를 반환하라 (즉, 다음 페이지를 불러오지 마라)"고 지시합니다. 삭제가 로직에 미치는 영향: 초기 상태: 0번 페이지에 5개의 게시글이 있습니다. ( lastPage.length = 5) 삭제 이벤트: 사용자가 0번 페이지의 게시글 1개를 삭제합니다. 캐시 업데이트: useDeletePost 의 onSuccess 에서 해당 게시글 ID를 0번 페이지의 캐시 데이터 에서 제거합니다. 결과: 0번 페이지의 항목 개수가 5개에서 4개 로 줄어듭니다. 무한 스크롤 시도: 사용자가 스크롤하여 ref ( inView )가 활성화됩니다. getNextPageParam 실행: React Query는 0번 페이지의 현재 캐시 데이터 를 확인합니다. lastPage.length 는 이제 4 입니다. 잘못된 판단: 4 < PAGE_SIZE (5) 이므로, getNextPageParam 은 즉시 undefined 를 반환 합니다. 따라서 1번 페이지(실제 서버에는 데이터가 있을 수 있음)를 불러오기도 전에, 캐시 데이터가 줄어든 것 때문에 다음 페이지 로딩이 차단 되어 무한 스크롤이 작동하지 않게 되는 것입니다. 마지막 페이지에 속한 포스트를 삭제했을 때, PAGE_SIZE보다 항상 작아지니 다음 페이지가 없다라고 판단하기에 무한 스크롤이 작동하지 않는다고 이해했습니다. 캐시를 무효화해 리페칭해서 해결하려고 하는데, 다른 대안이 있을까요? 혹여 제 실수로 잘못된 동작이 일어난 건지 GitHub Repo도 같이 첨부했습니다! https://github.com/scseong/onebite-sns
해결됨
한 입 크기로 잘라먹는 React.js 실전 프로젝트 - SNS 편
안녕하세요 멘토님, 정말 쉽게 설명해주셔서 수업 잘 듣고 있습니다. 인증 처리하기 부분에 대해서 흐름도를 자세하고 재밌게 설명해주셔서 덕분에 이해하기 수월했습니다. 다만 현재 토큰들을 localStorage에 저장하고 이 값을 zustand로 관리하고 있는 것 같은데 사실 토큰을 storage에 저장하는 방식이 일반적이지는 않은 것 같습니다. 이 부분에 대해서 찾아본 결과 supabase를 이용하기에 쿠키에 저장하는 건 무리인 것 같고, 그렇다면 그나마 토큰을 메모리에 저장하는 방식이 안전할 것 같습니다. 로그인을 진행하면 토큰이 localStorage에 저장되는 형태인데, 이때 만약 storage에 저장하지 않고 메모리에 받게하려면 어떻게 할 수 있을까요 .. ? 또한 사실 토큰 자체를 zustand에서 가지고 있는 것도 괜찮은지 의문입니다.. 전역상태로 들고 있는 것이라서 충분히 탈취위험이 있을 것이라고 생각이 되어서요.. 사실 백엔드 서버가 있었다면 쿠키에 저장하는 로직으로 진행했을 거 같은데 만약 이때는 로그인 상태를 어떻게 판별하는지에 대해서도 궁금합니다 !
미해결
한 입 크기로 잘라먹는 React.js 실전 프로젝트 - SNS 편
안녕하세요..강의 잘 보고 있습니다. import { ITodoInfo } from "@/utils/types"; export async function fetchTodos(blngCoCd:string, userId:string) { const respose = await fetch( `${process.env.NEXT_PUBLIC_API_SERVER_URL}/todo/list?blngCoCd=${blngCoCd}&userId=${userId}` ); if (!respose.ok) { throw new Error("Fetch Todo Error"); } const data: ITodoInfo[] = await respose.json(); console.log('todo data=',JSON.stringify(data, null, 2)); return data; } import { fetchTodos } from "@/api/todo/fetch-todos"; import useUserInfoStore from "@/store/user-info-store"; import { ILoginUserInfo } from "@/utils/types"; import { useQuery } from "@tanstack/react-query"; export function UserTodosData() { const loinData: ILoginUserInfo = useUserInfoStore((state) => state.userInfo); return useQuery({ queryFn: () => fetchTodos(loinData.blngCoCd, loinData.userId) , queryKey: ["todos"], }); } 이런식으로 zustand의 유저 정보를 가져와 훅에서 api를 호출을 하면 처음은 정보를 가져오는데. refresh를 하면 다시 가져 올때 blngCoCd와 userId가 null이 되면서 리스트를 가져오지 못하네요. zustand의 정보는 localstorage로 보관하고 있고... const loinData: ILoginUserInfo| null = useUserInfoStore((state) => state.userInfo); const blngCoCd = loinData?.blngCoCd; const userId = loinData?.userId; // blngCoCd와 userId가 모두 존재할 때만 쿼리를 활성화합니다. const enabled = !!blngCoCd && !!userId; return useQuery({ queryFn: () => fetchTodos(blngCoCd, userId) , queryKey: ["todos", blngCoCd, userId], enabled: enabled, }); 이렇게 변경을 했는데... api에 파라미터를 넘겨야 하는경우 새로고침을 할 경우 이런식으로 하는게 일반적인가요?
미해결
[플러터플로우] 실전! 앱 출시를 위한 끝장 노하우!
전 질문 내용 검색해 보고 해도 안되는데요.. 확인 좀 부탁 드립니다.
해결됨
비개발자 4주만에 수익화 서비스 만들기: AI 바이브코딩 웹 + 앱 ALL IN ONE
💬 좋은 질문 예시 [진도] 1주차 5강 웹사이트 만들기 [질문] Lovable 에 자체 클라우드가 생기면서 supabase를 연동하기 힘들어 졌습니다. Lovable유료결제 까지 하면서 원인을 찾아보려고 했는데 일주일 동안 찾지 못 했습니다. 전에 같은 질문을 하신분의 답변에 다른 분의 영상을 봤는데도, 그것으로는 해결이 되지 않는 상황입니다. 아예 베이스가 없기 때문에 supabase가 뭔지도 모르는 상황이고 이 둘을 어떻게 연결해야 할지도 모르는 상황입니다. 현재 바뀐 상황을 들여다 본 후 답변 주셨으면 좋겠습니다. 혹은, supabase 연동 없이 Lovable 자체 클라우드를 활용해서 강의를 진행해도 괜찮을지 알려주시면 supabese 없이 Lovable 클라우드로 진행해 보겠습니다. 제가 변화에 대처하질 못하는 상황이지만, 항상 질 높은 강의 감사드립니다.
미해결
한 입 크기로 잘라먹는 React.js 실전 프로젝트 - SNS 편
강의 정말 잘 듣고있습니다! 10.6 강의 수강 중 댓글 추가 시에는 Comment 타입과 일치시키기 위해 프로필 데이터를 조회해서 author 객체를 포함시켜주었는데 수정, 삭제 시에는 왜 따로 처리를 하지 않는지 궁금합니다. 삭제 시에는 해당 데이터를 삭제하기에 불필요하다고 생각되긴하는데 수정 시에는 왜 에러가 발생하지 않나요??
