안녕하세요! 지방 사립 4년제 내년 8월 코스모스 졸업 예정인 학생입니다. 아직 많이 부족하지만 무작정 공부하는 것보다 취직할 때 필요한 요소가 뭔지를 알고 빠르게 포트폴리오를 채우고 싶어 이번 강의를 듣게 되었습니다.제 상황을 간략히 설명드리자면 그동안 진로를 정하지 못하고 이것저것 찍먹만 하다가 올해 하반기부터 백엔드로 진로를 정하고 본격적으로 학습하기 시작했습니다. 현재는 Spring 기초와 큰돌님 코딩테스트 강의 들으며 공부 중입니다. 공부를 하면 할수록 객체지향과 구현에 부족함을 절실히 느끼고 있습니다.현재 제가 한 프로젝트를 영끌해 보면 그나마 과제 수준의 데이터 분석 프로젝트 2건과 완성도 낮은 개인 프로젝트 1건이 전부고 수상 경력, 대외활동은 없습니다.이전에 진행한 개인 프로젝트는 LLM의 도움을 많이 받아서 Next.js+FastAPI+GeminiAPI를 활용하여 회원가입, 글쓰기 등 기본적인 CRUD, 작성한 게시물에 대해 AI에게 피드백을 받는 것을 구현하는 것 정도만 했습니다. 처음으로 웹 사이트를 만들다 보니 코드가 난잡하고, 기획/설계 없이 빠른 기능 구현에 힘을 쏟다 보니 한계가 보여 개발을 멈췄습니다. Q1. 기존에 한 개인 프로젝트는 어떻게 해야 할지 고민입니다.LLM의 도움을 많이 받기도 했고 취직에는 Spring이 유리하다고 생각해서, 포트폴리오용으로 살리는 게 나을지 폐기하고 새로운 프로젝트를 하는 게 나을지 고민입니다. 만약 포트폴리용으로 쓴다고 하면 코드와 구조를 개선해서 다시 만든다거나 Spring으로 새롭게 만들거나 해야 된다고 생각되는데 어떻게 생각하시나요? Q2. 부트캠프를 다니는 것을 고려 중인데 어떻게 생각하시는지 궁금합니다.혼자 공부하는 것도 한계가 있고 부트캠프를 하면서 팀 프로젝트도 할 수 있어서 좋은 기회가 될 거라고 생각합니다. 큰돌님이 추천하는 부트캠프 중 지금 시기에 할 수 있는게 SW마에스트로와 프로그래머스 백엔드 과정 정도뿐인데 SW마에스트로에 들어가기엔 지금 포트폴리오도 초라해서 프로그래머스 백엔드 과정을 고민중입니다.부트캠프 추천 영상에서 "강사의 질이 중요하다"고 하셨는데 강사의 경력을 판단하는 기준이 있는지도 궁금합니다. Q3. 팀 프로젝트 시작 시기와 팀원 구하는 팁 궁금합니다.이번 강의에서 팀 프로젝트의 중요성을 많이 강조하셔서 빠르게 팀 프로젝트를 완성하는 걸 목표로 하고 싶은데 제 실력이 팀원들에게 민폐가 될까 봐 망설여집니다. 어느정도 기술 구현 능력을 갖췄을 때 팀 프로젝트를 참여하는 게 좋을까요? 그리고 스터디를 통해 팀원을 구하는 걸 추천하셨는데 스터디를 하다보면 흐지부지 끝나는 경우가 많던데 결국 최대한 다양한 사람을 만나보는 것 밖에 답이 없을까요?

API를 비동기 처리하는 이유가 HTTP를 써서 그런가요?강의 내에서 사용하는 API가 REST API이고, REST API는 HTTP를 쓰나요? HTTP로 클라이언트가 서버에게 요청을 하면 응답을 할 때까지 대기해야 되서, 비동기로 하지 않으면 끊기니까 그런건가요?

revalidatePath('/product/catalog/1')쉽게 얘기해서 새로된 캐시데이터를 가져온다는 얘기인거죠?

eslintrc.cjs 파일이 eslint.config.js 와 같은 건가요? 같은 아이콘의 파일을 받았는데 eslint.config.js라고 되어있어서 여쭈어봅니다

안녕하세요 강사님!  강의에서 구현해주신 코드를 강의노트에 공유해주실 수 있을까요?중간중간 어떻게 동작하는지 이해 안가는 부분이 있어서 직접 콘솔에 찍어보면서 흐름을 따라가고싶은데, 가능하시다면 부탁드립니다.!

안녕하세요 강사님제공된 문제들을 문제 풀이 강의 보기 전에 개인적으로 풀었을 때, 테스트 케이스가 1개뿐인 문제들은 실제로 여러 케이스에 대해서 정답인지 알기 쉽지 않을 거 같은데, 추가적인 테스트 케이스는 개인적으로 추가해야될까요?

안녕하세요. API 요청이 포함된 컴포넌트를 대상으로 단위/통합 테스트할때 요청 상태에 따라 로딩, 에러 UI가 적절하게 렌더링 되는지도 검증을 해야하는지 궁금합니다.해야한다면, API 호출하는 모든 테스트에서 로딩/에러 UI 검증을 하는게 일반적이고 맞는 건지, 아니면 제 경우에는 ErrorBoundary랑 Suspense를 다음처럼 합쳐서 에러/로딩 처리용 wrapper(?)를 만들었는데, 이런 wrapper 테스트를 따로 작성하는게 맞는건지.. 궁금합니다 ㅎㅎ..interface ComposedBoundaryProps extends ErrorBoundaryPropsWithRender { suspenseFallback: ReactNode; children: ReactNode; reset: () => void; } const ComposedBoundary = ({ suspenseFallback, children, fallbackRender, reset, }: ComposedBoundaryProps) => { return ( <ErrorBoundary onError={(error: unknown) => { // ... }} onReset={reset} fallbackRender={fallbackRender} > <Suspense fallback={suspenseFallback}>{children}</Suspense> </ErrorBoundary> ); };

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 를 사용하면 리렌더링이 안되는건가요 ??