inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

묻고 답해요

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

수업 자료 없나요?

해결됨

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

전 강의들은 PDF으로 있었는데 이번에는 수업자료가 없는거 같은데 맞나요?ㅠ

  • react
  • typescript
  • react-query
  • supabase
  • zustand
kangmin kim 댓글 2 좋아요 0 조회수 91

이미지가 출력되지 않아요

미해결

React 완벽 마스터: 기초 개념부터 린캔버스 프로젝트까지

이미지 넣는 방법을 알려주신대로 적용했더니 출력 화면에 이미지가 나타나지 않습니다. F12 콘솔 화면에 이러한 오류가 뜨는데 어디가 잘못된건지 모르겠네요 각종 버전도 강의와 일치하고요, index.css 와 App.css는 비어있습니다.

  • react
  • React-Context
  • react-router
  • tailwindcss
  • react-query
댓글 2 좋아요 1 조회수 130

11강 수업자료가 수업영상입니다.

해결됨

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

안녕하세요. 11강 수업자료를 다운로드 받아보니 해당 수업영상입니다. 괜찮을까요?

  • react
  • typescript
  • react-query
  • supabase
  • zustand
hanbrang 댓글 1 좋아요 0 조회수 84

프로필 수정시 포스트변경

해결됨

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

프로필 수정시 자신이 작성한 PostItem 의 이미지, 닉네임도 같이 변경이 되어져야 하지 않을까요? 새로고침해야 변경이 되어성., 프로필 버튼은 잘 변경이 됩니다.

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

강의와 만들어진 코드가 달라요

미해결

React 완벽 마스터: 기초 개념부터 린캔버스 프로젝트까지

좌측이 강의 코드, 우측이 강의 보며 10강까지 진행한 코드 결과입니다. 우측, 만들어진 코드를 보니 ReactDom, <React.~~> 등이 입력되어있지않아요. 무슨 문제인걸까요?

  • react
  • React-Context
  • react-router
  • tailwindcss
  • react-query
ㅇㅇ 댓글 3 좋아요 0 조회수 119

hooks 파일 분리 질문 드립니다.

해결됨

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

안녕하세요, 강의 잘 보고 있습니다. 저는 1년 차 백엔드 개발자 입니다. 미니 프로젝트에 프론트로 투입이 되어 zustand와 tanstack 학습을 위해 강의를 듣게되었습니다. 선생님께서 hook을 작성하실 때 함수를 각각 별도 파일로 분리하는 방식으로 진행하셨는데, 실무에서도 보통 함수마다 파일을 나누는 방식으로 진행하나요? 아니면 도메인 단위로 묶어서 하나의 파일안에 관련함수들을 관리하시는지 궁금합니다. 선생님 강의 덕분에 쉽고 재밌게 학습하고 있습니다. 감사합니다 : )

  • react
  • typescript
  • react-query
  • supabase
  • zustand
조하영 댓글 2 좋아요 1 조회수 131

소셜 로그인 질문

해결됨

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

(6. 5) 소셜 로그인 구현하기 부분 보고 질문 드립니다. 현재는 사전에 자신 Github의 OAuth 정보를 입력해야 로그인 되는 것으로 보입니다. 혹시 이 정보를 사전에 등록하지 않고, github 로그인 버튼을 눌렀을 때, 아이디 비밀번호를 입력해, 그 때 인증을 유도하는 방법은 없나요?? 각기 다른 사용자들이 이 정보를 매번 등록할 수는 없지 않을까 싶어서 그렇습니다 !

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

타입스크립트 버전 선택 안되시는분

미해결

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

7:33 초 타입스크립트 버전 선택 ctrl + shift + p 입력후 select type 로 하면 검색 결과가 안나오고 TypeScript: Select 검색해야 버전선택이 가능하니 안되시는분 참고하시길.. 처음 하는 분들은 안되고 한번 검색한 적이 있는경우 최근에 사용한 항목으로 검색이 되는듯하네요..

  • react
  • typescript
  • react-query
  • supabase
  • zustand
김주원 댓글 1 좋아요 1 조회수 110

