클로드 pro price 사용중입니다. 이번 과제를 진행하면서 초기화없이 한 섹션?(이 단위를 부르는 명칭을 잘 모르겠네요)에서 진행을 했는데, 약 5~6번의 수정을 거치니 토큰 사용량(current session)이 한도에 도달해버리네요. 미션 템플릿에 따라 처음 plan 요청 후에는, accept edit 모드로 간단하다고 생각되는 수정 사항을 요청했습니다. 수정 내용으로는 1. 블랙+옐로우의 어두운 컬러감 말고 main, secondary 컬러 다시 정해서 밝은 테마, 다채로운 컬러 사용해서 수정해줘 2. 경력 섹션에 카드 형식말고 아코디언 형식의 타임라인 형태로 수정해줘 이런 식으로 두가지 정도씩해서 4~5번 수정사항을 요청했습니다. 매 수정 때마다 거의 10분을 잡아먹드라구요 중간에 clear가 없었던 탓일까요? 토큰 사용 속도가 너무 빠른데. 만약 그렇다면 clear를 중간 중간에 해주면 사용량이 줄어들까요?
이정환 쌤 강의는 무조건 다 듣는 프론트 개발자 학생입니다. 근데, 궁금한점이 있어 질문드려요. 리액트 강의부터 하시고, 그다음 Next.js 강의 하시고, 다시 리액트로 이번에 강의를 하시는데, 저는 이정환 쌤 Next.js 강의를 듣고 난 후에는 리액트로는 개발을 안하고 Next.js로만 개발했거든요. 다시 리액트로 돌아간 이유에 대해 궁금해서 질문드립니다. Next.js 말고 리액트를 선택한 이유가 있을까요? Next.js에 어떤 이슈가 있는걸까요?
react-router-dom 을 사용한 후부터 랜더링되는 하단의 모든 컴포넌트에 react를 import하지 않으면 오류가 발생하거든요 그런데 이전에는 분명 안 이랬어서.... import를 하면 되니까 개발이 안 되는 건 아닌데 강의를 계속 듣다 보니 강사님은 import하지 않으셔도 되는 거 같아서 궁금해서 물어봅니다. 버전 차이 때문일까요? 제가 무슨 설정을 잘못한 걸까요? 버전은 아래와 같습니다.. "dependencies": { "react": "^19.2.0", "react-dom": "^19.2.0", "react-router-dom": "^7.10.1" },
AxiosError: Request failed with status code 401 at settle (/Users/sujin/Development/_00_inflearn/code/SECTION19(finalProject)/backend/node_modules/axios/dist/node/axios.cjs:2106:12) at IncomingMessage.handleStreamEnd (/Users/sujin/Development/_00_inflearn/code/SECTION19(finalProject)/backend/node_modules/axios/dist/node/axios.cjs:3491:11) at IncomingMessage.emit (node:events:531:35) at endReadableNT (node:internal/streams/readable:1698:12) at process.processTicksAndRejections (node:internal/process/task_queues:90:21) at Axios.request (/Users/sujin/Development/_00_inflearn/code/SECTION19(finalProject)/backend/node_modules/axios/dist/node/axios.cjs:4731:41) at process.processTicksAndRejections (node:internal/process/task_queues:105:5) at async /Users/sujin/Development/_00_inflearn/code/SECTION19(finalProject)/backend/routes/auth.js:77:20 카카오 로그인 버튼 클릭후 동의하기 누른 다음 이런 에러가 뜹니다. .env 파일은 이렇게 입력되어있고요. JWT_SECRET=sucoding!@34 KAKAO_REDIRECT_URI=http://localhost:4000/auth/kakao/callback FRONTEND_URL=http://localhost:5173 JWT_ACCESS_EXPIRES_IN=1h JWT_REFRESH_EXPIRES_IN=7d 무엇이 문제일까요?
이런 에러가 계속 뜨고 있습니다. 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.js react-native-reanimated-carousel 소스 내용 이 아래와 같은데요, 이것을 실행 하면 첨부한 사진과 같이 안드로이드 스튜디오(runtime not ready) 에서 에러 가 납니다. 참고 로 아래 App.js 소스는 강의 전체 완성본 소스 가 아니라 에러가 난 시점까지의 소스 입니다. 질문3-1. -->그리고 여기에서 Carousel 부분 살펴보면요, 아래 App.js 소스 에서 아래와 같이 작성하는 것 맞나요 ? 만약 아래 작성 소스 가 다르다면 , 어떻게 작성 해야하는지 답변 댓글에 소스를 적어주시면 감사하겠습니다 . < Carousel data = {banners} width = {Dimensions.get( " window ") .width } height = {200} autoPlay = {true} renderItem = {(obj) =>{ return( < TouchableOpacity > < Image source = {{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 소스 에서 아래와 같이 작성하는 것 맞나요 ? 만약 아래 작성 소스 가 다르다면 , 어떻게 작성 해야하는지 답변 댓글에 소스를 적어주시면 감사하겠습니다 . < Carousel data = {banners} width = {Dimensions.get( " window ") .width } height = {200} autoPlay = {true} renderItem = {(obj) =>{ return( < TouchableOpacity > < Image source = {{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 확인하시면, 그랩님께서 꼭 답변 부탁 드립니다.
안녕하세요! useProfileData 훅에서 프로필 데이터를 조회하는 로직이 궁금해서 질문드립니다. useProfileData에서 PGRST116 에러 코드를 확인해서 프로필을 생성하는 로직이 있는데요, fetchProfile에서 .single() 대신 .maybeSingle()을 사용하고, null이면 createProfile을 호출하는 방식이 더 직관적인 것 같은데 에러 코드를 확인하는 방식으로 구현하신 특별한 이유가 있을까요? 실무에서는 어떤 방식을 선호하시는지도 궁금합니다!
