inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

묻고 답해요

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

fetch는 사용되는가

미해결

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

안녕하세요 axios가 fetch보다 편리해 보여서 거의 axios만 사용할 것 같은데, 그래도 fetch를 사용해야 하는 상황이 존재하나요? 실제 현업에서는 어떤 쪽을 더 많이 사용하나요?

  • react
  • react-router
  • redux-toolkit
  • zustand
  • react.js
JEOUNG WOOYOUNG 댓글 2 좋아요 0 조회수 102

안녕하세요 9.3 프로필 수정 기능 구현하기 질문드립니다.

미해결

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

마지막 부분인 9.5 프로필 인가부분까지 수업을 들으면서 코드를 작성했는데, ProfileDetailPage가 제대로 렌더링 되지 않아서 질문드립니다. 코드가 혹시 잘못되었을까해서 깃허브 보고 다시 확인했는데, 코드는 강의 내용이랑 맞는 것 같습니다. 뭐가 문제인지 잘모르겠어요

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

이런 플젝 만드는데 얼마나 걸리시나요?

미해결

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

강의에 관한 질문은 아니긴한데 개인적으로 궁금해서 여쭤봅니다..! 강의 설명 준비하시는 거 말고 이 정도 규모 프로젝트 만들 때 얼마나 걸리시나요??.. 사람마다 다르겠지만 대충 기간이 궁금해서요..! 불편하신 질문이었다면 죄송합니당..

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

전역상태 관리 선택 기준

미해결

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

안녕하세요. 아직 Zustand강의 까지 보지는 않았는데, 전역 상태 관리 방법으로는 Redux Toolkit, Context API, Zustand 이렇게 세 가지가 있는 것 같습니다. 결국 이 세 가지 모두 전역으로 상태를 관리한다는 점에서는 비슷해 보이는데, 나중에 제가 프로젝트를 할때 이 중에서 어떤 기준으로 선택하는 게 좋은지 궁금합니다.!

  • react
  • react-router
  • redux-toolkit
  • zustand
  • react.js
JEOUNG WOOYOUNG 댓글 2 좋아요 0 조회수 141

안녕하세요 7.4 이미지업로드구현하기2 질문드립니다.

해결됨

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

createPostWithImages에서 Promise.all로 이미지 업로드가 되는데 Promise.all은 순서 보장이 되나요?

  • react
  • typescript
  • react-query
  • supabase
  • zustand
이동훈 댓글 3 좋아요 0 조회수 135

회원가입 시 엑세스 토큰이 localStorage에 자동으로 저장이 안됩니다.

해결됨

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

현재 토큰을 제대로 받아오는 것을 확인했지만 local storage에 들어가서 확인을 해보면 아무것도 없습니다! session storage에도 확인해 봤는데 여기도 저장이 안 되어 있습니다 제가 직접 access token을 local storage에 저장하려고 시도하다가 회원가입 성공 시 data에 session이 null이 나오는걸 확인했습니다. 그래서 local storage setItem해서 저장을 할 수가 없는걸까요? authorization에 access token이 담겨오는데 왜 session에는 null이 뜨는지 궁금합니다.

  • react
  • typescript
  • react-query
  • supabase
  • zustand
다하자 댓글 2 좋아요 0 조회수 106

참고 소스 질문

해결됨

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

이번 강의를 통해 만든 소스를 github에 있나요? 있으면 링크 알려주세요.

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

react-native-screens 버전 호환 문제

미해결

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

