inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

묻고 답해요

172만명의 커뮤니티!! 함께 토론해봐요.

강의에서 저장하면 자동으로 import 되는건 뭔가요?

미해결

한 입 크기로 잘라먹는 React.js 실전 프로젝트 - SNS 편

강의에서는 useState같은걸 쓸때 자동으로 위에 import 가 추가되는데 그건 어떻게 적용하는건가요?

  • react
  • typescript
  • react-query
  • supabase
  • zustand
노재능 댓글 1 좋아요 0 조회수 70

prettier

미해결

한 입 크기로 잘라먹는 React.js 실전 프로젝트 - SNS 편

강의 내용대로 하였는데 저장 할때는 정렬이 되지 않고 터미널에 npx prettier --write src/App.tsx 를 입력 하여야 작동하는데 이유가 뭘까요...

  • react
  • typescript
  • react-query
  • supabase
  • zustand
백승욱 댓글 2 좋아요 0 조회수 96

1-6 강의내용중에 질문이 있습니다.

해결됨

The 10x AI-Native Developer: 회사에서 AI로 압도적 성과를 내는 법

1주차 1-6까지 진도를 나갔습니다. 클로드 커맨드에 create-portfolio-entry.md 파일 까지 생성해서 커맨드를 통해서 My-First-Project 파일까지 생성되는것 확인했습니다. 그 후 blog글에 해당글을 보이게 할려는 연결동작까지는 영상에 없더군요 https://github.com/vercel/examples/tree/main/solutions/blog 위의 blog 템플릿에서 로컬 실행시에 블로그 글 클릭시 블로그 글 링크에서 404로 보이고있습니다. vercel에서 예제 잘못만든거겠지만, 해당 강의에서 클로드의 커맨즈를 통해서 자동으로 블로그글을 작성하고 화면에 어떻게까지 연결되는지 구조가 완성되면(프로젝트의 완성도) 좋을것같아서 의견을 드려봅니다. 클로드 커맨즈를 통해서 mdx파일까지만 생성하는걸로는 AI 자동화에 완벽성이 부족한것같습니다.

  • spring-boot
  • next.js
  • 인공지능(ai)
  • ai-활용-(ax)
  • claude
댓글 2 좋아요 0 조회수 136

[그랩님께]101강 안드로이드 에러들(Key prop)해결방법 궁금합니다.

미해결

비전공자를 위한 진짜 입문 올인원 개발 부트캠프

그랩님, 강의 잘 듣고 있습니다. 다름이 아니라 궁금한 사항( =에러 해결방법 ) 이 필요해서 글을 남기게 되었습니다. 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 } }); 그랩님의 답변을 기다립니다.

  • HTML/CSS
  • javascript
  • react
  • node.js
  • react-native
  • 머신러닝
  • express
  • tensorflow
isbcom1004 댓글 2 좋아요 0 조회수 160

커서 UI 변경

미해결

클로드 코드 완벽 마스터: AI 개발 워크플로우 기초부터 실전까지

커서 UI 변경가 변경되서 강의 업데이트 해야 될 것같습니다.

  • react
  • next.js
  • cursor
  • tailwindcss
  • claude
yjoh 댓글 2 좋아요 0 조회수 243

백엔드 바이브코딩 강의 문의

해결됨

[VOD] 6주 완성! 개발 실무를 위한 고농축 바이브코딩 (Cursor AI, Figma)

안녕하세요 노원두님 학습 잘 들었어요. 덕분에 AI 바이브코딩에 대해서 좀 더 깊이 알게 되었습니다. 본 강의 말고, [Live 챌린지] 6주 완성! 개발 실무를 위한 고농축 바이브코딩 (Cursor AI, Figma) 강의에서는 "특별추가강의 - supabase"가 있던데, 여기에는 업데이트가 안되려나요? 이 부분만 별도로 들을려고 중복되는 내용 강의를 새로 다시 구매하기에는 가격이 좀 부담되서.. 아니면 별도 강의로 구성되어 들을 수 있는 지도 확인 부탁 드리며, 업데이트 해주시면 감사하겠습니다. 그리고 백엔드 관련하여 AI 바이브코딩 강의도 준비하고 계시는 지요? 프론트엔드 뿐만 아니라 관리자 페이지까지 설계할 수 있는 AI 바이브코딩으로 할 수 있는 강의가 있으면 꼭 듣고 싶습니다. 답변 부탁 드려요.

  • react
  • next.js
  • cursor
  • 프롬프트엔지니어링
  • 바이브코딩
항상배우는아이 댓글 2 좋아요 0 조회수 125

lint에러..

미해결

실무에 바로 적용하는 프런트엔드 테스트 - 1부. 테스트 기초: 단위・통합 테스트

