👏 해시태그 구현

Next.js와 Node.js의 Sequelize를 이용해 해시태그 기능을 구현하는 포스트입니다.

들어가기 전에 해시태그와 관계를 맺을 대상에 대해서 먼저 생각해보겠습니다.
쉽게 생각해보면 해시태그를 생성할 때 해당 게시글에 해시태그 컬럼을 만들고 모두 넣어버리면 됩니다.
이렇게 만들면 소규모로 운영된다면 크게 문제는 없다고 생각합니다. 하지만 규모가 커질수록 DB에 중복된 데이터가 들어가게 됩니다.
예를 들어 #오늘이라는 해시태그를 A, B, C라는 게시글에 모두 사용한다고 가정하면 A, B, C 모든 테이블의 해시태그 컬럼에 #오늘이라는 데이터를 넣는 중복이 발생합니다.
이런 중복을 제거하기 위해서 해시태그와 게시글을 N:M으로 구현했습니다.

📃 모델 정의

N:M 관계는 필연적으로 중간 테이블이 생기게 됩니다.
1:1인 경우는 원하는 모델에 foreign key를 넣으면 되고, 1:N인 경우는 N 쪽(포함되는 쪽)에 foreign key를 넣으면 됩니다.
N:M일 경우에 중간 테이블 없이 양쪽에 다 넣는다고 가정해보면 한 번의 관계일 때는 괜찮지만 여러 개가 연결될 경우에는 하나의 컬럼으로 처리할 수 없게 됩니다.
따라서 중간 테이블을 이용해서 처리합니다. 중간 테이블에는 양쪽의 foreign key가 기본적으로 들어갑니다. 그 양쪽의 foreign key의 명칭을 아래의 모델 정의의 foreignKey에서 정합니다. 또한 through는 실제 생성될 중간 테이블의 명칭을 정하는 것이고, as는 코드상에서 사용할 중간 테이블의 이름을 정하는 것(+ 생성될 헬퍼 메서드의 이름 지정)입니다.

• Sequelize에서 관계를 지정하면 관계에 맞게 자동으로 몇 가지의 헬퍼 메서드를 제공해줍니다.

1. 게시글 모델 정의

• models/post.js

const Post = (sequelize, DataTypes) => {
  const Post = sequelize.define(
    "Post",
    {
      _id: {
        type: DataTypes.INTEGER.UNSIGNED,
        allowNull: false,
        autoIncrement: true,
        primaryKey: true,
        comment: "게시글의 아이디 ( 게시글을 식별할 값 )",
      },
      content: {
        type: DataTypes.STRING(2200),
        alllowNull: true,
        comment: "게시글의 내용 ( 최대 2200자, , 특수문자 가능 )",
      },
    },
    {
      sequelize,
      timestamps: true,
      paranoid: false,
      underscored: false,
      modelName: "Post",
      tableName: "posts",
      charset: "utf8mb4",
      collate: "utf8mb4_general_ci",
    },
  );

  Post.associate = db => {
    // 해시태그 ( N : M ) ( 게시글과 해시태그 )
    db.Post.belongsToMany(db.Hashtag, {
      through: "PostHashtags",
      as: "postHashtager",
      foreignKey: "PostId",
      onDelete: "cascade",
    });
    
    // ... 나머지 다른 관계들은 생략
  };

  return Post;
};

export default Post;

2. 해시태그 모델 정의

const Hashtag = (sequelize, DataTypes) => {
  const Hashtag = sequelize.define(
    "Hashtag",
    {
      _id: {
        type: DataTypes.INTEGER.UNSIGNED,
        allowNull: false,
        autoIncrement: true,
        primaryKey: true,
        comment: "해시태그의 아이디 ( 해시태그을 식별할 값 )",
      },
      content: {
        type: DataTypes.STRING(40),
        alllowNull: true,
        comment: "해시태그의 내용 ( 최대 40자, 특수문자 불가능 )",
      },
    },
    {
      sequelize,
      timestamps: true,
      paranoid: false,
      underscored: false,
      modelName: "Hashtag",
      tableName: "hashtags",
      charset: "utf8",
      collate: "utf8_general_ci",
    },
  );

  Hashtag.associate = db => {
    // 해시태그 ( N : M ) ( 게시글과 해시태그 )
    db.Hashtag.belongsToMany(db.Post, {
      through: "PostHashtags",
      as: "PostHashtaged",
      foreignKey: "HashtagId",
      onDelete: "cascade",
    });
  };

  return Hashtag;
};

export default Hashtag;

🧐 해시태그 등록/찾기

