import React from 'react'; import React from 'react'; import ReactDOM from 'react-dom/client'; import './index.css'; import App from './App'; import reportWebVitals from './reportWebVitals'; import {Provider} from 'react-redux'; //import 'antd/dist/antd.css' import { applyMiddleware,createStore } from 'redux'; import promiseMiddleware from 'redux-promise'; import thunk from 'redux-thunk'; import Reducer from './_reducers' const createStoreWithMiddleware = applyMiddleware(promiseMiddleware,thunk)(createStore) const root = ReactDOM.createRoot(document.getElementById('root')); root.render( <Provider store={createStoreWithMiddleware(Reducer, window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__() )}> <App /> </Provider> ); // If you want to start measuring performance in your app, pass a function // to log results (for example: reportWebVitals(console.log)) // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals reportWebVitals(); 위 코드 실행했더니  export 'default' (imported as 'thunk') was not found in 'redux-thunk' (possible exports: thunk, withExtraArgument) 이란 오류가 떠서 node_modules, package.json 폴더도 삭제하고 다시 npm install을 했음에도 똑같은 오류가 떠요 ㅠ 

강의에서 진행 된 요소 추가 전까진 정상 작동 되는 것 확인 했습니다. Menu 추가 후 아래와 같은 오류가 출력 됩니다.  Warning: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:1. You might have mismatching versions of React and the renderer (such as React DOM)2. You might be breaking the Rules of Hooks3. You might have more than one copy of React in the same appSee https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem. TypeError: Cannot read properties of null (reading 'useRef') at useRef (C:\Users\sion\node_modules\react\cjs\react.development.js:1630:21) at Object.render (C:\Users\sion\node_modules\antd\lib\menu\index.js:19:37) at ReactDOMServerRenderer.render (C:\Users\sion\Documents\prepare\front\node_modules\react-dom\cjs\react-dom-server.node.development.js:3535:44) at ReactDOMServerRenderer.read (C:\Users\sion\Documents\prepare\front\node_modules\react-dom\cjs\react-dom-server.node.development.js:3373:29) at renderToString (C:\Users\sion\Documents\prepare\front\node_modules\react-dom\cjs\react-dom-server.node.development.js:3988:27) at Object.renderPage (C:\Users\sion\Documents\prepare\front\node_modules\next\dist\next-server\server\render.js:50:851) at Document.getInitialProps (C:\Users\sion\Documents\prepare\front\.next\server\pages\_document.js:264:19) at loadGetInitialProps (C:\Users\sion\Documents\prepare\front\node_modules\next\dist\next-server\lib\utils.js:5:101) at renderToHTML (C:\Users\sion\Documents\prepare\front\node_modules\next\dist\next-server\server\render.js:50:1142) at process.processTicksAndRejections (node:internal/process/task_queues:95:5) 터미널에 찍힌 로그입니다.react/react dom 버전은 동일함을 확인했고 16.14.0 버전 사용 중입니다. 구글링 중 react hook form을 인스톨 하라는 검색 결과가 있어 해당 패키지 설치 했습니다. 버전은 7.49.2 사용 중 입니다. 로컬에서 실행 된 화면입니다.  

안녕하세요.채팅앱은 구름에듀에서 수강중입니다.구름에듀에도 강의 업데이트 가능하시면 부탁드립니다.좋은 강의 항상 감사합니다. 

