inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

묻고 답해요

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

로그인에 성공해도 name을 불러오지 못 하는거 같습니다

해결됨

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

playgroud 에서 회원을 생성 이후 login 페이지에서 로그인을 성공적으로 하였으나 login success 페이지에서 fetchuserloggedin 이 성공적으로 이루어 지지 않는거 같습니다. 회원가입을 여러번 해서 다른 계정으로 시도해도 name 부분이 표시가 되지 않네요. 혹시 뭐가 문제일까요? import { useState } from "react"; import { gql, useMutation } from "@apollo/client"; import { IMutation, IMutationLoginUserArgs, } from "../../../src/commons/types/generated/types"; import { accessTokenState } from "../../../src/commons/stores"; import { useRecoilState } from "recoil"; import { useRouter } from "next/router"; const LOGIN_USER = gql` mutation loginUser($email: String!, $password: String!) { loginUser(email: $email, password: $password) { accessToken } } `; export default function LoginPage() { const router = useRouter(); const [email, setEmail] = useState(""); const [password, setPassword] = useState(""); const [loginUser] = useMutation< Pick<IMutation, "loginUser">, IMutationLoginUserArgs >(LOGIN_USER); const [, setAccessToken] = useRecoilState(accessTokenState); const onChangneEmail = (event) => { setEmail(event.currentTarget.value); }; const onChangnePassword = (event) => { setPassword(event.currentTarget.value); }; const onClickLogin = async () => { try { //1.로그인 뮤테이션 날려서 accessToken 받아오기 const result = await loginUser({ variables: { email, password, }, }); const accessToken = result.data?.loginUser.accessToken; console.log(accessToken); //받아온 accessToken 을 글로벌 스테이트에 저장해야지 모든 애들이 쓸수 있음 if (accessToken === undefined) { alert("로그인에 실패했습니다: 다시 시도해주세요"); return; } setAccessToken(accessToken); // 3. 로그인 성공 페지이로 이동하기 void router.push("/section23/23-01-login-success"); } catch (error) { if (error instanceof Error) alert(error.message); } }; return ( <> 이메일:{" "} <input onClick={onChangneEmail} type="text" placeholder="이메일 입력" /> 비밀번호:{" "} <input onClick={onChangnePassword} type="password" placeholder="비밀번호 입력" /> <button onClick={onClickLogin}>로그인</button> </> ); } import { useQuery, gql } from "@apollo/client"; import type { IQuery } from "../../../src/commons/types/generated/types"; const FETCH_USER_LOGGED_IN = gql` query { fetchUserLoggedIn { email name } } `; export default function LoginPage() { const { data } = useQuery<Pick<IQuery, "fetchUserLoggedIn">>(FETCH_USER_LOGGED_IN); return <>{data?.fetchUserLoggedIn.name}님 환영합니다!</>; }

  • react
  • node.js
  • seo
  • graphql
  • next.js
hwj9975 댓글 4 좋아요 0 조회수 490

Button is not defined

미해결

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

프로필 탭 들어갈 시 Button is not defined 이라는 오류가 뜹니다 제 코드는 import React from "react"; import PropTypes from "prop-types"; import { List } from "antd"; import Item from "antd/lib/list/Item"; import { StopOutlined } from "@ant-design/icons"; import { isStyledComponent, keyframes } from "styled-components"; const FollowList = ({ header, data }) => { return ( <List style={{ marginBottom: 20 }} grid={{ gutter: 4, xs: 2, md: 3 }} size="small" header={<div>{header}</div>} loadMore={ <div style={{ textAlign: "center", margin: "10px 0" }}> <Button>더 보기</Button> </div> } bordered dataSource={data} renderItem={(Item) => ( <List.Item style={{ marginTop: 20 }}> <Card actions={[<StopOutlined key="stop" />]}> <Card.Meta description={Item.Nickname} /> </Card> </List.Item> )} /> ); }; FollowList.propTypes = { header: PropTypes.string.isRequired, data: PropTypes.array.isRequired, }; export default FollowList; 입니다 무엇이 문제 일까요?

  • react
  • redux
  • node.js
  • express
  • next.js
lsw0810222 댓글 2 좋아요 0 조회수 359

try catch문이 있는데 if문으로 에러처리를 따로 하는 이

해결됨

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

router.get("/", async (req, res, next) => { try { if (req.user) { // findOne에서 에러가 생기는 거는 try catch문으로 처리가 안된 const user = await User.findOne({ where: { id: req.user.id }, }); res.status(200).json(user); } else { res.status(200).json(null); } } catch (error) { console.error(error); next(error); } }); 이부분에서 아직 로그인을 하지 않아서 유저 정보가 없을때 User.findOne 에서 에러가 나기 때문에 if 문으로 감싸서 아직 유저정보가 없을 때를 예외 처리 해주셨는데 어차피 User.findOne 에서 에러가 나면 catch 문으로 이동해서 에러가 처리가 되는데 굳이 if else 로 예외 처리 하신 이유가 있나요?

  • react
  • redux
  • node.js
  • express
  • next.js
i1004gy 댓글 1 좋아요 0 조회수 1220

사용자를 찾을 수 없다.

미해결

만들면서 배우는 프론트엔드 DO IT 코딩 (Next.js, Typescript)

안녕하세요, 강의를 따라하던 중 사용자를 찾을 수 없다는 페이지가 떠서 어디서 오류가 났는지 확인을 못하겠어서 질문드립니다. 혹시몰라 이 강의 까지 커밋한 깃허브 주소 올려봅니다,, https://github.com/cccodus313/Blah-Blah/tree/start import { ServiceLayout } from '@/components/service_layout'; import { useAuth } from '@/contexts/auth_user.context'; import { InAuthUser } from '@/models/in_auth_user'; import { Avatar, Box, Button, Flex, FormControl, FormLabel, Switch, Text, Textarea, useToast, VStack, } from '@chakra-ui/react'; import { GetServerSideProps, NextPage } from 'next'; import { useState, useEffect } from 'react'; import ResizeTextarea from 'react-textarea-autosize'; import axios, { AxiosResponse } from 'axios'; import MessageItem from '@/components/message_item'; import { InMessage } from '@/models/message/in_message'; interface Props { userInfo: InAuthUser | null; } async function postMessage({ message, uid, author, }: { message: string; uid: string; author?: { displayName: string; photoURL?: string; }; }) { if (message.length <= 0) { return { result: false, message: '내용을 입력해주세요', }; } try { await fetch(`/api/message.add`, { method: 'post', headers: { 'content-type': 'application/json', }, body: JSON.stringify({ uid, message, author, }), }); return { result: true, }; } catch (err) { console.error(err); return { result: false, message: '등록 실패', }; } } const UserHomePage: NextPage<Props> = function ({ userInfo }) { const [message, setMessage] = useState(''); const [isAnonymous, setAnonymous] = useState(true); const [messageList, setMessageList] = useState<InMessage[]>([]); const toast = useToast(); const { authUser } = useAuth(); async function fetchMessageList(uid: string) { try { const resp = await fetch(`/api/message.list?uid=${uid}`); if (resp.status === 200) { const data = await resp.json(); setMessageList(data); } } catch (err) { console.log(err); } } useEffect(() => { if (userInfo === null) return; fetchMessageList(userInfo.uid); }, [userInfo]); if (userInfo === null) { return <p>사용자를 찾을 수 없습니다.</p>; } const isOwner = authUser !== null && authUser.uid === userInfo.uid; return ( <ServiceLayout title={`${userInfo.displayName}의 홈`} minH="100vh" backgroundColor="gray.50"> <Box maxW="md" mx="auto" pt="6"> <Box borderWidth="1px" borderRadius="lg" overflow="hidden" mb="2" bg="white"> <Flex p="6"> <Avatar size="lg" src={userInfo.photoURL ?? 'https://bit.ly/broken-link'} mr="2" /> <Flex direction="column" justify="center"> <Text fontSize="md">{userInfo.displayName}</Text> <Text fontSize="xs">{userInfo.email}</Text> </Flex> </Flex> </Box> <Box borderWidth="1px" borderRadius="lg" overflow="hidden" mb="2" bg="white"> <Flex align="center" p="2"> <Avatar size="xs" src={isAnonymous ? 'https://bit.ly/broken-link' : authUser?.photoURL ?? 'https://bit.ly/broken-link'} mr="2" /> <Textarea bg="gray.100" border="none" boxShadow="none !important" placeholder="어떤이야기를 하고 싶나요?" borderRadius="md" resize="none" minH="unset" overflow="hidden" fontSize="xs" mr="2" minRows={1} maxRows={7} as={ResizeTextarea} value={message} onChange={(e) => { if (e.target.value) { const lineCount = (e.target.value.match(/[^\n]*\n[^\n]*/gi)?.length ?? 1) + 1; if (lineCount > 7) { toast({ title: '최대 7줄까지만 입력가능합니다', position: 'top-right', }); return; } } setMessage(e.target.value); }} /> <Button disabled={message.length === 0} bgColor="#FFB86C" color="white" colorScheme="yellow" variant="solid" size="sm" onClick={async () => { const postData: { message: string; uid: string; author?: { displayName: string; photoURL?: string; }; } = { message, uid: userInfo.uid, }; if (isAnonymous === false) { postData.author = { photoURL: authUser?.photoURL ?? 'https://bit.ly/broken-link', displayName: authUser?.displayName ?? 'anonymous', }; } const messageResp = await postMessage(postData); if (messageResp.result === false) { toast({ title: '등록실패', position: 'top-right' }); } setMessage(''); }} > 등록 </Button> </Flex> <FormControl display="flex" alignItems="center" mt="1" mx="2" pb="2"> <Switch size="sm" colorScheme="orange" id="anonymous" mr="1" isChecked={isAnonymous} onChange={() => { if (authUser === null) { toast({ title: '로그인이 필요합니다', position: 'top-right', }); return; } setAnonymous((prev) => !prev); }} /> <FormLabel htmlFor="anonymous" mb="0" fontSize="xx-small"> Anonymous </FormLabel> </FormControl> </Box> <VStack spacing="12px" mt="6"> {messageList.map((messageData) => ( <MessageItem key={`message-item${userInfo.uid}-${messageData.id}`} item={messageData} uid={userInfo.uid} displayName={userInfo.displayName ?? ''} photoURL={userInfo.photoURL ?? 'https://bit.ly/broken-link'} isOwner={isOwner} /> ))} </VStack> </Box> </ServiceLayout> ); }; export const getServerSideProps: GetServerSideProps<Props> = async ({ query }) => { const { screenName } = query; if (screenName === undefined) { return { props: { userInfo: null, }, }; } try { const protocol = process.env.PROTOCOL || 'http'; const host = process.env.HOST || 'localhost'; const port = process.env.PORT || '3000'; const baseUrl = `${protocol}://${host}:${port}`; const userInfoResp: AxiosResponse<InAuthUser> = await axios(`${baseUrl}/api/user.info/${screenName}`); return { props: { userInfo: userInfoResp.data ?? null, }, }; } catch (err) { console.error(err); return { props: { userInfo: null, }, }; } }; export default UserHomePage;

  • next.js
댓글 1 좋아요 0 조회수 411

섹션28 오류 질문

해결됨

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

검색 해보니까 input태그에 자식을 넣어서 발생하는 에러라고 하는데 코드에는 input태그에 props를 넣은것 빼곤 그럴만한 에러사항이 없습니다. 무엇이 문제인가요..?ㅠ index.js import BoardWrite from "../../../src/components/units/board/write/BoardWrite.container"; export default function GraphqlMutationPage() { // 한 줄일 땐 괄호() 필요 없음 return ( <div> <div>########## 여기는 페이지입니다.####### </div> <BoardWrite />;<div>########## 여기는 페이지입니다.####### </div> </div> ); } BroadWrite.container.js: import { useMutation } from "@apollo/client"; import { useState } from "react"; import BoardWriteUI from "./BoardWrite.presenter"; import { 나의그래프큐엘셋팅 } from "./BoardWrite.queries"; export default function BoardWrite(props) { const [writer, setWriter] = useState(); const [title, setTitle] = useState(); const [contents, setContents] = useState(); const [나의함수] = useMutation(나의그래프큐엘셋팅); const onClickSubmit = async () => { const result = await 나의함수({ variables: { // variables 이게 $ 역할을 함 writer: writer, title: title, contents: contents, }, }); console.log(result); }; const onChangeWriter = (event) => { setWriter(event.target.value); }; const onChangeTitle = (event) => { setTitle(event.target.value); }; const onChangeContents = (event) => { setContents(event.target.value); }; return ( <div> <div>$$$$$$$$$여기는 컨테이너입니다.$$$$$$$$</div> <BoardWriteUI aaa={onClickSubmit} bbb={onChangeWriter} ccc={onChangeTitle} ddd={onChangeContents} /> <div>$$$$$$$$$여기는 컨테이너입니다.$$$$$$$$</div> </div> ); } BroadWrite.presenter.js import { RedInput, BlueButton } from "./BoardWrite.styles"; export default function BoardWriteUI(props) { return ( <div> <div>@@@@@@@@@@@여기는 프리젠터입니다.@@@@@@@@@@</div> <div> 작성자: <RedInput type="text" onChange={props.bbb} /> 제목: <input type="text" onChange={props.ccc} /> 내용: <input type="text" onChange={props.ddd} /> <BlueButton onClick={props.aaa}>GRAPHQL-API 요청하기</BlueButton>; </div> <div>@@@@@@@@@@@여기는 프리젠터입니다.@@@@@@@@@@</div> </div> ); } BroadWrite.styles.js import styled from "@emotion/styled"; export const RedInput = styled.input` border-color: red; `; export const BlueButton = styled.input` background-color: blue; `;

  • react
  • node.js
  • seo
  • graphql
  • next.js
전현욱 댓글 1 좋아요 0 조회수 329

POST http://localhost:3065/post 500 (Internal Server Error) 500에러 질문 입니다

미해결

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

redux toolkit을 이용해서 코딩을 하고 있고 credentials까지 강의 나와있는대로 다 작성을 한 상태입니다 post action creator는 이렇게 작성하였고 export const addPost = createAsyncThunk( "/post", async (data, { fulfillWithValue, rejectWithValue }) => { try { console.log(data); const response = await axios.post("/post", data); console.log(response.data); return fulfillWithValue(response.data); } catch (error) { throw rejectWithValue(error.response); } } ); 에러메시지는 POST http://localhost:3065/post 500 (Internal Server Error) redux dev tools에 rejected 요청으로 온 여러 정보가 있는데 그중에 뭐가 필요한 정보인지 몰라서 제로초님이 필요하신 정보를 얘기해주시면 추가적으로 추가 하겠습니다 status(pin):500 statusText(pin):"Internal Server Error" 일단 이 두개가 상태 메시지입니다

  • react
  • redux
  • node.js
  • express
  • next.js
i1004gy 댓글 1 좋아요 0 조회수 1946

파이썬 예제 코드 실습 에러

미해결

퀀트 투자를 위한 주식 자동매매 봇 만들기 Part 1

예제 코드를 파이참을 실행해서 어느 프로그램 경로에다가 어떤식으로 연결해야 실행이 되는지 잘 모르겠습니다. 현재 예제 코드가 실행이 잘 안되서요

  • python
  • 투자
  • 퀀트
헌준 댓글 2 좋아요 0 조회수 543

자유게시판 대댓글 등록

해결됨

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

자유게시판 대댓글 등록 & 조회 기능 구현을하는데 playground에서 회원정보 인증에서 오류가 발생합니다. 피그마 상에서도 일반회원에 대한 내용만 있고 비회원일 경우없는 것을 보면 대댓글 기능 자체가 로그인이 되어있을 경우를 상정한건가요? 일단 docs에는 유저토큰 정보를 요구하지는 않는데... 회원정보가 필요한가요? 대댓글 자유게시판에서 대댓글기능 작동하는 건가요...?

  • react
  • graphql
  • next.js
반가워요 댓글 1 좋아요 0 조회수 309

2. 사용자 API 만들기 => 강의는 짧지만 백엔드 api 만드는 기본 내용 다 들어가 있음 주의하세요!!

미해결

만들면서 배우는 프론트엔드 DO IT 코딩 (Next.js, Typescript)

유저 api 하나 간단히 만드는 줄 알았는데.. 리팩터링하고 또하고 모델과 컨트롤러 파일로 만들고 (모르신다면 MVC 패턴) 에러 핸들링의 기초까지 싹 다 훑어버림 1시간도 안되는 강의지만 조심하세요 프린이 여러분들...근데 잘보면 뒤에 계속 API를 추가하기 때문에 여기서 정신차리셔야합니다... 꺾였지만 계속 가는 마음이 중요합니다 고고

  • next.js
flat_white 댓글 1 좋아요 0 조회수 403

이미지 업로드 url 오류

해결됨

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

어떤 부분때문에 이런 오류가 나는 걸까요? 이미지 등록 버튼을 눌러서 파일 선택하면 이 오류 메세지가 뜹니다.

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

dig 질문입니다.

해결됨

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

가비아 에서 도메인 결제 후 터미널 dig 부분에서 막혀서 질문 드립니다. 가비아 AWS 여기까지 잘 따라 왔는데 터미널에서 오류가 뜨네요 강의에서 2-3일 걸릴수도 있다했는데 현재 6시간 이상 지나도 안돼서 궁금함에 질문 남겨요.. 기다리면 될까요? 아님 잘못한 부분이 있을까요?

  • react
  • node.js
  • seo
  • graphql
  • next.js
임프런 댓글 1 좋아요 0 조회수 229

타입을 적을때 쓰는 JSX.Element

해결됨

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

deprecated 되는 걸로 알고있고 안써줘도 되는 것 같은데 리액트랑 타입스크립트 버전업에 따른 결과인가요?

  • react
  • node.js
  • seo
  • graphql
  • next.js
Jun 댓글 1 좋아요 0 조회수 536

toast 처리부터 오류발생

미해결

만들면서 배우는 프론트엔드 DO IT 코딩 (Next.js, Typescript)

안녕하세요! 질문 입력 컴포넌트 강의를 듣던 중 toast 처리부터 아래와 같은 오류가 납니다.또한 Anonymous 버튼도 실행이 되지 않습니다. 어떤 문제 일까요? import { ServiceLayout } from '@/components/service_layout'; import { useAuth } from '@/contexts/auth_user.context'; import { Avatar, Box, Button, Flex, FormControl, FormLabel, Switch, Text, Textarea, useToast } from '@chakra-ui/react'; import { NextPage } from 'next'; import { useState } from 'react'; import ResizeTextarea from 'react-textarea-autosize'; const userInfo = { uid: 'test', email: 'cccodus313@gmail.com', displayName: 'park chae yeon', photoURI: '', }; const UserHomePage: NextPage = function () { const [message, setMessage] = useState(''); const [isAnonymous, setAnonymous] = useState(true); const toast = useToast(); const { authUser } = useAuth(); return ( <ServiceLayout title="user home" minH="100vh" backgroundColor="gray.50"> ; <Box maxW="md" mx="auto" pt="6"> <Box borderWidth="1px" borderRadius="lg" overflow="hidden" mb="2" bg="white"> <Flex p="6"> <Avatar size="lg" src={userInfo.photoURI} mr="2" /> <Flex direction="column" justify="center"> <Text fontSize="md">{userInfo.displayName}</Text> <Text fontSize="xs">{userInfo.email}</Text> </Flex> </Flex> </Box> <Box borderWidth="1px" borderRadius="lg" overflow="hidden" mb="2" bg="white"> <Flex align="center" p="2"> <Avatar size="xs" src={isAnonymous ? 'https://bit.ly/broken-link' : authUser?.photoURL ?? 'https://bit.ly/broken-link'} mr="2" /> <Textarea bg="gray.100" border="none" boxShadow="none !important" placeholder="어떤 이야기를 나누고 싶나요?" borderRadius="md" resize="none" minH="unset" overflow="hidden" fontSize="xs" mr="2" minRows={1} maxRows={7} as={ResizeTextarea} value={message} onChange={(e) => { if (e.target.value) { const lineCount = (e.target.value.match(/[^\n]*\n[^\n]*/gi)?.length ?? 1) + 1; if (lineCount > 7) { toast({ title: '최대 7줄까지만 입력가능합니다', position: 'top-right', }); return; } } setMessage(e.target.value); }} /> <Button disabled={message.length === 0} bgColor="#FFB86C" color="white" colorScheme="yellow" variant="solid" size="sm" > 등록 </Button> </Flex> <FormControl display="flex" alignItems="center" mt="1" mx="2" pb="2"> <Switch size="sm" colorScheme="orange" id="anonymous" mr="1" isChecked={isAnonymous} onChange={() => { if (authUser === null) { toast({ title: '로그인이 필요합니다', position: 'top-right', }); return; } setAnonymous((prev) => !prev); }} /> <FormLabel htmlFor="anonymous" mb="0" fontSize="xx-small"> Anonymous </FormLabel> </FormControl> </Box> </Box> </ServiceLayout> ); }; export default UserHomePage;

  • next.js
박채연 댓글 3 좋아요 0 조회수 630

대댓글 쿼리문

해결됨

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

강사님 안녕하세요 혹시 쿼리문좀 백엔드에서 잘못되는거 같은데 한번 봐주시면 안될까요... 아무리 _id로 할려고해도 같은 유저가 질문하게 되면 컨텐츠로도 확인해야해서요 ㅠㅠ 강사님 댓글이라도 대댓글 이거에 관한 힌트라도 얻을수있게 남겨주시면 감사하겠습니다.. 아무리해도 쿼리문에서 필요한게 없으니 어떻게 해야할지를 모르겠습니다...

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

Pyqt6 Qthred 에서 Ui 함수 사용하기

미해결

이런 식으로 코드를 사용중입니다 from PyQt6.QtWidgets import * from PyQt6.QtCore import * class thread (Qthread): def __init__(self): super().__init__() def run(self): while True: mainbot_window.fun1() class UI (QWidget): def __init__(self): super().__init__() self.inits() self.T1 = thread() self.T1.start() def inits(self): print("각종 변수 설정") def fun1(self): print("run code") def main(args=None): global mainbot_window app = QApplication(sys.argv) mainbot_window = UI() mainbot_window.show() try: app.exec() except KeyboardInterrupt: pass if __name__ == '__main__': main() 여기서 global 변수를 사용하지 않고 싶습니다. 글로벌 변수를 사용하지 않고 Thread 에서 Qwidget 의 함수를 사용할 방법이 있을까요? 시도한것 thread 에서 pyqtsignal.emit 을 사용해서 시도해봤는데 ui가 검은 화면으로 뜬체 작동하지않습니다. Qthread 대신 Qtimer 를 사용 =>작동은 잘되나 ui를 표시하는데 약간의 딜레이가 생깁니다. 그래서 되도록이면 Thread를 사용하고싶습니다.

  • python
  • pyqt
  • pyqy6
  • threading
  • qtread
정민기 댓글 1 좋아요 1 조회수 843

환경설정 conda activate myST 해도 가상환경 설정에 들어가지 않습니다.

해결됨

실전 프로젝트로 배우는 데이터 앱 만들기 with Python & Streamlit

안녕하세요 3강 콘다 가상환경에서 비주얼 스튜디오 터미널에서 conda activate myST해도 터미널에 계속 PS로 표시되며 가상환경으로 들어가지 않습니다. cmd에서는 같은 명령어를 입력하면 들어가지는데 비주얼 스튜디오 터미널에서는 들어가지지 않는 것 같습니다. 뭐가 문제일까요?

  • python
  • streamlit
honest5858 댓글 1 좋아요 0 조회수 511

Fast Refresh Warning

미해결

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

터미널에 다음과 같은 경고가 뜹니다. warn - Fast Refresh had to perform a full reload. Read more: https://nextjs.org/docs/basic-features/fast-refresh#how-it-works TypeError: Failed to fetch at webpack_require .hmrM ( http://localhost:3000/_next/static/chunks/webpack.js?ts=1690436755699:1201:20 ) 작성한 코드 AppLayout.js import { Menu } from "antd"; import Link from "next/link"; import PropTypes from "prop-types"; import React from "react"; const items = [ { label: ( <Link href="/"> <a>홈</a> </Link> ), key: "home", }, { label: <Link href="/profile">프로필</Link>, key: "profile", }, { label: ( <Link href="/signup"> <a>회원가입</a> </Link> ), key: "signup", }, ]; function AppLayout({ children }) { return ( <div> <Menu mode="horizontal" items={items}></Menu> {children} </div> ); } AppLayout.propTypes = { children: PropTypes.node.isRequired, }; export default AppLayout; index.js import React from "react"; import AppLayout from "../components/AppLayout"; function Home() { return ( <AppLayout> <div>Hello, Next!</div> </AppLayout> ); } export default Home; Fast Refresh 관련 문서를 보고 새로 고침도 해보고, 캐시도 지워보고, 익명 함수를 기명 함수로 바꿔보았지만 소용이 없었습니다. npm run dev를 실행하고 localhost에 접속할 때마다 보입니다. 웹페이지 우측 하단에 vercel mark 같은 것이 잠시 깜빡이는데 그 때에도 fast refresh 관련 warnning이 뜹니다. next.js 12 버전, antd 5버전을 사용 중이며 질문 시점에 강의는 Section1의 1강 수강 했습니다.

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

hooks 에러

해결됨

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

안녕하세요! 다음과 같이 hook 이 선언되기 전에 if조건문 이 위치하여 오류가 발생하였습니다. useMutation 은 조건문이 실행되기 전에 선언해주면 해결되었는데 useQuery 는 router 를 사용하기 때문에 조건문보다 먼저 선언이 될 수 없었습니다. 그래서 조건문을 없애기 위해서 router.query.boardId 를 string타입 으로 변환하여도 상관이 없나요? 1차 오류 발생 if (!router || typeof router.query.boardId !== "string") return <></>; const { data } = useQuery< Pick<IQuery, "fetchBoardComments">, IQueryFetchBoardCommentsArgs >(FETCH_BOARD_COMMENTS, { variables: { boardId: router.query.boardId }, }); const [deleteBoardComment] = useMutation< Pick<IMutation, "deleteBoardComment">, IMutationDeleteBoardCommentArgs >(DELETE_BOARD_COMMENT); //오류 원인 React Hook "useMutation" is called conditionally. React Hooks must be called in the exact same order in every component render. Did you accidentally call a React Hook after an early return? const { data } = useQuery< //string으로 변환 const { data } = useQuery< Pick<IQuery, "fetchBoardComments">, IQueryFetchBoardCommentsArgs>(FETCH_BOARD_COMMENTS, { variables: { boardId: String(router.query.boardId) }, });

  • react
  • graphql
  • next.js
  • hook
  • router
반가워요 댓글 1 좋아요 0 조회수 784

Graphql 강의중 질문

해결됨

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

보시는 것과 같이 첫번째 사진처럼 백틱을 넣으면 두번째 사진과 같은 자동완성기능이 제기능을 못합니다. 이유와 해결방법이 있나요?

  • react
  • node.js
  • seo
  • graphql
  • next.js
전현욱 댓글 1 좋아요 0 조회수 384

서로 다른 팔로우 버튼을 빠르게 눌렀을때 둘다 팔로우 성공시키는 방법?

해결됨

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

(클릭한 버튼만 loading이 되게 해놓은 상태에서) 서로 다른 두개의 팔로우 버튼을 빠르게(1초안에) 클릭했을때 요청이 두번가는데 두번째거만 성공하는 이유는 takeLatest를 사용해서 그런것이 맞나요? 둘다 성공시키기 위해 takeEvery를 사용했는데 그래도 될까요? function* watchFollow() { yield takeEvery(FOLLOW_REQUEST, follow); } function* watchUnfollow() { yield takeEvery(UNFOLLOW_REQUEST, unfollow); } 그리고 혹시 takeLatest를 써도 서버에 여러개의 요청이 가니까 서버에서 여러 요청을 모두 성공하게끔 처리가 될까요?

  • react
  • redux
  • node.js
  • express
  • next.js
박규석 댓글 1 좋아요 0 조회수 253

인기 태그

인프런 TOP Writers

주간 인기글