다음과 같은 양식으로 남겨주세요.질문을 한 배경 : 배포목록에 netlify가 없어요. 질문내용 : codeSandbox에서 react 키워드가 들어간 모든 템플릿을 찾아봤는데, netlify가 나오지 않습니다. 앞서 2분이 동일한 내용으로 글 작성해주신 걸로 아는데, 어떻게 정리가 된 걸까요?

안녕하세요 제로초님 강의듣고 리덕스, 사가 대신 툴킷과 내장 썽크를 사용해서 다시 만들어보는 중인데 게시글 등록시 글은 정상적으로 등록이 되는데  게시글 갯수가 실시간으로 바뀌지 않고 새로고침 해야 반영이 됩니다. 삭제할때도  정상적으로 삭제는 되는데 새로고침해야 삭제된 결과가 반영이 됩니다. 백엔드 부분은 강의와 같이 js로 작성했고  게시글 작성 툴킷은 다음과 같이 코드작성했습니다.  // toolkit/post.ts export const initialState: PostState = { // 기본값 mainPosts: [], imagePaths: [], postAdded: false, // 게시글 로딩 loadPostLoading: false, loadPostDone: false, loadPostError: null, // 추가 로딩 hasMorePosts: false, // 게시글 작성 addPostLoading: false, addPostDone: false, addPostError: null, // 게시글 삭제 removePostLoading: false, removePostDone: false, removePostError: null, export const addPostAction = createAsyncThunk( 'post/addPost', async (data: FormData) => { const response = await axios.post('/post', data); return response.data; } ); export const removePostAction = createAsyncThunk( '/post/delete', async (data: number) => { const response = await axios.delete(`/post/${data}`); return response.data; } ); extraReducers: (builder) => { builder // 게시글 추가 .addCase(addPostAction.pending, (draft) => { draft.addPostLoading = true; draft.addPostDone = false; draft.addPostError = null; }) .addCase(addPostAction.fulfilled, (draft, action) => { draft.addPostLoading = false; draft.addPostDone = true; draft.mainPosts.unshift(action.payload); }) .addCase(addPostAction.rejected, (draft, action) => { draft.addPostLoading = false; draft.addPostError = action.error.message; }) // 게시글 삭제 .addCase(removePostAction.pending, (draft) => { draft.removePostLoading = true; draft.removePostDone = false; draft.removePostError = null; }) .addCase(removePostAction.fulfilled, (draft, action) => { draft.removePostLoading = false; draft.removePostDone = true; draft.mainPosts = draft.mainPosts.filter( (v) => v.id !== action.payload ); }) .addCase(removePostAction.rejected, (draft, action) => { draft.removePostLoading = false; draft.removePostError = action.error.message; })  이해가 안가는 부분이 post에서 게시글 삭제, 입력등의 작업을 하고  user에서 회원가입,로그인,로그아웃, 팔로우 등의 작업을 하게 나눠놨는데 게시글 입력할때 mainPosts의 값이 추가될때마다 그 값이 컴포넌트에서 불러와져서  화면의 게시글 갯수 부분이 바뀌는건 이해가 가는데 // pages/index.ts const Home = () => { const { mainPosts, hasMorePosts, loadPostLoading } = useSelector( (state: RootState) => state.post ); {me && <PostForm />} {mainPosts.map((post) => ( <PostCard key={post.id} post={post} /> ))} 이 부분에서/component/UserProfile.tsx const UserProfile = () => { const { me, logOutLoading } = useSelector((state: RootState) => state.user); return ( <> <Card actions={[ <div key='twit'> 짹짹 <br /> {me?.Posts.length} </div>, <div key='follower'> 팔로워 <br /> {me?.Followings.length} </div>, <div key='following'> 팔로잉 <br /> {me?.Followers.length} </div>, ]} > me는 툴킷의 user.ts 의 me를 참조하는거 아닌가요? 게시글 입력,삭제시 post.ts를 통해 post.ts의 mainPosts 값이 바뀌는데  user.ts를 참조하는 컴포넌트에서 me.Posts.length 값이 바뀌는 부분이 잘 이해가 가질 않습니다.  그리고 댓글 삭제기능을 추가하고 싶은데요. //pages/index.ts const { mainPosts, hasMorePosts, loadPostLoading } = useSelector( (state: RootState) => state.post ); {mainPosts.map((post) => ( <PostCard key={post.id} post={post} /> ))} //component/PostCard.tsx const { removePostLoading } = useSelector((state: RootState) => state.post); const onRemovePost = useCallback(() => { dispatch(removePostAction(post.id)); }, []); // post.ts export const removePostAction = createAsyncThunk( '/post/delete', async (data: number) => { const response = await axios.delete(`/post/${data}`); return response.data; } ); .addCase(removePostAction.fulfilled, (draft, action) => { draft.removePostLoading = false; draft.removePostDone = true; draft.mainPosts = draft.mainPosts.filter( (v) => v.id !== action.payload ); }) //back/routes/post router.delete('/:postId', isLoggedIn, async (req, res, next) => { try { await Post.destroy({ where: { id: req.params.postId, UserId: req.user.id }, }); res.status(200).json({ PostId: parseInt(req.params.postId, 10) }); } catch (err) { console.error(err); next(err); } });  게시글을 삭제할때는 post.id로 해당하는 글의 id를 바로 보내서 삭제할수 있는건  이해가 가는데 comment의 경우 [{댓글1}, {댓글2}] 형식으로 각 댓글의  값이 들어있어서 이부분을 어떻게 해야할지 감이 잡히지 않습니다.  