질문)짹짹을 눌렀을 때 게시물이 우측에 정렬되는데 어떻게 해야 아래로 정렬될까요? 현재 게시물 추가시 화면)작성한 코드)PostForm.jsimport React,{useCallback, useState, useRef} from 'react'; import {Form, Input, Button} from 'antd'; import {useSelector, useDispatch} from 'react-redux'; import {addPost} from '../reducers/post'; const PostForm = () => { const {imagePaths} = useSelector((state) => state.post); const dispatch = useDispatch(); const imageInput = useRef(); const [text, setText] = useState(''); const onChangeText = useCallback((e) => { setText(e.target.value); }, []) const onSubmit = useCallback(()=> { dispatch(addPost); setText(''); }); const onClickImageUpload = useCallback(() => { imageInput.current.click(); }, [imageInput.current]); return ( <Form style={{ margin: '10px 0 20px'}} encType="multipart/form-data" onFinish={onSubmit}> <Input.TextArea value={text} onChange={onChangeText} maxLength={140} placeholder="어떤 신기한 일이 있었나요?" /> <div> <input type="file" multiple hidden ref={imageInput}/> <Button onClick={onClickImageUpload}>이미지 업로드</Button> <Button type="primary" style={{float:'right'}} htmlType="submit">짹짹</Button> </div> <div> {imagePaths.map((v) => ( <div key={v} style={{display: 'inline-block'}}> <img src={v} style={{width:'200px'}} alt={v}/> <div> <Button>제거</Button> </div> </div> ))} </div> </Form> ) } export default PostForm;post.jsexport const initalState = { mainPosts:[{ id:1, User:{ id:1, nickname: '해지니1', }, content: '첫 번째 게시글 #해시태그 #행복한집사생활', Images:[{ src: 'https://loremflickr.com/640/360' },{ src: 'https://placekitten.com/640/360' },{ src: 'https://picsum.photos/640/360' }], Comments: [{ User: { nickname:'해지니2' }, content: '고양이는 다 기여벙', }, { User: { nickname:'해지니3' }, content: '냥냥냥' }] }], imagePaths: [], //게시물 저장 경로 postAdded: false //게시글 추가 완료시 true } 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 = initalState, action) => { switch(action.type){ case ADD_POST: return { ...state, mainPosts: [dummyPost, ...state.mainPosts], postAdded: true, }; default: return state; } } export default reducer;

안녕하세요 선생님 상황) 리덕스 실제 구현하기 부분을 따라하던 도중 configureStore.js에서 createStore 단어 가운데에 취소선이 생기면서 @reduxjs/toolkit의 configureStore로 대체를 권장한다고 뜨는 상황입니다.import {createStore} from 'redux'; import reducer from '../reducers'; const configureStore = () => { const store = createStore(reducer); store.dispatch({ type:'CHANGE_NICKNAME', data:'luckyhaejin' }); return store; }; 사용 중인 OS, 버전)저는 맥 OS사용자이며, 사용하고 있는 버전은 아래와 같습니다.{ "name": "react-nodebird-front", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "dev": "next", "build": "next build" }, "author": "luckyhaejin", "license": "ISC", "dependencies": { "@ant-design/icons": "^4.2.1", "antd": "^4.2.1", "next": "^9.5.5", "next-redux-wrapper": "^6.0.2", "prop-types": "^15.8.1", "react": "^16.14.0", "react-dom": "^16.14.0", "react-redux": "^7.2.9", "redux": "^4.2.1", "styled-components": "^6.1.1" }, "devDependencies": { "eslint": "^8.56.0", "eslint-plugin-import": "^2.29.1", "eslint-plugin-react": "^7.33.2", "eslint-plugin-react-hooks": "^4.6.0" } }  상황) 그래서 @reduxjs/toolkit과 관련한 문제 같아 react, react-dom 버전을 최신버전인 18로 바꾸고 next도 최신 버전인 14버전으로 바꾼 뒤 @reduxjs/toolkit을 설치하고 @reduxjs/toolkit 방식으로 대체하라는 메세지 안의 redux 링크를 참고하여 코드를 수정해보았습니다. https://redux.js.org/introduction/why-rtk-is-redux-today 하지만 제가 맞게 작성한건지 잘 모르겠고, 이렇게 제가 짠 코드로 변경을 하게되면 강의를 보며 따라하기가 어려워질 것 같아서 다시 원래 에러가 난 상태로 되돌린 상태입니다. 질문)reduxjs/toolkit을 적용하여 작성한 아래 코드가 맞게 작성된건지 궁금합니다.  질문)깃에서 reduxjs/toolkit을 사용한 코드를 강의 순서대로 적용하고 싶어서 찾아보았으나, 섹션2 코드가 순서대로 적용된게 아니라 한번에 올라온것 같아서, 혹시 강의 순서대로 @reduxjs/toolkit을 적용한 코드가 있다면 어떻게 해야 그 코드를 순서대로 볼 수 있는지 궁금합니다. 만약 강의 순서대로 적용한 코드가 없고 섹션별로 나눠져 있다면 섹션 순서대로 코드를 보는 방법이 궁금합니다. 수정 전)reducers/index.jsconst initialState = { user: { isLoggedIn:false, user:null, signUpData:{}, loginData:{} }, post: { mainPosts:[] } }; export const loginAction = (data) => { return { type: 'LOG_IN', data } } export const logoutAction = () => { return { type: 'LOG_OUT' } } // 이전 상태, 액션 => 다음상태 const rootReducer = (state = initialState, action) => { switch(action.type) { case 'LOG_IN': return { ...state, user: { ...state.user, isLoggedIn: true, user:action.data } }; case 'LOG_OUT': return { ...state, user: { ...state.user, isLoggedIn: false, user:null } }; default: return state; } }; export default rootReducer; 수정 후)reducers/userSliceimport {createSlice} from '@reduxjs/toolkit' const userSlice = createSlice({ name: 'user', initialState: { isLoggedIn: false, user:null }, reducers: { login(state, action) { isLoggedIn: true, user:action.payload; }, logout(state) { isLoggedIn: false, user:null } } }) export const {login, logout} = userSlice.actions; export default userSlice.reducer;reducers/postSliceimport {createSlice} from '@reduxjs/toolkit' const postSlice = createSlice({ name: 'post', initialState: { mainPosts:[] }, reducers: { } }); export default postSlice.reducer;   수정 전)store/configureStore.jsimport {createWrapper} from 'next-redux-wrapper'; import {createStore} from 'redux'; import reducer from '../reducers'; const configureStore = () => { const store = createStore(reducer); store.dispatch({ type:'CHANGE_NICKNAME', data:'luckyhaejin' }); return store; }; const wrapper = createWrapper(configureStore, { debug: process.env.NODE_ENV === 'development', }); export default wrapper;수정 후)store/configureStore.jsimport { createWrapper } from 'next-redux-wrapper'; import { configureStore } from '@reduxjs/toolkit'; import userReducer from '../reducers/userSlice'; import postReducer from '../reducers/postSlice' const makeStore = () => { const store = configureStore({ reducer: { user: userReducer, post: postReducer } }); return store; }; const wrapper = createWrapper(makeStore, { debug: process.env.NODE_ENV === 'development', }); export default wrapper;   

