inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

묻고 답해요

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

투두 리스트 ui 작업 중에 material-tailwind가 리액트와 호환 문제가 있는지 리액트 19에서 18로 낮춰도 인풋과 아이콘 버튼 컴포넌트가 제대로 표시되지 않아요 ㅜㅜ

미해결

[풀스택 완성] Supabase로 웹사이트 3개 클론하기 (Next.js 14)

✅ 모든 질문들은 슬랙 채널에서 답변드리고 있습니다. 💡 ”로펀의 인프런 상담소” 슬랙 채널 가입하기 💡 평일중에는 퇴근 이후(저녁 7시)에 답변을 받아보실 수 있고, 주말중에는 상시 답변드리고 있습니다. 투두 리스트 ui 작업 중에 material-tailwind가 리액트와 호환 문제가 있는지 리액트 19에서 18로 낮춰도 인풋과 아이콘 버튼 컴포넌트가 제대로 표시되지 않아요 ㅜㅜ

  • firebase
  • next.js
  • tailwindcss
  • react-query
  • supabase
이재웅 댓글 1 좋아요 0 조회수 106

CommentItem에 props를 전달하지만 받지 않는데 TypeScript 에러가 안 나는 이유가 궁금합니다

해결됨

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

(10.3) 댓글 조회 기능 구현하기 8:50 CommentItem에서 props를 작성하기전 <CommentItem key={comment.id} {...comment} /> 에 {...commnet}를 넣어도 TypeScript에서 에러가 나지 않던데 이유가 궁금합니다. // comment-list.tsx {comments.map((comment) => ( <CommentItem key={comment.id} {...comment} /> ))} // comment-item.tsx export default function CommentItem() { // props를 안 받음 return <div>하드코딩된 내용</div> }

  • react
  • typescript
  • react-query
  • supabase
  • zustand
호기쿤 댓글 1 좋아요 0 조회수 62

모달 store 관련 질문입니다.

해결됨

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

안녕하세요, 이정환 강사님. 강의를 모두 수강하고 혼자 프로젝트를 진행하고 있는 수강생입니다. 모달 store를 구현하던 중 의문점이 생겨 질문합니다. 만약 postEditorModal에 더불어 다른 모달 데이터를 관리하는 스토어(예를 들어 projectEditorModal)을 만들고 싶으면, store 파일을 두 개로 나누어 만드는 것이 맞을까요? 처음에는 똑같은 state와 actions 값을 담는 store니 하나의 파일로 관리해서 만들어도 되지 않을까 생각했는데, devtools 이름을 나누어 관리하는 것이 버그 관리나 유지 보수 관점에서 더 유리할 것 같아서요. 감사합니다.

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

로컬스토리지 토큰 저장 시 보안문제

해결됨

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

안녕하세요 선생님 supabase의 회원가입 기능을 사용하여 가입한 경우 자동으로 로컬스토리지에 토큰정보들이 저장이 되는 부분에서 이 부분들이 보안적으로 문제가 되지 않나요?? supabase를 사용하는 실무에서 이러한 문제를 어떤식으로 보통 해결하나요?

  • react
  • typescript
  • react-query
  • supabase
  • zustand
박선우 댓글 2 좋아요 0 조회수 181

supabase foreign key relation 설정이 안돼요

미해결

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

like테이블을 생성하고자 작성을 한 후 Add foregin key relation 을 클릭하여 public schema를 선택한 이후에도 하위 테이블 목록이 보이지 않습니다..ㅠㅠ 딱히 다른 설정을 만진것이 없이 강의를 따라 쭉 해보고 있는데 무언가가 바뀐건가요? 강의 내에서는 post테이블이면 public.post로 나오지만 지금 현재는 post로만 보이는 상태인데 어떤 부분이 바뀌었나? 혹은 설정을 못한 부분이 있나 잘 모르겠습니다..

  • react
  • typescript
  • react-query
  • supabase
  • zustand
진상우 댓글 2 좋아요 0 조회수 78

