Redux Toolkit을 써보고 싶은데 고민이 생겼습니다.제로초 님이 실무에서 리덕스 할 떄 Saga를 더 잘 쓰셨다고 말씀하셨던 거 같습니다. 근데 Redux Toolkit을 쓰려면 Thunk를 쓰는 게 더 편할 거 같은데 어떻게 생각하시나요?? 그리고 이미 Saga를 열심히 배워놨고 익숙해 졌는데 Toolkit를 쓰려고 Thunk로 다시 돌아가야 된다는 게 조금 배웠던 시간이 아깝기도 하고 고민중입니다. 물론 둘 다 동일한 비동기 요청을 하는 기능을 하는 것이지만 배우고 있는 입장에서는 고민이네요.제로초 님은 Redux Toolkit 쓸 때에도 Saga를 같이 쓰시는 편인가요?+인피니트 스크롤링을 구현할때의 경우도 생각을 해봐야 될 거 같은데, 이부분은 강의를 끝까지 안 들어봐서 어떤 결정이 나을지 모르겠네요

강의를 따라서 simplediary 코드를 작성해보는데 첫번째 일기 id가 계속 20으로 떠서 제가 코드를 잘못 적은 부분이 있나, 싶어 codesandbox에 올려주신 코드를 붙여넣기 해도 제 브라우저에서는 계속 id가 20 - 39로 생성이 되더라구요.그래서 뭐가 문젠가 싶어서 봤는데 강의 버전의 npm은 프로젝트 생성시 index.js 코드가 ReactDOM.render( <React.StrictMode> <App /> </React.StrictMode>, document.getElementById("root") );이렇게 생성이 되는데 제가 설치한 8.19.3 npm 버전에서는const root = ReactDOM.createRoot(document.getElementById('root')); root.render( <React.StrictMode> <App /> </React.StrictMode> );이렇게 생성이 됩니다.src에 App.js와 컴포넌트 코드들만 수정했다가 index 코드도 강의 버전대로 수정을 하니 해결이 되던데, 제가 보기엔 두 코드가 그렇게 다르지 않은 것 같은데 왜 다른 결과가 나오는지 궁금합니다. 

 postman 설치후 빈화면을 보여주라고 하시는데 저는 선생님이랑 다른 화면이 나오는데 어떤메뉴로 들어가야 하나요?

게시판 보면서 수정했는데 오류가 사라지지 않습니다.어떻게 수정하면 될까요?(LoginPage.js)(index.js)(App.js) (발생하는 오류)도와주시면 감사하겠습니다...ㅠㅠ

해당 오류를 찾아보니까 함수에 이름을 지으라고 하는데 강사님께서는 함수 이름 없이 잘 실행되는데 왜 그렇게 되나요?함수 이름의 문제가 아니라 다른 문제가 있어서 오류가 발생하는건가요??잘 하다가 이부분에서 막혔습니다...

const images = await Promise.all( req.body.image.map((image) => Image.create({ src: image })) ); await post.addImages(images); 이런식으로 Image.create() 를 적용한 다음다시 post.addImages() 하는 이유가 뭔가요? 중복된 실행이라고 생각했는데 실행해봤을때는 중복된 튜플이 생성되지는 않네요..   

1.사용자가 웹에 접속을 할 때, 브라우저 -> 프론트서버 로 요청을 보내게 되고프론트 -> 브라우저 로 html css js 파일을 보내서 뷰를 표시하게 되는데그러면 특정 기능을 사용할 때, 예를 들어 로그인 버튼을 누른다고 하면그 요청은 브라우저 -> 백엔드 인가요 프론트 -> 백엔드 인가요?만약 브라우저 -> 백엔드 이면백엔드 cors 설정에서는 프론트서버 도메인만 허용하도록 해놓는데 어떻게 브라우저에서백엔드로 접근이 가능한건가요? 2.강좌에서는 me값으로 로그인 유지를 위한 로직을 작성했고모든 페이지 접속 때마다 백엔드로 요청을 보내서 세션인증을 하는방식으로 로직을 작성했는데제가 알기로 세션인증방식은 세션id를 프론트에 보내서 쿠키에 있는 세션id를 이용해 로그인 유지를 하는것으로 알고있습니다. 제가 알고 있는 방식과 강좌에서의 세션인증이 좀 다른것 같은데 어떻게 이해해야 하나요?강좌는 ssr 적용 전 백엔드 부분까지만 들은 상태입니다.

