inflearn logo
강의

강의
N
챌린지

챌린지
멘토링

멘토링
N
클립

클립
로드맵

로드맵
지식공유

묻고 답해요

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

카카오로그인 에러

미해결

타입스크립트로 배우는 리액트(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 조회수 105

몽고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 조회수 98

섹션 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

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

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

해결됨

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

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

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

예제코드 실행

미해결

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

예제코드 다운받은거 실행시킬때는 04-04, 04-05와 같이 폴더 기준으로 다음예제 넘어갈때마다 npm install, npm run dev두개명령어 쳐서 실행시키는거 맞나요? 추가로 예제 코드에서 안하고 직접 처음부터 만들어서 하려면 처음에 했던 npm create vite@latest . 이 명령어로 하는거 맞죠?

  • react
  • react-router
  • redux-toolkit
  • zustand
  • react.js
오태연 댓글 2 좋아요 0 조회수 47

Redux 연결이 안된걸까요?

미해결

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

안녕하세요 쌤! redux 사용을 이번 예제를 통해 처음 알게되었는데요. console.log 로 찍을때는 잘 내려오던 user 정보가 redux 에서는 안찍히고 isLogin 값만 보여서요 ㅠㅁㅠ 여러번 돌려봤지만 어떤 부분에서 놓친 것인지 잘 모르겠어서 질문드립니다! zustand, immer 모두 설치 잘되었는데 연결이 안된 문제일까요?.? 카카오 구현하기 6까지 끝낸 상태이고 모든 기능은 잘 동작해요(로그인, 로그아웃, 프로필 가져오기 등) 혹시 몰라 github 링크도 첨부해봅니다! https://github.com/YounaJ00/blog

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

window 10을 사용하고 있는 학생인데 react작동안됩니다ㅜㅜ

미해결

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

window 10을 사용하고 있는 학생인데 react작동안됩니다ㅜㅜ ctrl 하고 마우스 왼쪽해도 실행이 안되네요 로딩이 오래 걸려요

  • react
  • react-router
  • redux-toolkit
  • zustand
  • react.js
구님 댓글 3 좋아요 0 조회수 71

67강 상태업데이트 강의 중 궁금한 점

미해결

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

import FirstCount from "./firstCount"; import SecondCount from "./secondCount"; import { useState } from "react"; export default function Main() { const [count, setCount] = useState(0); const handleSetCount = () => { setCount((prev: number) => prev + 1); }; return ( <> <h1>Main Component</h1> <FirstCount count={count} setCount={handleSetCount} /> <SecondCount count={count} setCount={handleSetCount} /> </> ); } import type { MouseEventHandler } from "react"; interface FirstCountProps { count: number; setCount: MouseEventHandler<HTMLButtonElement>; } export default function FirstCount({ count, setCount }: FirstCountProps) { return ( <> <h1>firstCount Component</h1> {count} <button onClick={setCount}>increase</button> </> ); } import type React from "react"; interface SecondCountProps { count: number; setCount: React.MouseEventHandler<HTMLButtonElement>; } export default function SecondCount({ count, setCount }: SecondCountProps) { return ( <> <h1>secondCount Component</h1> {count} <button onClick={setCount}>increase</button> </> ); } 맨 위에 코드가 부모컴포넌트인데 부모컴포넌트에서 증가 함수를 정의하고 그 아래에 props로 내려주는 패턴은 잘 쓰이지 않는 패턴인가요? 강의에서는 각 자식 컴포넌트에서 카운트 증가 로직이 있어서 중복되는거 같아요 그래서 부모에 하나로 정의하고 props로 내려주었는데 어느게 맞는 패턴인가요?

  • react
  • react-router
  • redux-toolkit
  • zustand
  • react.js
모카 댓글 3 좋아요 0 조회수 95

19강 게시물 수정 기능 강의 질문입니다

미해결

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

export const requireAuth = () => { const token = sessionStorage.getItem("access_token"); if (!token) { return redirect("/auth/login"); } }; export const fetchPostModify = async ({ params }: LoaderFunctionArgs) => { try { const auth = requireAuth(); if (auth) return auth; const { data } = await axiosInstance.get(`/posts/${params.id}`); return data; } catch (e) { console.error(e); } }; fetchPostModify에서 requireAuth를 import 해서 reponse를 리턴해주고 있는데 여기서 어떤식으로 auth를 리턴시켜 requireAuth를 통해 redirect가 되는건지 조금 헷갈립니다

  • react
  • react-router
  • redux-toolkit
  • zustand
  • react.js
홍재훈 댓글 2 좋아요 0 조회수 48

zustand에 대한 질문입니다

미해결

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

zustand에서 값을 가져올때 useStore((state) => state...) 이거랑 useStore.getState()... 이거랑 어떤 차이인가요? 전자가 컴포넌트안에서 렌더링할때 가져오는 방식이고 후자는 단순히 현재시점의 스냅샷을 가져오는 건가요?

  • react
  • react-router
  • redux-toolkit
  • zustand
  • react.js
홍재훈 댓글 2 좋아요 0 조회수 78

19강 몽고db관련 오류입니다

미해결

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

(사진)

  • react
  • react-router
  • redux-toolkit
  • zustand
  • react.js
홍재훈 댓글 2 좋아요 0 조회수 53

158번 강의 질문입니다

미해결

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

todoListItem을 React.memo로 메모이제이션 했음에도 todo를 추가했을때 리렌더링이 되는데 이때 todo 자체는 변한것이 아니고 todolist 컴포넌트에서 map으로 쓰고있기 때문에 전달받은 props가 변해서 리렌더링이 된것은 아니다 라고 하셨는데 그러니까 리스트아이템에서는 todo 배열 전체를 받은것이 아니고 todolist 컴포넌트에서 map으로 배열의 요소(객체)를 todolisitem에서 props로 전달받았기때문에 todo가 변한것이 아니다 이렇게 이해했는데 정확한 이해인지 궁금합니다

  • react
  • react-router
  • redux-toolkit
  • zustand
  • react.js
홍재훈 댓글 2 좋아요 0 조회수 60

"!" 은 어떤 문법인가요?

미해결

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

비제어 컴포넌트 - 라디오 수업 2:40 경 const formData = new FormData(formElRef.current!); 에서 !이 null 아님을 보장해 주신다 했는데 의미를 자세히 알고 싶은데 뭐라고 검색해서 찾아볼수 있을까요?

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

선생님 상태변경할때 질문

미해결

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

그 선생님은 지금 문제에서 상태 변경할떄 setCount((count) => count +1); 로 해주셨는데 지금 상황에서는 그냥 setCount((count+1)) 로 해도 문제 없지않나용? 버튼 한번 눌렀을때 count+1 되는건 한번이니깐..? 연속으로 +1 증가하는 로직이 아니라서 이렇게 생각되는데 혹시 제가 뭘 놓치고있는건가요?

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

React.lazy()

미해결

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

서비스를 보다보면 상품 리스트의 "더보기"나 상품 상세 설명에서의 "더보기" 와 같은 기능이 있는데, 이럴 때 React.lazy() 가 사용되는 건가요?

  • react
  • react-router
  • redux-toolkit
  • zustand
  • react.js
챙준 댓글 2 좋아요 0 조회수 68

Context API 리랜더링 방지를 위한 Memoization에 대한 질문

미해결

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

계속해서 학습을 진행중인데, 함수값을 넘길때에는 useCallback을 사용해야한다는 것으로 알고있었는데, >>밑에는 실제 강의 중 공유해 주신 ContextProvider 안에 함수들 const increment = () => { setCount((count) => count + 1); }; const decrement = () => { setCount((count) => count - 1); }; const reset = () => { setCount(0); }; const memoization = useMemo(()=>({ increment, decrement, reset }),[]); >>제가 생각했던 방식 const increment = useCallback(() => { setCount((count) => count + 1); },[]); const decrement = useCallback(() => { setCount((count) => count - 1); },[]); const reset = useCallback(() => { setCount(0); },[]); const memoization = useMemo(()=>({ increment, decrement, reset }),[increment, decrement, reset]); 저는 밑에 memoization 변수를 빼고 바로 useCallback을 이용해서 객체값으로 넘겨주는 식으로 작성해야 한다고 생각을 했었습니다. 코드를 작성하는 방법에는 정답은 없지만, 당장은 기본에 입각한 학습을 해야하기에 어떤 방법이 조금 더 효율적인지 여쭤보고 싶습니다.

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

퀴즈 활성화 안됨

미해결

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

강의를 다 들었는데 섹션4의 퀴즈가 활성화 되지 않아 수료증을 못받고 있습니다 ㅠㅠ 혹시 뭐 빠트렸나 해서 섹션 4번 강의 다시 다 들었는데도 안되네요.. 확인부탁드립니다

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

styled-components 관련 질문

미해결

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

안녕하세요 css 쪽 학습 중에 있는데, style-component에 작성중인데 강사님의 화면과 다르게 실행은 제대로 되나 아래 화면과 같이 그냥 문자열처럼 갈색 표시가 되는데 그래서 css 문구 추천이 안되는 것 같은데 어떤 문제인가요?

  • react
  • react-router
  • redux-toolkit
  • zustand
  • react.js
유키 댓글 2 좋아요 0 조회수 82

인기 태그

인프런 TOP Writers

주간 인기글