39,600원
다른 수강생들이 자주 물어보는 질문이 궁금하신가요?
- 미해결Slack 클론 코딩[실시간 채팅 with React]
배포 관련 질문
안녕하세요포트폴리오를 하나 만들고 싶어서 슬리액 프론트 관련해서 다 클론코딩하였는데강사님이 배포하신거 비슷하게 sleat.nodebird.com 처럼 유사하게 배포할려면 리액트 노드버드 강좌에서aws 나 배포관련 부분만 들으면 될까요?
- 미해결Slack 클론 코딩[실시간 채팅 with React]
[nginx + https] 서비스를 실행하면 niginx가 아닌 서비스 화면을 보여주게 하고 싶습니다.
[진행사항]1.기존의 AWS IP는 http://11.111.111, http://11.111.111:3000 입력시 서비스 화면이 나타났니다.2. 도메인을 www.zoommeetinggo.p-e.kr으로 변경하고 http://www.zoommeetinggo.p-e.kr:3000 주소로 접속하면 AWS IP에서 실행한 서비스 화면이 보여졌습니다.[1, 2번 실행시 보여주는 화면 (http)]3. http://www.zoommeetinggo.p-e.kr을 입력하면 https://www.zoommeetinggo.p-e.kr/으로 변경되어 Nginx의 화면이 보여졌습니다.[3번 실행시 보여주는 화면 (https 적용)] [궁금한 점]nginx 설정 코드를 수정하였지만 서비스를 실행하면 서비스 화면이 아닌 nginx화면이 보입니다. 어떤 부분을 고쳐야 서비스화면을 보여줄지 모르겠어서 질문드립니다.- vim /etc/nginx/nginx.conf: React로 Nodebird SNS - nginx + https 적용하기(16.14분 코드 참고) server { server_name 11.111.111 www.zoommeetinggo.p-e.kr; listen 80; location / { proxy_set_header HOST $host; proxy_pass http://127.0.0.1:3000; proxy_redirect off; } listen 443 ssl; # managed by Certbot ssl_certificate /etc/letsencrypt/live/www.zoommeetinggo.p-e.kr/fullchain.pem; # managed by Certbot ssl_certificate_key /etc/letsencrypt/live/www.zoommeetinggo.p-e.kr/privkey.pem; # managed by Certbot include /etc/letsencrypt/options-ssl-nginx.conf; ssl_dhparam /etc/letsencrypt/ssl-dhparams.pem; }server { if ($host = www.zoommeetinggo.p-e.kr) { return 301 https://$host$request_uri;} # managed by Certbot server_name www.zoommeetinggo.p-e.kr; listen 80; return 404; # managed by Certbot }
- 미해결Slack 클론 코딩[실시간 채팅 with React]
[배포하기] webpack에 aws 퍼블릭 IPv4 주소 와 포트 주소를 작성하고 나서 빌드후 실행하면 오류가 발생합니다.
[배포하기]를 수강 이후에 개발한 프로젝트를aws에 배포하는 중에서 문제가 발생하여 질문 드려요 devServer: { historyApiFallback: true, host: '퍼블릭 IPv4 주소', port: 3333, devMiddleware: { publicPath: '/dist/' }, static: { directory: path.resolve(__dirname) }, },host에 퍼블릭 IPv4 주소 을 설정하고 aws에 port 3333 포트를 열어 주었습니다. "scripts": { "dev": "webpack serve --env development", "build": "webpack", "start": "webpack serve" },npm run build 이후에npm run start 할 경우(퍼블릭 IPv4 주소 -> ex: 11.111.111.11 Error: listen EADDRNOTAVAIL: address not available 11.111.111.11:3333 at Server.setupListenHandle [as _listen2] (net.js:1314:21) at listenInCluster (net.js:1379:12) at doListen (net.js:1516:7) at processTicksAndRejections (internal/process/task_queues.js:83:21) { code: 'EADDRNOTAVAIL', errno: -99, syscall: 'listen', address: '11.111.111.11', port: 3333 }오류가 발생했습니다. 무엇이 문제인지 잘 모르겠어서 질문드립니다. [aws 실행상태]aws_인스턴스 한개에 back,front 폴더를 git을 사용 하여 백,프론트를 실행하고 있습니다.[전체 코드 - webpack.config.js]const path = require('path'); const ReactRefreshWebpackPlugin = require('@pmmmwh/react-refresh-webpack-plugin'); const webpack = require('webpack'); const isDevelopment = process.env.NODE_ENV !== 'production'; const config = { name: 'google_meet', mode: isDevelopment ? 'development' : 'production', devtool: isDevelopment ? 'hidden-source-map' : 'inline-source-map', resolve: { extensions: ['.js', '.jsx', '.json'], alias: { '@hooks': path.resolve(__dirname, 'hooks'), '@components': path.resolve(__dirname, 'components'), '@layouts': path.resolve(__dirname, 'layouts'), '@pages': path.resolve(__dirname, 'pages'), '@utils': path.resolve(__dirname, 'utils'), }, }, entry: { app: './client', }, module: { rules: [ { test: /\.jsx?$/, loader: 'babel-loader', options: { presets: [ [ '@babel/preset-env', { targets: { browsers: ['last 2 chrome versions'] }, debug: isDevelopment, }, ], '@babel/preset-react', ], env: { development: { plugins: [require.resolve('react-refresh/babel')], }, }, }, exclude: path.join(__dirname, 'node_modules'), }, { test: /\.css?$/, use: ['style-loader', 'css-loader'], }, ], }, plugins: [new webpack.EnvironmentPlugin({ NODE_ENV: isDevelopment ? 'development' : 'production' })], output: { path: path.join(__dirname, 'dist'), filename: '[name].js', publicPath: '/dist/', }, devServer: { historyApiFallback: true, host: '퍼블릭 IPv4 주소', port: 3333, devMiddleware: { publicPath: '/dist/' }, static: { directory: path.resolve(__dirname) }, }, }; if (isDevelopment && config.plugins) { config.plugins.push(new webpack.HotModuleReplacementPlugin()); config.plugins.push(new ReactRefreshWebpackPlugin()); } if (!isDevelopment && config.plugins) { } module.exports = config;
- 미해결Slack 클론 코딩[실시간 채팅 with React]
users 호출 시 쿠키가 담기지 않는 이슈 질문드립니다.
users 호출 시 쿠키가 담기지 않는 이슈 질문드립니다.강의 중간에 proxy 설정은 로컬에서 개발을 진행할때 설정을 한다고 말씀을 해주셨는데webpack.config에 proxy 설정을 하고 credential true 설정후 /api/users 와 /api/users/login으로 요청하면 users 요청 안에 쿠키가 담기는데proxy 설정을 주석 처리하고프론트 서버 3090 에서 백 서버 3095로 직접 요청을 하는 풀 도메인 경로를 다 작성해서 요청을 하면 users에 쿠키가 안담기는데 이유가 있을까요??application 탭에는 쿠키가 생성 되어있습니다. [제로초 강좌 질문 필독 사항입니다]질문에는 여러분에게 도움이 되는 질문과 도움이 되지 않는 질문이 있습니다.도움이 되는 질문을 하는 방법을 알려드립니다.https://www.youtube.com/watch?v=PUKOWrOuC0c0. 숫자 0부터 시작한 이유는 1보다 더 중요한 것이기 때문입니다. 에러가 났을 때 해결을 하는 게 중요한 게 아닙니다. 왜 여러분은 해결을 못 하고 저는 해결을 하는지, 어디서 힌트를 얻은 것이고 어떻게 해결한 건지 그걸 알아가셔야 합니다. 그렇지 못한 질문은 무의미한 질문입니다.1. 에러 메시지를 올리기 전에 반드시 스스로 번역을 해야 합니다. 번역기 요즘 잘 되어 있습니다. 에러 메시지가 에러 해결 단서의 90%를 차지합니다. 한글로 번역만 해도 대부분 풀립니다. 그냥 에러메시지를 올리고(심지어 안 올리는 분도 있습니다. 저는 독심술사가 아닙니다) 해결해달라고 하시면 아무런 도움이 안 됩니다.2. 에러 메시지를 잘라서 올리지 않아야 합니다. 입문자일수록 에러메시지에서 어떤 부분이 가장 중요한 부분인지 모르실 겁니다. 그러니 통째로 올리셔야 합니다.3. 코드도 같이 올려주세요. 다만 코드 전체를 다 올리거나, 깃헙 주소만 띡 던지지는 마세요. 여러분이 "가장" 의심스럽다고 생각하는 코드를 올려주세요.4. 이 강좌를 바탕으로 여러분이 응용을 해보다가 막히는 부분, 여러 개의 선택지 중에서 조언이 필요한 부분, 제 경험이 궁금한 부분에 대한 질문은 대환영입니다. 다만 여러분의 회사 일은 질문하지 마세요.5. 강좌 하나 끝날 때마다 남의 질문들을 읽어보세요. 여러분이 곧 만나게 될 에러들입니다.6. 위에 적은 내용을 명심하지 않으시면 백날 강좌를 봐도(제 강좌가 아니더라도) 실력이 늘지 않고 그냥 코딩쇼 관람 및 한컴타자연습을 한 셈이 될 겁니다.
- 미해결Slack 클론 코딩[실시간 채팅 with React]
CORS 에러 질문입니다.
Access CORS 문제는 정말 많이 봤는데그럼 만약에 실무에서 양쪽다 운영 중인 서버에서 cors 문제가 발생할때는 어떻게 처리를 하면 될까요??프론트엔드 처리(devServer)는 로컬 개발에서 문제없이 하려고 하는게 맞다면? 보통은 백엔드 쪽에서 처리를 해주는게 보통인가요?? [제로초 강좌 질문 필독 사항입니다]질문에는 여러분에게 도움이 되는 질문과 도움이 되지 않는 질문이 있습니다.도움이 되는 질문을 하는 방법을 알려드립니다.https://www.youtube.com/watch?v=PUKOWrOuC0c0. 숫자 0부터 시작한 이유는 1보다 더 중요한 것이기 때문입니다. 에러가 났을 때 해결을 하는 게 중요한 게 아닙니다. 왜 여러분은 해결을 못 하고 저는 해결을 하는지, 어디서 힌트를 얻은 것이고 어떻게 해결한 건지 그걸 알아가셔야 합니다. 그렇지 못한 질문은 무의미한 질문입니다.1. 에러 메시지를 올리기 전에 반드시 스스로 번역을 해야 합니다. 번역기 요즘 잘 되어 있습니다. 에러 메시지가 에러 해결 단서의 90%를 차지합니다. 한글로 번역만 해도 대부분 풀립니다. 그냥 에러메시지를 올리고(심지어 안 올리는 분도 있습니다. 저는 독심술사가 아닙니다) 해결해달라고 하시면 아무런 도움이 안 됩니다.2. 에러 메시지를 잘라서 올리지 않아야 합니다. 입문자일수록 에러메시지에서 어떤 부분이 가장 중요한 부분인지 모르실 겁니다. 그러니 통째로 올리셔야 합니다.3. 코드도 같이 올려주세요. 다만 코드 전체를 다 올리거나, 깃헙 주소만 띡 던지지는 마세요. 여러분이 "가장" 의심스럽다고 생각하는 코드를 올려주세요.4. 이 강좌를 바탕으로 여러분이 응용을 해보다가 막히는 부분, 여러 개의 선택지 중에서 조언이 필요한 부분, 제 경험이 궁금한 부분에 대한 질문은 대환영입니다. 다만 여러분의 회사 일은 질문하지 마세요.5. 강좌 하나 끝날 때마다 남의 질문들을 읽어보세요. 여러분이 곧 만나게 될 에러들입니다.6. 위에 적은 내용을 명심하지 않으시면 백날 강좌를 봐도(제 강좌가 아니더라도) 실력이 늘지 않고 그냥 코딩쇼 관람 및 한컴타자연습을 한 셈이 될 겁니다.
- 미해결Slack 클론 코딩[실시간 채팅 with React]
"Access denied for user 'root'@'localhost' (using password: YES)",
"Access denied for user 'root'@'localhost' (using password: YES)",npm 설치도 하고 dotenv config파일도 동일한데 왜 이런 에러가 불러올까요...env 를 못 읽는거같은데, 패스워드 문자로 넣으면 정상적이구요 [제로초 강좌 질문 필독 사항입니다]질문에는 여러분에게 도움이 되는 질문과 도움이 되지 않는 질문이 있습니다.도움이 되는 질문을 하는 방법을 알려드립니다.https://www.youtube.com/watch?v=PUKOWrOuC0c0. 숫자 0부터 시작한 이유는 1보다 더 중요한 것이기 때문입니다. 에러가 났을 때 해결을 하는 게 중요한 게 아닙니다. 왜 여러분은 해결을 못 하고 저는 해결을 하는지, 어디서 힌트를 얻은 것이고 어떻게 해결한 건지 그걸 알아가셔야 합니다. 그렇지 못한 질문은 무의미한 질문입니다.1. 에러 메시지를 올리기 전에 반드시 스스로 번역을 해야 합니다. 번역기 요즘 잘 되어 있습니다. 에러 메시지가 에러 해결 단서의 90%를 차지합니다. 한글로 번역만 해도 대부분 풀립니다. 그냥 에러메시지를 올리고(심지어 안 올리는 분도 있습니다. 저는 독심술사가 아닙니다) 해결해달라고 하시면 아무런 도움이 안 됩니다.2. 에러 메시지를 잘라서 올리지 않아야 합니다. 입문자일수록 에러메시지에서 어떤 부분이 가장 중요한 부분인지 모르실 겁니다. 그러니 통째로 올리셔야 합니다.3. 코드도 같이 올려주세요. 다만 코드 전체를 다 올리거나, 깃헙 주소만 띡 던지지는 마세요. 여러분이 "가장" 의심스럽다고 생각하는 코드를 올려주세요.4. 이 강좌를 바탕으로 여러분이 응용을 해보다가 막히는 부분, 여러 개의 선택지 중에서 조언이 필요한 부분, 제 경험이 궁금한 부분에 대한 질문은 대환영입니다. 다만 여러분의 회사 일은 질문하지 마세요.5. 강좌 하나 끝날 때마다 남의 질문들을 읽어보세요. 여러분이 곧 만나게 될 에러들입니다.6. 위에 적은 내용을 명심하지 않으시면 백날 강좌를 봐도(제 강좌가 아니더라도) 실력이 늘지 않고 그냥 코딩쇼 관람 및 한컴타자연습을 한 셈이 될 겁니다.
- 미해결Slack 클론 코딩[실시간 채팅 with React]
npm i typescript 설치 중 에러
디펜던시 호환문제같은데 다른 게시글에서 본https://www.npmjs.com/package/react-custom-scrollbars-2여기 들어가서 npm i react-custom-scrollbars-2 설치하려고 해봐도 같은 에러가 뜹니다ㅠ
- 미해결Slack 클론 코딩[실시간 채팅 with React]
npx sequelize db:create시 에러 발생
안녕하세요.맥북프로 m1 사용중이며 홈브루를 통해 mysql을 설치했습니다.터미널 명령어로 mysql container도 정상적으로 만들어졌고mysql -u root -p 명령어도 정상적으로 잘 작동하고있습니다.패스워드도 정상적으로 입력되구요. 그런데 back폴더 터미널에서 npm i 를 해준 뒤npx sequelize db:create 명령어 입력 시 (base) jinjaehwan-ui-MacBookPro:back jinjaehwan$ npx sequelize db:createSequelize CLI [Node: 18.18.2, CLI: 6.6.0, ORM: 6.28.0]Loaded configuration file "config/config.js".Using environment "development".ERROR: Access denied for user 'root'@'localhost' (using password: YES)이런 에러가 발생합니다 ㅠㅠ
- 해결됨Slack 클론 코딩[실시간 채팅 with React]
(공유) react-toastify 사용 시 오류 및 해결법 (2024년 2월 기준)
ERROR in ./node_modules/react-toastify/dist/react-toastify.esm.mjs 2:4352-4353 export 'useSyncExternalStore' (imported as 'r') was not found in 'react' (possible exports: Children, Component, Fragment, Profiler, PureComponent, StrictMode, Suspense, __SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED, cloneElement, createContext, createElement, createFactory, createRef, forwardRef, isValidElement, lazy, memo, useCallback, useContext, useDebugValue, useEffect, useImperativeHandle, useLayoutEffect, useMemo, useReducer, useRef, useState, version) @ ./layouts/Workspace/index.tsx 30:0-39 110:6-17 @ ./layouts/App/index.tsx 15:9-37 @ ./client.tsx 9:0-31 12:95-98 2024년 2월 기준, react-toastify를 최신 버전으로 install하게 되면 위와 같은 오류가 발생합니다.alecture의 package.json에 있는 react-toastify 버전으로 특정하여 설치하면 정상 실행 됩니다.npm i react-toastify@7.0.3
- 미해결Slack 클론 코딩[실시간 채팅 with React]
socket.io 관련 질문
frontend에서 socket.io-client를 이용하여 websocket을 구현하면, backend에서도 socket.io를 사용해야 하나요??frontend는 react로, backend는 spring+kotlin으로 구현하려는데, frontend에서만 socket.io를 사용해도 될까요?
- 해결됨Slack 클론 코딩[실시간 채팅 with React]
중첩 라우팅 관련
안녕하세요. v6 업데이트 후 중첩 라우터 문제가 있어 질문 드립니다.로그인 성공 시, http://localhost:3090/workspace/channel 로 이동하게 하였는데 workspace 컴포넌트에서 channel 컴포넌트를 호출하도록 중첩 라우팅 처리한 부분이 동작하지 않습니다. Workspace/index.tsximport fetcher from '@utils/fetcher'; import React, { FC, useCallback } from 'react'; import useSWR from 'swr'; import axios from 'axios'; import { Redirect, Switch } from 'react-router'; import { BrowserRouter, Routes, Route, useNavigate, Navigate, Outlet } from 'react-router-dom'; import { Header, RightMenu, ProfileImg, ProfileModal, LogOutButton, WorkspaceWrapper, Chats } from '@layouts/Workspace/styles'; import gravatar from 'gravatar'; import loadable from '@loadable/component'; const Channel = loadable(() => import('@pages/Channel')); const DirectMessage = loadable(() => import('@pages/DirectMessage')); const Workspace : FC = ({children}) => { const { data, error, mutate } = useSWR('http://localhost:3095/api/users', fetcher); // 전역 const onLogout = useCallback(() => { axios .post('http://localhost:3095/api/users/logout', null, { withCredentials: true, }) .then(() => { mutate(false); }); }, []); if (!data) { console.log('data', data); return <Navigate to="/login" replace />; } console.log("workspace page rendering"); return ( <Chats> <div>테스트</div> <Routes> <Route path="/channel/:channel" element={<Channel />} /> <Route path="/dm/:id" element={<DirectMessage />} /> </Routes> </Chats> ); } export default Workspace; pages/index.tsximport React from 'react'; import { Container, Header } from './styles'; const Channel = () => { console.log("channel page rendering"); return ( <div>채널!</div> ); } export default Channel; App/index.tsx import React from 'react'; import loadable from '@loadable/component'; import { Redirect } from 'react-router'; import { Routes, Route, Navigate, BrowserRouter } from 'react-router-dom'; const LogIn = loadable(() => import('@pages/LogIn')); const SignUp = loadable(() => import('@pages/SignUp')); const Workspace = loadable(() => import('@layouts/Workspace')); const App = () => { return ( <Routes> <Route path="/" element={<Navigate replace to="/login" />} /> <Route path="/login" element={<LogIn />} /> <Route path="/signup" element={<SignUp />} /> <Route path="/workspace/:workspace/*" element={<Workspace />} /> </Routes> ); }; export default App; http://localhost:3090/workspace/channel로그인에 성공하여 위의 주소로 이동 시, 테스트 라는 글씨만 표시되고 채널! 이라는 글씨가 표시되지 않습니다.코드는 공지사항에 있는 링크와 동일하게 작성을 하였는데 잘못 처리한 부분이 있을까요? 바쁘실텐데 확인 한번 해주시면 감사하겠습니다.
- 미해결Slack 클론 코딩[실시간 채팅 with React]
npx sequelize db:create시 오류발생
npx sequelize db:create 명령어 실행 시이러한 오류가 발생합니다. npm i 와 mysql이 시작된 걸 확인한 후에npx sequelize db:create 명령어를 실행해도위의 오류가 발생합니다.구글링을 통해 찾아서 해결해보려했지만 , 해결이 잘 되지않아 질문을 드립니다.
- 미해결Slack 클론 코딩[실시간 채팅 with React]
초기세팅
안녕하세요! 초기 설정 시 제로초님 깃에서 back과 setting/ts(js는 지워도 되나요?) 만 남겨둔 후 각각 터미널에서 npm i 해서 package-lock.json 의존관계에 의해 모듈 설치한 뒤 시작하면되는건가요?
- 해결됨Slack 클론 코딩[실시간 채팅 with React]
채팅을 인피니티 스크롤로 구현하려면 lastId 방식이 맞을까요?
인피니티 스크롤로 페이지 방식으로 구현했을때 새로운 채팅 입력시 게시글이 1~50개까지 있을 때 처음 1~10번을 가져왔는데 새로운 게시글이 추가되어서 11~20번을 가져오는 게 아니라 12~21번을 가져오는 문제가 발생해서 어찌어찌 페이지로 해결을 해보려고 해도 방법이 떠오르지 않네요..이걸해결하려면 채팅서비스의 경우 lastId 방식을 사용할 수 밖에 없는지 궁금합니다.
- 미해결Slack 클론 코딩[실시간 채팅 with React]
정적파일을 불러오는 방법 부탁드려요
아이콘...등을 직접만든 이미지로 적용해보려 합니다.프로젝트 루트폴더에 resource폴더 생성 후 여기에 이미지파일을 넣고 상대경로로 지정하거나 public폴더 생성 후 process.env.PUBLIC_URL로 불러오는 등의 방식을 써봤는데 정적리소스를 불러오지 못하네요. webpack.config.ts의devServer에 static: { directory: path.resolve(__dirname) }는 추가 되어있습니다.
- 미해결Slack 클론 코딩[실시간 채팅 with React]
local:host3095 사이트에 연결할 수 없음 문제
안녕하세요. local:host3095 주소로 사이트가 열리지 않아 질문 남깁니다. (과정)db연결성공했고, 그 다음에 npx run dev 입력하고, 주소창에 local:host3095을 입력했더니 에러가 납니다. 포트번호가 잘못됐나 확인을 해봤는데 뭐가 문제인지 잘 모르겠습니다ㅠ 포트번호 확인app.js에 3095라고 잘 적혀있는데 sql들어가서server > serverstatus>test connection을 실행해보면 3306이라고 적혀있습니다. sql 종료했다 다시 실행하기
- 미해결Slack 클론 코딩[실시간 채팅 with React]
Access denied for user 'root'@'localhost' (using password: NO) 에러
npx sequelize db:create을 설치하다가 오류가 나서1. 최신 업데이트: npm install -g npx2. npm install -g sequelize-cli이렇게 해보았는데 Access denied for user 'root'@'localhost' (using password: NO) 에러가 떴습니다. sql설치할때 패스워드 설정했고, 그 패스워드를 .env파일에 있는 MYSQL_PASSWORD에 적어뒀는데 에러가 고쳐지질 않습니다ㅠ
- 해결됨Slack 클론 코딩[실시간 채팅 with React]
reactQuery로 짜고있는데...
useQuery 나 mutation같은걸 통해 데이터를 가져오는데 데이터 렌더링이랑 훅스랑겹치지않게 가장 함수끝부분에 배치해야된다해서 그렇게 배치했는데 data 의 null 값여부를 젤 밑에서 하니까 그위에 훅스들은 수동으로 null 값을 체크해야되는데 이런경우는 어떤식으로 하는게 좋을까요?interface Props { children?: React.ReactNode } const Comp: FC<Props> = () => { const {p1, p2} = useParams() if (!p1|| !p2) { return <>loading error</>; } const {data} = useQuery({ queryKey: mykey, queryFn: () => myfunc1(userId, codeId) }); const {mutate} = useMutation({ mutationFn: async (data: CodeRequestEntity) => { await myfunc2(data) return true } }) if(!data){ return <>loading</> } const onClickConfirm = useCallback(() => { mutate(data) onClose() }, []) return ( <> <Button variant={"outlined"} onClick={onClickConfirm}>예 </Button> </> ); }; export default Comp; 이런식으로 하게되면 분기문을통해 데이터 null 처리를 해서 분기문 밑어부터는 null 처리를 안해도되는데 null 처리를 가장 밑에 렌더링부분에 넣으면 그위에 훅스에선 데이터쓸때마다 null 처리해줘야되서 혹시 다른 방법 있을까요?
- 해결됨Slack 클론 코딩[실시간 채팅 with React]
unread Count 같은 경우 실무에선는 DB에 마지막 일자를 기록하나요?
강의에서 localStorage 를 이용하여 접속시간 or 마지막 불러온 일자를 저장하고그 local 값을 unreads 에 after 파람으로 전송하여 읽지않은 메시지를 카운트 햇는데해당 방식은 다른 아이디로 로그인 시 같은 local 데이터를 활용하기도 하고 다른 기기에 접속시 해당값은 날라가게 될텐데 이는 에러사항으로 이어질 것으로 예상됩니다.마지막 일자를 활용하게 된다면 이 값은 db에 저장되야 할걸로 생각이 되는데 맞을까요?
- 해결됨Slack 클론 코딩[실시간 채팅 with React]
내부디비를 세부적으로 쓰고싶은데...
sleact 서비스에 내부스토리지 (web스토리지,indexedDB) 를 좀더 체계적으로 써야될것같은데zustand 같은 상태관리 라이브러리에 내부스토리지를 연결하는게 좋을까요? 아니면 swr 같은데다 연결하는게 좋을까요? 아니면 내부스토리 접근하는 코드 따로 빼놓고 데이터 가져와서 state 에 관리하는게 나을까요?