inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

묻고 답해요

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

컴포넌트 생성 or 스토리북 생성 후 잘 만들어졌는지 확인하는 중간과정이 필요해요.

미해결

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

좋은 강의 해주셔서 너무 감사드립니다. 바이브 코딩 과정 너무 신기하고 재밌는데, 다만 컴포넌트 생성, provider, 스토리북 등 잘 만들어지긴 하던데 중간에 잘 만들어진건지 확인하는 과정이 없다보니 문제 생겼을때 어디서부터 어디까지 잘못 되었는지 잘 모르겠더라구요. 중간과정 확인 방법이 궁금합니다. 현재는 스토리북에서 버튼 스토리 생성했는데, 완성은 했는데 컴포넌트가 안보이고 빈 페이지로만 나옵니다. 기능은 스토리에 보입니다. page.tsx에서 컴포넌트 불러서 보면 잘 보이구요.

  • react
  • next.js
  • cursor
  • 프롬프트엔지니어링
  • 바이브코딩
댓글 1 좋아요 0 조회수 80

Vercel 404 에러 질문

미해결

1시간만에 Chat GPT 클론 with Cursor (원데이 클래스)

Vercel에 연동하고 나니 다음과 같은 창이 뜹니다. 404 Not Found 에러가 떠서 해결을 하고싶은데, 어떤 것이 문제인지 잘 모르겠습니다. 우선 웹사이트를 따로 열어서 실행시키면 정상작동 됩니다.

  • react
  • typescript
  • tailwindcss
  • nextjs
  • chatgpt
forever1542 댓글 2 좋아요 0 조회수 310

(4.13) setQueryData 질문드립니다

해결됨

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

queryClient.setQueryData를 사용할 때, 단순히 새 값을 바로 전달하는 경우와 업데이트 함수를 사용하는 경우가 있던데, 각각 언제 사용해야 하는지 명확히 구분이 잘 안 돼요. 어떤 기준으로 사용하면 되는지 설명해주실 수 있을까요?..

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

실무에서의 JWT에 대해서 질문드려요

해결됨

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

JWT가 이론적으로는 DB에 액세스하는 과정없이 인증이 가능하다고는 하지만,, jwt.io같은데서 payload의 조회를 쉽게 할 수 있기도 하다보니 웬만한 개인정보를 넣는 것은 지양하는 걸로 알고 있습니다. 실무에서는 사실상 payload에 userId정도만 넣어두고, 서버에서 이 JWT를 받아 디코딩하여 받은 userId로 DB에 액세스하여 유저정보를 가져와서 유효한 유저인지 파악한 다음 클라이언트에 응답하는 것이 일반적인 케이스가 아닌가.. 그러면 세션과 큰차이가 사실상 없는 것이 아닌가 궁금하여 질문드립니다!

  • react
  • typescript
  • react-query
  • supabase
  • zustand
최성준 댓글 2 좋아요 0 조회수 168

크롬 콘솔창 관련 질문 드립니다

미해결

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

안녕하세요. 다름이 아닌 원래 잘 작동하던 크롬 콘솔창에 react-dev 툴을 설치 하라는 문구만 나오고 작동을 하지 않습니다. 툴 설치도 해봤는데 버튼을 클릭해도 아무 문구도 뜨지 않고 , 필터창에 문구가 써있나 싶어 확인도 해봤습니다. 혹시 다른 해결법이 있을까요??

  • javascript
  • react
  • node.js
  • 카카오공채-개발
bitt2580 댓글 4 좋아요 0 조회수 109

generateStaticParams 관련 질문입니다!

미해결

한 입 크기로 잘라먹는 Next.js

generateStaticParams로 모든 book 상세페이지를 static page로 미리 생성했을 때, book 개수가 엄청 많으면 빌드가 더 오래걸리나요? 그리고, book 개수가 엄청 많으면 사이트 첫 접속이 느려지기도 하나요?

  • react
  • typescript
  • next.js
  • 카카오공채-개발
강미선 댓글 2 좋아요 0 조회수 46

prettier 자동 적용 관련 이슈

미해결

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

안녕하세요 다른 분들이 올리신 prettier 관련 질문글과 동일하게 prettier 적용 이슈 발생하여 문의글 남깁니다. 이전 질문글들에 답변 해주신 것 참고해서 해결하려고 하였으나 여전히 되지 않더라구요. 무슨 문제일까요? prettier 확장 설치 확인 파일명을 .prettierrc 에서 .prettierrc.json 으로 바꿔봤음에도 되지 않음 Default Formatter 설정 확인 FormatOnSave 옵션 활성화 확인 프로젝트별 설정 파일 확인 git repo 링크 남겨놓습니다 https://github.com/seonyoungg/onebite-exam

  • react
  • typescript
  • react-query
  • supabase
  • zustand
선영 댓글 3 좋아요 0 조회수 145

채널은 접속가능하나 node 정보 접속 불가

해결됨

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

안녕하세요. 학습중에 cusor에서 figma 채널은 접속이 잘 되나, color.ts를 생성하기 위한 node에 접속이 안됩니다. (처음 사진의 노드 ID에서 - 붙인것은 연결 테스트 중에 한것이고, 실제 프롬프트 실행시는 두번째 사진 처럼 정상적으로 수정후에 실행 하였습니다.) 혹시 무료 버전에서는 node id에 접속이 안되는 것인지? 아니면 다른 문제가 있을까요? 참고로 url 정보 전체를 통해서 가져와 달라고도 요청해봤는데 여전히 해당 부분에만 접속을 못하는 것을 확인 하였습니다.

  • react
  • next.js
  • cursor
  • 프롬프트엔지니어링
  • 바이브코딩
saintjoker04 댓글 3 좋아요 0 조회수 113

css intellisense 적용하면 prettier가 안됩니다.

미해결

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

npm i -D prettier prettier-plugin-tailwindcss 명령어 실행하고 .prettierrc파일생성후 { "plugins": ["prettier-plugin-tailwindcss"] } 코드 작성후 저장하면 원래 적용되던 빈 줄 없애는 것도 적용 안되고 <div className="underline text-7xlfont-bold text-red-500 "> 이부분도 정렬이 안됩니다. format on save 체크되어 있고, default formatter도 prettier-code formatter로 되어 있습니다.

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

강의에서 저장하면 자동으로 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

[그랩님께]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

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

인기 태그

인프런 TOP Writers

주간 인기글