1. 정규 표현식으로 해시태그 찾기

사용자는 일반 텍스트와 해시태그를 섞어서 게시글 생성 요청을 보내기 때문에 텍스트 중에서 해시태그를 추출할 수 있어야 합니다. 그리고 항상 정상적으로 해시태그를 생성하지 않기 때문에 특이하게 생긴 해시태그조차도 제대로 추출할 수 있게 정규 표현식을 만들어야 합니다.
예를 들어 ###해시태그, #해#해시와 같은 경우 #해시태그, #해, #해시와 같이 추출할 수 있어야 합니다.

위의 조건을 만족하는 정규 표현식은 /#[a-z0-9_가-힣]+/gm입니다. 여기에 String.prototype.match(정규표현식)을 이용해서 원하는 해시태그만 추출합니다.

2. 게시글/해시태그 등록

• /routes/post.js

// 이미지, 댓글, 유저 처럼 현 포스트의 주제와 벗어나는 내용은 모두 생략하겠습니다.

import db from "../models/index.js";

const { Post, Hashtag } = db;

// 2021/12/22 - 게시글 생성하기 - by 1-blue
router.post("/", async (req, res, next) => {
  const { content } = req.body;

  try {
    // 게시글 생성
    const createdPost = await Post.create({ content, UserId: req.user._id });

    // 해시태그 추출
    const hashtags = content.match(/#[a-z0-9_가-힣]+/gm);
    if (hashtags) {
      // 해시태그들 생성
      const hashtagPromiseList = hashtags.map(hashtag => {
        // 맨 앞 "#"제거
        const content = hashtag.substr(1, hashtag.length);
        // 이미 존재하면 가져오고 없으면 생성
        return Hashtag.findOrCreate({ where: { content } });
      });
      const results = await Promise.all(hashtagPromiseList);

      // 게시글과 해시태그 중간 테이블의 컬럼 생성 ( 게시글과 해시태그 연결 )
      const hashtagPostPromiseList = results.map(hashtag => hashtag[0].addPostHashtaged(createdPost._id));
      await Promise.all(hashtagPostPromiseList);
    }

    return res
      .status(201)
      .json({ ok: true, message: "게시글을 성공적으로 생성했습니다." });
  } catch (error) {
    console.error("POST /post error >> ", error);
    return next(error);
  }
});

3. 특정 해시태그에 해당하는 게시글들 찾기

• /routes/posts.js

// 페이지 네이션, 유저, 댓글 처럼 현 주제에 벗어나는 내용은 제외했습니다.

router.get("/hashtag/:hashtagText", async (req, res, next) => {
  const hashtagText = decodeURI(req.params.hashtagText);

  try {
    // 특정 해시태그 찾기
    const hashtag = await Hashtag.findOne({
      where: { content: hashtagText },
    });

    if (!hashtag)
      return res.status(200).json({
        ok: true,
        message: "해시태그가 존재하지 않습니다.",
        limit,
        posts: [],
        postCount: 0,
        hashtag: hashtagText,
      });
    
    // 아래 두 개의 메서드 이름이 "PostHashtaged"인 이유는 이전에 "as"를 이용해서 정의해준 이름이기 때문

    // 특정 해시태그와 관계있는 게시글들 가져오기
    const postsOfHashtag = await hashtag.getPostHashtaged({
      attributes: ["_id", "createdAt", "content", "UserId"],
    });

    // 특정 해시태그와 관계있는 모든 게시글 개수 구하기 ( 원래는 10개씩 분할으로 가져오기 때문에 총 개수를 따로 구하는 것 )
    const postsOfHashtagCount = await hashtag.countPostHashtaged();

    res.status(200).json({
      ok: true,
      posts: postsOfHashtag,
      postCount: postsOfHashtagCount,
      hashtag: hashtagText,
    });
  } catch (error) {
    console.error("GET /post/hashtag/:hashtag error >> ", error);
    return next(error);
  }
});

✨ 해시태그 렌더링

1. 해시태그 링크 처리

// 렌더링할 게시글의 내용에 해시태그가 존재한다면 해시태그에 링크를 달아서 클릭 시 해당 해시태그를 포함하는 게시글을 찾는 페이지로 이동하게 만듦
const preprocessHashtag = useCallback((contents: string) => {
  return contents.split(/(#[^\s#]+)/gm).map((text) => {
    if (text[0] !== "#") return text;

    return (
      <Link
        key={text}
        href={`/hashtag/${encodeURI(text.substr(1, text.length))}`}
      >
        <a className="post-card-content-hashtag">{text}</a>
      </Link>
    );
  });
}, []);