next/navigation의 useRouter는 앱라우팅 때 사용한다고 하셨는데 앱라우팅이 뭔가요??  무슨차이가 있는지 궁금합니다.

이런 에러가 계속 뜨고 있습니다. MONGODB_URI=mongodb+srv://admin:qwe123!!@cluster0.eazdtgs.mongodb.net/react_blog?appName=Cluster0 .env 파일의 mongodb 넣는 곳입니다. 첫 clustor0 을 만들고 다른 에러가 나서 terminate 하고 새로 만들어서 한것입니다. 무엇이 문제일까요?

그랩님, 강의 잘 듣고 있습니다.102강 강의를 듣고 있는데요,react-native-reanimated-carousel 설치를 위해 노션에 링크대로 npm install react-native-reanimated-carousel@3.3.0 명령어로 vs code 터미널에서 설치하고그 이후 한번 더 expo install --npm react-native-reanimated react-native-gesture-handler 를 입력하여 vs code 터미널에서 성공적으로 설치를 완료하였습니다.질문 1.그 이후babel.config.js 파일에 가서 plugins: ["react-native-reanimated/plugin"], 추가 해주려고하는데요, 문제는 babel.config.js 파일이 어디에도 존재하지 않아서 어디에서 플러그인 문구를 입력해 주어야 하는지 모르겠습니다. 아래는 첨부 사진입니다. 어떻게 해야 위 플러그인 문구를 입력 가능할까요?참고로 grab-market-mobile의 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에 플러그인 문구부터 저장한 뒤 바벨 설정 캐시초기화 하는 것이 옳은 건가요? 즉 순서대로 해야 하는지도 궁금합니다.질문 3. 102강 시작부터 ~ 18분 56초 까지 타이핑한 grab-market-mobile의 App.jsreact-native-reanimated-carousel 소스 내용이 아래와 같은데요, 이것을 실행하면 첨부한 사진과 같이 안드로이드 스튜디오(runtime not ready)에서 에러가 납니다. 참고로 아래 App.js 소스는 강의 전체 완성본 소스가 아니라 에러가 난 시점까지의 소스 입니다.질문3-1. -->그리고 여기에서 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, }, });  그랩님께서 진행하시는 강의처럼 에러가 뜨지 않고 제대로 결과값이 나와야 하는데, 아무리 해도 어떻게 에러를 해결해야 하는지 차근차근 알려주셨으면 좋겠습니다. 아직 그랩님의 강의 102강 처음부터 ~ 19분 안되는 정도까지 진행하다 위 에러를 만나게 되어 해결이 안되고 있어서 더 진행을 하지 못하고 있어서 질문을 남깁니다.질문 4.아래 AI 인턴 답변을 보고 vs code의 grab-market-mobile에서 babel.config.js을 프로젝트 루트에 파일을 직접 생성하고 module.exports = {presets: ['babel-preset-expo'],plugins: ['react-native-reanimated/plugin'],};위 소스입력 후 저장을 완료 한 뒤 캐시 초기화를 위해 vs code grab-market-mobile의 터미널에서 expo start -c 까지 차례대로 수행한 후 ngrok과 grab-market-server와 안드로이드 스튜디오 에뮬레이터 실행 후 마지막으로 grab-market-mobile로 연동 실행 후 결과가 위 버전 에러와 다르게 또 새로운 에러가 발생하게 되었습니다. 아래 사진 첨부합니다. 이 점은 어떻게 해결해야 하는지요? 질문 5.그리고 Vs code에서 아래 인턴님이 답변 준대로 질문 2까지 수행 하니 아래와 같은 에러가 발생하여 사진을 첨부합니다.이 에러는 어떤 것을 의미하며 해결하는 방법은 무엇인가요?질문 6. AI 인턴님이 남겨주신 <질문 3 및 질문 3-1>에서는 "package.json에서 관련 패키지를 제거하세요"라고 써있는데요, 이것은 구체적으로 무엇을 어떻게 수행하는 건가요? 예를들면 어떤 명령어를 입력해야 합니다와 같이 알려주시면 좋겠습니다. 질문 7. (확인 차원에서 재 질문 합니다.)Carousel 소스가 궁금한데요, 그랩님께서 강의에서 찍었을 당시 오픈소스인데 오래된 것이라 다른 것으로 변경하여 재 촬영 해주셨다고해서 조금 햇갈린데요,Carousel 부분 살펴보면요, 아래 App.js 소스에서 아래와 같이 작성하는 것 맞나요?만약 아래 작성 소스가 다르다면, 어떻게 작성 해야하는지 답변 댓글에 소스를 적어주시면 감사하겠습니다.<Carouseldata={banners}width={Dimensions.get("window").width} height={200}autoPlay={true}renderItem={(obj)=>{ return( <TouchableOpacity> <Imagesource={{uri:obj.item.imageUrl}} /> </TouchableOpacity> ) }} /> 질문 8. AI 인턴님이 남겨주신 답변에 관한 질문 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  확인하시면, 그랩님께서 꼭 답변 부탁 드립니다. 