download as zip 윈도우에서 어디있나요?

해결됨

비개발자 4주만에 수익화 서비스 만들기: AI 바이브코딩 웹 + 앱 ALL IN ONE

2-3강 듣는 중에 교재 위치 2-3 9) 이거 저만 안보이는 것일까요? 흑흑,, 윈도우 사용중인데 이게 어디있는지 모르겠습니다. 지피티한테 물어봐도 모르겠어서 질문드려요 현재 수강 진도를 함께 알려주세요! "1주차 3강까지 완료" 또는 "2주차 실습 중"처럼 어디까지 들으셨는지 적어주시면 맞춤형 답변을 드릴 수 있어요 📚 구체적인 상황과 함께 질문해주세요! "AI가 안 된다"보다는 "Cursor에서 이런 프롬프트를 입력했는데 이런 에러가 나와요"처럼 상세하게 적어주시면 더 정확한 답변을 드릴 수 있어요 🎯 스크린샷이나 코드를 첨부해주세요. 에러 화면, 현재 진행 상황을 보여주시면 문제 해결이 10배 빨라집니다! 마크다운 코드 블록(```)을 활용하면 더 깔끔하게 정리할 수 있어요 📸 커뮤니티 검색을 먼저 해보세요. 같은 문제로 고민하신 분들이 이미 해결책을 찾았을 수도 있어요. 검색 후 못 찾으시면 언제든 새로 질문해주세요! 🔍 서로 도우며 함께 성장해요. 나도 모르는 건 "저도 궁금해요!"라고 댓글 달아주시고, 아는 건 적극적으로 공유해주세요. 가르치면서 더 잘하게 됩니다 💪 바이브코딩 관련 질문은 환영, 기술 세부사항은 GPT 활용! 프롬프트 작성법, AI 도구 사용법은 여기서, 복잡한 코딩 문법은 ChatGPT에게 물어보시는 게 더 빨라요 🤖 진도나 과제 관련 문의는 1:1 문의를 이용해주세요. 개인적인 학습 계획, 환불, 수강 기간 연장 등은 따로 문의해주시면 더 자세히 상담드릴게요 📞 실패 사례도 공유해주세요! "이렇게 했더니 망했어요" 같은 경험담도 다른 수강생들에게 큰 도움이 됩니다. 실패도 소중한 학습 자료예요 💡 💬 좋은 질문 예시 [진도] 2주차 5강 - React 컴포넌트 생성까지 완료 [질문] Cursor에서 버튼 컴포넌트 생성 시 에러 발생 상황: 2주차 실습 중 버튼 컴포넌트를 만들려고 하는데 프롬프트: "빨간색 버튼 컴포넌트 만들어줘" 에러 메시지: [스크린샷 첨부] 시도해본 것: GPT에게도 물어봤는데 같은 에러 발생 어떻게 해결하면 될까요?

  • flutter
  • next.js
  • cursor
  • supabase
  • 바이브코딩
하이조만장자 댓글 2 좋아요 0 조회수 52

나름 중요하다고 생각하는 강의에 대한 궁금점 질문 드려요~

해결됨

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

이정환 쌤 강의는 무조건 다 듣는 프론트 개발자 학생입니다. 근데, 궁금한점이 있어 질문드려요. 리액트 강의부터 하시고, 그다음 Next.js 강의 하시고, 다시 리액트로 이번에 강의를 하시는데, 저는 이정환 쌤 Next.js 강의를 듣고 난 후에는 리액트로는 개발을 안하고 Next.js로만 개발했거든요. 다시 리액트로 돌아간 이유에 대해 궁금해서 질문드립니다. Next.js 말고 리액트를 선택한 이유가 있을까요? Next.js에 어떤 이슈가 있는걸까요?

  • react
  • typescript
  • react-query
  • supabase
  • zustand
Ethan 댓글 2 좋아요 1 조회수 162

저 플러터 앱 만들준비 된건가요?

해결됨

비개발자 4주만에 수익화 서비스 만들기: AI 바이브코딩 웹 + 앱 ALL IN ONE

저는 지금 진도 4-1입니다 이렇게 나와요. visual studio에 !표시 있습니다. 추가로 준비해야 하나요? 강사님의 macOS와 다른 windows를 쓰고 있어서 다르게 나오는지 모르겠습니다 현재 수강 진도를 함께 알려주세요! "1주차 3강까지 완료" 또는 "2주차 실습 중"처럼 어디까지 들으셨는지 적어주시면 맞춤형 답변을 드릴 수 있어요 📚 구체적인 상황과 함께 질문해주세요! "AI가 안 된다"보다는 "Cursor에서 이런 프롬프트를 입력했는데 이런 에러가 나와요"처럼 상세하게 적어주시면 더 정확한 답변을 드릴 수 있어요 🎯 스크린샷이나 코드를 첨부해주세요. 에러 화면, 현재 진행 상황을 보여주시면 문제 해결이 10배 빨라집니다! 마크다운 코드 블록(```)을 활용하면 더 깔끔하게 정리할 수 있어요 📸 커뮤니티 검색을 먼저 해보세요. 같은 문제로 고민하신 분들이 이미 해결책을 찾았을 수도 있어요. 검색 후 못 찾으시면 언제든 새로 질문해주세요! 🔍 서로 도우며 함께 성장해요. 나도 모르는 건 "저도 궁금해요!"라고 댓글 달아주시고, 아는 건 적극적으로 공유해주세요. 가르치면서 더 잘하게 됩니다 💪 바이브코딩 관련 질문은 환영, 기술 세부사항은 GPT 활용! 프롬프트 작성법, AI 도구 사용법은 여기서, 복잡한 코딩 문법은 ChatGPT에게 물어보시는 게 더 빨라요 🤖 진도나 과제 관련 문의는 1:1 문의를 이용해주세요. 개인적인 학습 계획, 환불, 수강 기간 연장 등은 따로 문의해주시면 더 자세히 상담드릴게요 📞 실패 사례도 공유해주세요! "이렇게 했더니 망했어요" 같은 경험담도 다른 수강생들에게 큰 도움이 됩니다. 실패도 소중한 학습 자료예요 💡 💬 좋은 질문 예시 [진도] 2주차 5강 - React 컴포넌트 생성까지 완료 [질문] Cursor에서 버튼 컴포넌트 생성 시 에러 발생 상황: 2주차 실습 중 버튼 컴포넌트를 만들려고 하는데 프롬프트: "빨간색 버튼 컴포넌트 만들어줘" 에러 메시지: [스크린샷 첨부] 시도해본 것: GPT에게도 물어봤는데 같은 에러 발생 어떻게 해결하면 될까요?

  • flutter
  • next.js
  • cursor
  • supabase
  • 바이브코딩