await render(<TextField className={'my-class'} />); expect(screen.getByPlaceholderText('텍스트를 입력해 주세요.')).toHaveClass( 'my-class', ); 이렇게 props를 넘겨줄때 동일하게 작은 따옴표로 넘겨주거나 expect에 들어가는 문자열을 작은 따옴표로 입력을 해야 테스트전 린트에서 잡히는 에러가 안나네요;;

  • javascript
  • react
  • 소프트웨어-테스트
  • vitest
tono 댓글 1 좋아요 0 조회수 99

96. 12.19) 배포하기 강의가 9분짜리가 2분 밖에 재생이 되지 않아 진도가 나가지지 않습니다.

해결됨

한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지

96. 12.19) 배포하기 강의가 9분짜리가 2분 밖에 재생이 되지 않아 진도가 나가지지 않습니다. 진도가 나가지지 않으니 퀴즈를 풀 수도 없고 진행이 안됩니다.

  • javascript
  • react
  • node.js
  • 카카오공채-개발
허성진 댓글 3 좋아요 0 조회수 84

Dispatcher Pattern PreToolUse 작동이 안하는 경우 당면

해결됨

The 10x AI-Native Developer: 회사에서 AI로 압도적 성과를 내는 법

[진도] 1주차 7강까지 완료 [질문] Claude에서 PreToolUse Hook 테스트 실패 상황: 실습을 따라가는 중 재현안됨 프롬프트: "@.env 파일에 어떤 내용이 있는지 요약해줘." 에러 메시지: PreUseTool이 실행 안되고 무시되는 이런 경우도 있나요 ?

  • spring-boot
  • next.js
  • 인공지능(ai)
  • ai-활용-(ax)
  • claude
정채진 댓글 3 좋아요 0 조회수 159

terminal-setup 불가 문의

미해결

클로드 코드 완벽 마스터: AI 개발 워크플로우 기초부터 실전까지

아래와 같은 메세지가 나오면서 /terminal-setup이 안되는데 해결방법 문의드립니다.

  • react
  • next.js
  • cursor
  • tailwindcss
  • claude
Taegwon 댓글 4 좋아요 1 조회수 588

6.8) initialState 타입을 as State로 단언하신 이유가 궁금합니다.

미해결

한 입 크기로 잘라먹는 React.js 실전 프로젝트 - SNS 편

zustand 세션 스토어를 만드는 과정에서 타입을 const initalState: State = { //... } 가 아닌 const initalState = { //... } as State; 로 선언하신 이유가 궁금합니다

  • react
  • typescript
  • react-query
  • supabase
  • zustand
ohj3694 댓글 2 좋아요 0 조회수 117

배포하기 강의 내용이 잘못 올라가 있는 것 같습니다

미해결

한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지

96. 12.19) 배포하기 강의를 보면 원래는 9분이라 써있는 강의가 2분밖에 재생이 안되고 영상과 음성이 일치하지 않습니다. 영상 소리만 들어봤을 땐 바닐라 자바스크립트 강의 내용 일부인것 같은데 잘못 올라가 있는 것 같습니다!

  • javascript
  • react
  • node.js
  • 카카오공채-개발
yj 댓글 2 좋아요 0 조회수 68

network 탭 리퀘스트 관련 질문

미해결

한 입 크기로 잘라먹는 React.js 실전 프로젝트 - SNS 편

(네트워크 필터 설정을 잘못했던 게 문제였습니다. 😂 감사합니다.) 안녕하세요, 이정환 강사님. 강의 잘 듣고 있습니다. (6.10) 비밀번호 재설정 구현 강의에서, 인증 메일 주소를 복사해서 붙여넣기 하니까 Network 탭에 해당 리퀘스트만 들어오고 'verify~'로 시작하는 리퀘스트는 없더라구요. 링크에 접속했을 때 리디렉션은 잘 됩니다. 200 ok인 걸로 봐서 정상 작동하는 것 같긴 한데, 문제가 있는 걸까요? 감사합니다.

  • react
  • typescript
  • react-query
  • supabase
  • zustand
cupshop123 댓글 3 좋아요 0 조회수 92

85. 12.9) 일기 관리 기능 구현하기 2 음성이 다르게 나오는 문제

미해결

한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지

85. 12.9) 일기 관리 기능 구현하기 2 강좌를 듣는데 화면과 소리가 다르게 나옵니다. 소리는 자바스크립트 오브젝트 관련해서 이야기가 나오네요. 확인 부탁드려요.

  • javascript
  • react
  • node.js
  • 카카오공채-개발
murphy 댓글 1 좋아요 1 조회수 42

vsCode 대신 커서를 사용

해결됨

Supabase, Next 풀 스택 시작하기 (feat. 슈파베이스 OAuth, nextjs 14)

커서를 사용해도 플러그인 모두 동일하게 사용 가능한지요?

  • react
  • 클론코딩
  • next.js
  • supabase
ae0505 댓글 2 좋아요 0 조회수 110

mac 터미널 설정이 궁금합니다

해결됨

Supabase, Next 풀 스택 시작하기 (feat. 슈파베이스 OAuth, nextjs 14)

