태그 입력

🎨 Tagify - 해시 태그(#tag) 입력을 이쁘게 간편히 구현

Tagify js 라이브러리 게시물을 구현할때 빠지지 않는 것이 바로 게시글 # 해시 태그 기능이다. 당장 이 티스토리 게시글에도 태그 기능이 들어 있다. 해시 태그 기능을 만드는 것 자체는 그렇게 어렵지 않다. 적당히 어느 요소에 # 문자를 저장하고 서버에서 문자열 파싱해서 데이터베이스에 저장하면 되기 떄문이다. 다만 UI/UX 적인 요소에서 각 해시 태그를 블럭으로 만들어서 보기 좋게 관리하기에는 쉽지 않은데, 다행히 tagify.js 라는 태그 컴포넌트가 있어 소개해본다. See the Pen Tags input - vanilla by Yair Even Or (@vsync) on CodePen. 위의 샘플 코드처럼 자동으로 해시 태그 영역을 생성해주고, 태그 문자 추가 애니메이션과 더불어 박스를 더..

인파_

2022.06.16