맛있는 밤 댓글 2 좋아요 0 조회수 83

시뮬레이터가 안보여요

미해결

비전공자 혼자서 하루 만에 수익화 앱 출시하기

0:25초에서 윈도우에서는 설정을 어떻게해야하나요 시뮬레이터가 안보여요

  • flutter
  • 모바일-디자인
  • cursor
  • supabase
  • 수익화
major 댓글 1 좋아요 0 조회수 112

Replit 문의

해결됨

비개발자 4주만에 수익화 서비스 만들기: AI 바이브코딩 웹 + 앱 ALL IN ONE

Replit에서 강의대로 명령어 했는데 명령어 두번만에 agent usuage 사용되었다고 하네요 다른 계정으로 똑같이 시도 했는데 agent usuage 몇번 시도하니깐 바로 또 업그레이드 하라고 하던데 업데이트 되면서 달라진거 같습니다

  • flutter
  • next.js
  • cursor
  • supabase
  • 바이브코딩
이시욱 댓글 2 좋아요 0 조회수 91

51. (6.11) 회원가입시 프로필 정보 자동 생성하기

해결됨

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

안녕하세요! useProfileData 훅에서 프로필 데이터를 조회하는 로직이 궁금해서 질문드립니다. useProfileData에서 PGRST116 에러 코드를 확인해서 프로필을 생성하는 로직이 있는데요, fetchProfile에서 .single() 대신 .maybeSingle()을 사용하고, null이면 createProfile을 호출하는 방식이 더 직관적인 것 같은데 에러 코드를 확인하는 방식으로 구현하신 특별한 이유가 있을까요? 실무에서는 어떤 방식을 선호하시는지도 궁금합니다!

  • react
  • typescript
  • react-query
  • supabase
  • zustand
