inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

묻고 답해요

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

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

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

해결됨

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

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

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

소스코드가 강의 순서랑 다른가요?

미해결

맛집 지도앱 만들기 (React Native & NestJS)

❗ 질문 작성시 꼭 참고해주세요 에러 메세지에서 단서를 찾을 수 있는 경우가 많습니다. 에러 메세지를 읽고 한번 검색해보시는것을 추천드립니다. 질문글을 작성하실때는, 현재 문제(또는 에러)와 코드나 github 을 첨부해주세요. 개발중인 OS, ReactNative, Node 버전 등의 개발환경 을 알려주셔야합니다. 에러메세지는 일부분이 아닌 전체 상황을 올려주세요. 일부만 보여주시면 답변이 어렵습니다. (에러 일부만 자르거나 일부만 복사하지말아주세요 ) 8-8 듣고 있는데 다크모드에서 전체적으로 코드 변경을 하길래 참고하려고 깃에서 lecture8-8을 열었는데 약간 코드 구성이 다른거 같아요.

  • react-native
  • typescript
  • nestjs
  • react-query
  • zustand
수강생 댓글 2 좋아요 0 조회수 121

카카오로그인 에러

미해결

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

AxiosError: Request failed with status code 401 at settle (/Users/sujin/Development/_00_inflearn/code/SECTION19(finalProject)/backend/node_modules/axios/dist/node/axios.cjs:2106:12) at IncomingMessage.handleStreamEnd (/Users/sujin/Development/_00_inflearn/code/SECTION19(finalProject)/backend/node_modules/axios/dist/node/axios.cjs:3491:11) at IncomingMessage.emit (node:events:531:35) at endReadableNT (node:internal/streams/readable:1698:12) at process.processTicksAndRejections (node:internal/process/task_queues:90:21) at Axios.request (/Users/sujin/Development/_00_inflearn/code/SECTION19(finalProject)/backend/node_modules/axios/dist/node/axios.cjs:4731:41) at process.processTicksAndRejections (node:internal/process/task_queues:105:5) at async /Users/sujin/Development/_00_inflearn/code/SECTION19(finalProject)/backend/routes/auth.js:77:20 카카오 로그인 버튼 클릭후 동의하기 누른 다음 이런 에러가 뜹니다. .env 파일은 이렇게 입력되어있고요. JWT_SECRET=sucoding!@34 KAKAO_REDIRECT_URI=http://localhost:4000/auth/kakao/callback FRONTEND_URL=http://localhost:5173 JWT_ACCESS_EXPIRES_IN=1h JWT_REFRESH_EXPIRES_IN=7d 무엇이 문제일까요?

  • react
  • react-router
  • redux-toolkit
  • zustand
  • react.js
hicy3nh 댓글 3 좋아요 0 조회수 104

몽고DB 연결이 안됩니다.

미해결

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

이런 에러가 계속 뜨고 있습니다. MONGODB_URI=mongodb+srv://admin:qwe123!!@cluster0.eazdtgs.mongodb.net/react_blog?appName=Cluster0 .env 파일의 mongodb 넣는 곳입니다. 첫 clustor0 을 만들고 다른 에러가 나서 terminate 하고 새로 만들어서 한것입니다. 무엇이 문제일까요?

  • react
  • react-router
  • redux-toolkit
  • zustand
  • react.js
hicy3nh 댓글 3 좋아요 0 조회수 97

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

해결됨

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

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

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

섹션 19에 백엔드 부분 몽고DB 연결이 계속 끈깁니다.....

미해결

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

따로 몽고 DB URL로 하는 connect는 잘됬습니다만, 백엔드 소스를 동작 시켯을때에는 그 URL 로 연결시에 저렇게 failed가 뜨는데... 이미 몽고DB에 아이피도 0.0.0.0/0해준상태입니다. 혹시 뭐가 문제일가요?...

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

최종 예제 코드

미해결

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

예제 코드는 한 강좌 후 최종 소스가 아니라 강좌시작 하기전 기초 소스 일까요? 예를 들어 134강의 경우 10-10 소스인데 예제코드 소스를 보면 jsx 정보 정도만 들어 있습니다. 다른 강좌도 마찬가지로 기본 틀만 있고 강좌에 나온 파일 조차 만들어 지지 않은 경우가 많습니다. 수업후 최종 소스도 받을수 있을까요?

  • react
  • react-router
  • redux-toolkit
  • zustand
  • react.js
신박한 댓글 2 좋아요 0 조회수 49

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

useState 훅

미해결

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

const [count,setCount] = useState(0); 선언되어 있을때 ()=>setCount(count+1); (count)=>setCount(count +1); 강의에서는 2번 처럼 사용 하던데 1번 처럼 사용해도 상관없나요? 차이가 있나요?

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

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

(4.13) setQueryData 질문드립니다

해결됨

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

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

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

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

해결됨

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

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

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

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

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

prettier

미해결

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

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

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

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

network 탭 리퀘스트 관련 질문

미해결

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

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

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

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

해결됨

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

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

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

인기 태그

인프런 TOP Writers

주간 인기글