const user = await User.findOneAndUpdate({_id: req.user._id, "cart.id": req.body.productId },{ $inc: {"cart.$.quantity": 1} } },{new: true {)여기서 "cart.$.quantity":1 $는 왜 붙인건가요?무슨 문법인거죠?

안녕하세요! React로 NodeBird SNS 만들기섹션1 로그인 폼 만들기까지 수강한 학생입니다!사전에 next 9버전, antd 4버전을 설치하였습니다.import { Form, Input, Button } from 'antd';발생한 에러는 아래와 같습니다.콘솔에 오류가 뜨지만 화면 자체는 정상적으로 뜹니다.에러 메시지를 번역해보니 아래와 같았습니다.(오류 추정 코드이며, 버튼 코드는 아래에선 생략했습니다.)return ( <Form> <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> </Form> );에러 메시지를 확인하고 문제가 LoginForm.js 파일에서 발생한 것이라 추측했고,LoginForm의 return에 있는 Input name 속성을 id로 변경하니 콘솔 오류가 사라졌습니다.왜 해결된 것인지 이유가 궁금합니다!return ( <Form> <div> <label htmlFor="user-id">아이디</label> <br /> <Input id="user-id" value={id} onChange={onChangeId} required /> </div> <div> <label htmlFor="user-password">비밀번호</label> <br /> <Input id="user-password" type="password" value={password} onChange={onChangePassword} required /> </div> </Form> );

sandbox에서 default 파일(.mjs) 말고 .js 파일을 새로 만들어서 console.log를 실행했는데 .mjs 처럼 즉시 실행이 안됩니다. (이떄 instant preview도 on 했습니다.)

안녕하세요! accessToken 저장 관련하여 궁금한 점이 생겨 질문드립니다.로그인의 결과로 accessToken을 받아오고 이것을 보안 문제를 해결하고자 로컬/세션 스토리지가 아닌 변수(recoil state)에 저장하셨고 이를 로그인한 사람의 정보를 요청하기 위해 쿠키를 통해 headers에 연동 시키셨는데, 이러면 변수에 저장한 값을 어쨌든 headers의 쿠키에서 확인할 수 있게 되어 글로벌 변수에 저장한 의미가 없어진 것 아닐까 하는 생각이 들어서 질문드리게 되었습니다.항상 좋은 강의 감사드립니다.

 왜 두번 실행되는 건지 모르겠어요..어디가 잘못된걸까요??

안녕하세요. 회원가입 과제를 하려고 하는데너무 막막해서요...모양만 똑같이 만들면 되는 건가요?아니면 실제로 입력이 되는 형식대로 만들어야 하는 건가요?

제공하신 영화 api 홈페이지 주소를 찾을 수 없어요ㅠㅠ 강의에서 한 대로 https://www.themoviedb.org/ 접속한 후에 More에서 API를 선택하면 이런 화면이 나와요

어제 질문 남겼는데 답변해주신대로 해봤는데 아직도 작성완료가 안됩니다... ㅠㅠ강의 돌려보면서 틀린거 없나 살폈는데도 모르겠어요.. 콘솔에도 아무것도 안찍히구요..무슨 일일까요? ㅠㅠ샌드박스 링크 남깁니다..https://codesandbox.io/s/late-morning-d483sv?file=/src

전체 목록까지는 불러와 지는데 상세페이지가 안되고 있습니다.rest까지는 됐었는데 graphql로 바꾸면서 잘안돼고 있네요...정상적으로 query key와 id는 잘 들어가는것 같습니다.https://github.com/littleduck1219/Web_Toy_Project/tree/main/shopping-mall

File sizes after gzip: 56.23 kB build\static\js\main.c2dd5a76.js 1.22 kB build\static\css\main.9a059f26.css The project was built assuming it is hosted at /. You can control this with the homepage field in your package.json. The build folder is ready to be deployed. You may serve it with a static server: serve -s build Find out more about deployment here: https://cra.link/deployment C:\Users\min seo hyun\Desktop\emotion-diary>npm install -g serve changed 89 packages in 5s 24 packages are looking for funding run npm fund for details C:\Users\min seo hyun\Desktop\emotion-diary>serve -s build 'serve'은(는) 내부 또는 외부 명령, File sizes after gzip: 56.23 kB build\static\js\main.c2dd5a76.js 1.22 kB build\static\css\main.9a059f26.css The project was built assuming it is hosted at /. You can control this with the homepage field in your package.json. The build folder is ready to be deployed. You may serve it with a static server: serve -s build Find out more about deployment here: https://cra.link/deployment C:\Users\min seo hyun\Desktop\emotion-diary>npm install -g serve changed 89 packages in 5s 24 packages are looking for funding run `npm fund` for details C:\Users\min seo hyun\Desktop\emotion-diary>serve -s build 'serve'은(는) 내부 또는 외부 명령, 실행할 수 있는 프로그램, 또는 배치 파일이 아닙니다.실행할 수 있는 프로그램, 또는 배치 파일이 아닙니다.cmd창에서 빌드 파일 생성하고 serve도install 하였습니다.그 다음 과정인 serve -s builde진행하는 과정에서 위와같은 오류가 나오는데 왜 그런지 도와주세요ㅠㅠㅠ

const store = configureStore({ reducer:rootReducer, middleware: (getDefaultMiddleware)=>{ const defaultMiddleware = getDefaultMiddleware(); return [...defaultMiddleware]; } });강사님 마지막 실습코드에서여기서 기본미들 웨어를 가져 오는 이유를 잘 모르겠습니다   

serializableCheck: { ignoredActions: [ REHYDRATE, FLUSH, PAUSE, PERSIST, PURGE, REGISTER, ], },강사님 마지막 실습 코드에서 질문드려요 여기 코드는 검색을 하니 직렬화,역질렬화 검사 할때 사용 하는거라는데 마지막 실습 코드에서는 어떻게 사용 되는 건가요? 어떤 연관성? 이 있는 건가요?

안녕하세요, 소플님.챕터 7 나만의 훅 만들기를 공부하다가 궁금한 점이 있어서 질문드립니다. 228쪽 커스텀 훅 추출하기 예제 코드에서function useUserStatus(userId) { //... useEffect(() => { function handleStatusChange(status) { //... } //... }) //... }이런 식으로 useEffect 안에 handleStatusChange 함수를 정의하셨는데,useUserStatus 바로 아래에 정의하지 않고 useEffect 안에 정의하신 이유가 있을까요?어떤 상황에서 useEffect 안에 함수를 정의해야 하는 것인지 궁금합니다. 감사합니다.

작성완료를 누르면 새로 추가가 되지 않습니다.뭐가 문제일까요?코드 샌드박스 주소는 여기 있습니다.https://codesandbox.io/s/late-morning-d483sv

안녕하세요! NextJS 13 강의를 듣는 과정에서 궁금증이 생겨 질문 드립니다.기존의 React 같은 경우에는 컴포넌트에 path를 지정하여 라우팅하는 방식으로 코드를 작성해나갔었던 것 같은데요,NextJS의 경우 about 페이지를 만들기 위해 about.tsx를 작성함으로써 라우팅을 구현하고, NextJS 13의 경우 디렉토리를 path 구조로 작성하여 라우팅을 구현하는 것으로 이해했습니다.React에서는 컴포넌트에 일일이 라우팅 path를 정해주기 때문에, 재사용 가능한 컴포넌트로 독립적으로 사용할 수 있었던 것 같은데 NextJS의 경우 재사용 컴포넌트를 어떻게 관리하는지 궁금하여 질문 드립니다.또한 리액트 version 18에서 Suspense를 통한 서버사이드렌더링이 SEO에 영향을 미치는지, 혹시나 SEO를 개선할 수 있다면 NextJS를 사용하지 않고 React 만으로 최적화된 앱을 만들 수 있는지 추가적으로 질문 드립니다.좋은 강의 덕에 열심히 듣고 있습니다. 질문 읽어주셔서 감사합니다!

안녕하세요.antd 임포트할때 이런 에러가 발생했는데요.이전 커뮤니티 글을 확인해서선생님이 말씀해주신 강의용 버전으로 바꾸고yarn.lock과 노드모듈즈를 다시 지운다음yarn install했는데도 아직도 저렇게 에러가 나와서요ㅠㅠ뭐가 문제일까요?yarn dev해보니 아이콘은 잘 나와요

터미널에 socket 설치 후 부터 모든 import에 저 에러가 뜨는데 이유를 모르겠습니다Parsing error: DeprecationError: 'originalKeywordKind' has been deprecated since v5.0.0 and can no longer be used. Use 'identifierToKeywordKind(identifier)' instead

강사님 설치하는것도 잘 따라했는데강사님은 import부분에 오류가 안뜨는데 저는 import부분에서 이런 오류가 뜨더라고요.  tsconfig에서 뭐가 잘못됐단건지 모르겠어요ㅠ