mcp.json에 피그마사이트의 json을 그대로 복사해서 붙여넣었는데 오류가 납니다

.

안녕하세요!useProfileData 훅에서 프로필 데이터를 조회하는 로직이 궁금해서 질문드립니다. useProfileData에서 PGRST116 에러 코드를 확인해서 프로필을 생성하는 로직이 있는데요,fetchProfile에서 .single() 대신 .maybeSingle()을 사용하고,null이면 createProfile을 호출하는 방식이 더 직관적인 것 같은데에러 코드를 확인하는 방식으로 구현하신 특별한 이유가 있을까요?실무에서는 어떤 방식을 선호하시는지도 궁금합니다!

따로 몽고 DB URL로 하는 connect는 잘됬습니다만, 백엔드 소스를 동작 시켯을때에는 그 URL 로 연결시에 저렇게 failed가 뜨는데...이미 몽고DB에 아이피도 0.0.0.0/0해준상태입니다. 혹시 뭐가 문제일가요?...

React Router에는 대표적으로 선언적 모드와 데이터 모드 두 가지 방식이 있는 것으로 알고 있습니다. 강의에서는 선언적 모드(Declarative)로 라우팅을 구현하셨는데, 실제 실무에서는 선언적 모드와 데이터 모드 중 어떤 방식을 더 많이 사용하는지 궁금합니다. ps. 강의 너무 잘 듣고 있습니다! 강사님 최고!

예제 코드는 한 강좌 후 최종 소스가 아니라 강좌시작 하기전 기초 소스 일까요? 예를 들어 134강의 경우 10-10 소스인데 예제코드 소스를 보면 jsx 정보 정도만 들어 있습니다.다른 강좌도 마찬가지로 기본 틀만 있고 강좌에 나온 파일 조차 만들어 지지 않은 경우가 많습니다.수업후 최종 소스도 받을수 있을까요?  

최신버전으로 강의 업그레이드 하셔야 할거같아요..도저히 진행이 안되네요. 버전 차이가 너무 커서 환경 맞추는 거 자체가 고통스러워요.강의 게시일: 2020. 04. 22.마지막 업데이트일: 2025. 05. 13.난 마지막 업데이트일 보고 최신꺼인줄 ㅋㅋ 1.강의 내용은 훌륭하지만, 환경 설정 오류로 진도를 나갈 수 없음.2."ESLint 9.x / Vite 5.x 버전 충돌 문제 해결에만 수십 시간 소요"의존성 문제"현재 강의에서 사용하는 **eslint-config-react-app@7.0.1**이 최신 Node.js 환경에서 **eslint@9.x.x**와 충돌하여 ERESOLVE 오류가 발생합니다.""수강생들은 Hooks 규칙을 활성화하기 위해 강제로 ESLint를 8.x.x 버전으로 다운그레이드해야 하는 번거로움을 겪고 있습니다.""Tailwind CSS 설치 시 npx tailwindcss init -p 명령어가 환경 문제로 작동하지 않고, could not determine executable 오류가 반복됩니다.""CSS 전처리 설정, 특히 PostCSS 설정 방법이 현재 Vite 환경에 맞지 않아 추가적인 검색과 수정이 필요합니다."*tailwind**라는 잘못된 이름의 패키지를 설치하도록 안내된 부분을 지적하여 강사가 코드를 확인하도록 유도합니다.포함할 내용:"강의에서 안내하는 tailwind 패키지(비공식/폐기됨)가 아니라 tailwindcss (공식 패키지)를 사용해야 설치가 진행됩니다. 강의 코드와 명칭 수정이 필요합니다.""Node.js 20.x, React 18+, ESLint 8.x 또는 9.x를 기준으로 환경 설정 부분을 재녹화하여 제공해 주시길 간곡히 요청드립니다.""기존 수강생을 위해 최신 버전 환경 설정에 대한 가이드 문서(ReadMe)라도 제공되면 큰 도움이 될 것입니다."

