제가 redux toolkit을 이용해서 제로초님 강의를 따라가고 있는데 dispatch로 데이터를 넘겨주는 과정중에 이해가 잘 안되는 부분이 있어서 질문드립니다로그인을 하는 과정인데LoginForm.js const onSubmitForm = useCallback(() => { console.log(email, password); dispatch( loginAction({ email, password, }) ); }, [email, password]);user.js export const loginAction = createAsyncThunk(LOG_IN, async (data) => { await wait(1000); return data; }); .... .addCase(loginAction.fulfilled, (state, action) => { state.logInLoading = false; state.logInDone = true; state.user = dummyUser; state.loginData = action.data; })이렇게 두부분의 코드로 아래의 action 과정이 일어나는데 LoginForm.js에서 dispatch로 email, password를 넘겨주었는데 딱히 user.js에서 이를 처리하는 코드는 보이지 않습니다 redux devtools에서는 payload에 email과 password를 받은것은 확인이 되는데 말입니다그리고 저는 initialState에 email과 password를 설정하지 않았습니다export const initialState = { logInLoading: false, // 로그인 시도중 logInError: null, // 로그인 에러 logInDone: false, // 로그인 상태 체크 logOutLoading: false, //로그아웃 시도중 logOutError: null, // 로그아웃 에러 signUpLoading: false, // 회원가입 시도중 signUpDone: false, // 회원가입 상태 체크 signUpError: null, // 회원가입 에러 user: null, signUpData: {}, loginData: {}, }; 이렇게 되면 payload에 들어있는 email과 password는 어디에 어떻게 저장이 되는걸로 생각을 해야하나요?

리액트 npx create-react-app [이름]으로 해서 프로젝트 생성해서 보면 index.html과 app.js를 같이 작성하는지 아니면 app.js만 하는지. 알고 싶습니다 src에 컴포넌트 폴더를 생성하면 파일 종류가 어떻게 되어 있는지 알고 싶습니다

배너 슬라이드 기능만 잘 되지 않습니다.최신 버전 강의 따라 하였습니다....

도포자료 부록 버전 클릭하니까, https://drive.google.com/file/d/1uvbiIXHVC3QIYBD1XOFRdiHiDQL57-G8/viewnextjs와 typescript 내용 한페이지만 있는데 부록 관련 도포자료 pdf가 어디 있나요~?

yarn 설치가 안됩니다 npm 으로는 작동이 되는데 yarn 이면 아무것도 안되네요

저같은 경우는 오타 문제였습니다ㅠㅠ 비슷한 질문들 보이는데 서버 에러로그 잘 살펴보세요보면 ReferenceError에 falase라고 false 오타여서 오류났었어요

안녕하세요. 리액트 04-01-rest-get강의를 보다가 export default function RestGetPage() { function onClickAsync() { const result = axios.get("https://koreanjson.com/posts/1"); console.log(result); //Promise } // async function onClickSync() { // const result = await axios.get("https://koreanjson.com/posts/1"); => 함수 중복 선언 문제 // console.log(result); //제대로 된 결과 // }아랫부분의 주석 코드에서 함수 중복 선언 문제가 발생할 수 있으니 화살표 함수를 쓰라고 하셨는데요.함수 중복 선언의 예제를 설명하시는건 이해가 됐는데왜 저 코드가 함수 중복 선언인지 이해가 안가요.위에 함수랑 주석된 함수 이름은 다른데왜 중복선언인가요?챗지피티한테 물어봤더니 자기도 모르겠대요ㅠ그리고 여태 들었던 강의들보다 강사님 강의가 퀄리티가 너무 좋은 거 같아요

선생님 안녕하세요!실제 서비스들은 누적된 글개수가 엄청 많은데, 실제 현업에서도 filter로 글삭제를 하는지 궁금합니다.글 개수가 엄청 많아지면 글 하나 삭제버튼 눌렀을 때 filter로 배열을 돌다가 로딩이 느려질 것 같다는 생각이 들어서요!

module를 지웠다가 깔아봐도 계속 이 오류가 뜨네요.,..

이전 메인페이지가 뜨지 않는다는 질문과 답변들을 통해 App.js파일과 index.js 파일 상단에 import React from 'react'; 를 넣기도 해보고 node와 npm 삭제 > 재설치 후 진행해 보아도 메인페이지에 글자가 뜨지 않아 질문드립니다ㅜㅜ또한 각 파일의 vscode내 터미널 로그를 보아도 딱히 에러가 보이지 않아 문의드립니다..! 

DiaryEditor에서 뒤로가기랑 취소하기 버튼 2개가 있는데 "취소하기를 삭제하기로 바꿔야 하는 것 아닌가?"라는 의문이 들었습니다. 강의를 모든 페이지 구성까지 들었는데 어디에서 일기 삭제하기가 없어서요..혹시 책이나 뒷 강의에 나올진 모르겠지만..

fly.io에 server 프로젝트를 deploy 단계까지 마쳤다.web 프로젝트까지 배포가 완료 되어 모든 동작이 잘 이뤄지고 있다.하지만, 일정 시간이 지나면 자동으로 fly.io에 배포된 DB가 초기화가 된다.초기화가 된 것인지, local의 데이터가 자동 업로드 되면서 덮어씌여진 것인지는 잘 모르겠다.이전 질문의 답변을 보면, Commit을 하면서 fly.io가 자동으로 덮어씌여진다는 것을 보았다.-> 하지만, 실험 결과 Commit을 따로 하지 않아도 초기화가 된다.만약 git과 연관이 있다면6-1. 배포 이후 별다른 작업을 하지 않았지만, 일정시간이 지나면, vercel와 같이 자동으로 git의 repository 최신 내용 바탕으로 업데이트 되어, git에 이미 올라가 있던 DB가 fly.io에 반영이 되는것인가가 궁금합니다.6-2. 또한, 그렇다면 애초에 vercel은 레포지토리 주소를 참고하여 배포하였다면, fly.io는 그저 플랫폼 로그인 수단으로만 git을 연동하였는데, 최신 커밋을 참고하는 기능이 있는지도 궁금합니다.결론적으로 현재 반복적으로 DB가 초기화 되는 현상을 고치고 싶습니다. 추가적인 실험 결과, 로컬의 nodemon server.js가 돌고 있는 server 프로젝트를 종료를 하여도, 일정 시간이 지나면 fly.io의 DB가 초기화 되는 것으로 보아, server의 내용이 바뀌면서 자동으로 로컬 내용이 fly.io로 넘어가는 것도 아닌 것 같습니다. 

const getStringDate = (date) => { return date.toISOString().slice(0, 10); } const New = () => { const [date, steDate] = useState(getStringDate(new Date())); const navigate = useNavigate(); return ( <div> <MyHeader headText={"새 일기쓰기"} leftChild={<MyButton text={'< 뒤로 가기'} onClick={()=> navigate(-1)}/>} /> <div> <section> <h4>오늘은 언제인가요?</h4> <div className="input-box"> <input value={date} type="date" onChange={(e) => steDate(e.target.value)} /> </div> </section> </div> </div> ) }왜 저는 yyyy-mm-dd 형식이 아니라 yyyy.mm.dd로 나올까요? ㅠㅠ

동일하게 코드를 작성해보았는데 fetchPosts 함수가 2번 실행되어 포스트 리스트에 데이터가 2번 중복으로 들어갑니다.강의에서도 19분 12초를 보니 2번 호출이 되는 것으로 보입니다. useEffect(() => { dispatch(fetchPosts()); }, [dispatch]);이 부분이 2번 실행되는 문제 같아서 버튼 클릭할 때 fetchPosts 함수를 dispatch하는 방식으로 바꾸었더니 데이터가 1번만 요청됩니다. const handleClick = () => { dispatch(fetchPosts()); };useEffect를 사용해서 페이지 접속 시 자동으로 데이터가 1번만 호출되게 하고 싶은데 어떻게 수정해야 할까요? useEffect(() => { dispatch(fetchPosts()); }, []);이렇게 수정해도 2번 실행됩니다..ㅠㅠ 

이건 class 파일에서 작업한 내용이고  아래는 freeboard-frontend에서 작업한 내용입니다. 파일 지우고 똑같이 따라서 설치 했는데 안돼요..안에 내용도 다른 것 같아요 ㅠㅠ

https://www.gravatar.com/avatar?d=mp&f=y 에서 404 에러가 뜨네요

date를 나타내기 위해const getStringDate = (date) => { return date.toISOString().slice(0, 10); }사용헤서 date를 설정하니까밤에 작성하건 낮에 작성하건 Home페이지에서모두 같은 시간으로 저장되서 시간순으로 저장되는 느낌이 안사는 것 같아요.toISOstring을 안하고 onCreate에 데이터를 넣는 코드 구조도 알려주실 수 있나요? --------------------------------------스스로 생각을 해보았는데 혹시const handleSubmit = () => { if (content.length < 1) { contentRef.current.focus(); return; } onCreate({ date, content, emotion }); navigate("/", { replace: true }); };에서 onCreate 함수에 date대신 new Date().getTime()를 넣으면 제가 생각한 문제가 해결될까요? --------------------------------------다시 생각을 해보았는데 이렇게 하면 시간이 지났을때 전날 일기를 작성할 수가 없네요..

저장을 눌렀는데 위 화면이 뜨길래 sudo로 다시 시도를 눌렀습니다. 그런데 저장하지 못함 화면이 뜨고 다시 시도를 눌러도 저장이 되지 않습니다.

<img src="images/icons/logo.png" /> 만으로 사진이 불러와 지는데요 엄밀히 따지면 images 파일은 public 폴더 아래 있으니<img src="../public/images/icons/logo.png" /> 처럼 상위 폴더로 이동 후 public에서 images에 접근할 수 있는 것 아닌가요?

안녕하세요.import React from 'react'; import { Container, Header } from './styles'; import useSWR from 'swr'; import fetcher from '@utils/fetcher'; import { useParams } from 'react-router'; import gravatar from 'gravatar'; const DirectMessage = () => { const { workspace, id } = useParams<{ workspace: string; id: string }>(); const { data: userData } = useSWR(`api/workspaces/${workspace}/members/${id}`, fetcher); const { data: myData } = useSWR('api/users', fetcher); if (!userData || !myData) { return null; } return ( <Container> <Header> <img src={gravatar.url(userData.email, { s: '24px', d: 'retor' })} alt={userData.nickname} /> <span>{userData.nickname}</span> </Header> {/* <ChatList /> <ChatBox /> */} </Container> ); }; export default DirectMessage; 이건 DirectMessage입니다.// import EachDM from '@components/EachDM'; // import useSocket from '@hooks/useSocket'; import { CollapseButton } from '@components/DMList/styles'; import { IDM, IUser, IUserWithOnline } from '@typings/db'; import fetcher from '@utils/fetcher'; import React, { FC, useCallback, useEffect, useState } from 'react'; import { useParams } from 'react-router'; import { NavLink } from 'react-router-dom'; import useSWR from 'swr'; const DMList: FC = () => { const { workspace } = useParams<{ workspace?: string }>(); const { data: userData } = useSWR<IUser>('/api/users', fetcher, { dedupingInterval: 2000, // 2초 }); const { data: memberData } = useSWR<IUserWithOnline[]>( userData ? `/api/workspaces/${workspace}/members` : null, fetcher, ); // const [socket] = useSocket(workspace); const [channelCollapse, setChannelCollapse] = useState(false); const [countList, setCountList] = useState<{ [key: string]: number }>({}); const [onlineList, setOnlineList] = useState<number[]>([]); const toggleChannelCollapse = useCallback(() => { setChannelCollapse((prev) => !prev); }, []); const resetCount = useCallback( (id) => () => { setCountList((list) => { return { ...list, [id]: 0, }; }); }, [], ); const onMessage = (data: IDM) => { console.log('dm왔다', data); setCountList((list) => { return { ...list, [data.SenderId]: list[data.SenderId] ? list[data.SenderId] + 1 : 1, }; }); }; useEffect(() => { console.log('DMList: workspace 바꼈다', workspace); setOnlineList([]); setCountList({}); }, [workspace]); // useEffect(() => { // socket?.on('onlineList', (data: number[]) => { // setOnlineList(data); // }); // console.log('socket on dm', socket?.hasListeners('dm'), socket); // return () => { // console.log('socket off dm', socket?.hasListeners('dm')); // socket?.off('onlineList'); // }; // }, [socket]); return ( <> <h2> <CollapseButton collapse={channelCollapse} onClick={toggleChannelCollapse}> <i className="c-icon p-channel_sidebar__section_heading_expand p-channel_sidebar__section_heading_expand--show_more_feature c-icon--caret-right c-icon--inherit c-icon--inline" data-qa="channel-section-collapse" aria-hidden="true" /> </CollapseButton> <span>Direct Messages</span> </h2> <div> {!channelCollapse && memberData?.map((member) => { const isOnline = onlineList.includes(member.id); const count = countList[member.id] || 0; <NavLink key={member.id} activeClassName="selected" to={`/workapce/${workspace}/dm/${member.id}`} onClick={resetCount(member.id)} > ; <i className={`c-icon p-channel_sidebar__presence_icon p-channel_sidebar__presence_icon--dim_enabled c-presence ${ isOnline ? 'c-presence--active c-icon--presence-online' : 'c-icon--presence-offline' }`} aria-hidden="true" data-qa="presence_indicator" data-qa-presence-self="false" data-qa-presence-active="false" data-qa-presence-dnd="false" /> ;<span className={count > 0 ? 'bold' : undefined}>{member.nickname}</span> {member.id === userData?.id && <span> (나)</span>} {count > 0 && <span className="count">{count}</span>} </NavLink>; // return <EachDM key={member.id} member={member} isOnline={isOnline} />; })} </div> </> ); }; export default DMList; 이건 DMList입니다. 현재 DM페이지 만들기 강의를 듣고 있는데, DM리스트에 사용자가 하나도 표시가 되지 않는데 원래 지금 강의까지는 표시가 되지 않는게 맞나요? 워크스페이스 초대, 채널 멤버 초대해도 에러는 발생하지 않는데 DM리스트에 추가는 다음 강의에서 진행하나요? 아니면 지금도 되야하는게 정상인가요..?