173만명의 커뮤니티!! 함께 토론해봐요.
미해결
따라하며 배우는 노드, 리액트 시리즈 - 기본 강의
게시판 보면서 수정했는데 오류가 사라지지 않습니다. 어떻게 수정하면 될까요? (LoginPage.js) (index.js) (App.js) (발생하는 오류) 도와주시면 감사하겠습니다...ㅠㅠ
해결됨
Slack 클론 코딩[실시간 채팅 with React]
에러해결 시도현황 (하단에 npm list 첨부했습니다.) 생각한 원인 node_moduels\@loadable\component 의 경로로 탐색을 하는 상황인데 npm i @types/loadable__component 결과로 다운받은 모듈의 위치는 @types 디렉토리아래 존재하는 상황이므로 노드가 경로를 못찾나? 라고 생각했습니다. => 첫 시도 에러 상황: module not fount 상황으로 @types directory 를 찾지 못해 생긴 문제로 생각했습니다. 에러 메시지 vscode 상황 브라우저 상황 => @types 를 추가해 경로를 고쳐봤습니다. 마우스를 올리면 이런식으로 나오는데, 브라우저에서는 module not found 가 나옵니다. 브라우저 상황 => 두 번째 시도 에러 추론.. webpack 문제? 잘은 모르지만, webpack config에 @loadable 을 추가해봐도 해결이 안됩니다. => @loadable 이 없는 상황에도 에러가 납니다. => @loadbale resolve argument 로, (__dirname, '@types') 에러납니다. (import loadable from '@loadable/component' 상황입니다.) => @loadable resolve argument 로, (__dirname, '@types/loadable__component') 에러납니다. (import loadable from '@loadable/component' 상황입니다.) 두 번째 시도의 에러 첨부본 모두 vscode 를 재부팅후 npm run dev를 실행한 결과입니다. ref) => npm list
미해결
Slack 클론 코딩[실시간 채팅 with React]
아래의 코드에서 다음과 같은 에러가 나타납니다 {member.id === userData?.id && <span> (나)</span>} "'false | IUser' 형식에 'id' 속성이 없습니다. 'false' 형식에 'id' 속성이 없습니다.", userData?.id는 userData가 존재할때만 id property에 접근하고, userData가 false면 접근하지 않는 것으로 알고 있는데, 왜 저러한 오류가 나타나는지 의문입니다. 이전에도 error.response?.data 같은 문법을 많이 썼는데, 왜 저게 오류인지 의문입니다.
미해결
따라하며 배우는 노드, 리액트 시리즈 - 기본 강의
해당 오류를 찾아보니까 함수에 이름을 지으라고 하는데 강사님께서는 함수 이름 없이 잘 실행되는데 왜 그렇게 되나요? 함수 이름의 문제가 아니라 다른 문제가 있어서 오류가 발생하는건가요?? 잘 하다가 이부분에서 막혔습니다...
미해결
Slack 클론 코딩[실시간 채팅 with React]
4: 48 mutate 대신 revalidate를 사용하셨는데 revalidate가 지금은 사용하지 않는 단어라서 지금까지 mutate로 대체해서 사용했어요 제로초님처럼 로그인 했을 때 에러가 나진 않는데 바꾸지 않아도 되나요??
미해결
[개정3판] Node.js 교과서 - 기본부터 프로젝트 실습까지
안녕하세요. 개정 3판 Node.js 교과서 8-6 몽구스 실전 프로젝트에서 처음 프로젝트를 시작할 시, cd ch8/8.6/learn-mongoose 하여 폴더에 들어간 이후 npm start 에서 막혔습니다. terminal 상으로는 돌아가지만, localhost :3002로 접속했을때, 제대로 접속되지 않고 로딩창만 뜹니다. 저는 현재, intel MAC, Vertura 13.1 버전 쓰고 있으며, 노드 JS는 v18.12.1, mongodb는 6.0.4버전 쓰고있습니다. 에러 메세지는 다음과 같습니다. 몽고디비 연결 에러 MongooseServerSelectionError: connect ECONNREFUSED ::1:27017 at Connection.openUri (/Users/jisu/Downloads/nodejs-book-master/node_modules/mongoose/lib/connection.js:825:32) at /Users/jisu/Downloads/nodejs-book-master/node_modules/mongoose/lib/index.js:409:10 at promiseOrCallback (/Users/jisu/Downloads/nodejs-book-master/node_modules/mongoose/lib/helpers/promiseOrCallback.js:11:14) at Mongoose._promiseOrCallback (/Users/jisu/Downloads/nodejs-book-master/node_modules/mongoose/lib/index.js:1262:10) at Mongoose.connect (/Users/jisu/Downloads/nodejs-book-master/node_modules/mongoose/lib/index.js:408:20) at connect (/Users/jisu/Downloads/nodejs-book-master/ch8/8.6/learn-mongoose/schemas/index.js:7:12) at Object.<anonymous> (/Users/jisu/Downloads/nodejs-book-master/ch8/8.6/learn-mongoose/app.js:18:1) at Module._compile (node:internal/modules/cjs/loader:1159:14) at Module._extensions..js (node:internal/modules/cjs/loader:1213:10) at Module.load (node:internal/modules/cjs/loader:1037:32) { reason: TopologyDescription { type: 'Unknown', servers: Map(1) { 'localhost:27017' => [ServerDescription] }, stale: false, compatible: true, heartbeatFrequencyMS: 10000, localThresholdMS: 15, setName: null, maxElectionId: null, maxSetVersion: null, commonWireVersion: 0, logicalSessionTimeoutMinutes: null }, code: undefined } MongooseServerSelectionError: connect ECONNREFUSED ::1:27017 를 구글링하여 몇가지를 시도해봤는데, 1번째, MONGO_URI=mongodb:// localhost:27017/blog 를 MONGO_URI=mongodb://127.0.0.1:27017/blog 로 바꾸어 해결한 사례가 있어 ch8/8.6/learn-mongoose/schemas 폴더의 index.js에서mongoose.connect('mongodb://root: 1234@localhost:27017 /admin' 를 mongoose.connect('mongodb://root:1234@127.0.0.1:27017/admin', 로 바꾸었지만, → 해결되지 않았습니다. 2번째 , terminal에 mongod 를 쳐서 error가 난 부분을 살펴보니, {"t":{"$date":"2023-02-07T00:55:42.260+09:00"},"s":"I", "c":"CONTROL", "id":23285, "ctx":"-","msg":"Automatically disabling TLS 1.0, to force-enable TLS 1.0 specify --sslDisabledProtocols 'none'"} {"t":{"$date":"2023-02-07T00:55:42.263+09:00"},"s":"I", "c":"NETWORK", "id":4915701, "ctx":"-","msg":"Initialized wire specification","attr":{"spec":{"incomingExternalClient":{"minWireVersion":0,"maxWireVersion":17},"incomingInternalClient":{"minWireVersion":0,"maxWireVersion":17},"outgoing":{"minWireVersion":6,"maxWireVersion":17},"isInternalClient":true}}} {"t":{"$date":"2023-02-07T00:55:42.280+09:00"},"s":"I", "c":"NETWORK", "id":4648602, "ctx":"thread1","msg":"Implicit TCP FastOpen in use."} {"t":{"$date":"2023-02-07T00:55:42.285+09:00"},"s":"I", "c":"REPL", "id":5123008, "ctx":"thread1","msg":"Successfully registered PrimaryOnlyService","attr":{"service":"TenantMigrationDonorService","namespace":"config.tenantMigrationDonors"}} {"t":{"$date":"2023-02-07T00:55:42.286+09:00"},"s":"I", "c":"REPL", "id":5123008, "ctx":"thread1","msg":"Successfully registered PrimaryOnlyService","attr":{"service":"TenantMigrationRecipientService","namespace":"config.tenantMigrationRecipients"}} {"t":{"$date":"2023-02-07T00:55:42.286+09:00"},"s":"I", "c":"REPL", "id":5123008, "ctx":"thread1","msg":"Successfully registered PrimaryOnlyService","attr":{"service":"ShardSplitDonorService","namespace":"config.tenantSplitDonors"}} {"t":{"$date":"2023-02-07T00:55:42.286+09:00"},"s":"I", "c":"CONTROL", "id":5945603, "ctx":"thread1","msg":"Multi threading initialized"} {"t":{"$date":"2023-02-07T00:55:42.286+09:00"},"s":"I", "c":"CONTROL", "id":4615611, "ctx":"initandlisten","msg":"MongoDB starting","attr":{"pid":64400,"port":27017,"dbPath":"/data/db","architecture":"64-bit","host":"iMac.local"}} {"t":{"$date":"2023-02-07T00:55:42.286+09:00"},"s":"I", "c":"CONTROL", "id":23403, "ctx":"initandlisten","msg":"Build Info","attr":{"buildInfo":{"version":"6.0.4","gitVersion":"44ff59461c1353638a71e710f385a566bcd2f547","modules":[],"allocator":"system","environment":{"distarch":"x86_64","target_arch":"x86_64"}}}} {"t":{"$date":"2023-02-07T00:55:42.286+09:00"},"s":"I", "c":"CONTROL", "id":51765, "ctx":"initandlisten","msg":"Operating System","attr":{"os":{"name":"Mac OS X","version":"22.2.0"}}} {"t":{"$date":"2023-02-07T00:55:42.286+09:00"},"s":"I", "c":"CONTROL", "id":21951, "ctx":"initandlisten","msg":"Options set by command line","attr":{"options":{}}} {"t":{"$date":"2023-02-07T00:55:42.286+09:00"},"s":"E", "c":"NETWORK", "id":23024, "ctx":"initandlisten","msg":"Failed to unlink socket file","attr":{"path":"/tmp/mongodb-27017.sock","error":"Permission denied"}} {"t":{"$date":"2023-02-07T00:55:42.286+09:00"},"s":"F", "c":"ASSERT", "id":23091, "ctx":"initandlisten","msg":"Fatal assertion","attr":{"msgid":40486,"file":"src/mongo/transport/transport_layer_asio.cpp","line":1126}} {"t":{"$date":"2023-02-07T00:55:42.286+09:00"},"s":"F", "c":"ASSERT", "id":23092, "ctx":"initandlisten","msg":"\n\n***aborting after fassert() failure\n\n"} 이 부분에서, 에러인 부분인 {"t":{"$date":"2023-02-07T00:55:42.286+09:00"},"s":"E", "c":"NETWORK", "id":23024, "ctx":"initandlisten","msg":"Failed to unlink socket file","attr":{"path":"/tmp/mongodb-27017.sock","error":"Permission denied"}} 이 부분이 에러일 것같다는 생각에, 구글링을 하던 중 /tmp/mongodb-27017.sock 파일의 접근권한을 변경하거나 파일 삭제 후 서비스를 재시작하면 정상적으로 mongodb가 부팅된다. 는 글을 보고, sudo rm -rf /tmp/mongodb-27017.sock 로 sock 파일을 삭제해봤지만, 똑같은 결과였습니다. ls -l /tmp/mongodb-27017.sock 로 확인했을때, 삭제된 것도 확인했습니다. 3번째 , terminal에 brew services list 로 mongodb상태를 확인해보려고 하였습니다. Name Status User File mongodb-community error 512 jisu ~/Library/LaunchAgents/homebrew.mxcl.mongodb-community.plist mysql none postgresql@14 none 로 나오는 것을 보아 mongodb가 제대로 작동되지 않고 있어서 에러가 발생하는 것으로 추측했습니다. brew services start mongodb-community 의 결과로, Bootstrap failed: 5: Input/output error Try re-running the command as root for richer errors. Error: Failure while executing; `/bin/launchctl bootstrap gui/502 /Users/jisu/Library/LaunchAgents/homebrew.mxcl.mongodb-community.plist` exited with 5. 가 나와서, 이를 해결하기 위해 mongodb-community를 완전히 지우고, brew cleanup까지 한 다음 다시 깔아봤지만 달라진 바는 없었습니다. 이전 강좌까지 mongodb에서 데이터베이스 생성하는 CRUD 실습할때까지만 해도 문제없었는데, 갑자기 에러를 벹어내네요.. 3일동안 이 문제를 해결하려 힘써봤는데 도저히 감이 안잡혀서 질문드립니다.
미해결
Slack 클론 코딩[실시간 채팅 with React]
소켓이 연결 되어 DM 메시지에 초록 동그라미도 보이는데, 12:44 초에 네트워크 창 보시면 ?EIO 라고 시작되는 네트워크 네임이 없고, 프로토콜도 http/1.1 만 나오고 websocket이라는 단어가 뜨는 부분이 없어요 이건 연결이 안된건가요....??? 5:35초 부터 네트워크에 빨간 에러도 안뜨고 저 네임이 안들어갔었습니다. 소켓 연결이 된 것 같은데 안떠서 헷갈리네요
해결됨
[리뉴얼] React로 NodeBird SNS 만들기
const images = await Promise.all( req.body.image.map((image) => Image.create({ src: image })) ); await post.addImages(images); 이런식으로 Image.create() 를 적용한 다음 다시 post.addImages() 하는 이유가 뭔가요? 중복된 실행이라고 생각했는데 실행해봤을때는 중복된 튜플이 생성되지는 않네요..
미해결
[리뉴얼] 파이썬입문과 크롤링기초 부트캠프 [파이썬, 웹, 데이터 이해 기본까지] (업데이트)
- 본 강의 영상 학습 관련 문의에 대해 답변을 드립니다. (어떤 챕터 몇분 몇초를 꼭 기재부탁드립니다) - 이외의 문의등은 평생강의이므로 양해를 부탁드립니다 - 현업과 병행하는 관계로 주말/휴가 제외 최대한 3일내로 답변을 드리려 노력하고 있습니다 - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. <div class="layer_body" data-translation="true"> <p>금융당국이 급증하는 가계부채 증가세를 막기 위해 아파트 잔금대출에도 소득을 따져 대출한도를 정하는 총부채상환비율(DTI)을 적용하는 방안을 유력하게 검토하고 있다.</p> <p>지금은 집값을 기준으로 대출한도를 매기는 주택담보인정비율(LTV) 규제만 적용돼 소득이 없어도 집값의 70%를 빌려 잔금을 치르는 게 가능하다.</p> <p>앞으로 잔금대출에 DTI가 적용되면 소득이 없는 사람은 집값의 70% 대출 받는 게 어려워진다.</p> </div> 안녕하세요. 지금 강의 중인 내용에 보면 class의 div 값과 다르게 2개의 값이 연이어 나오는데요. 이런 경우에는 어떻게 입력하면 될까요? 복사해서 넣어보고 했는데 계속 오류가 뜹니다. import requests from bs4 import BeautifulSoup res = requests.get(' https://v.daum.net/v/20170615203441266 ') soup = BeautifulSoup(res.content,'html.parser') mydata = soup.find_all('div','layer_body' data-translation='true') mydata.get_text() 이런식으로 연달아서 넣으면 되는건지... 답변 부탁드려요^^
해결됨
[리뉴얼] React로 NodeBird SNS 만들기
1.사용자가 웹에 접속을 할 때, 브라우저 -> 프론트서버 로 요청을 보내게 되고 프론트 -> 브라우저 로 html css js 파일을 보내서 뷰를 표시하게 되는데 그러면 특정 기능을 사용할 때, 예를 들어 로그인 버튼을 누른다고 하면 그 요청은 브라우저 -> 백엔드 인가요 프론트 -> 백엔드 인가요? 만약 브라우저 -> 백엔드 이면 백엔드 cors 설정에서는 프론트서버 도메인만 허용하도록 해놓는데 어떻게 브라우저에서 백엔드로 접근이 가능한건가요? 2.강좌에서는 me값으로 로그인 유지를 위한 로직을 작성했고 모든 페이지 접속 때마다 백엔드로 요청을 보내서 세션인증을 하는방식으로 로직을 작성했는데 제가 알기로 세션인증방식은 세션id를 프론트에 보내서 쿠키에 있는 세션id를 이용해 로그인 유지를 하는것으로 알고있습니다. 제가 알고 있는 방식과 강좌에서의 세션인증이 좀 다른것 같은데 어떻게 이해해야 하나요? 강좌는 ssr 적용 전 백엔드 부분까지만 들은 상태입니다.
미해결
[개정판] 파이썬 머신러닝 완벽 가이드
안녕하세요 강의 잘 듣고 있습니다! 분류결정 임곗값에 대해서 강의를 들을땐 잘 이해가 됐었는데 복습하면서 정리하다보니 제가 잘 이해가 안되는 부분이 있어 질문드립니다. 예를 들어, 분류 결정 임곗값이 0.3까지 낮아졌다고 할 때 pred_proba array에서 [0.49, 0.51] 이런 식으로 나온 경우 결국 0이나, 1이나 둘 다 임곗값은 넘었는데 어떤 걸로 예측하나요? 임곗값을 0.5로 설정했을땐 이럴 일이 없겠지만 임곗값을 낮췄을 때 어떻게 분류가 되는지 궁금합니다. 확률 간의 비교를 해서 더 높은 확률로 분류를 하는지 아니면 단순히 둘 다 넘었을 땐 positive로 분류하는 건지 알고싶습니다! 감사합니다.
미해결
따라하며 배우는 노드, 리액트 시리즈 - 레딧 사이트 만들기(NextJS)(Pages Router)
안녕하세요! 로그아웃 후 계속 auth/me후 계속 req에서 쿠키가 존재해서 문의 남깁니다! application탭에서 쿠키는 잘 삭제가 되고 네트워크 탭에서도 logout이 성공적으로 이루어지는데 reload하면 바로 auth/me가 계속 200코드와 함께 user가 전달됩니다. 콘솔에도 찍어봤는데 계속 req에 쿠키가 같이 전달되고 있어서 요. 서버도 껐다 켜보고 했는데도 계속 그래서 문의드립니다! client/src/context/auth.tsx client/src/components/NavBar.tsx server/src/middlewares/auth.ts server/src/routes/auth.ts
미해결
코딩테스트 [ ALL IN ONE ]
개발자 취업 비밀노트는 제대로 왔는데 코딩테스트 강의는 공유가 오지 않네요... 제 아아디와 이메일은 아이디 : SecondPhantom 이메일은 second2phatom@gmail.com 입니다.
미해결
따라하며 배우는 노드, 리액트 시리즈 - 기본 강의
관련 에러를 찾아보니 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' } }
미해결
한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
다이어리 에디터 직접 만들어보고 있는데 강의에서 e.target .name에 []괄호 안에넣는데 e.target.name 자체가 string이잖아요 괄호표기법으로 안써도 위에서는 그냥 author: "" 이렇게 key갑: value 값 써줬는데 e.target .name도 console찍어보면 author라고 뜨는데 왜 괄호를 붙여야 하나요? [ e.target.name ] 왜 이렇게 써야하는지 궁금합니다. 위에선 괄호없이 string으로 썼는데
해결됨
풀스택 리액트 토이프로젝트 - REST, GraphQL (for FE개발자)
해당 프로젝트에서 getInitialProps와 getServerSideProps를 동시에 쓰고 있는데 2개의 경우 pre-render를 하기 위해 작성했다고 이해했는데 둘 중 하나만 써도 되는 부분 아닌가요??? 어떤 상황떄문에 2개를 동시에 사용하는지 궁금합니다
미해결
따라하며 배우는 리액트 A-Z[19버전 반영]
안녕하세요 선생님 혹시 강의를 듣고 정리한 내용을 개인 블로그에 게시해도 될까요??
미해결
파이썬 알고리즘 문제풀이 입문(코딩테스트 대비)
강사님 안녕하세요. 강의 잘 듣고 있습니다. 감사합니다. 세가지 질문이 있습니다. 1. 아래와 같이 코드 짜도 되나요? 2. 코드가 맞다면, 제가 탐색 알고리즘 원리로 푼게 맞나요? 3. 강사님 코드가 더 효율이 높다고 보면 되는건가요? 이정도 차이면 코딩테스트에서 큰건가요? - 제 코드 실행시간: 0.00021576881408691406 - 강사님 코드 시간: 0.00020885467529296875
미해결
Slack 클론 코딩[실시간 채팅 with React]
안녕하세요 개발환경으로 code-server을 사용하고 있는데, 문제를 도대체 알 수 없어서 질문 올립니다 ㅜㅜㅜㅜㅜㅜ code-server은 실행시 도메인/proxy/port로 실행 주소가 설정됩니다. 그래서 hot-reload 웹소켓 연결을 설정하기위해서 webpack.config.ts에 client: { webSocketURL: 'ws://0.0.0.0:443/proxy/3090/ws', }, 를 추가했습니다. index.html에서 src = "./dist/app.js"로 했습니다 다른 모든 코드는 setting/ts를 그대로 npm i 했습니다. (여기까지 사전 참고내용) 이전 강의에서 App.tsx에 <div>코드어쩌구저쩌구</div>는 잘 나타났습니다. 이번 강의에서 react-router-dom을 도입해서 code-server에서 실행을 하게되면 브라우저에 아무런 화면이 나오지 않습니다. 그러나, code-server가 아닌 구름ide에서 같은 파일을 실행할 경우(서버 주소가 proxy가 아니게됨) 정상적으로 동작합니다. react-router-dom을 사용했더니 화면이 안보이기때문에 react-router-dom 과 관련된 문제라고 추측합니다. code-server에서 실행주소뒤에 'proxy/3090'이 붙었을때 문제가 생겼기 때문에 code-server 관련 문제로 추측됩니다. code-server사용시 가져온 파일이랑 구름ide사용시 가져온 파일 비교해보면, code-server에서 파일2개를 못 가져온것 같은데, 이게 문제인거 같기도 합니다. 또한, App.tsx에서 react-router을 빼고 다음과 같이 입력후 실행해보았습니다. import React from 'react'; import loadable from '@loadable/component'; import { Switch, Route, Redirect } from 'react-router-dom'; import SignUp from '@pages/SignUp'; const App = () => { return <SignUp />; }; export default App; 가져온 파일 목록은 다음과 같고, 정상적으로 signup화면이 나타납니다. 이번에는 loadable/component가 문제인가 싶어서, 이걸빼고 다음과 같이 App.tsx를 입력했습니다. import React from 'react'; import loadable from '@loadable/component'; import { Switch, Route, Redirect } from 'react-router-dom'; import LogIn from '@pages/LogIn'; import SignUp from '@pages/SignUp'; const App = () => { return ( <Switch> <Route path="/login" component={LogIn} /> <Route path="/signup" component={SignUp} /> </Switch> ); }; export default App; 그랬더니 이전과 같이 화면에 아무것도 안나옵니다. 도대체 뭐가 문제인지를 모르겠네요 ㅜㅜㅜ
미해결
Slack 클론 코딩[실시간 채팅 with React]
NavLink 사용시, onClick에서 에러가 발생합니다 (property) onClick?: React.MouseEventHandler<HTMLAnchorElement> | undefined Type 'void' is not assignable to type 'MouseEventHandler<HTMLAnchorElement> | undefined'.ts(2322)index.d.ts(1448, 9): The expected type comes from property 'onClick' which is declared here on type 'IntrinsicAttributes & NavLinkProps<unknown> & RefAttributes<HTMLAnchorElement>' 이런 에러가 발생하였습니다. 그래서 인터넷에 검색하니까 onClick={()=>resetCount(member.id)} 이렇게 바꿔주면 된다고 해서 바꿔줬더니 오류가 사라졌습니다. 제로초님께서는 에러가 없었는데 저만 이 오류가 나타나는 이유가 뭘까요?? // 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'; interface Props { userData?: IUser; } const DMList: FC<Props> = ({ userData }) => { const { workspace } = useParams<{ workspace?: string }>(); 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([]); }, [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; return ( <NavLink key={member.id} activeClassName="selected" to={`/workspace/${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; +) 그리고 강의 코드와 깃헙에 있는 코드가 부분적으로 다른 부분이 있는데 븥여넣을 때마다 동영상을 정지시키고 코드를 다시 작성해야해서 조금 번거로운 부분이 있는 것 같아요ㅜㅜ
