친구 삭제 수정 저번에 했던 친구 삭제 방식 (친구 요청 하면 uuid로 저장되고 상대방이 수락할때 그 uuid +1로 저장하고 친구 삭제할땐 uuid, uuid+1, uuid.slice모두 삭제하는 방식)은 비효율적인거 같다고 생각되어 수정하게 됐다. 우선 친구 요청과 친구 수락모두 각각의 uuid로 저장되게 했다. //친구 수락 const friendAddOnClick = async (i: FriendSearchProps) => { let friendAdd = { id: uuidv4(), myId: myId, friendId: i.id, myNickName: myNickName, friendNickName: i.nickname, }; try { //상대와 친구가 돼있는지 검사후 이중 저장 방지 con..
온라인 오프라인 전환 온라인 오프라인 공유를위해 dbjson에 온라인 정보를 저장하는 방식을 사용했다. 백엔드가 가능하면 더 나은 방법이 있을 것 같지만 dbjson만으로 생각해본 방법은 이거였다. 우선 polling을 이용해 로그인 한사람의 타임스탬프를 30초마다 찍어준다. // 타임스탬프 찍어주기 const dataApi = async () => { const rankApi = () => axios .get(`http://localhost:3001/auth/${ProfleSteamId}`) .then((response) => { const i = response.data; axios.put(`http://localhost:3001/auth/${ProfleSteamId}`, { ...i, lastLog..
왼쪽에서 나오는 메뉴 리액트에서 메뉴 클릭시 왼쪽에서 나오는 메뉴는 단순히 css를 이용했다 컴포넌트 안에서 스타일 컴포넌트에 props로 현재 메뉴가 닫힌지 열린지 구분하게 하고 trasition으로 부드럽게 나오게 했다 const MenuOpenDiv = styled.div` width: 400px; height: 100%; background: #263245; position: fixed; left: ${(props) => (props.layoutMenu === "close" ? "-480px" : "80px")}; top: 0; bottom: 0; transition: 0.5s ease-in-out; z-index: 99999; box-shadow: 2px 4px 15px 0 #000; route..
Recoil recoil은 전역으로 state를 조금 더 간편하고 이동할때 다양한 변형을 가능할 수 있게 해주는 라이브러리다. 리코일은 따로 atom.js를 만들어서 전역 state관리에 사용하게 된다. atom은 기본적으로 아래 처럼 atom 선언을 해준 후 키값, 기본값을 사용해 만들게 된다. import { atom } from "recoil"; export const LayoutButton = atom({ key: "Layout", default: "close", }); export const friendAllState = atom({ key: "friendAllState", default: [], }); 아톰에 위와 같이 만들어 준 후 사용법은 간단하게 아래 세가지를 이용해서 활용할 수 있다. ..
친구 검색, 요청, 수락, 내역 / 유저 검색 유저 정보는 { "id": 1 , "nickname": "고양이", "tag" : 1234 } 이런식으로 저장된다. 그리고 친구 검색을 하면 친구 내역에서 제외된 모든 유저중에 검색된다. 거기서 친구 요청을 누르면 { "id": "e579a3db-ab5c-4658-8844-4a16f48cdfcc", "myId": 내아이디, "friendId": 친구아이디, "myNickName": "내 닉네임", "friendNickName": "친구 닉네임" }, 이런식으로 저장이 된다. 이런식으로 한방향 으로만 저장이 돼있다면 filter와 for, if문을 사용해 보낸쪽은 친구 요청 상태로 받는쪽은 친구 요청이 온 상태로 표시되게 하였다. //친구 요청 온 내역 전체 ..
검색 기능이다. friendSearchInput으로 입력값을 받아온다음 필터를 거쳐서 검색한다. 원래 첫번째 것 처럼 하면 검색할때 안 나오는게 있는 문제가 있었는데 두번째 처럼 for문 밖으로 return 값을 빼니 잘 작동됐다. includes기능은 소문자 대문자를 구분하기 때문에 toLowerCase로 양측다 맞추고 비교해 줬다. const friendSearch = data?.data.filter((i: FriendSearchProps) => { if (frendSearchInput === "") { return; } else { for (let t = 0; t < alreadyFriend.length; t++) { if (alreadyFriend[t].id === i.id) { return; }..
스팀게임 음성채팅 프로그램 개발중 메뉴가 옆에서 나오는 방식을 사용하려고 하는데 페이지를 밀면서 나오려고 한다. fixed를 사용해서 하려고 하는데 페이지위에 떠있는 거라서 열면 페이지 위에있고 페이지가 밀리지 않는 문제가 있었다. 그래서 recoil로 전역에 메뉴 상태를 전달한후 메뉴가 열리면 styled-components에 상태를 Props로 줘 margin-left가 조정되는 방식을 사용했다. 열리는 페이지는 총 네개인데 각각 열리게 하기위해 처음엔 if문으로 5개의 조건을 걸었었는데 코드가 너무 길어져서 인자로 string을 recoil에 주는 방식으로 리팩토링 했다. function Layout() { //레이아웃 종류 const [layoutMenu, setLayoutMenu] = useRe..
타입스크립트 자바스크립트는 변수를 선언한다음 변수에 string을 넣어도 되고 number,배열등등 모두 들어 갈 수 있다. 타입스크립트는 타입을 지정해 줄 수 있고 자동완성도 다른 언어를 사용할때 처럼 작동해 개발을 편리하게 만들어 준다. 타입 추론이 되어서 오타나 오류가 났을때 빨간 밑줄로 잘못된 부분을 바로 알 수 있다. 사용방법 npm install -g typescript를 사용해 글로벌로 설치해주고 (글로벌이 아니여도 된다.) 만든 프로젝트 안에서 tsc —init을 입력하면 tsconfig.json이 생성된다. // tsconfig.json 파일 module: 컴파일된 코드가 어떤 모듈을 사용할지 정의. target: 컴파일된 코드가 어떤 환경에서 실행될 지 정의. strict: 모든 타입 ..