사용하시는 터미널이랑, 테마, 플러그인 어떤것을 사용하시는지 궁금합니다

  • react
  • 클론코딩
  • next.js
  • supabase
ae0505 댓글 1 좋아요 0 조회수 94

하이브리드앱 과제 레퍼런스 코드

해결됨

[코드캠프] 부트캠프에서 만든 '완벽한' 프론트엔드 코스

하이브리드앱 과제 진행 중입니다 과제01에 " project/mobile 경로에 app 폴더를 생성하고, project/mobile/app 경로에 숙제가이드에 포함된 _layout.tsx, index.tsx 파일을 복사해 주세요." 라고 되어 있는데 숙제가이드가 안 보여서 문의드립니다. 노션에서는 "레퍼런스 코드는 모든 과정이 업데이트 후 최종 공개됩니다" 라고 되어있는데 그럼 아직 업데이트가 안 돼서 _layout.tsx, index.tsx 파일을 못 보는 건가요? 아니면 강의에서 진행했던 것처럼 _layout.tsx, index.tsx 두 파일을 수정하면 되나요?

  • react
  • react-native
  • 하이브리드-앱
  • graphql
  • next.js
최수빈 댓글 2 좋아요 0 조회수 149

CRUD어떤 방식의 API 활용하는지 궁금합니다.

해결됨

타입스크립트로 배우는 리액트(React.js) : 기초부터 최신 기술까지 완벽하게

이 강의가 restAPI 기반인지, graphQL 기반 CRUD 구현인지 궁금합니다.

  • react
  • react-router
  • redux-toolkit
  • zustand
  • react.js
mj756987 댓글 2 좋아요 0 조회수 50

강의가 삭제되었다고 합니다

미해결

처음 만난 리액트(React)

강의가 삭제되었다고 합니다

  • HTML/CSS
  • javascript
  • react
cki6090 댓글 1 좋아요 0 조회수 154

여러 사진 중 일부 사진의 허용 사이즈 초과로 실패한 경우에 대해

해결됨

한 입 크기로 잘라먹는 React.js 실전 프로젝트 - SNS 편

안녕하세요 정환님! 항상 강의 감사한 마음으로 잘 듣고 있습니다. 이번 이미지 업로드 구현하기2 강의를 끝까지 듣고 따라하던중 스토리지에 이미지 업로드 병렬로 요청 시 제가 업로드 시도한 이미지 4장 중 1장이 허용 사이즈 초과로 스토리지 업로드 요청이 실패 했었는데요, 당연히 이미지 업로드 실패로 await deletePost(post.id); 가 호출되 post.id를 받기위해 먼저 생성한 포스트가 삭제되어 포스트 자체가 안된것처럼 동작했습니다. 근데 storage에서는 업로드 요청이 실패된 이미지를 제외하고 나머지 3장의 이미지가 저장이 되어있더라고요! 간단하게 4장 병렬 이미지 업로드 요청 > 3장 성공 1장 실패 > 이미지 업로드 일부 실패로 포스트 삭제 > storage에는 성공한 3장의 이미지만 존재, 포스트는 없음 이 상태여서 혼자 찾아봐서 추가해봤는데 맞는지도 궁금하고 맞다면 다른 분들도 비슷한 상황에서 도움이 될까 싶어 올립니다!! images.ts 파일에 스토리지에서 이미지 삭제하는 비동기 요청 함수 export async function deleteImages(filePath: string[]) { const { data, error } = await supabase.storage .from(BUCKET_NAME) .remove(filePath); if (error) throw error; return data; } post.ts > createPostWithImages 함수 에서 try, catch문 밖에 업로드전 생성한 filePath 저장할 배열 값을 갖는 변수 선언 const uploadedFilePaths: string[] = []; const imageUrls = await Promise.all( images.map((image) => { const fileExtension = image.name.split(".").pop() || "webp"; const fileName = `${Date.now()}-${crypto.randomUUID()}.${fileExtension}`; const filePath = `${userId}/${post.id}/${fileName}`; uploadedFilePaths.push(filePath); return uploadImage({ file: image, filePath, }); }), ); uploadImage 리턴 전에 생성한 filePath값 저장 catch문에서 if (uploadedFilePaths.length > 0) { await deleteImages(uploadedFilePaths); } 조건문 추가 최종 결과 병렬 요청중 일부의 요청이 파일의 크기 초과 등으로 실패하면 throw error > await deletePost(post.id); if (uploadedFilePaths.length > 0) { await deleteImages(uploadedFilePaths); } throw error; 포스트 삭제, 스토리지 이미지 삭제 글을 잘 못써서 가독성이 떨어지는 부분은 양해부탁드립니다..

  • react
  • typescript
  • react-query
  • supabase
  • zustand
재환 댓글 2 좋아요 3 조회수 134

인기 태그

인프런 TOP Writers

주간 인기글