inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

묻고 답해요

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

MSW response가 안 보이면?

해결됨

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

안녕하세요 제로초님. 3-1 부분에서 client 컴포넌트에서 서버액션 사용하기로 msw를 처음으로 사용하려고 시도중입니다. 와중에 브라우저 네트워크 탭 response에 아무것도 나오지 않고 있어 해결법을 찾지못해 질문드립니다. 저랑 비슷한 오류 생기신 분들 질문을 다 본 거 같은데, 해결이 되진 않네요. 우선, handlers 코드입니다. Mock server 터미널에는 "회원가입" 콘솔이 잘 나오고 있습니다. 다음은, client component에서 서버액션을 위한 signup.ts입니다. 이 또한 터미널에서 base url경로와 "success!"와 200이 잘 나오고 있습니다. 다음은 네트워크 탭에 정보입니다. 생년월일 정보는 제가 추가한 정보입니다. response 탭에 아무것도 나오지 않습니다. 실제 모달을 띄우는 컴포넌트는 onSubmit 함수 import와 이 부분 이외에 아무것도 추가하지 않았습니다. .env파일 및 .env.local 입니다. package.json입니다. 어떤 부분을 추가로 해보면 좋을까요??

  • react
  • next.js
  • react-query
  • next-auth
  • msw
김지환 댓글 1 좋아요 0 조회수 288

import pygame에서 계속 오류가 발생해요

미해결

파이썬 무료 강의 (활용편1) - 추억의 오락실 게임 만들기 (3시간)

cmd에서 import pygame했을 때는 오류없이 제대로 됐는데 Vs code에서 import pygame을 하면 이런 오류가 계속해서 발생합니다. 어떻게 해야되나요? Exception has occurred: ModuleNotFoundError No module named 'pygame' File " C:\Users\User\Desktop\PythonWorkspace\pygame_basic\1_create_ frame.py ", line 1, in <module> import pygame ModuleNotFoundError: No module named 'pygame'

  • python
  • pygame
  • gui
서민서 댓글 2 좋아요 0 조회수 3722

session error/쿠키 정보가 저장 안됐을 때

해결됨

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

mook 새롭게 실행 시켜봤는데도 세션이 에러가 계속 뜹니다. 로그인창에 선생님처럼 정보가 저장 안되있고 handlers-> User정보를 입력하면 패이지가 이동 되는데 localhos t:3000/api/auth/error 이동되고 /home는 안가네요회원가입 id,name,비번,사진 입력해서 만들고 /home이동 되었는데 로그아웃 버튼이나 추천컨텐츠는 안 나와요 localhost:9090 치면 이렇게 나오네요 . 회원가입(localhost:3000/i/flow/signup)->/home->잘 가기는 하는데 네트워크에서는 세션 에러가 됩니다. 무든 코드 선생님꺼로 바꿔봤는데 해결 방법 찾지 못해서 3-1코드 부분에서 멈쳐있습니다. 감사합니다.

  • react
  • next.js
  • react-query
  • next-auth
  • msw
밝은 비버 댓글 1 좋아요 0 조회수 338

프론트 ip로 들어갈때 연결이 안됩니다....

해결됨

[리뉴얼] React로 NodeBird SNS 만들기

지금 빌드까지 마친 상황이고 sudo npx pm2 start npm -- start 이후 sudo npx pm2 monit을 하엿는데 이러한 에러가 나옵니다. https://github.com/jinhwansong/blog 다른 분들의 이야기를 보면 비슷한 에러가 나는거 같기는 한데 답을 모르겟어요 ㅠㅠ

  • react
  • redux
  • node.js
  • express
  • next.js
GI P 댓글 1 좋아요 0 조회수 243

제로초님 프론트서버를 배포하려는데 문제가....

미해결

[리뉴얼] React로 NodeBird SNS 만들기

지금 계속 프론트서버에서 npm run build를 하려는데 왠지는 모르겟는데 빌드가 되다가 멈추는 현상이 생깁니다. 여기서 멈추고 30분째 가만히 있는데 이유가 따로 있을까요? 우분투 서버는 Ubuntu Server 22.04 LTS (HVM), SSD Volume Type 이거를 사용했고 인스턴스 유형은 t2.micro입니다..

  • react
  • redux
  • node.js
  • express
  • next.js
GI P 댓글 1 좋아요 0 조회수 271

05-03-static-routing-board-query

해결됨

