월 17,600원
5개월 할부 시다른 수강생들이 자주 물어보는 질문이 궁금하신가요?
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
npm run dev를 하고 localhost로 들어가면 연결을 거부했다고 뜹니다
npm run dev를 하면 아래와 같은 오류 메세지가 뜹니다그리고 로컬호스트 들어가보면 사이트에 연결할 수 없음이 뜹니다.도와주세요 ㅠㅠ > react-nodebird-front@1.0.0 dev> nextBrowserslist: caniuse-lite is outdated. Please run:npx browserslist@latest --update-dbready - started server on http://localhost:3000node:internal/crypto/hash:71 this[kHandle] = new _Hash(algorithm, xofLen); ^Error: error:0308010C:digital envelope routines::unsupported at new Hash (node:internal/crypto/hash:71:19) at Object.createHash (node:crypto:133:10) at module.exports (/Users/hyeonyeongjeong/Documents/2023project/nodebird/prepare/front/node_modules/webpack/lib/util/createHash.js:135:53) at NormalModule._initBuildHash (/Users/hyeonyeongjeong/Documents/2023project/nodebird/prepare/front/node_modules/webpack/lib/NormalModule.js:417:16) at handleParseError (/Users/hyeonyeongjeong/Documents/2023project/nodebird/prepare/front/node_modules/webpack/lib/NormalModule.js:471:10) at /Users/hyeonyeongjeong/Documents/2023project/nodebird/prepare/front/node_modules/webpack/lib/NormalModule.js:503:5 at /Users/hyeonyeongjeong/Documents/2023project/nodebird/prepare/front/node_modules/webpack/lib/NormalModule.js:358:12 at /Users/hyeonyeongjeong/Documents/2023project/nodebird/prepare/front/node_modules/loader-runner/lib/LoaderRunner.js:373:3 at iterateNormalLoaders (/Users/hyeonyeongjeong/Documents/2023project/nodebird/prepare/front/node_modules/loader-runner/lib/LoaderRunner.js:214:10) at Array.<anonymous> (/Users/hyeonyeongjeong/Documents/2023project/nodebird/prepare/front/node_modules/loader-runner/lib/LoaderRunner.js:205:4) { opensslErrorStack: [ 'error:03000086:digital envelope routines::initialization error' ], library: 'digital envelope routines', reason: 'unsupported', code: 'ERR_OSSL_EVP_UNSUPPORTED'}Node.js v18.16.1
- 해결됨[리뉴얼] React로 NodeBird SNS 만들기
이미지경로를 시퀄라이즈 모델에저장시 post모델에 배열로 저장하지 않고 따로 테이블을 만들어 관계형으로 저장하는이유
1.이미지 경로는 이미지가 여러개일 경우 배열상태로 존재하는데 왜 post 모델에 배열로 저장하지 않고 따로 테이블을 만들어 관계를 짖는 이유를 알수있을까요2.테이블에 배열데이터를 저장하려면 json으로 저장이 될꺼같은데 이 데이터를 text타입으로 바꿔서 저장해야하나요?관계를 지어 테이블을 두개 만드는 방식과 배열데이터를 같은 테이블에 넣는 방식중 머가 더 좋은가요?
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
createAsyncThunk로 일부러 지연시켜서 pending상태 만드는법 질문
const wait = (timeToDelay) => new Promise((resolve) => setTimeout(resolve, timeToDelay)); export const loginAction = createAsyncThunk(LOG_IN, async (data) => { await wait(1000); return data; }); export const logoutAction = createAsyncThunk(LOG_OUT, async () => { return; });const userSlice = createSlice({ name: "user", initialState, // exraReducers 그냥 reducer는 user/login 이런식으로 액션 이름을 적어야 하지만 extraReducers를 사용하면 login으로 줄일 수 있다 extraReducers: (builder) => builder .addCase([HYDRATE], (state, action) => ({ ...state, ...action.payload.user, })) .addCase(loginAction.pending, (state) => { state.isLoggingIn = true; state.isLoggedIn = false; }) .addCase(loginAction.fulfilled, (state, action) => { state.isLoggingIn = false; state.isLoggedIn = true; state.user = dummyUser; state.loginData = action.data; }) .addCase(loginAction.rejected, (state) => { state.isLoggingIn = true; }) .addCase(logoutAction.pending, (state) => { state.isLoggingOut = true; state.isLoggedIn = true; }) .addCase(logoutAction.fulfilled, (state) => { state.isLoggingOut = false; state.isLoggedIn = false; state.user = null; }) .addCase(logoutAction.rejected, (state) => { state.isLoggingOut = false; }) .addCase(signUp.fulfilled, (state, action) => { state.signUpData = action.data; }) .addDefaultCase((state) => state), });제가 redux toolkit으로 제로초님이 만드시는 코드를 만들고 있는데 createAsyncThunk로 일부러 지연 시켜서 pending상태로 만들려고 했는데 이렇게 코드를 짜니까 pending이 제대로 동작을 안하고 로딩 아이콘이 제대로 보이지 않습니다 제가 추가적으로 실험을 해보았는데 state.isLoggingIn을 pending과 fulfilled두개 모두 state.isLoggingIn = true;로하고 동작을 시켜도 로그인 아이콘이 로딩이 안됩니다 하지만 로그아웃은 모두 true로 하니까 로딩이 보입니다...그래서 액션을 reducer를 작성할때 뭔가를 실수한것 같습니다 무었인지 알 수 있을까요?그리고 saga의 delay처럼 createAsyncThunk의 지연시켜서 pending상태가 나오는 방법을 알고싶습니다
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
swr 캐싱
다른분들 질문 보다보니 부모컴포넌트와 자식컴포넌트가 동일한 key값으로 서버에 요청을 보내면 한번만 요청을 보내고 부모컴포넌트에서 캐싱된 값을 자식컴포넌트가 사용한다고 봤는데 공식 홈페이지 예제 보니 특정 페이지 내부에서 화면에 렌더링되는 모든 컴포넌트에서는 동일한 key값으로 서버에 요청하는경우에 하나만 요청되고 모두 캐싱되어서 같은화면?내에서 렌더링되는 컴포넌트들은 값을 공유하는것같은데 이도 맞을까요? nextjs _app Custom App component 에서 요청하는 swr key는 전역적으로 캐싱이 안되나요?_app에서 서버로 사용자 정보를 요청하도록 코드를 작성해놨고 각 페이지 마다도 동일한 key값으로 사용자 정보를 서버에 요청하도록 작성해두었습니다. 페이지를 이동하더라도 app에서 사용한 key값과 각 페이지에서 서버로 요청하는 key값이 동일하니 캐싱되어 서버로 사용자 정보를 재요청하지 않고 캐싱된 값을 사용해야된다고 생각되는데 계속해서 서버로 사용자 정보를 재요청을 보냅니다. 왜 그런것일까요..?
- 해결됨[리뉴얼] React로 NodeBird SNS 만들기
서버사이드렌더링 전 백엔드 서버와 프론트 로그인 차이
서버사이드렌더링 전 새로고침하면 로그인 풀리는건 알겠는데, 재로그인시에 isAuthenticated 가 발동되면서 서버는 계속 로그인중입니다. 이건 서버사이드렌더링 거치면 해결될까요? 아니면 코드가 잘못돼서 그런걸까요... 백엔드서버를 다시 수동으로 종료후 재실행하면 백서버 로그인은 풀립니다
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
(정보 공유)redux toolkit으로 미들웨어 장착하기
import { configureStore } from "@reduxjs/toolkit"; import { createWrapper } from "next-redux-wrapper"; import reducer from "../reducers"; function getServerState() { return typeof document !== "undefined" ? JSON.parse(document.querySelector("#__NEXT_DATA__").textContent)?.props .pageProps.initialState : undefined; } const loggerMiddleware = ({ dispatch, getState }) => (next) => (action) => { console.log(action); return next(action); }; const serverState = getServerState(); console.log("serverState", serverState); const makeStore = () => configureStore({ reducer, devTools: true, middleware: (getDefaultMiddleware) => getDefaultMiddleware().concat(loggerMiddleware), preloadedState: serverState, // SSR }); export default createWrapper(makeStore);redux toolkit으로 미들웨어를 장착하고 싶으시면 getDefaultMiddleware에 concat으로 장착하시면 됩니다 configureStore코든는 제로초님 깃허브에 있습니다
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
redux toolkit에서는 redux thunk가 들어있는건가요?
import { configureStore } from "@reduxjs/toolkit"; import { createWrapper } from "next-redux-wrapper"; import reducer from "../reducers"; function getServerState() { return typeof document !== "undefined" ? JSON.parse(document.querySelector("#__NEXT_DATA__").textContent)?.props .pageProps.initialState : undefined; } const serverState = getServerState(); console.log("serverState", serverState); const makeStore = () => { configureStore({ reducer, devTools: true, middleware: (getDefaultMiddleware) => getDefaultMiddleware(), preloadedState: serverState, // SSR }); }; export default createWrapper(makeStore); https://redux-toolkit.js.org/api/getDefaultMiddleware이걸 읽어보니configureStore에서 middleware의getDefaultMiddleware()에 redux thunk가 이미 추가가 되어있는거 같은데 맞나요?
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
이 강의에서 타입스크립트를 사용하지 않은 이유가 있나요??
요즘은 타입스크립트가 대세라는 소리를 어디서 들은 것 같아서 질문드립니다.왜 타입스크립트를 안썼냐고 따지는 것은 절때 아니고...단순히 자바스크립트를 사용했는데 어떠한 의도를 갖고 했는지가 궁금합니다.작성하기가 쉬울 수도 있고, 코드의 길이가 짧을 수도 있고, 기존에 만들어진게 자바스크립트일 수도 있다는 생각이 들긴 하지만 직접 물어보는게 더 좋을꺼같아서 질문드립니다.
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
redux toolkit으로 thunk를 실행하는 방법이 궁금합니다
import { configureStore } from "@reduxjs/toolkit"; import { createWrapper } from "next-redux-wrapper"; import reducer from "../reducers"; import thunkMiddleware from "redux-thunk"; function getServerState() { return typeof document !== "undefined" ? JSON.parse(document.querySelector("#__NEXT_DATA__").textContent)?.props .pageProps.initialState : undefined; } const loggerMiddleware = ({ dispatch, getState }) => (next) => (action) => { console.log(action); return next(action); }; const serverState = getServerState(); console.log("serverState", serverState); const makeStore = () => { configureStore({ reducer, devTools: true, middleware: (getDefaultMiddleware) => getDefaultMiddleware({ thunk: { loggerMiddleware, }, }), preloadedState: serverState, // SSR }); }; export default createWrapper(makeStore);아런 코드에서 redux thunk를 실행하는 방법이 궁금합니다!
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
css 가운데 정렬
const ImgWrapper = styled.div` padding: 32px; text-align: center; & img { margin: 0 auto; max-height: 750px; } `;사진이 정확히 가운데에 정렬이 안돼서 padding을 봤는데 이상하게 padding 오른쪽이 있는데 오른쪽 padding이 짤려서출력이 됩니다 이유가 무었일까요?
- 해결됨[리뉴얼] React로 NodeBird SNS 만들기
usememo 자식컴포넌트 리렌더링 질문
안녕하세요 제로초님 궁금한게 있어서요.이러한 부모자식 관계에서 props로 함수를 넘겨줄때는 usecallback+자식컴포넌트(react.memo)로 자식컴포넌트의 리랜더링을 방지할 수 있다고 배웠습니다. 리액트는 함수나, style={{}}, 등 다 객체 참조값을 비교하여 부모컴포넌트가 리랜더링되면서 생성된 함수는 새로운 참조값을 갖게되까 변경사항이 있다고 생각한다. 라고 알고있습니다. 근데 이 부분에서는 style객체를 usememo만으로 리렌더링을 방지한다. 라고 하셨는데 그 말씀이 ButtonWrapper 의 컴포넌트에서 retun() 부분만 virtual dom 이 비교하고(함수자체는실행됨) 바뀐게 없네 하고 return 부분을 다시 안그린다는 의미에서 리렌더링을 방지한다고 하신건지..?? 아니면 아예 ButtonWrapper컴포넌트함수 자체가 react.memo를 사용한 것 처럼 리렌더링이 안되는건지 궁금합니다.ButtonWrapper컴포넌트의 리렌더링을 막으려면ButtonWrapper에react.memo적용 후 usememo를 사용해야되는것 아닌가해서요. usecallback과 마찬가지로요예제로 이런식으로 해봤는데 부모컴포넌트가 리렌더링되면 자식컴포넌트의 스타일을 usememo로 감싸주어도 리렌더링이 되더라구요??이 역시 자식컴포넌트에 React.memo를 감싸주고나서야 자식 컴포넌트가 리렌더링 안되는데 수업에서는 memo를 쓰지않아도 리렌더링이 되지않는다고 한 이유가 궁금합니다.
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
term을 consol.log로 찍었을 때 나오는 게 이해가 안되어서 질문드립니다
const onChangeTerm = useCallback((e) => { setTerm(e.target.checked); console.log(term); setTermError(false); }, []); console.log(term);이렇게 term의 consol.log를 찍어서 확인해 봤는데 setState는 비동기이기에 term의 초기값이 false라고 했을때 useState는 비동기이니 하면첫번째 term의 consol.log는falsetruetruefalsefasletrue이런식으로 진행되야 할꺼 같은데실제로 로그 를 찍어보니까 onChangeTerm안에 있는 console.log(term)은 계속 false로 찍힙니다 이유가 무었인가요?
- 해결됨[리뉴얼] React로 NodeBird SNS 만들기
스타일 객체를 컴포넌트 바깥에 적으면 리랜더링을 줄일 수 있나요?
회원가입 페이지 만들기(커스텀 훅) 강의를 듣던 중 질문 남깁니다.스타일 객체를 컴포넌트 바깥에 적으면 리랜더링을 줄일 수 있나요? 강의에서 style props값을 넣어줄때 객체로 넣어주면 react는 {} === {} //false이기에 매번 다르게 인식해서 리랜더 돌기에 useMemo를 해주면 좋다고 들었습니다.그런데, antd예시를 보니 style 객체를 컴포넌트 바깥에 두는 경우도 있더라구요.import { Button, Form, Input, } from 'antd'; const tailFormItemLayout = { wrapperCol: { xs: { span: 24, offset: 0, }, sm: { span: 16, offset: 8, }, }, }; const App = () => { const [form] = Form.useForm(); return ( <Form form={form} name="register" > <Form.Item name="agreement" valuePropName="checked" {...tailFormItemLayout} > <Checkbox> I have read the <a href="">agreement</a> </Checkbox> </Form.Item> </Form> ); }; export default App;이처럼 stlye에 담길 객체를 App 컴포넌트 바깥에 넣어두면 App이 랜더링되는 것과는 별개로 전역 선언된 거니까 리랜더 문제가 없는건 아닐까 궁금하여 문의 남깁니다.한마디로 App이 호출되서 랜더링 될때 tailFormItemLayout는 바깥에 선언되어있으니 리랜더 될 일이 없지 않을까..? 강의 잘 듣고 있습니다. 현명한 질문을 한 건지 모르겠네요. 답변기다리겠습니다. 감사합니다.
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
우분투 서버 빌드 오류
안녕하세요 제로초님우분투 서버에서 npm run build를 하는데처음에는ModuleNotFoundError: Module not found: Error: Can't resolve 'immer' in '/home/ubuntu/react-nodebird/front/util'> Build error occurredError: > Build failed because of webpack errorsat build (/home/ubuntu/react-nodebird/front/node_modules/next/dist/build/index.js:15:918)at runMicrotasks (<anonymous>)at processTicksAndRejections (internal/process/task_queues.js:95:5)npm ERR! code ELIFECYCLEnpm ERR! errno 1npm ERR! nodebird@1.0.0 build: cross-env ANALYZE=true NODE_ENV=production next buildnpm ERR! Exit status 1npm ERR!npm ERR! Failed at the nodebird@1.0.0 build script.npm ERR! This is probably not a problem with npm. There is likely additional logging output above. 이 오류가 떠서 다시 immer 설치 후에 git commit, git push, 우분투 서버에서 git pull을 하였습니다. 그 다음에는 굵게 표시한 에러로 바뀌었는데./util/produce.jsAttempted import error: 'enableES5' is not exported from 'immer'.> Build error occurredError: > Build failed because of webpack errorsat build (/home/ubuntu/react-nodebird/front/node_modules/next/dist/build/index.js:15:918)at runMicrotasks (<anonymous>)at processTicksAndRejections (internal/process/task_queues.js:95:5)npm ERR! code ELIFECYCLEnpm ERR! errno 1npm ERR! nodebird@1.0.0 build: cross-env ANALYZE=true NODE_ENV=production next buildnpm ERR! Exit status 1npm ERR!npm ERR! Failed at the nodebird@1.0.0 build script.npm ERR! This is probably not a problem with npm. There is likely additional logging output above.util/produce 파일은 강의에 나온 파일과 똑같습니다!오류가 왜 나는지 어떻게 해결해야 할지 모르겠어서 질문 남깁니다.. 감사합니다!immer 버전은 "immer": "^9.0.21", 입니다!!
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
리랜더링과 useEffect의 상관관계가 궁금합니다
import { useState, useRef, useEffect } from 'react'; function VideoPlayer({ src, isPlaying }) { const ref = useRef(null); useEffect(() => { if (isPlaying) { ref.current.play(); } else { ref.current.pause(); } }); return <video ref={ref} src={src} loop playsInline />; } export default function App() { const [isPlaying, setIsPlaying] = useState(false); return ( <> <button onClick={() => setIsPlaying(!isPlaying)}> {isPlaying ? 'Pause' : 'Play'} </button> <VideoPlayer isPlaying={isPlaying} src="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.mp4" /> </> ); }위의 코드는 링크에 있는 리액트 공식 문서에 있는 코드입니다https://react.dev/learn/synchronizing-with-effectsuseEffect에서 배열을 생략하면 맨처음에 실행되고 그이후는 리랜더링 될때마다 실행된다는데 이번 강좌에서 리액트는 변경하는 props와 state만 리랜더링한다고 하셨습니다 그럼 useEffect를 배열없이 사용하면 연결된 모든 자식 혹은 부모 컴포넌트에서 리랜더링되는 props와 state가 발견이 되면 useEffect가 작동되는 건가요?
- 해결됨[리뉴얼] React로 NodeBird SNS 만들기
post.Images 에서 Image에 들어가는 단어가 s로 끝날경우
1. mysql 1 : 다 관계인 모델이 2개일때 1 인쪽이 Post 인 모델과 다 인쪽이 Image 인 모델 둘이 묶여 있을때 post.addImages 라는 형식으로 Image가 자동으로 복수형으로 생성되는 걸로 알고있었습니다. 당연히 그런줄알고 (이때 모델명은 그냥 단순예시입니다.) Image가 아니라 Gas 라고 가정할때 post.addGass로 생성되나요? 제가 지금 하고 있는 프로젝트에서 post.addGass 로 사용할시에 post.addGass is not a function 에러가나 혹시나.. Gas의 복수형이 Gass가 아니기 때문에 post.addGas로 넣었더니 돼버렸습니다그게아니라 그냥 add.Gass가 맞는다면 제가 코드를 다시 봐야할꺼같습니다.
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
서비스시 도메인 전략 관련
안녕하세요 제로초님 제가 개발하다 궁금한 사항이 생겼는데예시를 하나들면프론트 프로세스가 있고백엔드 프로세스가 있을때외부에서 접속가능하게 포트가 열려있는 것은 프론트만 되어있으면 되잖아요.관련해서 백엔드는 CORS 설정 및 차단 이전에 네트워크설정단에서 아예 포트가 외부에서 접속이 아예 안되면 되고그렇다면 ex) axios.defaults.baseURL = 'https://localhost:백엔드포트'; //backend URL즉 URL conntion을 잡을때 열려있는 ip,port가 아닌 localhost로 커넥션을 잡으면 문제가 있을까요?서비스 서버 기준으로전제조건 : 해당 프로세스들이 로컬환경에서 돌아갈경우
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
제가 memo를 잘못이해한거 같아서 질문 드립니다
오늘 강의를 들어보니까 react는 자동으로 바뀐 props만 랜더링을 한다고 하셨는데 그럼 memo는 부모 노드가 바뀌었을 때 자식 컴포넌트가 랜더링 되는 것을 방지하기위해 자식 컴포넌트에만 적용한다고 생각하면 될까요?그렇다면 memo는 자식컴포넌트가 없을 때는 memo를 사용할 일이 아예 없는 것이 맞나요?
- 해결됨[리뉴얼] React로 NodeBird SNS 만들기
styled-components 적용 질문
import React from "react"; import PropTypes from "prop-types"; import Link from "next/link"; import { Input, Menu, Row, Col } from "antd"; import { useState, UseMemo } from "react"; import UserProfile from "../components/UserProfile"; import LoginForm from "../components/LoginForm"; import styled from "styled-components"; const { Search } = Input; const onSearch = (value) => console.log(value); const SearchInput = styled(Input.Search)` verticalalign: middle; width: 200px; marginleft: 10px; `; const items = [ { label: <Link href="/">노드버드</Link>, key: "mail", }, { label: ( <div> <Link href="/profile">프로필</Link> <SearchInput placeholder="input search text" enterButton="Search" onSearch={onSearch} /> </div> ), key: "profile", }, { label: <Link href="/signup">회원가입</Link>, key: "signup", }, ]; let tmp = "mail"; const AppLayout = ({ children }) => { const [isLoggedIn, setIsLoggedIn] = useState(false); const [current, setCurrent] = useState(tmp); console.log(current); const onClick = (e) => { console.log("click ", e); setCurrent(e.key); tmp = e.key; }; return ( <div> <Row> <Col span={12} offset={6}> <Menu mode="horizontal" onClick={onClick} selectedKeys={[current]} items={items} /> </Col> </Row> <Row gutter={8}> <Col xs={24} md={6}> {isLoggedIn ? <UserProfile /> : <LoginForm />} </Col> <Col xs={24} md={12}> {children} </Col> <Col xs={24} md={6}> <a href="https://github.com/seroak" target="_blank" rel="noreferrer noopener" > Made by seooak </a> </Col> </Row> </div> ); }; AppLayout.propTypes = { children: PropTypes.node.isRequired, }; export default AppLayout;제가 메뉴를 만들 때 ant 디자인 공식문서를 보고 const item에 요소를 작성해서 메뉴를 만드는 방식으로 코드를 작성했는데 이렇게 작서하니까 SearchInput에 styled 컴포넌트를 적용하는 것이 안됩니다 어떤 방식이 좋을까요?const SearchInput = styled(Input.Search)` verticalalign: middle; width: 200px; marginleft: 10px; `; const items = [ { label: <Link href="/">노드버드</Link>, key: "mail", }, { label: ( <div> <Link href="/profile">프로필</Link> <SearchInput placeholder="input search text" enterButton="Search" onSearch={onSearch} /> </div> ),맨위의 코드가 전체 코드이고 제가 궁금한 부분이 있는 코드는 아래에 있습니다
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
리액트 섹션2 게시글 구현하기 강의를 듣는 중에 'TypeError: 정의되지 않은 속성 'me'을 읽을 수 없습니다.' 에러가 발생하였습니다.
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;영상 잘 보고 있습니다 감사합니다.