버전 호환 문제 현재 강의 흐름대로 react-native 0.79.4 버전을 깔고 이 강의에서 npm install @react-navigation/native 과 npm install react-native-screens react-native-safe-area-context 를 그대로 실행해서 설치하면 npx pod-install ios Need to install the following packages: pod-install@1.0.9 Ok to proceed? (y) y 🔍️ Scanning for pods... 1.16.2 > pod install Found 2 modules for target mapzip2 link_native_modules! {:ios_packages=>[{:configurations=>[], :name=>"react-native-safe-area-context", :root=>"/Users/kwakori/projects/react-native/learning/mapzip2/node_modules/react-native-safe-area-context", :path=>"../node_modules/react-native-safe-area-context", :podspec_path=>"/Users/kwakori/projects/react-native/learning/mapzip2/node_modules/react-native-safe-area-context/react-native-safe-area-context.podspec", :script_phases=>[]}, {:configurations=>[], :name=>"react-native-screens", :root=>"/Users/kwakori/projects/react-native/learning/mapzip2/node_modules/react-native-screens", :path=>"../node_modules/react-native-screens", :podspec_path=>"/Users/kwakori/projects/react-native/learning/mapzip2/node_modules/react-native-screens/RNScreens.podspec", :script_phases=>[]}], :ios_project_root_path=>"/Users/kwakori/projects/react-native/learning/mapzip2/ios", :react_native_path=>"../node_modules/react-native"} Auto-linking React Native modules for target mapzip2: RNScreens and react-native-safe-area-context Framework build type is static library Configuring the target with the New Architecture [!] Invalid Podfile file: [!] /opt/homebrew/bin/node ./../node_modules/react-native/scripts/generate-codegen-artifacts.js -p /Users/kwakori/projects/react-native/learning/mapzip2/ios/.. -o /Users/kwakori/projects/react-native/learning/mapzip2/ios -t ios [Codegen] Analyzing /Users/kwakori/projects/react-native/learning/mapzip2/package.json [Codegen] Searching for codegen-enabled libraries in the app. [Codegen] The "codegenConfig" field is not defined in package.json. Assuming there is nothing to generate at the app level. [Codegen] Searching for codegen-enabled libraries in the project dependencies. [Codegen] Found react-native [Codegen] Found react-native-safe-area-context [Codegen] Found react-native-screens [Codegen] Searching for codegen-enabled libraries in react-native.config.js [Codegen] Processing FBReactNativeSpec [Codegen] Searching for podspec in the project dependencies. [Codegen] Processing rncore [Codegen] Searching for podspec in the project dependencies. [Codegen] Processing safeareacontext [Codegen] Searching for podspec in the project dependencies. [Codegen] Supported Apple platforms: ios, macos, tvos, visionos for safeareacontext [Codegen] Processing rnscreens [Codegen] Searching for podspec in the project dependencies. [Codegen] Supported Apple platforms: ios, tvos, visionos for rnscreens [Codegen] Error: Unknown prop type for "environment": "undefined" [Codegen] Done. . # from /Users/kwakori/projects/react-native/learning/mapzip2/ios/Podfile:20 # ------------------------------------------- # > use_react_native!( # :path => config[:reactNativePath], # ------------------------------------------- Couldn't install Pods. Updating the Pods project and trying again... 와 같은 에러가 발생합니다. 아무래도 버전 호환성 문제인 것 같습니다. https://github.com/software-mansion/react-native-screens/blob/main/README.md#support-for-fabric 위 문서를 참고하면 react-native-screens의 최신 버전인 4.19.0+ 는 react-native 0.81.0+ 에서만 호환된다고 하는 것 같습니다. 강의 들으시는 분들은 참고해주세요. 버전을 낮춰서 설치하시거나 하시면 정상적으로 설치되더라구요 // 아니면 혹시 그냥 react-native를 0.81.0+ 로 설치해서 강의를 들어도 문제없으려나요?

  • react-native
  • typescript
  • nestjs
  • react-query
  • zustand
재훈 댓글 1 좋아요 3 조회수 217

모달 UI 관련 질문

미해결

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

이렇게 내용이 길어져서 모달 전체 크기인 max-h-[90vh]에 도달할 경우, 저는 모달 내부에 있는 버튼이 밖으로 안튀어나가게 작동할거라고 예상했는데, 첨부한 이미지처럼 튀어나가더라고요...이런 경우는 어떻게 해결할 수 있나요?

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

tailwind css는 언제 사용되는가 또 다른 css와의 차이

미해결

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

