본문 바로가기

axios3

북마크 기능 구현하기 📁 북마크 기능 미리보기 북마크 기능 구현 과정을 간단하게 정리해보자면 다음과 같다. 프론트 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.
token 검증 실패시 에러처리하기(토큰검증 미들웨어) 문제 발생 기존의 코드에서는 API가 실행되기 전에 토큰이 유효한지 검사하고, 그 결과를 받아서 결과에 따라 처리되었다. => 하지만 이렇게 하니까 중복되는 코드 발생 기존의 코드 router.post( "/", verifyAccessToken, verifyRefreshToken, async (req: any, res: Response, next: NextFunction) => { //아래의 부분 반복 if (req.token === "login again") { res.json("login again"); } else if (req.token === "refresh ok") { await Follow.create({ user_id: req.body.user_id, follower_id: currentU.. 2024. 1. 21.