묻고 답해요
161만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
미해결따라하며 배우는 노드, 리액트 시리즈 - 레딧 사이트 만들기(NextJS)(Pages Router)
context에서 useEffect 선언 부분 질문 있어요.
AuthProvider에서 useEffect를 추가해서 loadUser가 호출되도록 해주었는데 모든 페이지 접근시 2번씩 호출되는 원인이 무엇일까요?// app.tsx <AuthProvider> <Component {...pageProps} /> </AuthProvider> // AuthProvider useEffect(() => { async function loadUser() { try { const res = await axios.get("/auth/me"); dispatch("LOGIN", res.data); } catch (error) { console.log(error); } finally { dispatch("STOP_LOADING"); } } console.log("loadUser"); loadUser(); }, []);그리고 커뮤니티 생성 페이지에서는 getServerSideProps를 선언해두었기 때문에 여기서도 /auth/me api 를 호출해주어서 결국 커뮤니티 생성 페이지에서만 총 3번이 호출되고 있어요.제가 잘못 구현한 것일까요?정리하자면,1. 현재 코드에서는 loadUser() 메서드가 1회만 호출되어야 할 것 같은데, 2번 호출되는 이유는 무엇인지?2. 커뮤니티 생성 페이지에서는 /auth/me api를 3번 호출하고 있는데, 횟수를 줄일 수 있는지? (이건 url 직접 입력해서 들어가지 않으면 1회만 호출할 것 같긴 하네요.)서버 로그입니다.(각각 커뮤니티 생성 페이지, 로그인 페이지)
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
속성 인식 안되고 텍스트로 인식될 때
css배우기 예제 실습 중에 질문이 생겼습니다! <link href="./02-signup.css" 까지 연결하고 난 이후에, tㅓㄴ생님께서 rel 입력하신 것처럼 바로 아래에 자동으로 속성 연결할 수 있는 리스트들이 안 뜨고, 그냥 흰색으로 텍스트로 인식되는 것 같아요! 이럴 때는 어떻게 해야하나요?ㅠㅠ 선생님께서 작성하신 코드랑 똑같이 작성했습니다!
-
미해결Next + React Query로 SNS 서비스 만들기
useQuery와 redux-toolkit은 같이 사용해도되나요?
[제로초 강좌 질문 필독 사항입니다]질문에는 여러분에게 도움이 되는 질문과 도움이 되지 않는 질문이 있습니다.도움이 되는 질문을 하는 방법을 알려드립니다.https://www.youtube.com/watch?v=PUKOWrOuC0c0. 숫자 0부터 시작한 이유는 1보다 더 중요한 것이기 때문입니다. 에러가 났을 때 해결을 하는 게 중요한 게 아닙니다. 왜 여러분은 해결을 못 하고 저는 해결을 하는지, 어디서 힌트를 얻은 것이고 어떻게 해결한 건지 그걸 알아가셔야 합니다. 그렇지 못한 질문은 무의미한 질문입니다.1. 에러 메시지를 올리기 전에 반드시 스스로 번역을 해야 합니다. 번역기 요즘 잘 되어 있습니다. 에러 메시지가 에러 해결 단서의 90%를 차지합니다. 한글로 번역만 해도 대부분 풀립니다. 그냥 에러메시지를 올리고(심지어 안 올리는 분도 있습니다. 저는 독심술사가 아닙니다) 해결해달라고 하시면 아무런 도움이 안 됩니다.2. 에러 메시지를 잘라서 올리지 않아야 합니다. 입문자일수록 에러메시지에서 어떤 부분이 가장 중요한 부분인지 모르실 겁니다. 그러니 통째로 올리셔야 합니다.3. 코드도 같이 올려주세요. 다만 코드 전체를 다 올리거나, 깃헙 주소만 띡 던지지는 마세요. 여러분이 "가장" 의심스럽다고 생각하는 코드를 올려주세요.4. 이 강좌를 바탕으로 여러분이 응용을 해보다가 막히는 부분, 여러 개의 선택지 중에서 조언이 필요한 부분, 제 경험이 궁금한 부분에 대한 질문은 대환영입니다. 다만 여러분의 회사 일은 질문하지 마세요.5. 강좌 하나 끝날 때마다 남의 질문들을 읽어보세요. 여러분이 곧 만나게 될 에러들입니다.6. 위에 적은 내용을 명심하지 않으시면 백날 강좌를 봐도(제 강좌가 아니더라도) 실력이 늘지 않고 그냥 코딩쇼 관람 및 한컴타자연습을 한 셈이 될 겁니다. 수업내용과 관계없이 궁금해서 질문드립니다.두개를 같이 사용했을 때 안 좋은 점이라던지 한가지만 사용해야된다면 그 이유가 궁금합니다.
-
해결됨Next + React Query로 SNS 서비스 만들기
redirect를 false하는 이유가 서버쪽을 끈다 하였는데
이게 배포 지금 단계에서만 이렇게 하는 건가요?추후 강의에서 백엔드 완료 후 DB랑 연결하면 켜주는 건가요? 배포할 때도 키고요?
-
미해결Next + React Query로 SNS 서비스 만들기
타입스크립트
1분13초에 user 인터페이스를 확인하시던데 그런 인터페이스가 있는지와 어떻게 보시는지 팁이있을까요?
-
미해결Next + React Query로 SNS 서비스 만들기
sever Actions 사용하기 강좌 중 회원가입 양식 post 요청 응답없는 오류
서버 컴포넌트에서 Server Actions 사용하기 부분 수강 중에 오류가 발생하여 질문드립니다!회원가입 양식 작성 후 form action 요청 시 response에 아무런 응답이 없는데 원인을 모르겠습니다.. 터미널에서 아래와 같은 내용이 뜨긴 해요.저는 localhost:3002번으로 열었습니다.
-
미해결처음 만난 리액트(React)
그대로 넣으면 map을 찾지 못한다는 오류가 나옵니다
- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요.이런 오류가 나오면서 따로 실행이 되지 않습니다
-
미해결파이썬/장고 웹서비스 개발 완벽 가이드 with 리액트 (장고 4.2 기준)
channels with uvicorn
안녕하세요 선생님강의도 둘러보고, 질문게시판도 찾아보고 며칠동안 시도를 해보다 개발 중 풀리지 않는 부분이 있어 질문을 드리려합니다.(강의와 연관성이 있을지 모르겠습니다만 질문드려봅니다) 일단 현재 gunicorn의 worker로 uvicorn을 사용하는 환경을 구성하였고, 이에 따라 병렬 + 비동기 처리가 가능해진 상황에서 websocket을 활용해보려는 시도 중에 있습니다. session time이 만료되면 웹소켓을 활용하여 브라우저에 시그널을 주려고 하는데요,session관리는 redis로 구성하였고channels와 uvicorn을 조합하여 웹소켓을 관리하려 시도해보고 있습니다. 나름 uvicorn을 활용하여 디버깅 환경도 맞춰 놓았고, whitenoise를 활용하여 static 파일의 서빙도 해결해놓은 상태입니다. 기존 선생님의 웹소켓 강의가 daphne으로 구축되어있는 것으로 파악이 되어 별도로 강의를 수강하진 않았습니다만, 채팅이 아닌 양방향 통신을 위한 웹소켓의 활용에 channels + redis + uvicorn 조합이 어떤지에 대한 견해를 여쭙고 싶습니다. 그리고 로그인 이후 home 앱에 들어왔을때 웹소켓을 최초로 열려고 하는데 (세션은 그 전에 생성됩니다) socket 경로인 ws://127.0.0.1:8000/ws/session_expiry/ 경로를 찾을 수 없다는 문제가 계속 되고 있습니다.이에 대한 해결 법도 궁급합니다. 대략적인 셋팅 화면 캡쳐해서 올립니다. settings 구조config.local (테스트 과정이라 local에만 있습니다, WSGI_APPLICATION은 base에 선언되어있습니다)config.asgi 앱/routing 파일앱/consumers 파일웹소켓 관련 js파이참에서는 NotImplementedError: subclasses of LazyObject must provide a _setup() methodINFO: connection openINFO: connection closed요렇게 에러가 뜹니다. 혹 channels 강의를 들으면 알 수있는 부분이라면 알려주시면 수강할 수 있도록 하겠습니다! 항상 감사드립니다 선생님!
-
해결됨Next + React Query로 SNS 서비스 만들기
6:45쯤에 서버포트가 9090인 것에 대해 질문있습니다.
해당 포트가 9090인지 아닌지 어떻게 알 수 있나요? 어떤 환경이든 기본값이 9090인 것인가요?보통 코드 실행할 때 클라이언트 로컬호스트 번호는 3000인 것처럼요?그런데 실습에서 3000이 아니라 3001로 실행된것처럼 서버포트가 달라질 수도 있을까요? 그럴 때는 어떻게 확인해야하죠?
-
미해결Next + React Query로 SNS 서비스 만들기
docker 이미지로 배포시 phase별 환경 설정 로드
안녕하세요.강의 잘 듣고 업무에 활용 중 입니다.감사합니다.업무에 활용 중 문의사항이 있어서 질문 드립니다.next.js 문서를 참고하여 docker 이미지로 next.js application을 배포 했습니다.https://nextjs.org/docs/app/building-your-application/deploying#docker-image프로젝트 특성 때문에하나의 docker 이미지가 phase마다 동일하게 사용이 되는데요.phase별로 환경설정 값들이 달라서 .evn.dev, .env.beta, .env.real등으로 사용을 하고 싶은데요.server가 로드될때 .env.[phase] 를 로드하는 방법에 대해 알고 싶습니다.가능하면 next.js가 지원하는 방법으로 구현을 했으면 싶은데요.가이드를 읽어봐도 이해가 잘 안되어서 문의 남깁니다.https://nextjs.org/docs/pages/building-your-application/configuring/environment-variables감사합니다.
-
미해결Next + React Query로 SNS 서비스 만들기
msw로 Front 미리 만들어두고, 백앤드개발자가 API 만들어주면 나중에 교체하는건에 대해서 질문 있습니다.
msw로 Front에서 미리 만들때 요령이 있나요? 백앤드개발자와 api로 전달 될 값을 json으로 주겠다, 배열로 주겠다, 스트링값으로 주겠다 확정을 짓고 msw를 만들어서 작업해야 하는건가요?msw에서 json으로 만들때 데이터의 구성요소들을 제가 작업한것과 다르게 배열로 준다거나 json안에 데이터의 구조가 예상과 다르게 주면 그에따라 수정이 너무 많이 생길 거 같은데 제가 너무 쓸데없는 걱정하는건가요?
-
미해결처음 만난 리액트(React)
섹션2 리액트 가져오기에서 react@17 말고 18을 불러와도 상관없나요?
안녕하세요! 실습을 하던 도중 react@17 을 가지고 오는 것을 알게되었습니다! 현재 react@18도 나온 것 같은데 17로 실습하는게 나은지 18로도 해도 되는건지 여쭤보고 싶었습니다. 밑에 처럼 바꿔도 되는걸까요?<!-- 리액트 가져오기 --> <script src="https://unpkg.com/react@18/umd/react.development.js" crossorigin></script> <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js" crossorigin></script> <!-- 리액트 컴포넌트 가져오기 --> <script src="MyButton.js"></script>
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
똑같이 따라쳤는데 빨간 밑줄이 생겨요
https://www.inflearn.com/questions/949944위 질문 올리신 분과 완전 똑같은 상황인데멘토님 댓글 보고 수정해봤는데도 해결되지 않네요ㅠㅠ..수업과 코드가 똑같은데 왜 저만 이런 에러가 발생하는지 원인이 궁금하고 해결법도 알고 싶습니다!!
-
미해결Next + React Query로 SNS 서비스 만들기
혹시 PostForm 만들기에서 typescript 웹스톰에서type 추론해서 자동으로 들어가는거요,
에러 내용은 아닌데 PostForm만들기 강의 4분쯤에 typescript 쓸때 타입 웹스톰에서 자동으로 추론해서 들어간다고 하신거요,혹시 VScode 에서도 플러그인 있다고 하셨는데 어떤걸까요?? 찾아봤는데 모르겠어서요.
-
해결됨파이썬/장고 웹서비스 개발 완벽 가이드 with 리액트 (장고 4.2 기준)
mac에서 파이참 파이썬 인터프리터 설정 질문입니다.
안녕하세요 항상 좋은 강의 감사드립니다.현재 저는 아나콘다 가상환경을 사용중이고강의와 첨부 드린 사진 처럼 환경 세팅하였습니다.문제는 설정 후 코드 나 파이참 내에 아이콘을 확인해보면django를 찾을 수 없다고 표시되어 있어서요..이유를 알수있을까요? 혹은 인터프리터 설정의 문제가 아닌걸까요?인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요.
-
해결됨Next + React Query로 SNS 서비스 만들기
useQuery랑 queryClient.getQueryData랑 차이점이 있을까요??
기본적으로 캐싱된 데이터가 있으면, 그 데이터를 가지고 오는 것으로 알고 있는데, const { data} = useQuery({ queryKey: ['posts', 'recommends'], queryFn: getPostRecommends});const data = queryClient.getQueryData(['posts', 'recommends']); 두 가지 차이점이 있는지 궁금합니다.
-
해결됨Slack 클론 코딩[실시간 채팅 with React]
(공유) react-toastify 사용 시 오류 및 해결법 (2024년 2월 기준)
ERROR in ./node_modules/react-toastify/dist/react-toastify.esm.mjs 2:4352-4353 export 'useSyncExternalStore' (imported as 'r') was not found in 'react' (possible exports: Children, Component, Fragment, Profiler, PureComponent, StrictMode, Suspense, __SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED, cloneElement, createContext, createElement, createFactory, createRef, forwardRef, isValidElement, lazy, memo, useCallback, useContext, useDebugValue, useEffect, useImperativeHandle, useLayoutEffect, useMemo, useReducer, useRef, useState, version) @ ./layouts/Workspace/index.tsx 30:0-39 110:6-17 @ ./layouts/App/index.tsx 15:9-37 @ ./client.tsx 9:0-31 12:95-98 2024년 2월 기준, react-toastify를 최신 버전으로 install하게 되면 위와 같은 오류가 발생합니다.alecture의 package.json에 있는 react-toastify 버전으로 특정하여 설치하면 정상 실행 됩니다.npm i react-toastify@7.0.3
-
해결됨Next + React Query로 SNS 서비스 만들기
강의중에 정말 궁금한게 있습니다 mock data에 한글이 입력될 경우 msw에서 값을 못 보냅니다
안녕하세요 강의 잘 보고있습니다/api/postRecommends API 호출로 데이터를 부를시에 mock data의 content 부분에 한글이 입력이 될 경우 PostRecommends 파일의 useQuery data 부분이 undefined로 나옵니다 그래서 확인을 해보니 msw의 HttpResponse.json에서 한글이 입력될 경우 Syntax Error 뜨는 것 같은데요 하지만 영어로 작성할 경우 정상적으로 데이터를 받아 옵니다 network 탭을 보아도 한글을 입력하든 영어가 입력되던 response에는 정상적으로 데이터가 보이지만, React-Query Dev Tool에서는 data: null 처리가 되고 실제로 받아오는 data 또한 없습니다 아래는 그에 따른 이미지 입니다 content에 한글이 들어갈 경우content에 한글이 들어가지 않을 경우한글만 들어가면 Syntax Error가 뜹니다특정 버전에 대한 버그인지 원인을 모르겠습니다 ,,
-
해결됨Next + React Query로 SNS 서비스 만들기
이 강의에서 /status/[id] 폴더가 있는 것은 페이지가 여러개 필요해서겠죠?
개인 프로필 상세 페이지가 하나가 아니라 여러개인 것이기 때문이겠죠?[username]/status/[id]에서 id 값이 왜 필요한지 제가 트위터? X? 를 한번도 안써봐서 프로필 페이지가 사용자 이름 외에 또 id가 왜 필요한지 뜬금없이 궁금해져서 질문남기네요...앞의 내용 제대로 들었으면 당연한 소리를 질문 하는거 같습니다만...개발 강의랑 크게 관련 없는 질문일 수 있는데 혹시나 해서 남깁니다.
-
미해결Next + React Query로 SNS 서비스 만들기
넥스트14 질문입니다.
usePathname , useSelectedLayouysegment,패러렐라우트,인터셉팅라우트등 해당 기능들은 넥스트14 기능인지, 넥스트14 app 라우터에 기능인지 궁금합니다. app라우터에 기능이라면 어떤식으로 구분 할 수 있을까요?