안녕하세요. 결론부터 말씀드리면, 언제 Tailwind CSS를 사용해야 하는지 아직 감이 잘 오지 않습니다. CSS를 적용하는 여러 가지 방식을 배우긴 했지만, 리액트를 사용하다 보니 실무나 강의에서는 Tailwind CSS를 사용하는 경우가 특히 많다 는 느낌을 받았습니다. 그래서 “요즘은 거의 Tailwind가 기본처럼 쓰이는 건가?”라는 생각도 들게 됩니다. 수코딩님이 항상 말씀해 주시는 것처럼, 기술 자체보다도 어떤 상황에서 어떤 기술을 사용하는지가 더 중요하다 고 생각하고 있습니다. 그래서 단순히 “요즘 많이 쓰인다”는 이유로 선택하는 게 맞는지, 아니면 분명한 기준이 있는지 궁금해졌습니다. 죄송합니다만 아직 이해가 부족해서 질문드리고 싶습니다. Tailwind CSS는 어떤 상황에서 사용하는 것이 적절한지 실제로 실무에서 거의 고정적으로 사용되는 편인지 CSS Module, Styled Components 같은 다른 방식들은 요즘 잘 사용되지 않는지 만약 사용된다면 각각은 어떤 상황에 더 적합한지 이 부분을 비교해서 정리해 주실 수 있을지 궁금합니다. “언제 어떤 CSS 방식을 선택해야 하는가”라는 관점에서 설명해 주시면 감사하겠습니다

  • react
  • react-router
  • redux-toolkit
  • zustand
  • react.js
JEOUNG WOOYOUNG 댓글 2 좋아요 0 조회수 280

카카오 web플랫폼 등록

미해결

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

현재 카카오 개발자 페이지에서 플랫폼에 계정상태 변경 웹 훅 , 연결 해제 웹훅 , 카카오톡 공유 웹훅 이 있는데 수업에서 보여주시는게 달라서 질문드립니다 이 화면에서 계정 상태 변경 웹훅 설정을 들어가면 이 화면이 나오는데 여기서는 https 프로토콜만 사용이 가능하다고 나오는데 이 설정은 어떻게 해야 할까요? 현재 mongdb 와 그 이외에 모든 환경설정은 강의와 똑같이 했는데 카카오로그인 페이지 이동 자체가 안되서요!!

  • react
  • react-router
  • redux-toolkit
  • zustand
  • react.js
정헌수 댓글 2 좋아요 0 조회수 226

컴포넌트 그리고 폴더 구조에 대해

미해결

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

안녕하세요. 리액트를 공부하면서 컴포넌트 나누는 기준이 헷갈려서 질문드립니다. 강의에서 컴포넌트 분리에 대해 설명을 듣긴 했는데, 막상 제가 직접 코드를 짜다 보니까 어디까지 나누는 게 맞는지 감이 잘 안 옵니다. 제가 헷갈리는 부분은 이런 점들입니다. 컴포넌트는 중복되는 UI가 있을 때만 나누는 건지, 아니면 처음부터 최대한 작고 이해하기 쉬운 단위로 나누는 게 좋은 건지 잘 모르겠습니다. 또 컴포넌트 안에서 코드를 작성하다 보면 “이건 그냥 이 컴포넌트 안에 둬도 되나?” “아니면 여기서 한 번 더 분리하는 게 맞나?” 이런 판단을 어떤 기준으로 해야 하는지도 잘 모르겠습니다. 폴더 구조도 사람마다 다 달라서 어떤 구조가 좋은 구조인지, 초보자 입장인 저한테는 아직 잘 모르겠습니다 이론적으로는 이해한 것 같은데, 실제 코드에서는 이 분리가 과한 건지, 부족한 건지 판단이 잘 안 됩니다. 리액트에서 컴포넌트를 나눌 때 어떤 생각 흐름으로 판단하면 좋은지 , 알기 쉽게 설명해주시면 감사하겠습니다.

  • react
  • react-router
  • redux-toolkit
  • zustand
  • react.js
JEOUNG WOOYOUNG 댓글 2 좋아요 0 조회수 97

152강 보는중입니다. 초시계부분이구요. 넘버가 timeout을 받을수없다는 에러가 나오고 있어요

미해결

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

