구현 목록

⬇️ 트윗작성페이지(태그 입력란, 태그값 링크걸어서 반환)

스크린샷 2022-05-28 오후 11.23.00.png

⬇️ #안 링크를 클릭했을때, #안 태그값을 가진 트윗값 전부 보여줌

스크린샷 2022-05-28 오후 11.25.40.png

게시물 태그 작성 - 정규표현식으로 문자 검색


1️⃣ 태그 작성하는 input 박스 만들기, tweet 데이터베이스에 트윗저장하는 column만들기

2️⃣ 태그 input value값을 onChange로 가져와서 정규표현식으로 #태그값 형식으로 잘라서 배열으로 saveTag으로 저장. saveTweets API 사용할때 tag값으로 보내줘서 저장됨.

//tweets 데이터베이스에 태그 저장하는 부분 따로 만들어서 저장.
//(나중에 태그를 클릭했을때 동일한 태그를 적은 트윗을 선택하기위해서)
const saveTweets = async () => {
    axios
      .post("<http://localhost:1234/saveTweets>", {
        content: tweet,
        tag: saveTag,
      })
      .then((res) => {
        console.log(res.data);
        if (res.data === "login again") {
          alert("로그인이 만료되었습니다");
        }
      });
  };

const [saveTag, setSaveTag] = useState([]);

// '#태그'형식의 단어만 찾아서 저장 
const onTag = (event: any) => {
    const { value } = event.target;
    setSaveTag(value.match(/(#[^\\s#]+)/g));
  };

// 태그 작성하는 input박스 만들기
<input
          className="text"
          placeholder="태그 입력란"
          onClick={onLogin}
          onChange={onTag}
        />

✅ 정규표현식

정규표현식은 문자열을 처리하는 방법 중 하나로, 특정한 패턴을 가지고 있음!