안녕하세요. Ducks패턴 강의를 방금 들었습니다.실습에서 todoDuck.js에 todo 컴포넌트에서 사용되는 action만을 넣었는데,duck file은 컴포넌트로 구분하여 만드는것인가요??

안녕하세요. 현재 섹션 3 수강 중인 수강생입니다. todo App을 만들고 있는데, X 버튼 구현하는 부분에서 onClick 이벤트 발생 시 작동하는 함수를 삽입해주는 부분인데요.onClick => {handleClick(data.id)}이렇게 입력하니 웹페이지가 제대로 동작하지 않고, 아래처럼 화살표 함수로 바꿔주니 정상적으로 동작합니다.<button onClick={() => handleClick(data.id)}> x </button>찾아보니 함수명으로 넣어주는 경우는 렌더링 시 함수가 바로 실행되고 click 이벤트 발생 시엔 함수의 반환값이 중괄호 안에 들어간다고 하고, 화살표 함수로 넣어줄 경우 의도한대로 click이벤트 발생 시에 함수가 실행된다는 걸 알게됐는데요, 이런 부분은 리액트 동작 원리 상 이렇게 되는거니 그냥 받아들이면 될까요? 아니면 제가 js 문법에 대해 이해가 부족해서 이해가 안가는 걸까요...?추가적으로, 그렇다면 리액트에서 이벤트리스너 함수를 넣을 때는 무조건 화살표 함수로 넣는게 맞는건가요?

41 수정 페이지 폼 1하는데막혀서 진도를 못나가고 있습니다. BlogForm.js const {id} = useParams(); useEffect((id) => { axios.get(`http://localhost:3001/posts/${id}`).then(res =>{ console.log(res) setTitle(res.data.title); setBody(res.data.body); }) }, [id]);강의대로 넣었는데폼입력 페이지에서 아래와 같은 에러가 뜹니다. axios가 문제인건가요?서버는 재기동해도 이상없는거 같습니다.ListPage.js(/blogs) 폴더내의 리스트와ShowPage.js(/blogs/1)는 정상적으로 보입니다.     

안녕하세요~ 터미널에서 auto suggestion 처럼 코드 제안하는 회색 글씨가 보이던데 어떻게 하셨는지 알 수 있을까요?