[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스

데이터가 사라진건가요 .. null 떠서 강의을 맞춰 가기가 힘들어요 ㅠㅠ

  • react
  • node.js
  • seo
  • graphql
  • next.js
손우헌 댓글 1 좋아요 0 조회수 295

챕터 5 모달 처리 | Add 클릭 이후 모달창이 안떠요

미해결

코드로 배우는 React 19 with 스프링부트 API서버

모달창이 안떠서 settimeout으로 처리 하니 Modal에 result 값이 true로 적용됩니다 코드는 깃으로 올리겠습니다 선생님 강의에 올라와있는 ch06 파일 코드 넣어서 해봐도 모달창이 안뜨네요 ㅜㅜ https://github.com/hyeonbin03/webstromhub

  • react
  • spring-boot
  • jpa
  • jwt
  • redux-toolkit
양현빈 댓글 4 좋아요 0 조회수 431

[1.3장 주문 내역 화면] 1.3.5 Card 조합 질문 있습니다

해결됨

[React 2부] 고급 주제와 훅

강의를 듣다가 의문이 생겨서 질문 드립니다. const OrderPage = () => ( <div className="OrderPage"> <Page header={<Title>주문내역</Title>} footer={<Navbar />}> <OrderStatusCard order={fakeOrder} /> <OrderPaymentCard order={fakeOrder} /> <OrderDeliveryCard order={fakeOrder} /> </Page> </div> ); 위 코드는 수업중 강사님이 작성하신 코드 입니다. 제가 의문인 부분은 OrderStatusCard, OrderPaymentCard, OrderDeliveryCard 모두 같은 fakeOrder를 파라미터로 넘기는 점 입니다. fakeOrder는 Order가 발생될 때 생기는 모든 데이터를 저장하고 있습니다. 이때 OrderStatusCard 관점에서 보면 Status와 상관 없는 데이터들도 fakeOrder를 받으면서 같이 파라미터로 넘어가게 됩니다.(예를 들어 deliveryPrice, discountPrice 등 배달에 관련 데이터가 같이 넘어갑니다.) 해당 실습 예제 코드는 적은 데이터를 사용해서 문제가 없겠지만 만약 수 많은 데이터가 한번에 오고 갈때 성능적인 이슈가 발생하는 문제와 status와 상관없는 데이터들이 넘어가 컴포넌트들이 완벽하게 분리 되지 않는 느낌이 있습니다. 제가 생각한 방법은 조금 귀찮더라도 Order정보를 가지고 있는 OrderPage에서 데이터를 분리해서 넘겨주는 것이 좋다고 생각합니다. 아래는 제가 작성한 코드입니다. const OrderPage = () => ( <div className="OrderPage"> <Page header={<Title>주문내역</Title>} footer={<Navbar />}> <OrderStatusCard status={fakeOrder.status} orderDate={fakeOrder.orderDate} name={fakeOrder.name} id={fakeOrder.id} /> <OrderPaymentCard totalPrice={fakeOrder.totalPrice} paymentMethod={fakeOrder.paymentMethod} productPrice={fakeOrder.productPrice} deliveryPrice={fakeOrder.deliveryPrice} discountPrice={fakeOrder.discountPrice} /> <OrderDeliveryCard deliveryAddress={fakeOrder.deliveryAddress} deliveryContact={fakeOrder.deliveryContact} messageToRider={fakeOrder.messageToRider} messageToShop={fakeOrder.messageToShop} /> </Page> </div> ); 현업에서는 어떤 방식을 사용하는지 강사님의 의견을 듣고 싶습니다. 좋은 강의 잘 듣고 있습니다. 긴글 읽어주셔서 감사합니다 ㅎㅎ

  • react
  • react-component
이찬원 댓글 1 좋아요 2 조회수 306

tsx 수정 시 마다 빌드 후 서버 시작 해야하나요?

미해결

따라하며 배우는 노드, 리액트 시리즈 - 레딧 사이트 만들기(NextJS)(Pages Router)

tsx 수정 시 마다 빌드 후 서버 시작 해야하나요? 백엔드 서버의 경우 nodemon으로 자동으로 수정사항 발생 시 서버 재시작 해주던데, 리액트 서버의 경우 어떻게 하는게 좋은가요?

  • react
  • node.js
  • postgresql
  • docker
  • typescript
  • 클론코딩
  • next.js
규남Joel 댓글 2 좋아요 0 조회수 696

리액트 서버 npm run dev 와 npm run build 후 npm start 의 차이

미해결

따라하며 배우는 노드, 리액트 시리즈 - 레딧 사이트 만들기(NextJS)(Pages Router)

리액트 서버 npm run dev 와 npm run build 후 npm start 의 차이가 무엇인지 궁금합니다.

  • react
  • node.js
  • postgresql
  • docker
  • typescript
  • 클론코딩
  • next.js
규남Joel 댓글 2 좋아요 0 조회수 4753

기본환경설정(2-1) 강의에서, Ctrl+F5 눌러도 Hello python!일 출력되지 않습니다.

미해결

프로그래밍 시작하기 : 파이썬 입문 (Inflearn Original)

안녕하세요. 이전강의들을 포함해서, "파이썬 기본 환경 설정(2-1) : 개발 환경 설정(Vscode) - Windows" 강의 내용을 그대로 따라서 했습니다. 그런데 해당 강의 동영상의 25:33에서처럼 Ctrl+F5 단축키를 누르거나 Run 메뉴에서 Run Without Debugging을 직접 선택해도, 강의에서처럼 Hello python!이 출력되지 않고 이렇게 Select debugger라고 나옵니다. 이때 무엇을 선택해야 하나요? 어떻게 하면 강사선생님처럼 Run Without Debugging을 실행할 수 있나요? 참고로 오른쪽 상단의 오른쪽 방향 세모 아이콘을 클릭하면 문제없이 실행하고 Hello python!이 출력됩니다. (저는 단축키 설정에 대해서 질문을 드린 게 아닙니다.)

  • python
defoogle 댓글 2 좋아요 0 조회수 619

그래프QL의 _id값을 반환받을수가 없습니다.

해결됨

[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스

import { gql } from "@apollo/client"; export const FETCH_BOARDS = gql` query fetchBoards { fetchBoards { _id writer title createdAt } } `; import { useQuery } from "@apollo/client"; import { useRouter } from "next/router"; import BoardListUI from "./BoardList.presenter"; import { FETCH_BOARDS } from "./BoardList.queries"; export default function BoardList() { const { data } = useQuery(FETCH_BOARDS); //쿼리문을 실행하면 데이터에 값 넣어주기 return ( <BoardListUI data = {data} /> ); } 강사님 하고 똑같이 했는데 제것만 에러가 나네요 강사님껄로 하면 실행이 됩니다 _id 받질 못해서 안되는데 왜이럴까요 ㅠㅠ { "errors": [ { "message": "Cannot query field \"_id\" on type \"BoardReturn\".", "locations": [ { "line": 3, "column": 5 }

  • react
  • node.js
  • seo
  • graphql
  • next.js
moneycloudy 댓글 2 좋아요 0 조회수 246

JSX에서 CSS파일 연결하는게 안됩니다

미해결

한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지

안녕하세요 선생님강의 잘 듣고 있습니다! 다름이 아니라 선생님 강의 중 'JSX로 UI 표현하기' 편을 듣고 있는데import를 이용해서 CSS파일을 연결하는 부분에서 막혔습니다 강의와 똑같이 작성했는데 스타일 적용이 안되는 이유가 뭘까요?화면에 오류 표시도 안뜨는데 코드에 문제가 있는지 궁금합니다

  • javascript
  • react
  • node.js
Nara 댓글 3 좋아요 0 조회수 636

fresh에 대하여 질문있습니다.

미해결

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

안녕하세요. 제로초님 좋은 강의 감사합니다. 해당 강의에서 fresh 상태일 때는 새로고침을 해도 서버에서 데이터를 가져오지 않고 캐시된 데이터를 사용한다고 하셨습니다. 그래서 fresh 상태일 때 새로고침을 하여 FollowRecommendSection 를 트리거 하였고 해당 API가 요청이 되는지 보았습니다. export default function FollowRecommendSection() { const { data } = useQuery<User[]>({ queryKey: ['users', 'followRecommends'], queryFn: getFollowRecommends, staleTime: 60 * 1000, // fresh -> stale, 5분이라는 기준 gcTime: 300 * 1000, }); return data?.map((user) => <FollowRecommend user={user} key={user.id} />); } export async function getFollowRecommends() { const res = await fetch(`http://localhost:9090/api/followRecommends`, { next: { tags: ['users', 'followRecommends'], }, cache: 'no-store', }); ... } 그런데 개발자도구 네트워크 탭에서는 밑에 사진과 같이 해당 API가 다시 요청되는것을 확인할 수 있었습니다. fresh 라 할지라도 API 요청은 항상 이루어지며 데이터만 캐시된 것을 ?? 가져오는 것인지 궁금합니다. 감사합니다.

  • react
  • next.js
  • react-query
  • next-auth
  • msw
김건희 댓글 1 좋아요 1 조회수 392

마이너스버튼 테스트

미해결

따라하며 배우는 리액트 A-Z[19버전 반영]

test("Prevent the -,+ button from being pressed when the on/off button is clicked",()=>{ render(<App />); const onOffButtonElement = screen.getByTestId("on/off-button"); // click onOffButtonElement button fireEvent.click(onOffButtonElement); const plusButtonElement = screen.getByTestId("plus-button"); expect(plusButtonElement).toBeDisabled(); }) on/off버튼을 통해 플러스와 마이너스 버튼의 클릭시 disable속성을 추가하는 과정에서 app.test.js에 테스트항목에 마이너스에 대한 내용을 안적어도 무관한가요? 플러스가 잘작동하면 마이너스도 잘 작동할 것이기 때문인가요?

  • react
  • redux
  • tdd
  • typescript
  • next.js
  • 소프트웨어-테스트
요그리 댓글 2 좋아요 0 조회수 300

/i/flow/login 으로 리다이렉트하는 이유?

미해결

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

안녕하세요 섹션 1 듣고 혼자 해보다가 궁금한 게 생겨서 질문드립니다. 기존 사이트는 왜 "/login"으로 진입하면 "/i/flow/login"로 리다이렉트하게 했을까요? 단순하게 생각하면 그냥 "/login", "/signup"에 페이지를 두던가 아니면 "/i/flow/login", "/i/flow/signup"만 사용하도록 하면 리다이렉트 로직 필요없이 더 깔끔할 것 같은데 말이죠. 또 의아한 것은 기존 사이트에서 '/signup' url로 진입하면 '/i/flow/signup'으로 리다이렉트하는데 계정 만들기 버튼은 로그인과 다르게 href를 /i/flow/signup'으로 해두었네요. 실수인가.. 물론 제로초님은 기존 사이트를 최대한 그대로 구현하려고 하신 것 뿐이니까 당연히 정확한 의도를 알 수 없으시겠지만 현업자 입장에서 추측이 가는 부분이 있으신가 싶어 질문드립니다!

  • react
  • next.js
  • react-query
  • next-auth
  • msw
jin l 댓글 1 좋아요 0 조회수 416

서버에서 받은 데이터를 공유 목적으로 사용하기위해서는 어떤식으로 처리되는게 가장 좋은 방법일까요?

미해결

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

데이터패칭을 리액트쿼리로하고 데이터 공유를 zustand로 하는데요! 만약 데이터 패칭을 해서 받아온 데이터를 전역으로 공유해서 사용하고싶으면 어떤식으로 처리되는게 가장 좋은 방법인가요??

  • react
  • next.js
  • react-query
  • next-auth
  • msw
chang 댓글 1 좋아요 0 조회수 434

게시글 클릭시 도메인만 바뀌고 화면 변화가 없을때

해결됨

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

사진 상세보기에서 오른쪽 UI에 댓글 달기랑 게시글이 있는데 이 때 게시글 눌렀을 때 단순 도메인만 바뀌고 이동이 안되더라구요. 그래서 아래 코드처럼 PostArticle 컴포넌트 에서 router.refresh() 넣어서 처리했는데 이렇게 해도 될까요? const router = useRouter(); const handleOnClickCapture = () => { router.push(`/${post.User.id}/status/${post.postId}`); router.refresh(); // 추가 } return ( <article onClickCapture={handleOnClickCapture} className={style.post}> { children } </article> )

  • react
  • next.js
  • react-query
  • next-auth
  • msw
악보-Designer Park 댓글 1 좋아요 0 조회수 296

data 폴더가 생성되지 않아요.

미해결

따라하며 배우는 노드, 리액트 시리즈 - 레딧 사이트 만들기(NextJS)(Pages Router)

위에 코드로 docker-compose up을 해도 data 폴더가 생성되지 않아요. 다른 질문 참가해서 volumes: data:를 넣어봐도 생성되지 않습니다. 밑에 코드는 docker-compose up을 실행했을 때 뜨는 코드 입니다. PostgreSQL Database directory appears to contain a database; Skipping initialization 2024-03-15 02:14:21.650 UTC [1] LOG: starting PostgreSQL 16.2 (Debian 16.2-1.pgdg120+2) on x86_64-pc-linux-gnu, compiled by gcc (Debian 12.2.0-14) 12.2.0, 64-bit 2024-03-15 02:14:21.650 UTC [1] LOG: listening on IPv4 address "0.0.0.0", port 5432 2024-03-15 02:14:21.650 UTC [1] LOG: listening on IPv6 address "::", port 5432 2024-03-15 02:14:21.665 UTC [1] LOG: listening on Unix socket "/var/run/postgresql/.s.PGSQL.5432" 2024-03-15 02:14:21.683 UTC [30] LOG: database system was shut down at 2024-03-15 02:13:06 UTC 2024-03-15 02:14:21.697 UTC [1] LOG: database system is ready to accept connections 어떻게 해야할까요?

  • react
  • node.js
  • postgresql
  • docker
  • typescript
  • 클론코딩
  • next.js
진용 댓글 1 좋아요 0 조회수 557

인기 태그

인프런 TOP Writers

주간 인기글