172만명의 커뮤니티!! 함께 토론해봐요.
해결됨
비개발자 4주만에 수익화 서비스 만들기: AI 바이브코딩 웹 + 앱 ALL IN ONE
9강에서 카카오톡 로그인을 위한 세팅을 모두 다 했는데 계속해서 같은 오류가 납니다 어떻게 해결해야할까요? api id.key, 리다리엑트 모두 적었습니다 ?
미해결
Next.js 까보기: "쓸 줄 아는 개발자"에서 "알고 쓰는 개발자"로
어떤 걸 참고해야할지 링크를 주시면 감사하겠습니다 그 전 강의에서도 VDOM에 대한 것도 비슷한 맥락에서 강의에서는 없는 내용을 설명하시는게 조금 보이네요 순서대로 설명해주시는 맥락이 끊기는 느낌을 받습니다
해결됨
클로드 코드 완벽 마스터: AI 개발 워크플로우 기초부터 실전까지
안녕하세요 짐코딩님! 현재 클로드 코드로 나만의 프로필 웹사이트 만들기를 진행 중인데 기본적인 웹사이트 생성은 했지만 스크린샷으로 구체적인 수정 요청하기에서 캡쳐한 후 스크린샷 첨부를 할 경우 [Image1] 이런 식으로 나타나는 것이 아니라 아무 것도 표시되지 않는 문제점이 발생하고 있습니다 현재 모델은 토큰을 절약하기 위해 Haiku 모델을 사용하고 있으며 단순히 Sonnet 모델에서만 가능한 것인지 현재 저의 컴퓨터 안의 터미널 문제인지 잘 모르겠습니다. 혹시 해결 방안이 있는지 여쭤보고 싶습니다
미해결
타입스크립트로 배우는 리액트(React.js) : 기초부터 최신 기술까지 완벽하게
검색을 하면 각각 탭이 있습니다. 그리고 강의에서 이야기 해 주신대로 x를 눌러서 닫았고 그 이후 index.html을 수정한 후 저장을 눌렀으나 탭을 한 그 상태로 저장이 되어집니다. 왜 그런지 알 수 있을까요?
미해결
타입스크립트로 배우는 리액트(React.js) : 기초부터 최신 기술까지 완벽하게
윈도우 사용자입니다. homebrew 윈도우 설치법은 없나요?
미해결
실무에 바로 적용하는 프런트엔드 테스트 - 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> ); };
미해결
코드로 배우는 React 19 with 스프링부트 API서버
Execution failed for task ':org.zerock.mallapi.MallapiApplication.main()'. > Process 'command 'C:\Users\User\.jdks\temurin-21.0.9\bin\java.exe'' finished with non-zero exit value 1 * Try: > Run with --stacktrace option to get the stack trace. > Run with --info or --debug option to get more log output. > Run with --scan to generate a Build Scan (powered by Develocity). > Get more help at https://help.gradle.org .
해결됨
비개발자 4주만에 수익화 서비스 만들기: AI 바이브코딩 웹 + 앱 ALL IN ONE
카카오톡 > 카카오로그인> 보안 '보안'탭이 보이지 않아요 다른 곳 다 들어가봐도 못 찾겠습니다 챗gpt는 이게 어떤 조건이 충족되야 자동생성된다는데 ui가 바뀐것 같은데 위치를 못 찾겠습니 다
해결됨
한 입 크기로 잘라먹는 React.js 실전 프로젝트 - SNS 편
안녕하세요 선생님. 강의를 모두 수강한 후 복습을 하던 중 궁금한 점이 생겨 질문드립니다. 좋아요 기능에서 동시성 문제를 해결하기 위해 행 잠금 을 사용하는 것으로 이해했습니다. 이 경우, 첫 번째 유저의 좋아요 요청이 처리되는 동안 해당 행이 잠기게 되는데, 만약 동시에 많은 사용자(수백~수천 명)가 좋아요 버튼을 누르는 상황 이라면 요청들이 순차적으로 대기하게 되어 응답 지연이 발생되지는 않나요?? 또한 이런 이유 때문에 클라이언트 단에서는 낙관적 업데이트 를 적용하는게 맞는걸까요??
해결됨
클로드 코드 완벽 마스터: AI 개발 워크플로우 기초부터 실전까지
안녕하세요 짐코딩님! 클로드 코드 가격 정책 수업을 듣고 나서 결제 관련 의문이 드는 점이 발생하여 문의 드립니다. 현재 Cursor AI Pro 계정을 $20씩 지불하여 사용중입니다. 이러한 상황 속에서 클로드 코드를 추가적으로 $20를 Pro 버전을 추가적으로 결제해야 되는 건가요? 그렇게 될 경우 총 $40라는 부담스러운 가격을 지불해야되는 상황인데 어떻게 해야될 지 잘 모르겠습니다. 해당 수업을 따라가기 위해서는 Cursor AI 구독을 취소하고 Claude Code Pro를 결제해서 수업을 들어야 하는 지 여부에 대해서 여쭤보고 싶습니다.
미해결
클로드 코드 완벽 마스터: AI 개발 워크플로우 기초부터 실전까지
클로드 코드 가격 정책 수업을 듣고 나서 결제 관련 의문이 드는 점이 발생하여 문의 드립니다. 현재 Cursor AI Pro 계정을 $20씩 지불하여 사용중입니다. 이러한 상황 속에서 클로드 코드를 추가적으로 $20를 Pro 버전을 추가적으로 결제해야 되는 건가요? 그렇게 될 경우 총 $40라는 부담스러운 가격을 지불해야되는 상황인데 어떻게 해야될 지 잘 모르겠습니다. 또한 이러할 경우 해당 수업을 따라가기 위해서는 Cursor AI 구독을 취소하고 Claude Code Pro를 결제해서 수업을 들어야 하는 지 여부에 대해서 여쭤보고 싶습니다.
미해결
한 입 크기로 잘라먹는 Next.js
빨간줄 설정 리액트에서 할 때 뭐 있었던 거 같은데 그 뭐였을까요 넥스트제이에스 여기에서도 가능하죠?
해결됨
한 입 크기로 잘라먹는 Next.js
이런식으로 코드 입력할때마다 에러 메세지같이 띄워주는건 어떤 익스텐션 인가요?!
해결됨
누구보다 빠르게 배우는 풀스택 게시판 만들기
강의 중에 소스 올려주신다고 했는데 소스가 안보이네요? 소스가 없더라도 진행하는 강의 부분의 코드를 한번이라도 좀 보여주면 멈추고 따라 치면서 같이 실습할텐데 css영역부분 다 짤려 보여갖고 실습 내용이 똑같이 재현이 안됩니다...
미해결
타입스크립트로 배우는 리액트(React.js) : 기초부터 최신 기술까지 완벽하게
toggleTodo = useCallback( ( id : number) => { <-- 여기 이 지점에 todos 라는 state 값이 필요한 상황 ( 체크 로직 등등.. ) setTodos( (todos) => todos.map( (todo) => todo.id === id ? { ...todo, completed: !todo.completed } : todo ); }, []); 위 부분에 todos 의 state 값이 필요하게 되면 의존성 배열에 todos 를 넣어줘야 될꺼 같은데요. 이렇게 되면 React.memo 에 의해 전달될 toggleTodo props 도 변경되게 될것으로 예측 되고 결국 자식 컴포넌트들이 리렌더링이 계속 발생되지 않을까 싶은데요. 위 부분에 todos 의 state 값이 필요하게 될 경우에는 어떻게 처리를 해줘야 될까요?
해결됨
비전공자를 위한 진짜 입문 올인원 개발 부트캠프
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에 플러그인 문구부터 저장한 뒤 바벨 설정 캐시 초기화 하는 것이 옳지요? 질문 3 102강 시작부터 ~ 18분 56초 까지 타이핑 한 grab-market-mobile의 App.js 소스 내용 아래와 같은데 이것을 실행 하면 사진과 같이 안드로이드 스튜디오(runtime not ready) 에서 에러 발생 아래 App.js 는 강의 전체 완성본 소스 가 아니라 에러가 난 시점까지의 소스 입니다 질문4 ->여기서 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, }, }); 에러 해결 차근차근 알려주셨으면 좋겠습니다 --------------------------------------------------------------------------------------------- 질문 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 잘 되던 안드로이드 스튜디오가 로딩을 왜 못할까요?
해결됨
한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
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이란 명령어를 쓸 수 있는건가요??
미해결
클로드 코드 완벽 마스터: AI 개발 워크플로우 기초부터 실전까지
windows claude 설치 강의 중.. 강의를 똑같이 따라갔는데 안되네요, 어떤게 문제일까요?
해결됨
한 입 크기로 잘라먹는 React.js 실전 프로젝트 - SNS 편
안녕하세요 강의 정말 잘 듣고있습니다. 현재 강의를 무한 중첩 댓글 구현하기까지 수강했습니다! 테스트를 위해 여러가지 사항들을 직접 체크하고있는데 Github로 로그인한 사용자의 정보들(avatar_url, name)들은 기본적으로 사용하지 않고 랜덤한 닉네임과 기본 아바타 이미지가 나오는게 정상 동작일까요? 제가 이해한 흐름은 다음과 같습니다. 1. Github(OAuth) 로그인 2. Supabase Authentication > Users에 사용자 생성 (profile 테이블에는 아직 생성 되지 않음) 3. SessionProvider에서 useProfileData 호출 export default function SessionProvider({ children }: { children: ReactNode }) { const session = useSession(); const setSession = useSetSession(); const isSessionLoaded = useIsSessionLoaded(); const { data: profile, isLoading: isProfileLoading } = useProfileData( session?.user.id, ); useEffect(() => { supabase.auth.onAuthStateChange((event, session) => { setSession(session); }); }, []); if (!isSessionLoaded) return <GlobalLoader />; if (isProfileLoading) return <GlobalLoader />; return children; } 4. fetchProfile(userId) 실행 export async function fetchProfile(userId: string) { const { data, error } = await supabase .from("profile") .select("*") .eq("id", userId) .single(); if (error) throw error; return data; } Supabase Table Editor > profile 에는 아무런 결과가 저장되어 있지 않기 때문에 PostgrestError: PGRST116 에러 발생 useProfileData catch 블록 실행 → createProfile 호출 랜덤한 닉네임 + avatar_url이 기본으로 저장 만약 제가 이해한 흐름이 맞다면 어떤 방법을 써야할까요? 제일 먼저 드는 생각은 createProfile에 session을 매개변수로 받아서 session.user.user_metadata.full_name 과 avatar_url 을 insert에 넣는걸 생각했습니다. createProfile export async function createProfile(userId: string, session?: Session) { const { data, error } = await supabase .from("profile") .insert({ id: userId, // ↓ 여기 수정 했어용 nickname: session?.user.user_metadata?.full_name || getRandomNickname(), avatar_url: session?.user.user_metadata?.avatar_url || null, }) .select() .single(); if (error) throw error; return data; } use-profile-data.ts export function useProfileData(userId?: string) { const session = useSession(); const isMine = userId === session?.user.id; return useQuery({ queryKey: QUERY_KEYS.profile.byId(userId!), queryFn: async () => { try { const profile = await fetchProfile(userId!); return profile; } catch (error) { if (isMine && (error as PostgrestError).code === "PGRST116") { return await createProfile(userId!, session!); // 여기 session 추가 했어용 } throw error; } }, enabled: !!userId, }); } 이렇게 코드를 수정하고 profile table을 삭제한 후 다시 Github로 로그인 하면 사용자의 프로필 이미지와 이름이 받아와졌습니다. 더 효율적이거나 더 좋은 방법이 있을까요? 혹은 제가 잘못 알고 있는게 있을까요?
미해결
코드로 배우는 React 19 with 스프링부트 API서버
React-Router 설정 강의 다름이 아니고요 강의 내용을 보면 생성위치가 PS: C\r2025\front\ch2 폴더 (당연히 ch2 겠지만요...^^) 로 되어있는데요 ch1 프로젝트에서 계속 진행하면 안되나요? 아니면 ch2 로 다시 만들어서 진행해야 할까요? 그리고 ch2 만들때 특이 사항이 없는지.. 갑자기.. frontend/ch2 폴더에서 진행을 하셔서요... (ch2 프로젝트 하나 생성해서 따라하면 땡이지만...ㅋㅋㅋ) 살짝 궁금해서 질문 드립니다.