프로젝트를 build 하면 에러가 생기는데 어디서 생기는지 파악을 못하겠네요ㅠㅠnpm run dev 에서는 돌아가는데 build 후에 preview로 들어가보면홈페이지에서 에러가 납니다.

안녕하세요.nginx에 배포를해서 실행을하니 실행은되는데 antd 가 적용이 안되는데 왜그런지 모르겠습니다. nginx.conf파일에 아래처럼 구성했고요(docker이용해서 .next 폴더 /usr/share/nginx/html/_next 에 복사했음) location / { root /usr/share/nginx/html; index /_next/server/pages/index.html; } .next 폴더 하위에 server/pages 폴더 아래에 index.html이 있어 index부분을 해당 파일로 지정하였는대 antd가 적용이 안됩니다. 왜그런걸까요 ㅠ? (npm run dev로 실행시에는 적용됩니다.) 

안녕하세요! 제로초님! 섹션 4. 백엔드 노드 서버 구축하기credentials로 쿠키 공유하기 강의까지 수강한 수강생입니다! 작업물을 git clone하고 모듈 설치 후 npm run dev 하는 과정에서 문제가 발생했습니다!(프론트는 front 폴더 내에서 npm install 로 node_modules 를 생성하였습니다.)회원가입 구현하기 강의 영상과 똑같이 백엔드 터미널에 npm i express@4.17.1 를 입력해back 폴더 내에 node_modules 폴더를 생성하고백엔드에서 npm run dev 를 하면 아래 사진과 같은 에러가 나타납니다!이유가 무엇인지 궁금합니다!++ MySQL 환경 변수 설정은 미리 path로 설정하여 MySQL이 정상 작동됨을 확인하였습니다!++ vsCode 파워셀 터미널에서 작업하였습니다!항상 강의 영상 잘 보고 있습니다! 감사합니다 제로초님!

안녕하세요. react와 react-native가 따로 있는 것으로 아는대 react로는 웹과 앱 모두 한번에 개발할 수 있는 프레임워크가 따로 없나요? flutter의 경우는 3개의 환경 모두 한번에 개발이 가능한걸로 아는대 react는(반응형 x) 웹/앱 개발을 위해 native 를 별도로 개발해야하는지 궁금합니다.

안녕하세요! 갑자기 로컬호스트에 접속이 안 되어서 질문합니다 npm run dev 하면 컴파일까지는 성공하는데 그 다음에 localhost로 접속하면 다음과 같은 에러가 뜹니다error - ./node_modules/worker-farm/lib/fork.js:3:0Module not found: Can't resolve 'child_process'nullError from chokidar (C:\): Error: EBUSY: resource busy or locked, lstat 'C:\DumpStack.log.tmp'Could not find files for / in .next/build-manifest.json(중간중간에 콘솔로그 찍힌건 생략했습니다) 개발자도구 확인해보면 에러는 안 나옵니다구글링해서 package.json 수정하는 방법이랑 _document.js에 import 'classlist.js' 하는방법 시도해봤는데 오류가 해결되지 않았습니다.. 어떻게 해야할까요ㅠ  

넥스트는 12버전 사용하고 있습니다.빌드 할 때 보통 시간이 20초 정도 걸리나요?새로고침하면 20초 정도 계속 걸려서 테스트하기가 참.. 힘드네용..ㅜ

ubuntu@ip-172-31-45-72:~/TwitterClone-FS-/front$ npm run build > react-nodebird-front@1.0.0 build > cross-env ANALYZE=true NODE_ENV=production next build Linting and checking validity of types .. ⨯ ESLint: ESLint configuration in .eslintrc is invalid: - Unexpected top-level property "parseOptions". ✓ Linting and checking validity of types Disabled SWC as replacement for Babel because of custom Babel configuration ".babelrc" https://nextjs.org/docs/messages/swc-disabled Webpack Bundle Analyzer saved report to /home/ubuntu/TwitterClone-FS-/front/.next/analyze/nodejs.html No bundles were parsed. Analyzer will show only original module sizes from stats file. Webpack Bundle Analyzer saved report to /home/ubuntu/TwitterClone-FS-/front/.next/analyze/edge.html Using external babel configuration from /home/ubuntu/TwitterClone-FS-/front/.babelrc ⚠ It looks like there is a custom Babel configuration can be removed : ⚠ Next.js supports the following features natively: ⚠ - 'styled-components' can be enabled via 'compiler.styledComponents' in 'next.config.js' ⚠ For more details configuration options, please refer https://nextjs.org/docs/architecture/nextjs-compiler#supported-features Creating an optimized production build ...계속 빌드를 진행하고있는데, ⨯ ESLint: ESLint configuration in .eslintrc is invalid: - Unexpected top-level property "parseOptions". 이부분, 통과못해도 계속해서 빌드가 진행되나요!? 아니면, 이부분때문에 지금 계속 빌드를 못하고 있는걸까요?평균적인 빌드시간을 알고 싶습니다.

