트윗 게시물 업로드 기능

다음은 제가 구현한 트위터 게시물 업로드 박스입니다. 프론트 밀 백엔드 코드 구현 과정과 함께 구현하면서 정리해두었던 문서입니다.

 

📁 트윗 게시물 업로드 기능(텍스트, 파일, 해시태그 업로드)

 

 

프론트

 

• input 박스 글자수 제한 기능 (length 체크)

글자수 제한 기능 (maxLength, length 체크, slice) 트윗리스트 구현하기(array, useState, map) | Notion

 

• 게시물 해시태그 기능 (정규식 사용해서 태그 분리하기, 태그별 페이지 라우팅 - url, 다이나믹 라우팅)

 

게시물 태그 만들기(정규표현식, 페이지 라우팅, 키워드 데이터베이스 select) | Notion

 

React 다이나믹 라우팅 | Notion

 

 

• 이미지 업로드 기능 (formData사용)

프로필 사진 업로드기능 구현하기(FormData, multipart/form-data, Multer) | Notion

 

 

백엔드 

 

트윗 데이터 관련 백엔드 API 구현

• saveTweets API

router.post(
  "/",
  verifyAccessToken,
  verifyRefreshToken,
  async (req: any, res: Response, next: NextFunction) => {
    await Users.findOne({
      attributes: ["user_id"],
      where: { email: req.email },
    }).then(async (result: any) => {
      await Tweets.create({
        user_id: result.user_id,
        email: req.email,
        content: req.body.content,
        tag: req.body.tag,
        write_date: sequelize.development.literal(`now()`),
        reply_tweet_id: req.body.reply_tweet_id,
      }).then(async (result) => {
        res.status(201).json(result);
        // res.status(201).json(result);

        await Likes.create({
          tweet_id: result.tweet_id,
        });
        await Bookmark.create({
          tweet_id: result.tweet_id,
          user_id: null,
        });
      });
    });
  }
);

 

• getTweets API

router.get(
  "/",
  verifyRefreshToken,
  async (req: any, res: Response, next: NextFunction) => {
    const allTweets: Tweets[] = await Tweets.findAll({
      include: [Comments, Likes, Bookmark, Users],
    });
    res.status(200).json({ data: allTweets, email: req.email });
  }
);

 

현재는 페이지네이션 기능으로 데이터를 나눠서 가져옴.

 

• upload API(아래 url)

프로필 사진 업로드기능 구현하기(FormData, multipart/form-data, Multer) | Notion