호기쿤 댓글 2 좋아요 0 조회수 92

Lovable cloud

해결됨

비개발자 4주만에 수익화 서비스 만들기: AI 바이브코딩 웹 + 앱 ALL IN ONE

안녕하세요 supabase가 없어 찾아보니 lovable cloud가 자체로 생겼더군요 이 관련 강의는 추후에 업데이트 해주시는건가요?

  • flutter
  • next.js
  • cursor
  • supabase
  • 바이브코딩
이시욱 댓글 2 좋아요 0 조회수 108

Tailwind CSS IntelliSense 작동이 안되요...

미해결

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

안녕하세요 Tailwind CSS IntelliSense 작동이 안되서 그러는데 확인해 본 결과로 index.css에서 @import "tw-animate-css"; 이거와 @layer base { * { @apply border-border outline-ring/50; } body { @apply bg-background text-foreground; } } 이 코드가 들어가면 작동을 하지 않습니다 혹시 이게 왜 그럴까요...?

  • react
  • typescript
  • react-query
  • supabase
  • zustand
박 태영 댓글 2 좋아요 0 조회수 92

onSettled와 setQueryData

해결됨

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

안녕하세요 선생님! 낙관적 업데이트(2) 강의 마지막에 onSettled를 통해 update가 종료된 후 기존 캐시 무효화 후 db에서 다시 받아와서 갱신시켜주는 로직을 작성한걸로 알고있는데 이때 onMutate 내부에서 setQueryData를 통해 별도의 업데이트된 정보를 캐시에 세팅시켜주는 로직은 필요가 없어지게 되는건가용? export function useUpdateTodoMutation() { const queryClient = useQueryClient(); return useMutation({ mutationFn: updateTodo, onMutate: async (updatedTodo) => { await queryClient.cancelQueries({ queryKey: QUERY_KEY.todo.list, }); const prevTodos = queryClient.getQueryData<Todo[]>(QUERY_KEY.todo.list); /* 이부분 */ queryClient.setQueryData<Todo[]>(QUERY_KEY.todo.list, (prevTodo) => { if (!prevTodo) return []; return prevTodo.map((item) => item.id === updatedTodo.id ? { ...item, ...updatedTodo } : item, ); }); /* //이부분 */ return { prevTodos, }; }, onError: (error, variable, context) => { if (context && context.prevTodos) { queryClient.setQueryData<Todo[]>( QUERY_KEY.todo.list, context.prevTodos, ); } }, onSettled: () => { queryClient.invalidateQueries({ queryKey: QUERY_KEY.todo.list, }); }, }); }

  • react
  • typescript
  • react-query
  • supabase
  • zustand
박선우 댓글 1 좋아요 0 조회수 147

(4.13) setQueryData 질문드립니다

해결됨

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

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

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

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

해결됨

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

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

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

카카오 SUPABASE SDK 로그인은 ?

해결됨

[플러터플로우] 실전! 앱 출시를 위한 끝장 노하우!

카카오 SUPABASE SDK 로그인 및 CLI 업로드 강의는 어떤걸 참조해야 하나요? 이것떄문에 강의 구매했는데... 뭔가 참조하여 따라하기 어렵네요

  • flutter
  • no-code
  • supabase
  • flutterflow
조윤호/James 댓글 2 좋아요 0 조회수 106

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 조회수 148

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 조회수 134

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

미해결

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

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

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

인기 태그

인프런 TOP Writers

주간 인기글