vue3 하기전 타입스크립트 먼저 공부하는걸로 알고있는데 로드맵 순서보니까 vue먼저하고 그다음에 타입스크립트 순서더라고요. 로드맵 순으로하면 이해하는데 지장이없는지궁금합니다

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이란 명령어를 쓸 수 있는건가요??

큰돌님 안녕하세요. 알고리즘강의부터 유튜브까지 잘 시청하고있습니다.프론트엔드를 목표로 준비를 하고있는데 대부분 포트폴리오 페이지를 하나씩 구축을 하고 이력서와 같이 첨부하더라구요..과거에 리액트 + GSAP로 인터렉션 위주로 만들어놓은게 있지만 손볼것도 많고 요즘은 NextJS가 추세라하여 새로 만들어야할것같은데 이부분이 프론트 지원시 거이 필수적인지 궁금합니다.

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

강의 수강하면서 궁금한 점이 생겨서 질문 드립니다. 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 }) => {이런 방식들이 있는데 강사님은 어떤 방식을 사용하시는지 어떤식으로 처리하시는지 궁금합니다.감사합니다. 

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

안녕하세요 큰돌님! 항상 유튜브 잘 보고 있습니다.저는 백엔드 개발자로 취업을 준비하고 있고, 현재 이력서와 포트폴리오를 만들기 위해 강의도 듣고 제 경험을 정리하고 있습니다.본 강의와 큰돌님의 유튜브에서 항상 성능 개선을 수치적으로 표현하라고 말씀하시는 것을 많이 들었습니다. 여기서 성능 개선에 있어서 제가 프로젝트를 할 때, 제 지식의 부족함으로 인해 성능이 안좋았던걸 개선한거에 대해서는 어떻게 적으면 좋을지 궁금합니다. 실제로, 웹에서 SSH 접속을 위한 프로젝트를 하면서 초기 SSH 접속을 할 때, sleep(500), 쉘에서 실행할 명령어를 송수신 하는 while문에서 sleep(10)을 설정 했었습니다. Java의 InputStream으로 입력값을 받도록 하였는데 개발 당시에는 안정적인 송수신을 위해서 sleep을 추가했는데, 리팩토링을 하는 과정에서 InputStream이 Blocking I/O의 특성으로 인해 불필요하다는 것을 알게 되었습니다. 이런 부분도 성능 개선 작업으로 적어도 되는지 궁금하고, 특히 면접에서 제 부족함?을 직접적으로 표현하지 않고 어떻게 말해야할지도 궁금합니다. 질문이 최대한 간략하게 적으려고 하다보니 두서없네요 ㅠㅠ. 감사합니다!

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}`; };

Day10 미션 안내에서 예시 이미지가 보이지 않는 거 같습니다. 

useEffect 함수 안에서 setCurDiaryItem을 호출했는데,“setState를 동기적으로 호출하면 안 된다” 는 경고가 발생합니다.기능적으로는 정상 동작하는 것처럼 보이는데,이런 방식이 올바른 사용인지, 아니면 구조를 수정하는 게 맞는지 궁금해서 질문드립니다.

크롬 개발자 도구에 있는 Elements 탭이 DOM 트리라고 봐도 되나요?

안녕하세요 Header.jsx 수정중 궁금한점이 있어서 질문드립니다!new Date() 함수는 날짜를 가져오는 함수라 리렌더링이 계속 될것같은데 memo 를 사용하면 리렌더링이 안되는건가요 ??  

강의 감사합니다. 강의자님의 포트폴리오를 보면서 얼마나 많이 노력하셨는지가 보입니다--공유해주신 포트폴리오를 제 상황에 맞게 하려고 하는데요 ! 질문이 있습니다. 저는 대회를 나간 경력이없고 신입이라 그런지 공유해주신 포폴에 무엇을 쓰면 좋을지 조언듣고 싶습니다. 음 제 지금 상황은 비전공자이고,, react.js 블로그 포폴 하나 혼자 강의 보면서 만들었는데 어떻게 어필하면 좋을까요 .. 자기소개서는 포트폴리오에 올리지 않는게 좋을까요 ? 방향잡기가 쉽지가 않네요

FE에서 모킹을 포함한 통합 테스트를 진행할 때, API 요청 전까지의 동작API 요청API 응답API 응답에 따른 화면 변환 1, 4는 테스트에서 주로 다루고 있고,3은 모킹으로 처리하고 있는데, 2번의 경우, 예를 들어 화면에서 필터로 { name: "apple", limit: 10 } 를 설정하고 요청이 발생했으면, request의 parameter에 이런 요청이 도달했다는 것 까지 검증하면 좋을지가 궁금합니다. 생성/삭제/수정과 같은 API가 포함된 경우 동일 GET API라도 다른 응답이 반환되어야 되는 경우가 있어, 해당 테스트 시 응답 자체를 override해서 모킹하여서 작성하였는데, 이 경우 사실상 API 응답과 API 응답에 따른 화면 변환은 테스트가 성공하는 채로 고정하는데, 실제 요청이 올바르게 이루어졌는지는 검증하지 못하는 것 같아서요.

강의 10.3에서 TodoItem.jsx의 onchange 이벤트가 발생할때마다 부모도 같이 재랜더링 되는것 같아서요. 제가 짠 소스도 참고해보시면 부모 태그들에 각각 재랜더링이 될때마다 로그를 찍어봤는데 다 찍혀서로그 찍는 시점이 잘못된건지React dev tool이 이상한건지제가 코드를 잘못 친건지모르겠어서 질문 드립니다.   https://github.com/Joonsby/one-bite-react/tree/master/section10코드는 위에 링크에 올려놨으니 참고해주시면 될것 같습니다.

todoPagingCP.tsx에서 Link로 페이지 동적으로 만들었는데 페이지 클릭때마다   const res = await fetch( `http://localhost:8080/api/todos/list?page=${page}` );todo/list/page에 있는 이코드가 실행이 되는건가요?

// 배열 구조분해할당 const arr = ['a', 'b', 'c']; const [first, second] = arr;// 객체 구조분해랃당 const obj = { name: 'Kim', age: 25 }; const { age, name } = obj;배열과 객체의 구조분해할당 방법이 다른 이유가 뭔가요?구조분해할당 시 배열은 순서가 중요하고 객체는 이름이 중요한건가요? 만약 그렇다면 배열은 인덱스 기반 접근이라 순서가 중요하고, 객체는 키 기반 접근이라 키(이름)이 중요한건가요?  

먼저 유사한 질문이 있었는지 검색해보세요.꼭 강의와 관련된 질문이 아니더라도, 최대한 답변해드리겠습니다.건의사항도 괜찮습니다.편하게 질문해주세요! 9:38에 html 소스 바꾸고, 다시 blob service에 다시 9:38에 변경한 소스파일을 다시 업로드해야하는거 맞을까요..?? 해당 작업을 해야되는게 맞다면 제 컴퓨터에서 수정했을 때 blob service에 수동으로 안올리고 자동으로 올려지게 하는게 ci/cd???같은건가요...?

MDN에 배열의 메서드들이 많던데, 사이드 이펙트가 없는 순수 함수인지 확인하는 방법 있나요?일일이 해당 메서드들에 여러 값을 입력하는 방법 밖에 없나요?