sns 프로젝트27 React 무한스크롤 구현하기(Intersection Observer) intersectionObserver API의 속성을 이용하여 viewport 상태를 체크하여 무한스크롤 구현 타켓생성 (스크롤의 하단부에 타겟을 지정하고, ref를 달아준다. 이 ref를 통해서 교차시점을 확인가능함) 먼저 스크롤의 끝 부분을 감지할 타겟을 만들어야한다. 이 타겟은 스크롤이 끝에 도달했는지 확인하는 데 사용된다. 타겟은 React에서는 useRef 훅을 이용해 만들 수 있다. 아래 코드는 타겟을 만들고 페이지 하단에 위치시키는 예제이다. const target = useRef(null); {isLoaded && Loading...} observer 관찰자 생성 (컴포넌트가 렌더링 완료됨에 따라 observer 가 생성되어야 하므로 useEffect를 활용해야 한다) 하단에 도달했는지 감.. 2024. 1. 22. 페이지네이션 기능 구현하기 📁 페이지네이션 기능 미리보기 페이지네이션 기능 구현 과정을 간단하게 정리해보자면 다음과 같다. 프론트 페이지네이션 bar 만들기 ➡️ Math.ceil 사용 (총게시물수/postPerPage)만큼 for문 돌려서 pageNumber 배열에 추가 ➡️ pageNumber map 돌려서 bar 생성 ➡️ 원하는 숫자를 클릭하면 현재 페이지를 나타내는 currentPage 상태가 업데이트(dispatch)되고 새로운 데이터를 가져옴(invalidateQueries) 백엔드 백엔드 getTweet API 수정(limit, offset 설정) ➡️ limit - 한번에 몇개씩 가져올건지 설정, offset : 몇번째부터 가져올건지 설정(10개로 설정) ➡️ 현재 페이지 숫자 pageNum을 가져와서 offset.. 2024. 1. 22. 북마크 기능 구현하기 📁 북마크 기능 미리보기 북마크 기능 구현 과정을 간단하게 정리해보자면 다음과 같다. 프론트 bookmark 버튼 및 bookmark 페이지 형성 백엔드 bookmark 테이블 생성(tweets 테이블과 관계형성) getTweet API에 isBookmark 변수 생성후 트윗 북마크 유무 알려주기. =>isBookmark변수는 false가 기본값. isBookmark가 true인 트위터 게시물은 bookmark 페이지에서 bookmarkAPI 호출시 해당 데이터 넘겨주기 실제 구현한 코드 sequelize에 bookmark 테이블 생성하고 tweet_id을 기준으로 tweet데이터가 담겨져 있는 tweets 테이블과 관계형성하였다. ➡️ 관계를 형성한 이유는 나중에 북마크 페이지에서 데이터를 가지고 올때.. 2024. 1. 22. 댓글 알림 리스트 기능 구현하기 댓글 알람리스트 React-modal react-modal을 사용해서 상대적으로 쉽게 모달창을 구현함. ⇒ 댓글알림창 버튼을 클릭하면 getComments API이 실행되어서 현재 로그인한 유저의 최신 댓글 데이터를 가져옴 ⇒ 가져온 데이터를 commentList state로 관리. set함수로 데이터 업데이트 시킴. commentList.tsx export default function CommentsList() { const [commentList, setCommentList] = useState([]); const [modalIsOpen, setModalIsOpen] = useState(false); useEffect(() => { axios.get("http://localhost:1234/getC.. 2024. 1. 22. 게시물 좋아요 기능 구현하기 📁 좋아요 기능 미리보기 좋아요 기능 구현 과정을 간단하게 정리해보자면 다음과 같다. 프론트 하트 버튼 생성 (트윗 데이터 중 is_like 값에 따라서 다른 이미지 보여주기 ⇒ true일때 빨간 하트 false일때 빈하트) addHeart, delete 기능 구현 → addHeart : saveLike API 통신. 트윗 아이디를 넘겨줘서 해당 트윗 아이디를 포함한 새로운 like 데이터 생성. → deleteHeart : saveLike API 통신. 트윗 아이디,유저 아이디를 넘겨줘서 해당 트윗 like 데이터 중 로그인한 유저가 생성한 like 데이터 삭제. 백엔드 백엔드 saveLike API 생성 like table 트윗 관련 like 데이터를 생성하거나 삭제하는 saveLike API 생성 .. 2024. 1. 22. 트위터 리트윗 기능 구현하기 📁 리트윗 기능 미리보기 리트윗 기능 구현 과정을 간단하게 정리해보자면 다음과 같다. 프론트 리트윗 버튼 생성 retweet, quote tweet 기능 함수 생성 retweet : saveTweet API로 리트윗 대상 트윗 아이디 추가해서 보내기.(리트윗 게시물 아이디로 나중에 대상 리트윗 데이터 가져옴) quote tweet : 클릭시 모달창 오픈, 클릭된 트윗 게시물 아이디 인덱스를 기준으로 addTweet 컴포넌트로 데이터 넘겨줌. 리트윗 창 openRetweet 기능 생성(클릭시 state값 변경) 백엔드 트윗 데이터를 저장하는 saveTweet API 에서 리트윗 게시물 아이디를 저장할 수 있는 reply_tweet_id 추가함 실제 구현한 코드 openRetweet 기능 ➡️ 백엔드에서 데.. 2024. 1. 22. 트윗 게시물 업로드 기능 다음은 제가 구현한 트위터 게시물 업로드 박스입니다. 프론트 밀 백엔드 코드 구현 과정과 함께 구현하면서 정리해두었던 문서입니다. 📁 트윗 게시물 업로드 기능(텍스트, 파일, 해시태그 업로드) 프론트 input 박스 글자수 제한 기능 (length 체크) 글자수 제한 기능 (maxLength, length 체크, slice) 트윗리스트 구현하기(array, useState, map) | Notion 글자수 제한하기 cookie-ease-042.notion.site 게시물 해시태그 기능 (정규식 사용해서 태그 분리하기, 태그별 페이지 라우팅 - url, 다이나믹 라우팅) 게시물 태그 만들기(정규표현식, 페이지 라우팅, 키워드 데이터베이스 select) | Notion 구현 목록 cookie-ease-042.. 2024. 1. 22. React-query 데이터 업데이트 문제 발생 Explore 페이지에서 top Latest People로 이동할때 데이터가 제대로 업데이트가 안된채 prop로 넘겨지는 문제가 발생. 설명 데이터가 넘겨지는 과정 Explore 페이지에서 react-query로 데이터를 받음 ➡️ 성공하면 응답값을 set함수로 exploreData라는 state에 담기 ➡️ tweetBox컴토넌트에 prop으로 exploreData 넘겨줌 여기서 다른 종류의 데이터를 받아와야하는 페이지로 이동하면 과거의 데이터만 보내지고 새로운 데이터로 업데이트가 안됨. Chat gpt에 물어봤더니 두가지 방법을 제시해줌. 1. react-query에서 자동적으로 업데이트 시켜주는 data를 prop으로 바로 보내주거나 2. useCallback으로 exploreData 상.. 2024. 1. 22. 상태관리 도입해서 전역 변수 관리하기(Redux, React Query) 상태 관리를 도입했다. 프로젝트가 계속 진행되면서 전역적으로 사용해야하는 변수들이 생겨났기 때문이다. 예를 들어 로그인 유무를 알 수 있는 isLogin과 같은 변수는 전역적으로 관리하여 로그인 상태일때는 home이나 다른 페이지를 보여주고 로그인을 해야하는 상태에는 Auth 화면을 보여준다. 상태관리는 redux, react- query 2개를 사용했다. 처음에는 redux를 사용했다가 다양한 기능과 백엔드 시스템과의 연동을 쉽게 구현할 수 있는 react-query를 도입하여 사용해보았다. 이번 글에서는 리덕스 기본 흐름과 도입 과정, 실제 코드에 대해서 작성해볼려고 한다. 리덕스 도입 리덕스 기본 흐름 특정한 액션이 유발(dispatch)되면 / 이에 대응하는 reducer가 변화한 상태 state.. 2024. 1. 21. 이전 1 2 3 다음