안드로이드 폰과 PC에서 테스트할때 화면 안보임과 오류 문의

미해결

아바타 커뮤니티앱 만들기 (React Native Expo)

일단 위 화면까지는 PC에서 나오는데, Development servers에 링크를 클릭하면 아무 반응이 없는데, 어떻게 해야하는지 문의드립니다. 그리고, 실제 안드로이드 폰에서 테스트시에도, 아래와 같이 홈화면에 아무것도 나오지 않고, 하단 메뉴만 노출되고, 내 프로필을 클릭하면 하단 이미지 두번째처럼 오류가 나고 있습니다. 어떻게 해결해야하는지 문의드립니다.

  • react-native
  • typescript
  • expo
  • react-hook-form
  • react-query
Ethan 댓글 1 좋아요 0 조회수 152

tsconfig.app.json에서 에러발생

해결됨

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

안녕하세요 선생님이 shadcn을 설치하고 있는데요 tsconfig.app.json에서 위와 같은 에러가 발생합니다. 혹시 몰라서 선생님이 올려두신 자료로 해봤지만 똑같네요... 그냥 "ignoreDeprecations": "6.0" 이걸 추가할까요?

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

useSignInWithPassword에 넘기는 콜백 VS mutate의 두번째 인자 사용

해결됨

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

안녕하세요, 선생님. 강의 잘 듣고 있습니다:) 먼저 클린코드 작성 방법까지 알려주시면서 생각없이 따라 치지 않게 해주셔서 감사합니다. 이번 챕터에서 useSignInWithPassword 에 넘기는 콜백을 통해 성공, 에러 등의 처리를 진행하셨습니다. 이걸 보고 이전에 진행했던 프로젝트 리팩토링 부분이 생각나서 잠시 보고왔는데, 당시에는 mutate 함수에서 자체적으로 제공하는 두번째 인자로 콜백을 넘겨주는 기능을 활용했더라구요. mutate: (variables: TVariables, { onSuccess, onSettled, onError }) => void 선생님이 알려주신 방식과 이 방식의 차이점을 알고 싶습니다. 그리고 차이가 없다면 어떤 방식이 조금 더 효율적일지 선생님 의견이 궁금합니다. 이 방식을 사용했을 때 콜백 타입 정의는 제대로 이루어집니다. 다만, 이렇게 하면 협업 시 코드 스타일 통일이 안될 것 같다는 생각이 들긴 합니다. 읽어주셔서 감사합니다.

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

리액트 컴포넌트 분리 기준

해결됨

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

안녕하세요! 한입 타입스크립트부터 강의 잘 듣고 있습니다. 현재 퍼블리셔로 일하고 있는데요, 선택자형 CSS( .container .section { ... } ) 방식에 익숙하다 보니, reset-password 와 forget-password 처럼 UI가 거의 동일한 페이지에서 쓰이는 컴포넌트들을 분리해서 쓰고 싶다는 생각이 듭니다. 예를 들어, function PageTitle({ children }: { children: ReactNode }) { return <div className="text-xl font-bold">{children}</div>; } 이런 식으로 스타일 관점에서 컴포넌트를 분리하는 것 은 리액트 환경에서는 지양되는 방식인지 궁금합니다.

  • react
  • typescript
  • react-query
이민혁 댓글 2 좋아요 0 조회수 193

react-native-fast-image는 react 19 버전에서 설치가 안되나요?

미해결

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

react 19 버전에 대한 관련 이슈 도 있더라구요 버전을 낮추려고 해도 3년 전 업데이트가 가장 최근 거라서 이것도 아닌 거 같아서.. 강의에서는 잘 설치되는 것 같은데 어떻게 해야할까요? yarn으로 하셨던데 npm으로 하는 것과 차이가 있는 걸까요? 아니면 그냥 npm install react-native-fast-image --legacy-peer-deps 를 사용하는 게 나을까요?

  • react-native
  • typescript
  • nestjs
  • react-query
  • zustand
oridori2705 댓글 2 좋아요 0 조회수 265

어플리케이션 테스트

해결됨

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

