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..
댓글 CRUD 커뮤니티 상세페이지의 댓글을 구현해 봤다. 조건은 상세페이지마다 각각의 다른 댓글이 있어야 하고, 쓰는 아이디의 이미지,닉네임,쓴날짜,수정,삭제이다. useQuery와 useMutation을 이용해 만들었다.다시 해봐도 CRUD를 모두 사용해보기에는 댓글만한게 없는 것 같다. 댓글input옆에 등록버튼을 배치해 누르면 등록되게 해놨고 밑에 댓글창으로 출력되게 하였다. 최신댓글이 맨 위로 올라오게 하기위해 .reverse()를 사용했는데 렌더링될때마다 계속 반대로 바뀌는 오류가있어서 .slice().reverse()의 형태로 바꿔주었다. 빈칸일땐 작성이 안되게 예외 처리 해놨고, 수정 삭제는 본인이 쓴 댓글에만 표시되게 해놨다. 수정을 누르면 해당 댓글에 input창이 나오게 만들었고 취소를..
reactquery 동적 사용 원래 리액트 쿼리는 이런형태로 사용을 했었다. const{ data } = useQuery("name", getdata); 그렇다보니까 usemutation의 post나 delete같은 행동으로 쿼리초기화를 해주지 않는 이상 최신정보를 잘 못가져오는 단점이 있었다. 그래서 쿼리의 동적 사용을 위해 아래와 같이 const{ data } = useQuery(["name", state], getdata); 매번 바뀌는 무언가를 넣어주면 그것이 바뀔때마다 쿼리 이름이 바뀌기 때문에 그때의 최신 정보를 가져온다고 한다. 전처럼 string으로 쓰면 쿼리이름이 매번 같기때문에 이미 전에 있던 정보를 가져 오는 것 이다.
친구 삭제 수정 저번에 했던 친구 삭제 방식 (친구 요청 하면 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..
친구 검색, 요청, 수락, 내역 / 유저 검색 유저 정보는 { "id": 1 , "nickname": "고양이", "tag" : 1234 } 이런식으로 저장된다. 그리고 친구 검색을 하면 친구 내역에서 제외된 모든 유저중에 검색된다. 거기서 친구 요청을 누르면 { "id": "e579a3db-ab5c-4658-8844-4a16f48cdfcc", "myId": 내아이디, "friendId": 친구아이디, "myNickName": "내 닉네임", "friendNickName": "친구 닉네임" }, 이런식으로 저장이 된다. 이런식으로 한방향 으로만 저장이 돼있다면 filter와 for, if문을 사용해 보낸쪽은 친구 요청 상태로 받는쪽은 친구 요청이 온 상태로 표시되게 하였다. //친구 요청 온 내역 전체 ..
