ReactJS/프로젝트5 react-query , redux- thunk 의 혼합 프로젝트를 진행하다 보니 자연스럽게 redux- thunk를 사용하다가 캐싱이 편하고 통신 상태관리를 편하게 할수있다는 점에서 모든 통신을 react-query로 사용하고있다 react-query는 데이터의 조회에 강점을 가지지만 각 컴포넌트에서 사용되어 뭔가 하나의 파일에서 일관된 관리가 힘들다고 느껴졌다. 또한 조회를 위한 통신을 제외하고는 통신의 상태 처리가 미흡하다고 느껴졌다. 프로젝트의 컴포넌트가 많아질수록 일일이 찾기가 번거로워서 혼합하여 진행해보려한다. react-query : 실시간으로 서버의 변경이 조회되어야하는부분 -> 댓글 등록·삭제, 마이페이지 회원정보 변경, 좋아요 , 팔로우 , 댓글조회 , 게시글 조회, 프로필조회, 인기 유저 조회, 게시글 삭제 redux- thunk: 토큰과 .. 2023. 8. 19. 버킷리스트(완성) 버킷의 글자를 클릭해 취소선 삽입 후 다른 버킷을 삭제 시 window.location.reload()새로고침을 통해 변경된 DB 값에 맞게 출력되면서 변경된 css 상태를 저장하지 못해 취소선이 삭제되는 에러가 있었다 해결방법 1. 쿠키나 다른 방식으로 상태를 저장할 수 있다고한다. -> 추후에 ...해보자 2. 삭제시 새로고침해서 다시 리스트를 그리지말고 기존 리스트에서 해당 li 태그를 삭제해버리자 -> 이걸로 진행 버튼을 생성하는 곳에서 this 객체로 받아왔었다 다른점은 삭제를 위한 post 요청을 보낸 후 this로 받아온 객체는 아래와 같은 형태이다 ` ${bucket} ` 버튼의 객체를 가져왓으므로 그 부모요소를 .remove() 로 삭제했다 //버튼을 눌렀을 때 function del_d.. 2023. 6. 5. 버킷리스트 (미완성 새로고침시 상태복귀) 이노베이션 캠프의 웹개발 종합반 수업에서 작성한 버킷리스트 프로젝트에 추가기능을 구현해 보았습니다. 기존의 버킷리스트는 버킷을 입력하고 버튼 누르면 POST요청으로 mongoDB에 값이 저장 이후 window.location.reload()를 통해 새로고친 후 다시 GET 요청을 통해 데이터베이스의 값을 모두 출력하는 기능뿐이였다. 별거없지만 제작한 기능은 두가지 1. 버튼 클릭 시 데이터 삭제 2. 글자 클릭시 글자에 취소선 긋기, 취소선이 있다면 취소선 삭제 아래의 코드에서 형태를 맞출 때 버튼삽입 및 버튼과 h2태그에 onclick 동작을 붙임 //DB 값을 형태에 맞게 붙여줌 function show_bucket() { fetch('/bucket').then(res => res.json()).th.. 2023. 6. 5. Portfolio 링크 사이트 (구성) -디자인 2023.06.02 - [javascript/프로젝트] - 1. Portfolio 링크 사이트 (구성) 1. Portfolio 링크 사이트 (구성) 포트폴리오 사이트를 제작해보려고 합니다. 중점사항 1. 집중시킬 수 있는 요소가 있어야 한다 - 대부분의 어플리케이션에서 이러한 요소가 존재하기에 이런 것을 만들어보았다는 어필을 위해 - johc.tistory.com 현 상황 구성에 따라 HTML 과 CSS를 사용하여 전체적인 틀제작을 진행하였습니다. 맨 아래 보이는 슬라이드는 기능은 없고 이미지만 존재합니다. 추후 개발예정입니다. 현재는 페이지 이동에 애니메이션이 존재하지않지만 스크롤에 반응하도록 제작 할 예정입니다 그에 따른 안의 요소들의 애니메이션 역시 제작 할 예정입니다. 좀 끌리는 API가 있다면 .. 2023. 6. 2. 이전 1 2 다음