백그라운드 클릭시 꺼지는 모달 우선 컨텐츠를 누르면 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 ? "취..
https://github.com/sjk990515/modalTodo (깃허브 파일 링크) GitHub - sjk990515/modalTodo Contribute to sjk990515/modalTodo development by creating an account on GitHub. github.com 반응형 투두리스트 실행방법 1. 다운로드하신 후 파일로 들어가 터미널을 연 후 npm i 로 필요한 파일을 설치해 줍니다. (사용 기술 : react, typescript, react-query, axios, json-server, styled-components, react-router-dom, styled-reset, uuid) 2. 파일 안에 터미널을 추가로 한 개 더 연 후 하나는 npm star..
SteamPlus 프로젝트 링크 (https://steam-plus-theta.vercel.app/) Steam Plus steam-plus-theta.vercel.app 🏡 아키텍쳐 🎲기술적 의사 결정 사용기술 기술 설명 recoil 리코일은 매우 간단한 코드로 상태를 관리할 수 있습니다. 리덕스와 비교해 상태를 업데이트하기 위해 액션 타입, 액션 생성자, 리듀서를 작성할 필요가 없으며, 상태 업데이트 로직을 작성할 때도 상태 객체 자체를 직접 수정할 수 있었습니다. socket.io Socket.io는 다양한 이벤트를 지원하여 클라이언트에서 서버로 데이터를 전송하고 서버에서 클라이언트로 데이터를 전송할 수 있습니다. 이러한 특징으로 인해, Socket.io는 실시간 채팅기능을 구현하는 데 매우 유용합..
친구 채팅 알림 (트러블 슈팅) 지난번에 만든 친구 채팅의 알림이 각각 왔으면 좋겠다는 생각이 들었다. 그래서 처음에는 온 채팅이 state에 배열의 형식으로 들어가는데 그것의 친구 id를 filter해서 해당 친구에게 알림이 얼마나 왔는지 length를 구해주었다. 그런데 이렇게 하니까 실시간으로 알림이 오기는 하지만 친구 채팅방에 들어가도 알림이 사라지지않고, 들어갈때 알림이 사라지게 하더라도 친구와 채팅을 하는 중임에도 알림이 오는 일이 발생하였다. 그래서 다시 로직을 짜게 됐다. 생각한 방법은 친구에게 온 채팅을 추가해주는 state이외에 다른 알림용 state를 또 만들어 그곳에 추가해 주는 것이였다. 추가해 준 후 똑같이 상대 id를 filter해서 length를 보여주었고 달라진 점은 해당 ..
socket.io 친구 개인 채팅2 어제 것을 이어서 하면 일단 서로의 소켓 방은 연결이 됐다. 이제 서로 채팅을 보내줘야 하는데 일단 react로 채팅방은 미리 만들어줬다. 그리고 input에 값을 넣어 보낼 때 일어날 함수를 만들어줬다. 보낼 정보를 만들어 준 후 socket에 보내줬다. 보낼 정보엔 방 이름도 넣어서 보내줬다. const chatInputOnSubmit = (e: any) => { e.preventDefault(); //빈칸 예외 처리 if (textInput === "") { return; } //채팅으로 보낼 시간 const now = new Date(); const hours = now.getHours(); const minutes = now.getMinutes(); const..
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창이 나오게 만들었고 취소를..
