socket.io 친구 개인 채팅 1 어제 했던 세팅에 추가해서 작업을 했다. 우선 친구를 우클릭을하면 1대1 채팅을 클릭해 넘어갈 수 있는 구조로 만들고 싶었다. 1. 유저 정보 전달 우선 상대와 socket으로 방을 친구별로 각각 만들어 통신하려면 상대의 고유 socket id를 알아내야 했다. 상대의 고유 socket id를 알아내기 위해 실행할때 id를 가져오고 그 socket id가 누구의 것인지 구분할 필요도 있었다. 처음에 useEffect로 서버에 각자 자신의 id와 socket id를 보낸다. useEffect(() => { socket.emit("nickName", myId, socket.id); }, []); server.js에서 받은 후 고유유저아이디/소켓아이디 의 구조로 만든후 배..
socket.io 서버 세팅 실시간 개인 채팅을 구현하기 위해 node.js의 express, socket.io를 배워보려 한다. 서버로 사용할 파일을 새로 만들어줬고 그곳엔 이렇게 구성을 해줬다 이후 본대로 server.js 기본 세팅을 해주고 시작했다. import http from "http"; import SocketIo from "socket.io"; import express from "express"; const app = express(); app.set("view engine", "pug"); app.set("views", __dirname + "/views"); app.use("/public", express.static(__dirname + "/public")); app.get("/"..
댓글 CRUD 커뮤니티 상세페이지의 댓글을 구현해 봤다. 조건은 상세페이지마다 각각의 다른 댓글이 있어야 하고, 쓰는 아이디의 이미지,닉네임,쓴날짜,수정,삭제이다. useQuery와 useMutation을 이용해 만들었다.다시 해봐도 CRUD를 모두 사용해보기에는 댓글만한게 없는 것 같다. 댓글input옆에 등록버튼을 배치해 누르면 등록되게 해놨고 밑에 댓글창으로 출력되게 하였다. 최신댓글이 맨 위로 올라오게 하기위해 .reverse()를 사용했는데 렌더링될때마다 계속 반대로 바뀌는 오류가있어서 .slice().reverse()의 형태로 바꿔주었다. 빈칸일땐 작성이 안되게 예외 처리 해놨고, 수정 삭제는 본인이 쓴 댓글에만 표시되게 해놨다. 수정을 누르면 해당 댓글에 input창이 나오게 만들었고 취소를..
ChatGPT무한 스크롤 chatGPT가 재밌어 보여서 질문을 조합해 게임 api사이트 하나를 이용한 무한 스크롤을 구현해 봤다. gpt에 질문할때는 자세하게 원하는 정보와 원하는 부분을 말하는게 더 정확한 정보를 주는 것 같았다. 실행했을때 검색도 잘되고, 무한스크롤도 잘 작동한다. 이미지와 제목도 잘 불러와졌다. 아래코드는 거기서 내가 변형해 steam안에있는 게임만 검색결과로 나오게 한 것이다. import React, { useState, useEffect } from "react"; import axios from "axios"; import InfiniteScroll from "react-infinite-scroll-component"; interface Game { external_games..
채팅글 컴포넌트 실시간 채팅을 socket.io를 통해 객체로 받아온다. 객체안에는 채팅 친 사람의 id가 들어있는데 그 id를 이용해 css만으로 반대로 나오게 해봤다. 각자 스타일컴포넌트로 props를 통해 id를 내려준후 그 id가 자신과 일치하면 오른쪽 정렬, 일치하지 않으면 flex-direction: row-reverse나 정렬만 바꿔주는것 만으로 전체 반전이 일어날 수 있게 했다. import React from "react"; import styled from "styled-components"; function Testtext({ chat }: any) { //아이디가 내아이디와 같으면 왼쪽 아니면 오른쪽 //세션 아이디 const myId = sessionStorage.getItem("..
유저 검색 로직 트러블 슈팅 유저 검색 로직중 하나이다. 원래 두번째 for문 안의 if 뒤에 return할 부분이 들어있었는데 원하는대로 필터링이 되지 않았다. 이유는 모르겠지만 return할 부분을 for문 밖으로 아예 빼주니까 정상적으로 작동됐다. 시도해봤던 것 중에 recoil에서 selector를 사용해 결과 값을 필터 해주려고 해봤다. 첫번째 selector는 잘 작동했는데 그 selector로 만든걸 다른 selector에서 다시 사용하려할때 생기는 오류도 있었다. const alreadyFriend = friendAllRecoil?.filter((i: FriendSearchProps) => { for (let t = 0; t < getFriendAuth.length; t++) { if (f..
reactquery 동적 사용 원래 리액트 쿼리는 이런형태로 사용을 했었다. const{ data } = useQuery("name", getdata); 그렇다보니까 usemutation의 post나 delete같은 행동으로 쿼리초기화를 해주지 않는 이상 최신정보를 잘 못가져오는 단점이 있었다. 그래서 쿼리의 동적 사용을 위해 아래와 같이 const{ data } = useQuery(["name", state], getdata); 매번 바뀌는 무언가를 넣어주면 그것이 바뀔때마다 쿼리 이름이 바뀌기 때문에 그때의 최신 정보를 가져온다고 한다. 전처럼 string으로 쓰면 쿼리이름이 매번 같기때문에 이미 전에 있던 정보를 가져 오는 것 이다.
우클릭 메뉴 친구창 ui를 깔끔하게 하기위해서 일부 기능을 우클릭에 넣으려고 시도해봤다. 우선 나올 우클릭메뉴를 friendContextMenu라는 컴포넌트로 따로 만들었다. 생성한 후 친구map안에 넣어줬다. {friend?.map((i: FriendSearchProps) => { return ( {/* 온라인표시 */} {i.login && isFriendOnline(i.lastLogin) ? ( ) : ( )} {i.nickname} `Dave the Diver`방 참여중 7 ); })} props로는 우클릭을했을때 마우스의 위치를 확인해서 생성되게 하기위해 event.screenX와 event.screenY를 props로 보내줬다. 처음에는 clientX,Y를 이용해 구현했는데. 나오는 메뉴는 스..