GWONKIMresume

[NUTEE] 게시글 : 해시태그 및 URL

2020.5~2022.2

게시글 기능 구현 - 게시글 해시태그 및 URL

구현 모습

post11

게시글 해시태그

  • 게시글의 내용 중 해시태그가 있다면 링크로 반환하기

구현 코드 - 해시태그

  • ** 간소화로 인해 코드 중 일부 생략된 부분이 있을 수 있습니다.
if (v.match(/(#[^\s]+)/)) {
  return (
    <Link href={`/hashtag/${v.slice(1)}`} prefetch={false} key={v}>
      <a>{v}</a>
    </Link>
  );
}

게시글 URL

  • 게시글의 내용 중 URL이 있다면 링크로 반환하기

구현 코드

  • ** 간소화로 인해 코드 중 일부 생략된 부분이 있을 수 있습니다.
if (u.match(/(http(s)?:\/\/([a-z0-9\w]+\.*)+[a-z0-9]{2,4})/)) {
  return (
    <Link href={u} prefetch={false} key={u}>
      <a target="_blank" rel="noreferrer">
        {u}
      </a>
    </Link>
  );
}

전체 구현 코드

  • content : 게시글의 내용
  • ** 간소화로 인해 코드 중 일부 생략된 부분이 있을 수 있습니다.
content.split(/(#[^\s]+)/g).map(v => {
  if (v.match(/(#[^\s]+)/)) {
    return (
      <Link href={`/hashtag/${v.slice(1)}`} prefetch={false} key={v}>
        <a>{v}</a>
      </Link>
    );
  }
  return v.split(/(\s)/gi).map(u => {
    if (u.match(/(http(s)?:\/\/([a-z0-9\w]+\.*)+[a-z0-9]{2,4})/)) {
      return (
        <Link href={u} prefetch={false} key={u}>
          <a target="_blank" rel="noreferrer">
            {u}
          </a>
        </Link>
      );
    }
    return u;
  });
});