강의 소스 코드를 다운로드 받아 압축 풀기를 하는데 99% 끝부분에서 특정 파일이 에러가 발생해 넘어가지지를 않습니다.건너띄기로 100% 완료하기는 했지만 찜찜해서 문의 드립니다. 

안녕하세요. 강의 나름 열심히 듣고있는 수강생입니다..! 정환님 강의 React.js, typescript,다 수강하고 이어서 next.js 수강중입니다.지금은 2.10) 사전 렌더링와 데이터페칭 보고있는데요.리액트에서의 데이터 페칭 설명해주시면서 기억나시나요?? 물어보셨는데 혹시 정환님 React.js 강의에서 데이터페칭 설명해주신 부분이 있었나요?? ㅠㅠㅠ 제가 놓친건지.. 다시 찾아봐도 찾기가 힘들어서요.. 답변 부탁 드립니다.

todo리스트 구현중 TodoItem.jsx에서 memo에 대해 강의를 보며 공부중입니다.이렇게 console.log로 찍었는데 체크박스를 한 개만 찍어도 3가지 모두 다 console로 찍히는데 제대로 적용된 것 맞나요? 하이라이트를 켜도 색상이 비슷해서 구분이 잘 가지않습니다. 로그는 이렇게 찍힙니다. prev next = {"id":0,"isDone":false,"content":"React 공부하기","date":1764731042079}{"id":0,"isDone":true,"content":"React 공부하기","date":1764731042079}TodoItem.jsx?t=1764729548020:40 prev next = {"id":1,"isDone":false,"content":"빨래하기","date":1764731042079}{"id":1,"isDone":false,"content":"빨래하기","date":1764731042079}TodoItem.jsx?t=1764729548020:40 prev next = {"id":2,"isDone":false,"content":"노래 연습하기","date":1764731042079}{"id":2,"isDone":false,"content":"노래 연습하기","date":1764731042079}  import { memo } from 'react'; import './TodoItem.css' function TodoItem({id, isDone, content, date, onUpdate, onDelete}) { const onChangeCheckbox = () => { onUpdate(id); } const onClickDeleteButton = () => { onDelete(id) } return ( <div className="TodoItem"> <input onChange={onChangeCheckbox} readOnly checked={isDone} type="checkbox"/> <div className="content">{content}</div> <div className="date">{new Date(date).toLocaleDateString()}</div> <button onClick={onClickDeleteButton}> 삭제 </button> </div> ); } export default memo(TodoItem, (prevProps, nextProps) => { console.log("prev next = " + JSON.stringify(prevProps) + JSON.stringify(nextProps)) if(prevProps.id !== nextProps.id) return false if(prevProps.isDone !== nextProps.isDone) return false if(prevProps.content !== nextProps.content) return false if(prevProps.date !== nextProps.date) return false return true });

안녕하세요 Tailwind CSS IntelliSense 작동이 안되서 그러는데 확인해 본 결과로 index.css에서@import "tw-animate-css"; 이거와@layer base { * { @apply border-border outline-ring/50; } body { @apply bg-background text-foreground; }}이 코드가 들어가면 작동을 하지 않습니다 혹시 이게 왜 그럴까요...?

강사님이 사용하시는 코드에서 오류가 났을때 빨간문자로 보이는 도움말? 은 무슨 플러그인을 사용하시는건가요?

next.js 는 핸드북 없나요?

API 스펙이 변경되었네요! 제보 감사합니다.https://github.com/milooy/cat-jjal-maker/blob/main/answers/29-useEffect.html#L48위 코드를 참고해서 fetchCat 함수를 변경해주세요.   위 답변해주신대로 소스를 변경해도 고양이 이미지가 엑박으로 뜨질 않습니다.

강의중에는 private long tno; private String title; private String content; private boolean complete; private LocalDate dueDate;위와같은 설정인데, 왜 갑자기 private long tno; private String title; private String writer; private boolean complete; private LocalDate dueDate;로 바뀌는 건가요?이것에 대한 설명은 어디에 있는거죠?몇강 몇분대에 있는지에 대해서 알려주시면 감사하겠습니다.  

const [count,setCount] = useState(0);선언되어 있을때()=>setCount(count+1);(count)=>setCount(count +1); 강의에서는 2번 처럼 사용 하던데 1번 처럼 사용해도 상관없나요? 차이가 있나요?

안녕하세요, 소개 영상에서는 디스코드 채널이 있는거 같은데요. 관련 링크가 없네요. 어디서 확인가능할까요?