본문 바로가기

전체 글54

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.
댓글창 데이터 가져오는 방식 업데이트하기 문제 발생 comment 데이터를 관리하는 state를 구별없이 getComments 하나로 설정하니까 트윗 상자 하단에 위치한 댓글 버튼을 누르면 모든 트윗게시물의 댓글창이 열리는 문제가 발생했다. 실제 코드 수정 전 const openComments = ({ id, number }: any) => { customAxios .post("/getComments", { tweet_id: id, }) .then((response) => { data[number].is_opened = response.data.is_opened; setGetData([...data]); setGetComments(response.data.data); }); }; comment 값들을 관리하는 state를 getComments .. 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.
express.static 정적 파일 가져오기 정적 파일이란? 정적 파일이란, HTML, CSS, JavaScript 파일과 같이 서버에 미리 저장되어 변경되지 않는 파일들을 말한다. 이러한 파일들은 웹페이지를 보여주기 위한 필수 요소에 해당한다. 정적 파일 가져오기 Express에서는 express.static 미들웨어를 사용하여 정적 파일을 쉽게 가져올 수 있다. express.static() -> ()안에 파일을 가져오고 싶은 폴더를 작성하여 필요한 파일에 접근할 수 있다. 예를 들어, public 폴더 안에 있는 파일들을 가져오고 싶다면 다음과 같이 작성하면 된다. const express = require('express'); const app = express(); app.use(express.static('public')); app.l.. 2024. 1. 22.
multipart/form-data란? 먼저 multipart/form-data를 설명하기 전에... multipart/form-data를 이해하기 위해서는 HTTP, multipart에 대한 이해가 필요했다. HTTP 쉽게 말하자면 http란 클라이언트와 서버 사이에 데이터를 주고 받을때 이루어지는 통신이다. HTTP는 아래의 이미지와 같이 4개의 파트로 나눌 수 있다 http통신이 이루어질때 클라이언트에서 서버에게 보내려는 데이터를 Message Body에 담아서 보낼 수 있다. 여기서 Message Body에 들어가는 데이터 타입을 HTTP Header에서 명시할 수 있는데 그게 바로 Content-type이다. ⇒ multipart도 데이터 타입을 명시해주기 위해 사용되는 타입 중 하나이다. multipart/form-data mult.. 2024. 1. 22.

티스토리툴바