npm : 이 시스템에서 스크립트를 실행할 수 없으므로 C:\Program Files\nodejs\npm.ps1 파일을 로드할 수 없습니다. 자세한 내용은 about_Execution_Policies( https://go.microsoft.com/fwlink/?L inkID=135170)를 참조하십시오. 위치 줄:1 문자:1 + npm i randomcolor + ~~~ + CategoryInfo : 보안 오류: (:) [], PSSecurityException + FullyQualifiedErrorId : UnauthorizedAccess 왜 이러죠... npm.ps1 파일을 찾아봣는데 없어요....
PS D:\programming\react-Lee\projects\section12> vercel login vercel : 'vercel' 용어가 cmdlet, 함수, 스크립트 파일 또는 실행할 수 있는 프로그램 이름으로 인식되지 않습니다. 이름 이 정확한지 확인하고 경로가 포함된 경우 경로가 올바른지 검증한 다음 다시 시도하십시오. 위치 줄:1 문자:1 + vercel login + ~~~~~~ + CategoryInfo : ObjectNotFound: (vercel:String) [], CommandNotFoundException + FullyQualifiedErrorId : CommandNotFoundException PS D:\programming\react-Lee\projects\section12> --- vercel login이란 명령어를 입력하니 위와 같은 에러가 뜨는데요. vscode에 아무것도 안깔고 회원가입만 했다고 vercel이란 명령어를 쓸 수 있는건가요??
안녕하세요! 제가 vercel에 배포를하려고 시도하고 있습니다. 현재까지 진행 상황과 문제를 정리하면 아래와 같습니다. 프로젝트 배포는 정상적으로 완료됨 그러나 브라우저에 접속 시 파비콘이 표시되지 않음 <link rel="icon" type="image/svg+xml" href="/favicon.ico" /> public 폴더 내 favicon.ico 파일 존재 로컬 개발 서버(npm run dev)에서는 정상적으로 표시됨 배포 후 URL 접속 시 브라우저 캐시를 지워도 여전히 표시되지 않음 혹시 Vercel 환경에서 파비콘이 정상적으로 나오도록 하기 위해 추가로 확인해야 할 부분이나, 권장 설정이 있을지 조언 부탁드립니다.
useEffect 함수 안에서 setCurDiaryItem을 호출했는데, “setState를 동기적으로 호출하면 안 된다” 는 경고가 발생합니다. 기능적으로는 정상 동작하는 것처럼 보이는데, 이런 방식이 올바른 사용인지, 아니면 구조를 수정하는 게 맞는지 궁금해서 질문드립니다.
강의 10.3에서 TodoItem.jsx의 onchange 이벤트가 발생할때마다 부모도 같이 재랜더링 되는것 같아서요. 제가 짠 소스도 참고해보시면 부모 태그들에 각각 재랜더링이 될때마다 로그를 찍어봤는데 다 찍혀서 로그 찍는 시점이 잘못된건지 React dev tool이 이상한건지 제가 코드를 잘못 친건지 모르겠어서 질문 드립니다. https://github.com/Joonsby/one-bite-react/tree/master/section10 코드는 위에 링크에 올려놨으니 참고해주시면 될것 같습니다.
react-router-dom 을 사용한 후부터 랜더링되는 하단의 모든 컴포넌트에 react를 import하지 않으면 오류가 발생하거든요 그런데 이전에는 분명 안 이랬어서.... import를 하면 되니까 개발이 안 되는 건 아닌데 강의를 계속 듣다 보니 강사님은 import하지 않으셔도 되는 거 같아서 궁금해서 물어봅니다. 버전 차이 때문일까요? 제가 무슨 설정을 잘못한 걸까요? 버전은 아래와 같습니다.. "dependencies": { "react": "^19.2.0", "react-dom": "^19.2.0", "react-router-dom": "^7.10.1" },
그랩님, 강의 잘 듣고 있습니다. 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 확인하시면, 그랩님께서 꼭 답변 부탁 드립니다.
최신버전으로 강의 업그레이드 하셔야 할거같아요.. 도저히 진행이 안되네요. 버전 차이가 너무 커서 환경 맞추는 거 자체가 고통스러워요. 강의 게시일: 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) 라도 제공되면 큰 도움이 될 것입니다."
안녕하세요. 다름이 아닌 원래 잘 작동하던 크롬 콘솔창에 react-dev 툴을 설치 하라는 문구만 나오고 작동을 하지 않습니다. 툴 설치도 해봤는데 버튼을 클릭해도 아무 문구도 뜨지 않고 , 필터창에 문구가 써있나 싶어 확인도 해봤습니다. 혹시 다른 해결법이 있을까요??
그랩님, 강의 잘 듣고 있습니다. 다름이 아니라 궁금한 사항( =에러 해결방법 ) 이 필요해서 글을 남기게 되었습니다. 101강 을 듣고 있는데요 Axios 에러(400) 가 안드로이드 스튜디오 에뮬레이터에서 발생 하고 있습니다. 일단 101강 처음부터 ~ 4분 52초까지 그랩님께서 작성하신 소스코드를 똑같이 작성 후 결과 를 보려하는데, 농구공 그림 (세부사항:판매자:그랩,가격,상품명등등) 이 나오지 않아 서 이것을 어떻게 하면 그랩님과 같은 결과를 볼 수 있을지에 대해 여쭈어봅니다. 사진 1 첨부 : 판매되는 상품들 밑에 100강만 들었을 시에 농구공 화면이 잘 나왔으나 101강 4분 52초까지 의 내용의 소스코드를 입력 후 결과값 보면 400 에러도 발생하고 농구공도 안나오게 됩니다. 어떻게 해야 하나요? 사진 2 첨부 : 구체적인 에러 내용 [사진3] 스크롤은 적용이 안 된 것 같은데요, 상품이 2개 뿐이라 스크롤이 없는 건가요? [사진4] 사진 3 에 대한 구체적인 에러 ----> 어떻게 에러를 해결 할 수 있을까요 ? 안드로이드 스튜디오에서 상품 정보를 불러오지 못하는 것에 대해 서 어떻게 해결해야 할 지 차근 차근 잘 알려주셨으면 좋겠습니다 . 그리고 마지막 질문은 안드로이드 애물레이터가 잘 되는지 확인 하려면 grab-market-server에서 npm start를 해준 뒤 확인하면 되는건가요? 아니면 grab-market-mobile에서 npm start를 해준 뒤 a(=Open Android)를 누르면 되는 건가요? 아니면 둘다 동시에 npm start를 해주는 건가요? 그리고 아래에는 grab-market-mobile 폴더의 App.js 제 소스 코드를 아래에 첨부하겠습니다. import { StatusBar } from "expo-status-bar"; import React from "react"; import { StyleSheet, Text, View, Image, ScrollView } 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"; dayjs.extend(relativeTime); dayjs.locale("ko"); export default function App() { const [products, setProducts] = React.useState([]) React.useEffect(()=>{ axios.get(`${API_URL}/products`).then((result)=>{ setProducts(result.data.products); }).catch((error)=>{ console.error(error); }) },[]) return ( <View style={styles.container}> <ScrollView> <Text style={styles.headline}>판매되는 상품들</Text> <View style={styles.productList}> { products.map((product, index)=>{ return (<View style={styles.productCard}> <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 } }); 그랩님의 답변을 기다립니다.
