백그라운드 클릭시 꺼지는 모달 우선 컨텐츠를 누르면 state를 이용해 모달이 켜지게 해줬다 //모달 온 const ContentsOnClick = () => { setModal(!modal); document.body.style.overflow = "hidden"; }; {props.item.title} {props.item.date} 그리고 컨텐츠 안의 내용을 모달이 켜질때 함께 보여지게 삼항연산자를 이용해 만들었다. {modal ? ( {/* 제목*/} {edit ? ( ) : ( {props.item.title} )} {/* 완료 버튼*/} Done {/*내용*/} {edit ? ( ) : ( {props.item.text} )} {/*날짜*/} {props.item.date} {edit ? "취..
SteamPlus 프로젝트 링크 (https://steam-plus-theta.vercel.app/) Steam Plus steam-plus-theta.vercel.app 🏡 아키텍쳐 🎲기술적 의사 결정 사용기술 기술 설명 recoil 리코일은 매우 간단한 코드로 상태를 관리할 수 있습니다. 리덕스와 비교해 상태를 업데이트하기 위해 액션 타입, 액션 생성자, 리듀서를 작성할 필요가 없으며, 상태 업데이트 로직을 작성할 때도 상태 객체 자체를 직접 수정할 수 있었습니다. socket.io Socket.io는 다양한 이벤트를 지원하여 클라이언트에서 서버로 데이터를 전송하고 서버에서 클라이언트로 데이터를 전송할 수 있습니다. 이러한 특징으로 인해, Socket.io는 실시간 채팅기능을 구현하는 데 매우 유용합..
유저 검색 로직 트러블 슈팅 유저 검색 로직중 하나이다. 원래 두번째 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..
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: [], }); 아톰에 위와 같이 만들어 준 후 사용법은 간단하게 아래 세가지를 이용해서 활용할 수 있다. ..
스팀게임 음성채팅 프로그램 개발중 메뉴가 옆에서 나오는 방식을 사용하려고 하는데 페이지를 밀면서 나오려고 한다. fixed를 사용해서 하려고 하는데 페이지위에 떠있는 거라서 열면 페이지 위에있고 페이지가 밀리지 않는 문제가 있었다. 그래서 recoil로 전역에 메뉴 상태를 전달한후 메뉴가 열리면 styled-components에 상태를 Props로 줘 margin-left가 조정되는 방식을 사용했다. 열리는 페이지는 총 네개인데 각각 열리게 하기위해 처음엔 if문으로 5개의 조건을 걸었었는데 코드가 너무 길어져서 인자로 string을 recoil에 주는 방식으로 리팩토링 했다. function Layout() { //레이아웃 종류 const [layoutMenu, setLayoutMenu] = useRe..
