수업을 잘 따라갔는데 localhost를 연결할 수 없다고 계속 떠요ㅠㅠ 이유가 뭘까요ㅠ

다른 것들은 다 작동이 되는데 수정하기 페이지에서 버튼을 눌러도 동작이 안됩니다 ㅜㅜ 콘솔에도 오류가 안 나오고 강의를 3번 처음부터 다시 봐도 뭐 때문에 동작을 안 하는지 모르겠습니다 ㅜㅜ

강의를 보면서 적용을 했는데toast가 2개씩 뜨고 2개씩 사라집니다..이 경우 어떻게 해야할까요?? .then(() => { addToast({ type: "success", text: "Successfully created", }); history.push("/admin"); }) .catch((e) => { addToast({ text: "We could not create blog", type: "danger", }); });

Cannot read property 'me' of undefined 에러가 났는데 원인을 모르겠어서 질문드립니다.에러로 추정되는 코드 파일(PostCard.js, user.js, post.js)을 함께 첨부합니다.PostCard.jsimport React, { useState, useCallback } from 'react'; import PropTypes from 'prop-types'; import { useSelector } from 'react-redux'; import { Card, Popover, Button, Avatar } from 'antd'; import { RetweetOutlined, HeartOutlined, MessageOutlined, EllipsisOutLined, HeartTwoTone } from '@ant-design/icons'; import PostImages from './PostImages'; const PostCard = ({ post }) => { const { user } = useSelector((state) => state.user); const [liked, setLiked] = useState(false); const [commentFormOpened, setCommentFormOpened] = useState(false); const onToggleLike = useCallback(() => { setLiked((prev) => !prev); }, []); const onToggleComment = useCallback(() => { setCommentFormOpened((prev) => !prev); }, []); const id = useSelector((state) => state.User.me?.id); return ( <div style={{ marginBottom: 20 }}> <Card cover={post.Images[0] && <PostImages images={post.Images} />} actions={[ <RetweetOutlined key="retweet" />, liked ? <HeartTwoTone twoToneColor="#eb2f96" key="heart" onClick={onToggleLike} /> : <HeartOutlined key="heart" onClick={onToggleLike} />, < MessageOutlined key="comment" onClick={onToggleComment} />, <Popover key="more" content={( <Button.Group> {id && post.User.id === id ? ( <> <Button>수정</Button> <Button type="danger">삭제</Button> </> ) : <Button>신고</Button>} </Button.Group> )}> <EllipsisOutLined /> </Popover>, ]} > <Card.Meta avatar={<Avatar>{post.User.nickname[0]}</Avatar>} title={post.User.nickname} description={post.content} /> </Card> {commentFormOpened && ( <div> 댓글 부분 </div>)} { /* <CommentFrom /> */ } { /* <Comment /> */ } </div> ); }; PostCard.propTypes = { post: PropTypes.shape({ id: PropTypes.number, User: PropTypes.object, content: PropTypes.string, createdAt: PropTypes.object, Comments: PropTypes.arrayOf(PropTypes.object), Images: PropTypes.arrayOf(PropTypes.object), }).isRequired, }; export default PostCard;user.jsexport const initialState = { isLoggedIn: false, me: null, signUpData: {}, loginData: {}, } export const loginAction = (data) => { return { type: 'LOG_IN', data, } } export const logoutAction = (data) => { return { type: 'LOG_OUT', } } const reducer = (state = initialState, action) => { switch (action.type) { case 'LOG_IN': return { ...state, isLoggedIn: true, me: action.data,. // }, }; case 'LOG_OUT': return { ...state, isLoggedIn: false, me: null, }; default: return state; } }; export default reducer;post.jsexport const initialState = { mainPosts: [{ id: 1, User: { id: 1, nickname: 'YeonSeong' }, content: '첫 번째 게시글 #해시태그 #이모티콘', Images: [ { src: 'https://item.kakaocdn.net/do/3b669cd3532e2e97f42dc388d8c29fcb41d1a2caccd0c566eab28b91e2e5d306',}, { src: 'https://item.kakaocdn.net/do/3b669cd3532e2e97f42dc388d8c29fcb7f9f127ae3ca5dc7f0f6349aebcdb3c4',}, { src: 'https://item.kakaocdn.net/do/3b669cd3532e2e97f42dc388d8c29fcbb3a18fdf58bc66ec3f4b6084b7d0b570',}, ], Comments: [{ User: { nickname: 'loveheart',}, content: '우와 강아지가 귀여워요~', }, { User: { nickname: 'starlight',}, content: '얼른 사고 싶어요!', }] }], imagePaths: [], postAdded: false, } const ADD_POST = 'ADD_POST' export const addPost = { type: ADD_POST, } const dummyPost = { id: 2, content: '더미데이터입니다.', User: { id: 1, nickname: '제로초연습', }, Images: [], Comments: [], }; const reducer = (state = initialState, action) => { switch (action.type) { case ADD_POST: return { ...state, mainPosts: [dummyPost, ...state.mainPosts], postAdded: true, }; default: return state; } }; export default reducer;영상 잘 보고 있습니다 감사합니다.

Todolist 코드 작성할때 함수표현식으로 작성된 함수는 호이스팅이 되지않는다고 하셨는데,saveItemsFn같은 함수는 어떻게 정의 되기 전에 createTodo와 같은 함수에서 사용 할 수 있는건가요?

1.처음 해당 페이지로 이동시 back에있는 데이터만 정상적으로 불러와집니다.2.두번쨰 사진과 세번쨰 사진은 다른페이지로 이동했다가 다시 해당페이지로 돌아올때 useEffect 가 정상적으로 실행, map 함수를 통해 새로운 배열을 만들시에 전에있던 배열데이터가 남아있어 동일한 데이터가 계속 쌓이는 상황입니다. 새로고침시에는 다시 정상적으로 한번만 불러와진 데이터만 보인느데 다른 페이지를 다녀와도 map 함수가 실행될때 전에 있던 데이터는 빈배열로 다시 세팅하고 map 함수가 실행되는 방법이 무엇인지 아무리 찾아봐도 해결이 안되네요.. ㅠㅜ 구원의 손길 부탁드립니다import React, { useEffect } from 'react'; import { useSelector, useDispatch } from 'react-redux'; import { Col, Row } from 'antd' import SystemLayout from '../../components/System/SystemLayout'; import SystemCard from '../../components/System/SystemCard'; import { LOAD_SYSTEMS_REQUEST } from '../../reducers/system-post'; const Test = () => { const dispatch = useDispatch(); const { mainSystems } = useSelector((state) => state.systempost); useEffect(() => { dispatch({ type: LOAD_SYSTEMS_REQUEST, }); }, []); return ( <SystemLayout> <Row justify="space-evenly"> {mainSystems.map((systempost) => ( <Col xs={6}> <SystemCard key={systempost.id} systempost={systempost} /> </Col> ))} </Row> </SystemLayout> ); }; export default Test;

안녕하세요 제로초님.post, put, delete 할때 백엔드에서 response에 data를 담아 돌려보내는 보내는 이유가 궁금합니다.프론트에서 post, put, delete 요청을 보내면, 백엔드에서는 db에 업데이트만 하고, 아무것도 안 돌려주고 나서,프론트에서는 response 200 온거 확인한 후에, 프론트 안에서 data를 변경해도 되지 않나요??새로고침 할때는 mounted 할때 일괄적으로 list 보내면 되지 않나요?

해당 강의의 http://example.codebootcamp.co.kr/api-docs/http://example.codebootcamp.co.kr/graphql사이트에 연결할 수 없다고 나옵니다 ㅠ 

$ yarn generateyarn run v1.22.19$ graphql-codegen✔ Parse Configuration⚠ Generate outputs ❯ Generate to ./src/commons/types/generated/typed.ts ✔ Load GraphQL schemas ✔ Load GraphQL documents ✖ Cannot use GraphQLObjectType "BoardReturn" from another module or realm. Ensure that there is only one instance of "graphql" in the node_modules directory. If d…error Command failed with exit code 1.info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.   practice로 주소를 변경하고 yarn generate를 실행하는데 자꾸 위와같은 오류가 납니다 ㅠㅠ

안녕하세요. TDD의 Green, Red, Refactor 파트(9:40)에서리팩터링을 진행하시면서 onPageNumberClick 함수를 useCallback으로 감싸서 렌더링이 다시 될때 이 함수가 두번 생성되지 않도록 한다고 하셨는데이 부분이 잘 이해가 가지 않아서요. 설명해주신걸로 유추해보면 useCallback으로 감싸면 함수가 한번만 생성되는 것 같은데 useCallback을 사용했을때와 사용하지 않았을 때 차이에 대해서 조금 더 설명해주실 수 있을까요?

안녕하세요. 강의 잘 듣고 있습니다.현재 섹션 1까지 모두 수강하였습니다. 다만 제목과 같이 NicknameEditForm, FollowList 구현부터 웹에 렌더가 되지 않아 진도가 막힌 상태입니다...ㅜㅜantd나 스타일 컴포넌트의 문제 같아 환경설정도 변경해보고 VS code를 재다운로드하거나 버전별로 테스트 해보기도 했는데 아직 해결 방법을 찾지 못한 상태입니다. 코드 실행한 결과입니다. 회원 정보 카드 옆에 닉네임 수정 폼이나 팔로우 리스트가 생성되어야 하는데 전혀 뜨질 않네요. 혹시 어떤 해결 방법이 있을까요?아래는 환경과 작성한 코드입니다.{ "name": "react-nodebird-front", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "dev": "next" }, "author": "kde", "license": "ISC", "dependencies": { "@ant-design/icons": "^5.1.3", "antd": "^4.3.1", "next": "^9.5.5", "prop-types": "^15.8.1", "react": "^17.0.2", "react-dom": "^17.0.2", "react-test-renderer": "^17.0.2", "styled-components": "^5.3.11" }, "devDependencies": { "eslint": "^8.41.0", "eslint-plugin-import": "^2.27.5", "eslint-plugin-react": "^7.32.2", "eslint-plugin-react-hooks": "^4.6.0" } }import React, { useCallback } from 'react'; import { Avatar, Button, Card } from 'antd'; const UserProfile = ({ setIsLoggedIn }) => { const onLogOut = useCallback(() => { setIsLoggedIn(false); }, []); return ( <Card actions={[ <div key="twit">짹짹<br/>0</div>, <div key="following">팔로잉<br/>0</div>, <div key="following">팔로워<br/>0</div>, ]} > <Card.Meta avatar={<Avatar>test</Avatar>} title="test" /> <Button onClick={onLogOut}>로그아웃</Button> </Card> ); }; export default UserProfile;import React, { useMemo } from "react"; import { Form, Input } from 'antd'; const NicknameEditForm = () => { return ( <Form style={{ marginBottom: '20px', border: '1px solid #d9d9d9', padding: '20px' }}> <Input.Search addonBefore="닉네임" enterButton="수정"/> </Form> ); }; export default NicknameEditForm;import React from "react"; import PropTypes from 'prop-types'; import { Button, List, Card } from 'antd'; import { StopOutlined } from '@ant-design/icons'; const FollowList = ({ header, data }) => { return ( <List style={{ marginBottom: '20px' }} 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: '20px' }}> <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 FollowListimport React, { useState } from 'react'; import PropTypes from 'prop-types'; import Link from 'next/link'; import { Menu, Input, Row, Col } from 'antd'; import UserProfile from '../components/UserProfile'; import LoginForm from '../components/LoginForm'; // const SearchInput = styled(Input.Search)` // vertical-align: middle; // `; const AppLayout = ({ children }) => { const [isLoggedIn, setIsLoggedIn] = useState(false); return ( <div> <Menu mode="horizontal"> <Menu.Item> <Link href="/"><a>노드버드</a></Link> </Menu.Item> <Menu.Item> <Link href="/profile"><a>프로필</a></Link> </Menu.Item> <Menu.Item> <Link href="/signup"><a>회원가입</a></Link> </Menu.Item> <Menu.Item> <Input.Search enterButton style={{ verticalAlign: 'middle' }}/> </Menu.Item> </Menu> <Row gutter={8}> <Col xs={24} md={6}> {isLoggedIn ? <UserProfile setIsLoggedIn={setIsLoggedIn}/> : <LoginForm setIsLoggedIn={setIsLoggedIn}/>} </Col> <Col xs={24} md={12}> </Col> <Col xs={24} md={6}> <a href="http://google.com" target="_blank" rel="noreferrer noopener">메인화면</a> </Col> </Row> </div> ); }; AppLayout.propTypes = { children: PropTypes.node.isRequired, }; export default AppLayout;import React, { useState, useCallback, useMemo } from 'react'; import { Form, Input, Button } from 'antd'; import Link from 'next/link'; import PropTypes from 'prop-types'; import styled from 'styled-components'; import useInput from '../hooks/useInput'; // const ButtonWrapper = styled.div` // margin-top: 10px; // `; // const FormWrapper = styled(Form)` // padding: 10px; // `; function LoginForm({ setIsLoggedIn }) { const [id, onChangeId] = useInput(''); const [password, onChangePassword] = useInput(''); // const style = useMemo(() => ({ marginTop: 10 }), []); const onSubmitForm = useCallback(() => { console.log(id, password); setIsLoggedIn(true); }, [id, password]); return ( <Form onFinish={onSubmitForm} style={{ padding: '10px' }}> <div> <label htmlFor="user-id">아이디</label> <br /> <Input name="user-id" value={id} onChange={onChangeId} required /> </div> <div> <label htmlFor="user-password">비밀번호</label> <br /> <Input name="user-password" type="password" value={password} onChange={onChangePassword} required /> </div> <div style={{ marginTop: '10px' }}> <Button type="primary" htmlType="submit" loading={false}>로그인</Button> <Link href="/signup"><a><Button>회원가입</Button></a></Link> </div> </Form> ); } LoginForm.propTypes = { setIsLoggedIn: PropTypes.func.isRequired, } export default LoginForm;/* eslint-disable react/jsx-no-undef */ /* eslint-disable no-unused-vars */ import React from 'react'; import Head from 'next/head'; import AppLayout from '../components/AppLayout'; import NicknameEditForm from '../components/NicknameEditForm'; import FollowList from '../components/FollowList'; const Profile = () => { const followerList = [{ nickname: 'test1' }, { nickname: 'test2' }, { nickname: 'test3' }]; const followingList = [{ nickname: 'test1' }, { nickname: 'test2' }, { nickname: 'test3' }]; return ( <> <Head> <title>내 프로필 | NodeBird</title> </Head> <AppLayout> <NicknameEditForm/> <FollowList header="팔로잉 목록" data={followingList}/> <FollowList header="팔로워 목록" data={followerList}/> </AppLayout> </> ); }; export default Profile;

안녕하세요. 선생님늦은 시간인데도 답변해주셔서 감사합니다(꾸벅)선생님께서 말씀해주신대로 useSelector를 써봤는데요.useSelector가 초기값만 읽고, updateReducer에 의해 상태가 업데이트되면,업데이트 된 값을 읽지 못합니다....1. console.log(title)이라고 썼는데, 아무것도 뜨지 않습니다2. Modal 컴포넌트에 제목을 입력을 해도 상태 변화를 읽지를 못합니다.어디서 잘못 된걸까요??const TodoItem = () =>{ const [state, dispatch] = useReducer(checkReducer, todoItem) const id = useSelector((state)=> state.update.id); const title = useSelector((state)=> state.update.title) const content = useSelector((state)=> state.update.content); const isDone = useSelector((state)=> state.update.isDone) const handleCheck = (id) =>{ dispatch(checkBox(id)); }; console.log(title) return( <SeveralItemContainer> <TodoItemContainer key={id}> <TitleContainer> <img className ="dot" src={dot} alt="icon"></img> <div className="title">{title}</div> <img onClick={ () => {handleCheck(id)}} className="noncheck" src = {isDone ? check: noncheck} alt="icon"></img> </TitleContainer> <div className="contentcontainer"> <div className="content">{content}</div> </div> </TodoItemContainer> </SeveralItemContainer> ) }; export default TodoItem; export const updateReducer = (state=initialState, action)=>{ switch(action.type){ case 'UPDATE_TITLE': return{...state, title: action.payload}; case 'UPDATE_STARTDATE': return{...state, startDate: action.payload}; case 'UPDATE_ENDDATE': return{...state, endDate:action.payload}; case 'UPDATE_CONTENT': return {...state, content: action.payload}; case 'ADD_ITEM': return {...state, id: Number(state.id)+1} //여기서 todoItem을 바로 쓸 수 없다. state나 action관련된 변수만 넣어야 한다 // 배열은 가능하지만, 객체는 전개연산자(...)를 쓸 수 없다 default: return state; } }; const rootReducer = combineReducers({ update: updateReducer, check: checkReducer, }); export default rootReducer; const Modal = ({onClick}) =>{ const [state, dispatch] = useReducer(updateReducer, initialState) const handleModalClick = (e) => { e.stopPropagation(); // 이벤트 버블링 막기 }; //사용자가 입력한 값을 추적하는 함수 const handleInputChange = (e) =>{ const {name, value} = e.target; dispatch({type: `UPDATE_${name.toUpperCase()}`, payload: value}) }; //클릭으로 적은 모든 내용을 한번에 전달 const addItem = () =>{ dispatch({type:'ADD_ITEM'}); }; return( <ModalBackGround onClick={onClick}> <ModalView onClick={handleModalClick} > <div className = "titleContainer"> <img className="dot" src = {dot} alt="icon"></img> <input value ={state.title} name = "title" className="title" placeholder="메모 제목" onChange={handleInputChange}></input> <img onClick={addItem} className="edit" src={edit} alt="icon"></img> </div> <div className="date"> <div className='일자'>일자</div> <input value ={state.startDate} name ="startDate" className ="start" placeholder="시작일" onChange={handleInputChange}></input> <div>~</div> <input value ={state.endDate} name= "endDate" className ="end" placeholder="종료일" onChange={handleInputChange}></input> </div> <div className='contentContainer'> <textarea value ={state.content} name ="content" className ="content" placeholder="메모" onChange={handleInputChange}> </textarea> </div> </ModalView> </ModalBackGround> ) }; export default Modal;

안녕하세요. 선생님선생님 말씀대로 useSelector를 사용해 보려고,로컬스토리지 관련 코드들은 삭제했습니다.원하는 구현기능)질문은 Modal 컴포넌트에서 리듀서에 의해 업데이트된 상태를,todoItem 컴포넌트로 가져와서 사용이 가능한가요?todoItem 컴포넌트로 가져와서 todoData에 집어넣고 싶습니다...그래서 updateReducer에서 ADD_ITEM case를 읽을때 그때 그 상태를todoItem 컴포넌트로 가져와서 사용이 하고 싶습니다.질문)1. 위에 기능을 useSelector만 알면 가능할까요?2. 리덕스에 4단계 액션, 디스패치, 리듀서, 스토어 중 스토어 부분,저장했다가 필요할때 꺼내쓰는 부분을 잘 모르겠어요.어떤 추가적인 개념 공부가 필요할 까요? const Modal = ({onClick}) =>{ const [state, dispatch] = useReducer(updateReducer, initialState) const handleModalClick = (e) => { e.stopPropagation(); // 이벤트 버블링 막기 }; //사용자가 입력한 값을 추적하는 함수 const handleInputChange = (e) =>{ const {name, value} = e.target; dispatch({type: `UPDATE_${name.toUpperCase()}`, payload: value}) }; //클릭으로 적은 모든 내용을 한번에 전달 const addItem = () =>{ dispatch({type:'ADD_ITEM'}); }; return( <ModalBackGround onClick={onClick}> <ModalView onClick={handleModalClick} > <div className = "titleContainer"> <img className="dot" src = {dot} alt="icon"></img> <input value ={state.title} name = "title" className="title" placeholder="메모 제목" onChange={handleInputChange}></input> <img onClick={addItem} className="edit" src={edit} alt="icon"></img> </div> <div className="date"> <div className='일자'>일자</div> <input value ={state.startDate} name ="startDate" className ="start" placeholder="시작일" onChange={handleInputChange}></input> <div>~</div> <input value ={state.endDate} name= "endDate" className ="end" placeholder="종료일" onChange={handleInputChange}></input> </div> <div className='contentContainer'> <textarea value ={state.content} name ="content" className ="content" placeholder="메모" onChange={handleInputChange}> </textarea> </div> </ModalView> </ModalBackGround> ) }; export default Modal; export const updateReducer = (state=initialState, action)=>{ switch(action.type){ case 'UPDATE_TITLE': return{...state, title: action.payload}; case 'UPDATE_STARTDATE': return{...state, startDate: action.payload}; case 'UPDATE_ENDDATE': return{...state, endDate:action.payload}; case 'UPDATE_CONTENT': return {...state, content: action.payload}; case 'ADD_ITEM': return {...state, id: Number(state.id)+1} //여기서 todoItem을 바로 쓸 수 없다. state나 action관련된 변수만 넣어야 한다 // 배열은 가능하지만, 객체는 전개연산자(...)를 쓸 수 없다 default: return state; } }; const TodoItem = () =>{ const [state, dispatch] = useReducer(checkReducer, todoItem) const [todoData, setTodoData] = useState(todoItem); const handleCheck = (id) =>{ dispatch(checkBox(id)); }; return( <SeveralItemContainer> { todoData.map((item)=>{ return ( <TodoItemContainer key={item.id}> <TitleContainer> <img className ="dot" src={dot} alt="icon"></img> <div className="title">{item.title}</div> <img onClick={ () => {handleCheck(item.id)}} className="noncheck" src = {item.isDone ? check: noncheck} alt="icon"></img> </TitleContainer> <div className="contentcontainer"> <div className="content">{item.content}</div> </div> </TodoItemContainer> ) }) } </SeveralItemContainer> ) }; export default TodoItem;

안녕하세요.강의를 수강하면서 next 13으로 만들고 있습니다...노드에서 이미지 정적 폴더를 생성하고, 이미지가 서버에 저장되게끔 하는거는 구현했는데,아무리 해도 next에서 서버에 있는 이미지를 불러오지를 못합니다.아래는 제가 시도해본 방법입니다.app.use('/', express.static(__dirname + '/public')); app.use(express.static('public'));express에서 클라이언트 단으로 던져주는 저 app.use 자체가 먹지 않고 있고 아무 에러도 나오지 않아서 너무 답답합니다 ㅠㅠ 어떻게 해야 될까요...?....... 

안녕하세요 선생님현재 섹션2까지 수강하였는데요 이후에는 전부 함수형 컴포넌트로 강의 해주시는 건가요?클래스형 컴포넌트 기초적인 내용 학습 병행해야 할지 고민이되서 질문드립니다! 

App.js에 있는 <BrowserRouter>태그를 Index.js의 Provider위로 감싸주세요 그러니 Loginpage.js등에서 navigate가 정상작동하네요참고하세요.

/client/src/user_action.js에 const request = axios.post('/api/users/login', dataToSubmit) // DB (server/index.js)주소와 /sever/index.js에 app.post('/api/users/login',(req, res) =>{주소를 같게 맞춰 주시면 될듯합니다. 참고해주세요.

import {createBottomTabNavigator} from '@react-navigation/bottom-tabs'; import {createNativeStackNavigator} from '@react-navigation/native-stack'; import React from 'react'; import Home from './src/screens/Home'; import Search from './src/screens/Search'; import Profile from './src/screens/Profile'; import Activity from './src/screens/Activity'; import {NavigationContainer} from '@react-navigation/native'; import Status from './src/screens/Status'; import FriendProfile from './src/screens/FriendProfile'; import EditProfile from './src/screens/EditProfile'; const App = () => { const Stack = createNativeStackNavigator(); const Tab = createBottomTabNavigator(); const BottomTabScreen = () => { return ( <Tab.Navigator screenOptions={() => ({ tabBarHideOnKeyboard: true, // tabBarShowLabel: false, headerShown: false, tabBarStyle: { height: 70, }, })}> <Tab.Screen name="Home" component={Home} /> <Tab.Screen name="Search" component={Search} /> <Tab.Screen name="Activity" component={Activity} /> <Tab.Screen name="Profile" component={Profile} /> </Tab.Navigator> ); }; return ( <NavigationContainer> <Stack.Navigator screenOptions={{headerShown: false}}> <Stack.Screen name="Bottom" component={BottomTabScreen} /> <Stack.Screen name="Status" component={Status} /> <Stack.Screen name="FriendProfile" component={FriendProfile} /> <Stack.Screen name="EditProfile" component={EditProfile} /> </Stack.Navigator> </NavigationContainer> ); }; export default App;  강의 내용과 같이 App 컴포넌트 안에서BottomTabScreen 컴포넌트를 선언하면 "Do not define components during render." 라는경고문이 뜹니다. 그래서 아래와 같이 코드를 수정하였는데App 컴포넌트 바깥에서 이렇게 선언해도 문제가 없는건가요?import {createBottomTabNavigator} from '@react-navigation/bottom-tabs'; import {createNativeStackNavigator} from '@react-navigation/native-stack'; import React from 'react'; import Home from './src/screens/Home'; import Search from './src/screens/Search'; import Profile from './src/screens/Profile'; import Activity from './src/screens/Activity'; import {NavigationContainer} from '@react-navigation/native'; import Status from './src/screens/Status'; import FriendProfile from './src/screens/FriendProfile'; import EditProfile from './src/screens/EditProfile'; const Stack = createNativeStackNavigator(); const Tab = createBottomTabNavigator(); const BottomTabScreen = () => { return ( <Tab.Navigator screenOptions={() => ({ tabBarHideOnKeyboard: true, // tabBarShowLabel: false, headerShown: false, tabBarStyle: { height: 70, }, })}> <Tab.Screen name="Home" component={Home} /> <Tab.Screen name="Search" component={Search} /> <Tab.Screen name="Activity" component={Activity} /> <Tab.Screen name="Profile" component={Profile} /> </Tab.Navigator> ); }; const App = () => { return ( <NavigationContainer> <Stack.Navigator screenOptions={{headerShown: false}}> <Stack.Screen name="Bottom" component={BottomTabScreen} /> <Stack.Screen name="Status" component={Status} /> <Stack.Screen name="FriendProfile" component={FriendProfile} /> <Stack.Screen name="EditProfile" component={EditProfile} /> </Stack.Navigator> </NavigationContainer> ); }; export default App;  

npm run dev를 작동시킨 후에 boilder-plate 상에서 오류가 발생하고 있습니다. 해당 부분들은 강의를 따라가면서 현재까지 건드린 적이 없는 부분입니다.

useState로 number를 만들어서 createBoard로 작성한 게시글의 번호를 저장해두고그 number를 variables로 넣어서 내용을 확인하려고 합니다.import { gql } from "@apollo/client"; import { useQuery } from "@apollo/client"; import { useMutation } from "@apollo/client"; import React, { useState } from "react"; const CREATE_BOARD = gql` mutation createBoard($writer: String, $title: String, $contents: String) { createBoard(writer: $writer, title: $title, contents: $contents) { _id number message } } `; const FETCH_BOARD = gql` query fetchBoard($number: Int) { fetchBoard(number: $number) { number writer title contents } } `; const GraphqlMutationArgsPage = () => { const [createBoard] = useMutation(CREATE_BOARD); const { data: fetchBoardData, refetch } = useQuery(FETCH_BOARD); const [number, setNumber] = useState(0); const onClickSubmit = async () => { const result = await createBoard({ variables: { // variables: $ 역할 writer: "훈이", title: "안녕하세요!", contents: "반갑습니다.", }, }); console.log(result); setNumber(result.data.createBoard.number); }; const onClickFetch = async () => { await refetch({ number }); console.log(fetchBoardData); }; return ( <div> <button onClick={onClickSubmit}>GRAPHQL-API 요청하기</button> {number} <button onClick={onClickFetch}>GRAPHQL-API 내용확인</button> </div> ); }; export default GraphqlMutationArgsPage; 이렇게 refetch를 사용하는게 맞나요?현재 작성한 게시글이 조회가 안되고 직전 게시글이 조회가 되네요.. 현재 작성한 게시글 number는 13280인데 조회된 게시글은 13279입니다.