안녕하세요 강사님 강의를 열심히 수강하고 있는 학생입니다. 백엔드 개발자인데 프론트도 배워볼까 하다가 강사님의 강의가 눈에 들어와 열심히 수강중입니다 😃 백엔드에서는 TDD와 같은 방법으로 어플리케이션 테스트를 많이 하는데 이런 리액트 앱같은 경우에는 테스트를 어떻게 하나요? 특히 실무에서는 어떻게 테스트 하는지 궁금합니다. tanstack-query같은 로직적인 부분만 테스트 UI요소들까지 로드해서 렌더링 시 정상 동작하는지 테스트 통합테스트 사람이 일일이 눌러가며 테스트 어떤식으로 테스트하는지 궁금해서 남겨봅니다 감사합니다 😃

  • react
  • typescript
  • react-query
  • supabase
  • zustand
서동성 댓글 1 좋아요 0 조회수 90

iOS 빌드 후 실기기에서 앱 시작

미해결

아바타 커뮤니티앱 만들기 (React Native Expo)

강사님 해결 되었습니다! 글 삭제가 안보이네요..

  • react-native
  • typescript
  • expo
  • react-hook-form
  • react-query
freshour 댓글 1 좋아요 1 조회수 129

오타 찾았어요

해결됨

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

[2:10] zotai 가 아니고 jotai 인거 같아요.

  • react
  • typescript
  • react-query
  • supabase
  • zustand
굿데이 댓글 2 좋아요 0 조회수 97

12.1강 강의 노트 vercel.json 누락(?)

해결됨

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

강의 하단에 vercel.json 내용이 담긴 노트가 안보이는 것 같은데 누락 된 것이 아닌가 싶어서 Q&A 남깁니다! { "rewrites": [ { "source": "/(.*)", "destination": "/" } ] }

  • react
  • typescript
  • react-query
  • supabase
  • zustand
햄굴이 댓글 1 좋아요 0 조회수 94

10.7강 취소 버튼 렌더링 조건 오류

미해결

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

강의에서 comment-editor.tsx 의 취소 버튼을 조건부 렌더링하는 코드를 수정하는 과정에서 아래와 같은 조건을 사용하고 있는데요. 이렇게 되면 props.type === "REPLY" 일때만 의도대로 동작하고, props.type === "EDIT" 일때는 취소 버튼이 렌더링 되지 않습니다. {props.type === "EDIT" || (props.type === "REPLY" && ( <Button disabled={isPending} variant={"outline"} onClick={() => props.onClose()} > 취소 </Button> ))} 아래와 같이 렌더링 조건 부분을 괄호로 감싸주면 의도대로 동작하도록 수정됩니다! {(props.type === "EDIT" || props.type === "REPLY") && ( <Button disabled={isPending} variant={"outline"} onClick={() => props.onClose()} > 취소 </Button> )}

  • react
  • typescript
  • react-query
  • supabase
  • zustand
햄굴이 댓글 1 좋아요 1 조회수 81

useSignInWithPassword는 왜 mutaitions에 들어가나요?

해결됨

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

안녕하세요 좋은강의 감사합니다. 로그인의 비동기 관리 함수인 useSignInWithPassword 가 왜 mutations에 속하는지 궁금해서 질문남깁니다. 데이터를 전혀 변경하는게 없는 로그인처리인데 왜 mutations에 두셨는지 궁금합니다.

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

깃에 소스코드를 찾을 수 없습니다.

미해결

Next + React Query로 SNS 서비스 만들기

36강을 보고 소스코드를 가져오려고 하는데 깃에 src/app/(beforeLogin)/@modal/(.)i/flow/signup/page.tsx 파일을 업데이트하려고하는데 깃에는 강의와 다른 코드가 올라와있습니다. 3-1 코드에도 그렇고 완성 코드도 <난 가로채기지롱> 이 코드만 나와있는데 어디서 찾을 수 있나요?

  • react
  • next.js
  • react-query
  • next-auth
  • msw
김영제 댓글 2 좋아요 0 조회수 161

인기 태그

인프런 TOP Writers

주간 인기글