안녕하세요. 강의 너무 잘 보고 있습니다. 강의자님은 이 부분에 빨간줄이 안나오는데 저는 빨간줄이 나오고 있어서 문의 드립니다. 리액트는 19버젼인 것 확인 했습니다. intervalId 으로 시간 받는 부분인데요. 기능은 잘 작동하고 있지만 강사님은 안나오고 저만 나오고 있어서 문의 드립니다. 항상 감사합니다!! ㅎㅎ

  • react
  • react-router
  • redux-toolkit
  • zustand
  • react.js
면류관받는날까지# 댓글 1 좋아요 0 조회수 72

폼테그 다른 태그를 하나의 상태 객체로 묶기

미해결

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

폼을 만들 때 input, textarea, radio, checkbox 같이 태그 종류가 달라도 하나의 객체 상태로 묶어서 관리하는 방식으로 만들어 보았습니다만 실무에서나 보통은 하나씩 만드는지 아니면 이것또한 정답이 없는지 궁금합니다! 아니면 상황에 따라 상태를 나누는 기준이 따로 있는지도 궁금합니다.

  • react
  • react-router
  • redux-toolkit
  • zustand
  • react.js
JEOUNG WOOYOUNG 댓글 2 좋아요 0 조회수 73

class를 className으로 전부 수정하실 때

미해결

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

안녕하세요. class로 되어 있어서 에러가 나는 부분을 전부 className으로 수정하실 때선택할떄에 윈도우는 컨트롤+쉬프트+L을 눌르셨었나요? 그게 저는 안되서 일단 컨트롤 + D로 하나하나 선택을 했었느데요. 여러 row를 한번에 선택해서 수정할 떄에 어떤 키를 누르시는지 궁긍합니다.

  • react
  • react-router
  • redux-toolkit
  • zustand
  • react.js
면류관받는날까지# 댓글 2 좋아요 0 조회수 71

JWT에 대한 개념도 학습할 수 있나요?

미해결

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

카카오 로그인이라는 파트가 있던데, JWT 관련한 개념도 나오는지 궁금합니다.

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

수업자료 다운로드

미해결

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

수업자료는 한 번 다운받으면 다시 받을 수 없나요?

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

캐시 데이터 다루기 - 낙관적 업데이트(2)에서 질문

미해결

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

createTodo의 리턴값을 활용하면서 Todo를 생성했을 때, 캐시 무효화를 해서 데이터가 많은 경우 서버에 부하를 주는 코드를 개선했었었는데, 낙관적 업데이트2에서 데이터의 무결성을 위해 onSettled에서 queryClient.invalidateQueries 를 호출했는데 여기서는 괜찮은 걸까요?

  • react
  • typescript
  • react-query
  • supabase
  • zustand
유니크한 늑대 댓글 2 좋아요 0 조회수 88

onError 콜백에 파라미터 없음에도 추가하신 이유가 무엇인가요?

해결됨

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

인증에러처리하기1 의 10:29 에서 if (callbacks?.onError) callbacks.onError(errror); sign-in-page.tsx 에서 넘겨준 onError에는 파라미터가 없는데도 넘겨준 이유가 어떤건지 궁금합니다.

  • react
  • typescript
  • react-query
  • supabase
  • zustand
이동훈 댓글 2 좋아요 1 조회수 64

(4.13) 캐시 정규화하기 2

미해결

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

개별 캐시 데이터는 disabled 상태라 캐시를 무효화 해봤자 데이터를 다시 불러오지 않는다고 하시면서 use-upate-todo-mutation.ts 파일에서 onSettled 이벤트 핸들러를 삭제하셨습니다. 그런데 이 부분이 이해가 잘 가지 않습니다. QUERY_KEYS.todo.list를 무효화 하면 todo 목록을 가지고 오면서 개별 캐시 데이터도 todos.forEach((todo) => { queryClient.setQueryData<Todo>(QUERY_KEYS.todo.detail(todo.id), todo); }); 이렇게 다시 세팅하는거 아닌가요?

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

인기 태그

인프런 TOP Writers

주간 인기글