ubuntu@ip-172-31-45-72:~/TwitterClone-FS-/front$ npm install npm WARN EBADENGINE Unsupported engine { npm WARN EBADENGINE package: '@faker-js/faker@8.3.1', npm WARN EBADENGINE required: { node: '^14.17.0 || ^16.13.0 || >=18.0.0', npm: '>=6.14.13' }, npm WARN EBADENGINE current: { node: 'v12.22.9', npm: '8.5.1' } npm WARN EBADENGINE } npm WARN EBADENGINE Unsupported engine { npm WARN EBADENGINE package: 'next@13.5.6', npm WARN EBADENGINE required: { node: '>=16.14.0' }, npm WARN EBADENGINE current: { node: 'v12.22.9', npm: '8.5.1' } npm WARN EBADENGINE } npm WARN EBADENGINE Unsupported engine { npm WARN EBADENGINE package: 'styled-components@6.1.1', npm WARN EBADENGINE required: { node: '>= 16' }, npm WARN EBADENGINE current: { node: 'v12.22.9', npm: '8.5.1' } npm WARN EBADENGINE } up to date, audited 421 packages in 3s 105 packages are looking for funding run `npm fund` for details 1 high severity vulnerability To address all issues (including breaking changes), run: npm audit fix --force Run `npm audit` for details. ubuntu@ip-172-31-45-72:~/TwitterClone-FS-/front$ npm run dev > react-nodebird-front@1.0.0 dev > next /home/ubuntu/TwitterClone-FS-/front/node_modules/next/dist/lib/picocolors.js:134 const { env, stdout } = ((_globalThis = globalThis) == null ? void 0 : _globalThis.process) ?? {}; ^ SyntaxError: Unexpected token '?' at wrapSafe (internal/modules/cjs/loader.js:915:16) at Module._compile (internal/modules/cjs/loader.js:963:27) at Object.Module._extensions..js (internal/modules/cjs/loader.js:1027:10) at Module.load (internal/modules/cjs/loader.js:863:32) at Function.Module._load (internal/modules/cjs/loader.js:708:14) at Module.require (internal/modules/cjs/loader.js:887:19) at Module.mod.require (/home/ubuntu/TwitterClone-FS-/front/node_modules/next/dist/server/require-hook.js:64:28) at require (internal/modules/cjs/helpers.js:74:18) at Object.<anonymous> (/home/ubuntu/TwitterClone-FS-/front/node_modules/next/dist/build/output/log.js:55:21) at Module._compile (internal/modules/cjs/loader.js:999:30) ubuntu@ip-172-31-45-72:~/TwitterClone-FS-/front$ ls components next.config.js package-lock.json pages sagas utils hooks node_modules package.json reducers store ubuntu@ip-172-31-45-72:~/TwitterClone-FS-/front$ 이런 에러가 발생됩니다. unexpected token '?' 어떤 이유로 에러가 발생하고, 어떤식으로 해결해야지 실행할 수 있는지 알 고 싶습니다!!