안녕하세요! 로그아웃 후 계속 auth/me후 계속 req에서 쿠키가 존재해서 문의 남깁니다! application탭에서 쿠키는 잘 삭제가 되고 네트워크 탭에서도 logout이 성공적으로 이루어지는데 reload하면 바로 auth/me가 계속 200코드와 함께 user가 전달됩니다. 콘솔에도 찍어봤는데 계속 req에 쿠키가 같이 전달되고 있어서 요. 서버도 껐다 켜보고 했는데도 계속 그래서 문의드립니다!client/src/context/auth.tsxclient/src/components/NavBar.tsxserver/src/middlewares/auth.tsserver/src/routes/auth.ts

관련 에러를 찾아보니 ip주소를 0000이나 내 컴퓨터 ip를 입력해봐서 해결한 경우를 보았으나 제 경우는 해결되지 않습니다. 어떻게 해결할 수 있을까요? 아래 오류 코드입니다.  MongoServerError: bad auth : authentication failed at Connection.onMessage (/Users/shinheejin/Documents/boiler-plate/node_modules/mongodb/lib/cmap/connection.js:227:30) at MessageStream.<anonymous> (/Users/shinheejin/Documents/boiler-plate/node_modules/mongodb/lib/cmap/connection.js:60:60) at MessageStream.emit (node:events:513:28) at processIncomingData (/Users/shinheejin/Documents/boiler-plate/node_modules/mongodb/lib/cmap/message_stream.js:125:16) at MessageStream._write (/Users/shinheejin/Documents/boiler-plate/node_modules/mongodb/lib/cmap/message_stream.js:33:9) at writeOrBuffer (node:internal/streams/writable:392:12) at _write (node:internal/streams/writable:333:10) at Writable.write (node:internal/streams/writable:337:10) at TLSSocket.ondata (node:internal/streams/readable:766:22) at TLSSocket.emit (node:events:513:28) { ok: 0, code: 8000, codeName: 'AtlasError', connectionGeneration: 0, [Symbol(errorLabels)]: Set(2) { 'HandshakeError', 'ResetPool' }} 

다이어리 에디터 직접 만들어보고 있는데 강의에서 e.target.name에 []괄호 안에넣는데 e.target.name 자체가 string이잖아요 괄호표기법으로 안써도 위에서는 그냥 author: "" 이렇게 key갑: value 값 써줬는데 e.target.name도 console찍어보면 author라고 뜨는데 왜 괄호를 붙여야 하나요?[e.target.name] 왜 이렇게 써야하는지 궁금합니다.위에선 괄호없이 string으로 썼는데

해당 프로젝트에서 getInitialProps와 getServerSideProps를 동시에 쓰고 있는데 2개의 경우 pre-render를 하기 위해 작성했다고 이해했는데 둘 중 하나만 써도 되는 부분 아닌가요??? 어떤 상황떄문에 2개를 동시에 사용하는지 궁금합니다

안녕하세요 선생님혹시 강의를 듣고 정리한 내용을 개인 블로그에 게시해도 될까요??

 Invalid Custom Plugin "typescript" 라면서 에러가 뜹니다 어떻게 해결해야 할까요?

