이런식으로 코드 입력할때마다 에러 메세지같이 띄워주는건 어떤 익스텐션 인가요?!

강의 중에 소스 올려주신다고 했는데 소스가 안보이네요?소스가 없더라도 진행하는 강의 부분의 코드를 한번이라도 좀 보여주면 멈추고 따라 치면서 같이 실습할텐데 css영역부분 다 짤려 보여갖고 실습 내용이 똑같이 재현이 안됩니다...

toggleTodo = useCallback( ( id : number) => { <-- 여기 이 지점에 todos 라는 state 값이 필요한 상황 ( 체크 로직 등등.. )  setTodos( (todos) => todos.map( (todo) => todo.id === id ? { ...todo, completed: !todo.completed } : todo );}, []); 위 부분에 todos 의 state 값이 필요하게 되면 의존성 배열에 todos 를 넣어줘야 될꺼 같은데요. 이렇게 되면 React.memo 에 의해 전달될 toggleTodo props 도 변경되게 될것으로 예측 되고 결국 자식 컴포넌트들이 리렌더링이 계속 발생되지 않을까 싶은데요. 위 부분에 todos 의 state 값이 필요하게 될 경우에는 어떻게 처리를 해줘야 될까요?

102강 강의를 듣고 있는데요,react-native-reanimated-carousel 설치 위해 노션에 링크대로npm install react-native-reanimated-carousel@3.3.0 명령어로 설치하고그 이후 expo install --npm react-native-reanimated react-native-gesture-handler 를 입력하여 터미널에서 설치 완료하였습니다질문 1.이후babel.config.js 파일에 가서 plugins: ["react-native-reanimated/plugin"], 추가 해야하는데 문제는 babel.config.js 파일이 존재하지 않아 어디에 플러그인 작성해야 하는지 모르겠습니다 첨부 사진package.json에 디펜던시를 보면 아래와 같아요"react": "19.1.0", "react-native": "0.81.5", "react-native-reanimated-carousel": "^3.3.0", "react-native-reanimated": "~4.1.1", "react-native-gesture-handler": "~2.28.0"질문 2. Babel 설정 위해 Cache 초기화 하는 부분도 위에 질문1이 순서대로 정상적으로 진행이 되지 않아스킵했는데 babel.config.js에 플러그인 문구부터 저장한 뒤 바벨 설정 캐시초기화 하는 것이 옳지요? 질문 3102강 시작부터 ~ 18분 56초 까지 타이핑한 grab-market-mobile의 App.js소스 내용아래와 같은데 이것을 실행하면 사진과 같이 안드로이드 스튜디오(runtime not ready)에서 에러 발생 아래 App.js 는 강의 전체 완성본 소스가 아니라 에러가 난 시점까지의 소스 입니다질문4->여기서 Carousel 부분 살펴보면 아래 App.js 소스에서 아래와 같이 작성하는 것 맞나요?만약 아래 작성 소스가 다르면 어떻게 작성 해야하는지 댓글에 소스 적어주세요<Carouseldata={banners}width={Dimensions.get("window").width} height={200}autoPlay={true}renderItem={(obj)=>{ return( <TouchableOpacity> <Imagesource={{uri:obj.item.imageUrl}} /> </TouchableOpacity> ) }} />  import { StatusBar } from "expo-status-bar"; import React from "react"; import { StyleSheet, Text, View, Image, ScrollView, Dimensions, TouchableOpacity } from "react-native"; import BasketballImage from "./assets/products/basketball1.jpeg"; import Avatar from "./assets/icons/avatar.png"; import {API_URL} from "./config/constants"; import axios from "axios"; import dayjs from "dayjs"; import relativeTime from "dayjs/plugin/relativeTime"; import "dayjs/locale/ko"; import Carousel from "react-native-reanimated-carousel"; dayjs.extend(relativeTime); dayjs.locale("ko"); export default function App() { const [products, setProducts] = React.useState([]); const [banners, setBanners] = React.useState([]); React.useEffect(()=>{ axios.get(`${API_URL}/products`).then((result)=>{ setProducts(result.data.products); }).catch((error)=>{ console.error(error); }) axios.get(`${API_URL}/banners`).then((result)=>{ setBanners(result.data.banners); }).catch((error)=>{ console.error(error); }) },[]) return ( <View style={styles.container}> <ScrollView> <Carousel data={banners} width={Dimensions.get("window").width} height={200} autoPlay={true} renderItem={(obj)=>{ return( <TouchableOpacity> <Image source={{uri : obj.item.imageUrl}} /> </TouchableOpacity> ) }} /> <Text style={styles.headline}>판매되는 상품들</Text> <View style={styles.productList}> { products.map((product, index)=>{ return (<View style={styles.productCard} key={product.id}> {product.soldout === 1 && <View style={styles.productBlur}/>} <View> <Image style={styles.ProductImage} source={{uri: `${API_URL}/${product.imageUrl}`,}} resizeMode={"contain"} /> </View> <View style={styles.productContents}> <Text style={styles.productName}>{product.name}</Text> <Text style={styles.productPrice}>{product.price}원</Text> <View style={styles.productFooter}> <View style={styles.productSeller}> <Image style={styles.productAvatar} source={Avatar} /> <Text style={styles.productSellerName} >{product.seller}</Text> </View> <Text style={styles.productDate}>{dayjs(product.createdAt).fromNow()}</Text> </View> </View> </View>); }) } </View> </ScrollView> </View> ); } const styles = StyleSheet.create({ container: { flex: 1, backgroundColor: '#fff', paddingTop: 32, }, productCard: { width: 320, borderColor: 'rgb(230,230,230)', borderWidth:1, borderRadius: 16, backgroundColor: "white", marginBottom: 8, }, ProductImage :{ width: '100%', height: 210 }, productContents : { padding: 8 }, productSeller : { flexDirection: 'row', alignItems: 'center' }, productAvatar: { width:24, height:24, }, productFooter: { flexDirection: 'row', justifyContent:'space-between', alignItems: 'center', marginTop: 12, }, productName : { fontSize: 16 }, productPrice: { fontSize: 18, fontWeight: '600', marginTop: 8 }, productSellerName: { fontSize: 16, }, productDate: { fontSize: 16, }, productList: { alignItems:"center", }, headline : { fontSize: 24, fontWeight: "800", marginBottom:24 }, productBlur : { position: 'absolute', top: 0, bottom: 0, right: 0, left: 0, backgroundColor: "#ffffffaa", zIndex: 999, }, }); 에러 해결 차근차근 알려주셨으면 좋겠습니다---------------------------------------------------------------------------------------------질문 5 babel.config.js 없기에 프로젝트 루트에 파일을 직접 생성하고 module.exports = {presets: ['babel-preset-expo'],plugins: ['react-native-reanimated/plugin'],};위 소스입력 후 저장 완료 후 캐시 초기화를 위해 expo start -c 까지 차례대로 수행 후 ngrok과 모바일/서버로 연동 후 결과가 위 버전 에러와 다르게 새로운 에러가 발생했습니다어떻게 해결하죠? 질문6 아래 게시글 답변대로 질문 2까지 수행 하니 아래와 같은 에러가 발생질문7 아래게시글 답변에 질문 3 및 3-1은 하라는대로 실행해보면 에러가 발생할까 실행을 안했는데 3개를 입력해 줘도 괜찮은건가요?명령어 1: npm uninstall react-native-reanimated-carousel react-native-reanimated명령어 2:npm install react-native-reanimated-carousel@3.3.0 react-native-reanimated@^2.0.0명령어 3:expo install react-native-gesture-handler질문8 잘 되던 안드로이드 스튜디오가 로딩을 왜 못할까요?  

PS D:\programming\react-Lee\projects\section12> vercel loginvercel : 'vercel' 용어가 cmdlet, 함수, 스크립트 파일 또는 실행할 수 있는 프로그램 이름으로 인식되지 않습니다. 이름이 정확한지 확인하고 경로가 포함된 경우 경로가 올바른지 검증한 다음 다시 시도하십시오.위치 줄:1 문자:1+ vercel login+ ~~~~~~ + CategoryInfo : ObjectNotFound: (vercel:String) [], CommandNotFoundException + FullyQualifiedErrorId : CommandNotFoundExceptionPS D:\programming\react-Lee\projects\section12> --- vercel login이란 명령어를 입력하니 위와 같은 에러가 뜨는데요. vscode에 아무것도 안깔고 회원가입만 했다고 vercel이란 명령어를 쓸 수 있는건가요??

windows claude 설치 강의 중..강의를 똑같이 따라갔는데 안되네요, 어떤게 문제일까요?

안녕하세요 강의 정말 잘 듣고있습니다.현재 강의를 무한 중첩 댓글 구현하기까지 수강했습니다!테스트를 위해 여러가지 사항들을 직접 체크하고있는데 Github로 로그인한 사용자의 정보들(avatar_url, name)들은 기본적으로 사용하지 않고 랜덤한 닉네임과 기본 아바타 이미지가 나오는게 정상 동작일까요?제가 이해한 흐름은 다음과 같습니다.1. Github(OAuth) 로그인2. Supabase Authentication > Users에 사용자 생성 (profile 테이블에는 아직 생성 되지 않음)3. SessionProvider에서 useProfileData 호출export default function SessionProvider({ children }: { children: ReactNode }) { const session = useSession(); const setSession = useSetSession(); const isSessionLoaded = useIsSessionLoaded(); const { data: profile, isLoading: isProfileLoading } = useProfileData( session?.user.id, ); useEffect(() => { supabase.auth.onAuthStateChange((event, session) => { setSession(session); }); }, []); if (!isSessionLoaded) return <GlobalLoader />; if (isProfileLoading) return <GlobalLoader />; return children; }4. fetchProfile(userId) 실행export async function fetchProfile(userId: string) { const { data, error } = await supabase .from("profile") .select("*") .eq("id", userId) .single(); if (error) throw error; return data; }Supabase Table Editor > profile 에는 아무런 결과가 저장되어 있지 않기 때문에 PostgrestError: PGRST116 에러 발생 useProfileData catch 블록 실행 → createProfile 호출 랜덤한 닉네임 + avatar_url이 기본으로 저장 만약 제가 이해한 흐름이 맞다면 어떤 방법을 써야할까요?제일 먼저 드는 생각은 createProfile에 session을 매개변수로 받아서 session.user.user_metadata.full_name과 avatar_url을 insert에 넣는걸 생각했습니다.createProfileexport async function createProfile(userId: string, session?: Session) { const { data, error } = await supabase .from("profile") .insert({ id: userId, // ↓ 여기 수정 했어용 nickname: session?.user.user_metadata?.full_name || getRandomNickname(), avatar_url: session?.user.user_metadata?.avatar_url || null, }) .select() .single(); if (error) throw error; return data; } use-profile-data.tsexport function useProfileData(userId?: string) { const session = useSession(); const isMine = userId === session?.user.id; return useQuery({ queryKey: QUERY_KEYS.profile.byId(userId!), queryFn: async () => { try { const profile = await fetchProfile(userId!); return profile; } catch (error) { if (isMine && (error as PostgrestError).code === "PGRST116") { return await createProfile(userId!, session!); // 여기 session 추가 했어용 } throw error; } }, enabled: !!userId, }); } 이렇게 코드를 수정하고 profile table을 삭제한 후 다시 Github로 로그인 하면 사용자의 프로필 이미지와 이름이 받아와졌습니다.더 효율적이거나 더 좋은 방법이 있을까요? 혹은 제가 잘못 알고 있는게 있을까요?

React-Router 설정 강의다름이 아니고요강의 내용을 보면생성위치가 PS: C\r2025\front\ch2 폴더 (당연히 ch2 겠지만요...^^)로 되어있는데요  ch1 프로젝트에서 계속 진행하면 안되나요?아니면 ch2 로 다시 만들어서 진행해야 할까요?그리고 ch2 만들때 특이 사항이 없는지..갑자기.. frontend/ch2 폴더에서 진행을 하셔서요... (ch2 프로젝트 하나 생성해서 따라하면 땡이지만...ㅋㅋㅋ) 살짝 궁금해서 질문 드립니다.  

안녕하세요!제가 vercel에 배포를하려고 시도하고 있습니다.현재까지 진행 상황과 문제를 정리하면 아래와 같습니다. 프로젝트 배포는 정상적으로 완료됨그러나 브라우저에 접속 시 파비콘이 표시되지 않음 <link rel="icon" type="image/svg+xml" href="/favicon.ico" /> public 폴더 내 favicon.ico 파일 존재로컬 개발 서버(npm run dev)에서는 정상적으로 표시됨배포 후 URL 접속 시 브라우저 캐시를 지워도 여전히 표시되지 않음 혹시 Vercel 환경에서 파비콘이 정상적으로 나오도록 하기 위해 추가로 확인해야 할 부분이나, 권장 설정이 있을지 조언 부탁드립니다. 

안녕하세요 짐코딩님강의 잘보고 있습니다.할루시네이션을 방지하려면 항상 use context7을 붙여야하나요? 아니면plan mode에서 해당 부분을 claude가 인지하고 있다면 이후엔 명시하지 않아도 괜찮을까요?next.js 같은 경우 향후에 계속 업데이트 할텐데, 저의 프로젝트도 그에 맞게 코드를 업데이트 해야하나요? 아니면 중요한 버그 문제가 아니면 이전 버전 그대로 두나요?현업에 종사하지 않아서 궁금한점이 이렇습니다. 감사합니다

안녕하세요, 강의 잘 듣고 있습니다!6.2강 회원가입 구현 강의 18:06경에 설명해주시는 AuthResponse 타입의 정의?가 변경된 것인지, 제 코드 에디터에는 아래와 같이 표시됩니다.  첫 번째 객체 부분 {data: T; error: null}은 이해가 가는데요, 두 번째 객체 부분은 강의상 화면과 차이가 좀 있어서, 추가로 설명해주실 수 있으면 감사하겠습니다. 

claude.md 파일의 내용은 프로젝트 내에서 늘 참조가 되나요?개발 시 분명 claude.md 파일에 작성해 놓은 사항 인데도 규칙을 따르지 않는 경우가 많던데요.이럴꺼면 claude.md 파일이 왜 필요한지를 모르겠던데요.. 제가 사용을 잘못하고 있는 건지..이런 경우가 많은 건지..어떤 방법이 있는건지..모르겠네요..  

안녕하세요!타입 스크립트부터 현재 강의까지 너무 유용하게 잘 듣고 있는 수강생입니다! 9-1 강의를 수강하다가 문득 궁금함이 생겨서 질문 남겨 봅니다. A 유저와 B 유저가 있다고 가정했을 때A 유저가 프로필 상세 화면을 보고 있는 상태에서 B 유저가 새로운 포스트를 올렸는데,이후에 A 유저가 메인 리스트 화면으로 이동하면 B 유저가 올린 새로운 포스트가 로드되지 않는 것으로 보입니다! (새로 고침하면 당연히 정상적으로 보이고요) 제가 코드 작성을 하면서 놓친 부분이 있어 이러한 현상이 발생하는 것인지,아니면 이후 강의에서 해당 부분이 수정되는 것인지 여쭤보고 싶습니다. 늘 좋은 강의 감사합니다! 🙂 좋은 하루 보내세요~!

안녕하십니까 이번에 책을 샀으나 잘 이해가 안되 강의와 함께 보기로 결정해서 공부하고잇는 초보자입니다 선생님 제가 공부를 하고있는데 자꾸 다 메모 할려고 하는데 프로그래밍은 메모하면서 공부하지말라고 암기하는것이 아닌 그때마다 찾아보라는 말이 많습니다 그래서 그냥 메모 같은거 필요없이 그때 이해만하고 넘어가도 진짜 괜찮을가요 뭔가 아직 초보자입장에서는 잊어먹을가 두렵습니다 예를 들면 바이트 와 웹팩의 차이 이런것도 암기를해둬야하는가 아닌 불안감 나중에 나혼자 만들수있을가? 같은불안이 좀 큽니다. 긴글 죄송합니다

강의 수강하면서 궁금한 점이 생겨서 질문 드립니다. const TodoItem = ({ id, isDone, content, date }) => { return ( <div className="TodoItem"> <input readOnly checked={isDone} type="checkbox" /> <div className="content">{content}</div> <div className="date">{new Date(date).toLocaleDateString()}</div> <button>delete</button> </div> ); };  TodoItem.jsx에서 구조분해 할당으로 todo를 받아idisDonecontentdate를 가져와서 렌더링 하고 있는데 실제로 id값은 코드에서 사용되지 않고 있습니다. 저희는 eslint.config.js에서 'no-unused-vars' : off로 설정해 두었기 때문에 에러는 나지 않지만 만약 현업에서 이런 상황이라면 사용하지 않는 id 변수는 어떻게 처리하는지 궁금합니다.찾아본 결과언더스코어 사용const TodoItem = ({ _id, isDone, content, date }) => {rest 사용 const TodoItem = ({ isDone, content, date, ...rest }) => {이런 방식들이 있는데 강사님은 어떤 방식을 사용하시는지 어떤식으로 처리하시는지 궁금합니다.감사합니다. 

 뭔가 되는가 싶어도 적용 안되어 있고. Error Reading File 계속 뜨네요.

안녕하세요이미지 가져올때 주소창에 http://localhost:8080/29c13610-d02f-41b2-b12d-b1a65ebbec7a_img3.webp이렇게 하면 잘뜨는데 images폴더안에도 파일명 webp로 잘들어와있고요 근데 db에서 받아오면fileName에 test1.webp로 29c13610-d02f-41b2-b12d-b1a65ebbec7a_img3.webp 이렇게 변환이 안됐는데 뭐가 문제인가요?

html 여러개를 만들었는데예를 들어 login.html을 누르면지금 url도 바뀌고, 개발자도구에 source도 바뀌는데 body에 바뀐 h1이 안바뀝니다.login.html에 여러개 다른 것도 추가해봤는데 아예 로딩이 안되는 것 같습니다. 왜그럴까요

Q&A를 찾다가 '쏘뇽'님께서 수정해주신 코드로 해봤는데, 그 사이에 API사이트에서 뭔가 바뀌었는지 안되더라고요(2025년 기준). 제 생각에는 키값의 변수명이 _id에서 id로 바뀐 듯 합니다. 아래 코드 사용하시면 잘 돌아가네요. const fetchCat = async (text) => { const OPEN_API_DOMAIN = "https://cataas.com"; const response = await fetch( `${OPEN_API_DOMAIN}/cat/says/${text}?json=true` ); const responseJson = await response.json(); return `${OPEN_API_DOMAIN}/cat/${responseJson.id}/says/${text}`; };

(10.3) 댓글 조회 기능 구현하기 8:50  CommentItem에서 props를 작성하기전 <CommentItem key={comment.id} {...comment} />에 {...commnet}를 넣어도 TypeScript에서 에러가 나지 않던데 이유가 궁금합니다.  // comment-list.tsx {comments.map((comment) => ( <CommentItem key={comment.id} {...comment} /> ))} // comment-item.tsx export default function CommentItem() { // props를 안 받음 return <div>하드코딩된 내용</div> }