문제가 몇일째 안풀리는게 있어 문의드려요제가 next-auth를 사용해서 로그인 프로세스를 해보고 있습니다.로컬에서 별도로 배포환경 만들어서 테스트를 했을 때에는 잘 되는데 배포시에 계속 Unauthorized 에러가 발생해서요제가 작성한 [...nextauth].ts 코드입니다.import NextAuth, { User } from 'next-auth'; import CredentialsProvider from 'next-auth/providers/credentials'; import { refreshAccessToken } from 'utils/tokenRefresh'; export default NextAuth({ providers: [ CredentialsProvider({ name: 'Credentials', credentials: { userId: { label: 'UserId', type: 'text', placeholder: 'jsmith' }, password: { label: 'Password', type: 'password' }, }, authorize: async (credentials) => { const res = await fetch(`${process.env.NEXT_PUBLIC_BACKEND_URL}/api/v1/users/signin`, { method: 'POST', body: JSON.stringify({ userId: credentials!.userId, password: credentials!.password, }), headers: { 'Content-Type': 'application/json' }, }); const user = await res.json(); // 로그인 성공 시 사용자 객체를 반환하고, 실패 시 null을 반환 if (res.ok && user) { console.log('ok user', user); return user; } else { console.log('error user', user); return false; } }, }), ], secret: process.env.NEXTAUTH_SECRET, // session: { // strategy: 'jwt', // maxAge: 0, // 브라우저가 닫히면 세션 종료 // // updateAge: 24 * 60 * 60, // 24시간마다 세션 갱신 (옵션) // }, callbacks: { async jwt({ token, user }) { // 사용자 로그인 시 토큰 설정 if (user) { return { ...token, accessJwt: user.result?.accessJwt, refreshJwt: user.result?.refreshJwt, companyId: user.result?.companyId, userName: user.result?.userName, accessTokenExpires: Date.now() + 3600 * 1000, }; } // 토큰 만료 확인 및 리프레시 if (Date.now() > token.accessTokenExpires!) { const newAccessJwt = await refreshAccessToken(token.refreshJwt!); return refreshAccessToken(newAccessJwt); } return token; }, async session({ session, token }) { if (token && token.accessJwt) { const customUser = session.user as User; if (!customUser.result) { customUser.result = { accessJwt: '', refreshJwt: '', companyId: '', userName: '', }; } customUser.result.accessJwt = token.accessJwt; customUser.result.refreshJwt = token.refreshJwt; customUser.result.companyId = token.companyId; customUser.result.userName = token.userName; session.user = customUser; } return session; }, }, }); NEXT_PUBLIC_BACKEND_URL 환경변수는 별도의 백엔드를 구성한 주소이구요 배포는 도커를 사용했습니다.FROM node:20.10 as builder # pnpm 설치 RUN npm install -g pnpm WORKDIR /usr/src/app COPY package*.json ./ RUN pnpm install ARG NEXT_PUBLIC_BACKEND_URL ARG NEXTAUTH_SECRET COPY . . RUN NEXT_PUBLIC_BACKEND_URL=https://${NEXT_PUBLIC_BACKEND_URL} NEXTAUTH_SECRET=${NEXTAUTH_SECRET} pnpm run build FROM node:20.10 RUN npm install -g pnpm WORKDIR /usr/src/app COPY --from=builder /usr/src/app/package*.json ./ RUN pnpm install --prod COPY --from=builder /usr/src/app . # COPY --from=builder /usr/src/app/.next ./.next EXPOSE 3000 CMD ["pnpm", "run", "dev"]NEXTAUTH_SECRET은 프론트 주소를 도커 실행 시 넣어줘야 한대서 도커 실행 할 때 환경변수로 따로 넣어줬구요Docs, Stackoverflow, ChatGPT 등 여러 방면으로 찾아봤는데 해결이 안되더라구요..강의하고는 별개 내용이긴 한데 더이상 물어볼 데가 없어서 강사님께 여쭈어봅니다.. 

redux-saga 쪼개고 reducer 연결 하려고 하니 user reducer만 반응하고 LOG_IN_SUCCESS 는 반응을 하지 않습니다. 커뮤니티 게시판에서 여러가지를 확인해보고 해도 어디 부분이 잘못 된지 몰라 올려봅니다.. 제가 작성한 코드는 이러합니다. store/configureStore.js import { applyMiddleware, createStore, compose } from "redux"; import createSagaMiddleware from "redux-saga"; import { createWrapper } from "next-redux-wrapper"; import { composeWithDevTools } from "redux-devtools-extension"; import reducer from "../reducers"; import rootSaga from "../sagas"; const configureStore = (context) => { console.log("context", context); const sagaMiddleware = createSagaMiddleware(); const middlewares = [sagaMiddleware]; const enhancer = process.env.NODE_ENV === "production" ? compose(applyMiddleware(...middlewares)) // 배포용 : composeWithDevTools(applyMiddleware(...middlewares)); const store = createStore(reducer, enhancer); store.sagaTask = sagaMiddleware.run(rootSaga); return store; }; const wrapper = createWrapper(configureStore, { debug: process.env.NODE_ENV === "development", }); export default wrapper;reducers/index.js import { HYDRATE } from "next-redux-wrapper"; // HYDRATE = action import { combineReducers } from "redux"; import user from "./user"; import post from "./post"; const rootReducer = combineReducers({ index: (state = {}, action) => { switch (action.type) { case HYDRATE: console.log("HYDRATE", action); return { ...state, ...action.payload }; default: return state; } }, user, post, }); export default rootReducer;  reducers/user.js export const initialState = { isLoggingIn: false, // 로그인 시도중 isLoggedIn: false, // 로그인 isLoggingOut: false, // 로그아웃 시도중 meUser: null, signUpData: {}, loginData: {}, }; export const LOG_IN_REQUEST = "LOG_IN_REQUEST"; export const LOG_IN_SUCCESS = "LOG_IN_SUCCESS"; export const LOG_IN_FAILURE = "LOG_IN_FAILURE"; export const LOG_OUT_REQUEST = "LOG_OUT_REQUEST"; export const LOG_OUT_SUCCESS = "LOG_OUT_SUCCESS"; export const LOG_OUT_FAILURE = "LOG_OUT_FAILURE"; export const loginRequestAction = (data) => ({ type: LOG_IN_REQUEST, value: data, }); export const logoutRequestAction = () => ({ type: LOG_OUT_REQUEST, }); const reducer = (state = initialState, action) => { // prettier-ignore switch(action.type) { case LOG_OUT_REQUEST : return {...state, isLoggingIn : true}; case LOG_IN_SUCCESS : return {...state, isLoggingIn : false, isLoggedIn:true, meUser:{...action.value, nickName:"Jay"}}; case LOG_IN_FAILURE : return {...state, isLoggingIn : false, isLoggedIn:false }; case "LOG_OUT_REQUEST" : return {...state, isLoggingOut:true}; case "LOG_OUT_SUCCESS" : return {...state, isLoggingOut:false, isLoggedIn:true, meUser:null}; case "LOG_OUT_FAILURE" : return {...state, isLoggingOut:false}; default: return state; } }; export default reducer;sagas/index.jsimport { all, fork, call } from "redux-saga/effects"; import userSaga from "./user"; export default function* rootSaga() { yield all([fork(userSaga)]); } sagas/user.js import { all, fork, put, delay, takeLatest } from "redux-saga/effects"; import { LOG_IN_FAILURE, LOG_IN_REQUEST, LOG_IN_SUCCESS, } from "../reducers/user"; function* logIn(action) { try { console.log("saga logIn"); // const result = yield call(logInAPI); yield delay(1000); yield put({ type: LOG_IN_SUCCESS, value: action.value, }); } catch (err) { console.error(err); yield put({ type: LOG_IN_FAILURE, error: err.response.data, }); } } function* watchLogIn() { yield takeLatest(LOG_IN_REQUEST, logIn); } function* watchLogOut() { yield takeLatest("LOG_OUT_REQUEST"); } export default function* userSaga() { yield all([fork(watchLogIn), fork(watchLogOut)]); }

리트윗 에러시, alert를 띄워주실 때, 게시글 . 수만큼 리렌더링이 발생하셔서 index.js 상위 페이지로 에러를 올려주셨는데, 설명하실떄 리트윗 에러에다가, 게시글 id까지 같이 넣어서, 그. 포스트 카드에만 에러메시지가 나오게 해서 해결하실 수있다고 하셨습니다. 어떤식으로 코드를 작성하면 되는지 해당 부분에 대한 코드 작성법도 알고싶습니다.어떤식으로 postId를 넘겨주고 useEffect를 활용할 수 있는지 알고 싶습니다.function retweetAPI(data) { return axios.post(`/post/${data}/retweet`); } function* retweet(action) { try { const result = yield call(retweetAPI, action.data); yield put({ type: RETWEET_SUCCESS, data: result.data, }); } catch (err) { console.error(err); yield put({ type: RETWEET_FAILURE, error: err.response.data, }); } }