8분 20초경 오류나서 코드를 수정하셨는데,case ADD_POST_TO_ME: return { ...state, me: { ...state.me, // 이부분 왜 추가한건가요? Posts: [{ id: action.data }, ...state.me.Posts], }, };코드 주석부분 왜 추가하신건가요..?const dummyUser = (data) => ({ ...data, nickname: "wewewe", id: 1, Posts: [{ id: 1 }], Followings: [{ nickname: "we1" }, { nickname: "we2" }, { nickname: "we3" }], Followers: [{ nickname: "we1" }, { nickname: "we2" }, { nickname: "we3" }], });dummy데이터 구조를 보면Posts를 제외한 nickname, id, Followings 등 변하지 않는 데이터들의 불변성을 유지하기 위해서 추가한것이 맞는건가요?!

안녕하세요. 질문 있습니다.강의에서는 SWR을 쓰시는데 공부할때는 react-query를 쓰려고 합니다. 이유는 생태계가 더 큰 라이브러리를 사용할 목적이었는데 알려주신 npm trends에 검색해보니 둘 다 비슷비슷하더라고요.SWR도 아직 많이 쓰이는 추세인가요??? 궁금한 이유는 react-query 외에도 추가로 하나의 라이브러리를 동시에 더 써볼 생각이라 추천해주시면 감사합니다. 추가로 수업 외 질문으로 유틸리티 라이브러리?를 하나 써보려고 합니다. 기존에는 fxjs를 사용 중이었습니다. npm trends를 보니 가장 많이 사용하는 라이브러리는 lodash, rxjs인 것 같고 lamda도 많이 쓰는거 같고 타입스크립트로 된 fp-ts도 있는거 같은데 fp-ts를 제외한 것들 중 추천해주시는게 있을까요? 감사합니다!!

제로초쌤 제가 우분투에서 Nodebird를 진행하고 있는데 더북에 써져있는 거처럼 리눅스(우분투)에서 설치하는 방법 그대로 설치하다가 Can't connect to local MySQL server through socket '/var/run/mysqld/mysqld.sock' (13) 소켓 에러가 계속 나서 해결하려고 인터넷에 찾아보면서 따라하고 있는데 해결이 안되서 혹시 윈도우로 mysql설치해서 진행해도 크게 차이가 없을까요?

제로초님, 코드를 따라친 후에 로그아웃을 하고 다시 로그인 하면 이런 에러메세지가 뜹니다.그런데 네트워크 탭을 보면 로그인이 정상적으로 된거 같아서 새로고침을 하면 에러 메세지가 사라지고 슬랙에서 로그인된 화면이 제대로 뜹니다.근데 또 여기서 워크스페이스를 생성하려고 하면 콘솔에 axioserror메세지가 떠서 어떻게 해야될지 모르겠습니다..Workspace/index.tsximport axios from "axios"; import React, { FC, useCallback, useState } from "react"; import useSWR from 'swr'; import fetcher from "@utils/fetcher"; import { Navigate, Routes, Route } from "react-router-dom"; import { AddButton, Channels, Chats, Header, LogOutButton, MenuScroll, ProfileImg, ProfileModal, RightMenu, WorkspaceButton, WorkspaceName, Workspaces, WorkspaceWrapper } from "@layouts/Workspace/style"; import gravatar from 'gravatar'; import loadable from '@loadable/component'; import Menu from "../../components/Menu"; import Modal from "../../components/Modal"; import { Link } from "react-router-dom"; import { IUser } from "@typings/db"; import { Button, Input, Label } from "@pages/SignUp/styles"; import useInput from "@hooks/useInput"; import {toast} from 'react-toastify'; const Channel = loadable(() => import('@pages/Channel')); const DirectMessage = loadable(() => import('@pages/DirectMessage')); const Workspace: FC<React.PropsWithChildren<{}>> = ({children}) => { const [showUserMenu, setShowUserMenu] = useState(false); const [showCreateWorkspaceModal, setShowCreateWorkspaceModal] = useState(false); const [newWorkspace, onChangeNewWorkspace, setNewWorkspace] = useInput(''); const [newUrl, onChangeNewUrl, setNewUrl] = useInput(''); // revalidate = 서버로 요청 다시 보내서 데이터를 다시 가져옴 // mutate = 서버에 요청 안보내고 데이터를 수정 const {data: userData, error, mutate} = useSWR<IUser | false>('/api/users', fetcher, { dedupingInterval: 2000, }); const onLogout = useCallback(() => { axios.post('/api/users/logout', null , { withCredentials: true, }) .then(() => { mutate(false, false); }) }, []); const onClickUserProfile = useCallback((e: any) => { e.stopPropagation(); setShowUserMenu((prev) => !prev); }, []) const onClickCreateWorkspace = useCallback(() => { setShowCreateWorkspaceModal(true); }, []) const onCreateWorkspace = useCallback((e: any) => { e.preventDefault(); // 띄어쓰기도 검사해줘야됨 if(!newWorkspace || !newWorkspace.trim()) return; if(!newUrl || !newUrl.trim()) return; axios.post('http://localhost:3095/api/workspaces', { workspace: newWorkspace, url: newUrl, }, { withCredentials: true, }) .then(() => { mutate(); setShowCreateWorkspaceModal(false); setNewWorkspace(''); setNewUrl(''); }) .catch((error) => { console.dir(error); // 에러가 나면 사용자가 인지하게 해줌 toast.error(error.response?.data, { position: 'bottom-center' }) }) }, [newWorkspace, newUrl]) const onCloseModal = useCallback(() => { setShowCreateWorkspaceModal(false); }, []) if(!userData) { return <Navigate to="/login" /> } if(!userData) return null; return( <div> <Header> <RightMenu> <span onClick={onClickUserProfile}> <ProfileImg src={gravatar.url(userData.email, { s: '28px', d: 'retro' })} alt={userData.nickname} /> {showUserMenu && <Menu style={{ right: 0, top: 38 }} show={showUserMenu} onCloseModal={onClickUserProfile}> <ProfileModal> <img src={gravatar.url(userData.nickname, { s: '36px', d: 'retro' })} alt={userData.nickname} /> <div> <span id="profile-name">{userData.nickname}</span> <span id="profile-active">Active</span> </div> </ProfileModal> <LogOutButton onClick={onLogout}>로그아웃</LogOutButton> </Menu>} </span> </RightMenu> </Header> <WorkspaceWrapper> <Workspaces> {userData?.Workspaces.map((ws) => { return ( <Link key={ws.id} to={`/workspace/${123}/channel/일반`}> <WorkspaceButton>{ws.name.slice(0, 1).toUpperCase()}</WorkspaceButton> </Link> ); })} <AddButton onClick={onClickCreateWorkspace}>+</AddButton> </Workspaces> <Channels> <WorkspaceName>Sleact</WorkspaceName> <MenuScroll>menu scroll</MenuScroll> </Channels> <Chats> <Routes> <Route path="/channel" element={<Channel />} /> <Route path="/dm" element={<DirectMessage />} /> </Routes> </Chats> {/* Input이 들어있으면 별도의 컴포넌트로 빼는 것을 추천(input에 글자를 입력할 때마다 여기 있는 함수들이 다 리렌더링 되기 때문에 비효율적) */} </WorkspaceWrapper> <Modal show={showCreateWorkspaceModal} onCloseModal={onCloseModal}> <form onSubmit={onCreateWorkspace}> <Label id="workspace-label"> <span>워크스페이스 이름</span> <Input id="workspace" value={newWorkspace} onChange={onChangeNewWorkspace} /> </Label> <Label id="workspace-url-label"> <span>워크스페이스 이름</span> <Input id="workspace" value={newUrl} onChange={onChangeNewUrl} /> </Label> <Button type="submit">생성하기</Button> </form> </Modal> </div> ) } export default Workspace;Modal/index.tsximport React, { useCallback, FC } from "react"; import { CloseModalButton, CreateModal } from "./style"; interface Props { show: boolean; onCloseModal: () => void; children: React.ReactNode; } const Modal: FC<Props> = ({show, children, onCloseModal}) => { const stopPropagation = useCallback((e: any) => { e.stopPropagation() }, []); if(!show){ return null; } return( <CreateModal onClick={onCloseModal}> <div onClick={stopPropagation}> <CloseModalButton onClick={onCloseModal}>&times;</CloseModalButton> {children} </div> </CreateModal> ); }; export default Modal;swr2.0 버전, react v18, typescript v18swr을 최신버전 사용해서 revalidate대신 mutate를 사용했는데 제가 잘못 사용한건지 모르겠습니다.

콘솔 결과와 error가 같이 출력됩니다!

안녕하세요. 2강 진행 중 상품목록 조회시 msw Response 결과에 대한 body 값이 ReadableStream 으로 넘어옵니다.이 경우 body 의 data를 확인할 방법이 있을까요?답변 부탁드립니다.감사합니다.

강사님 안녕하세요 좋은강의 잘 수강중인 학생입니다.강의중에는 클라이언트에 저장된 확장자 2개의 이미지를 사용해서 분기처리를 하셨는데요,서버에서 받아오는 이미지파일을 분기처리 할려면(webp를 지원하지않는 브라우저를 위해)webp파일 이미지와 jpg(또는 png) 파일 이미지 총 2개 파일 이미지를 보내줘야 분기처리가 가능한가요?아니면 서버에서 1개의 확장자 이미지를 보내주면jpg -> webp 또는 webp->jpg로 바꾸어서 분기처리 하는방법은 없을까요?