전체 글

#해시 태그 기능은 게시물을 구현할 때 거의 빠지지 않고 사용되는 기능이라고 할 수 있다. 태그를 구현하는 방법에는 여러가지가 있지만, 위의 GIF와 같이 동적으로 태그를 생성하는 디자인이 가장 많이 사용된다고 할 수 있다. 티스토리에서도, Velog에서도 이와 같은 방식으로 해시 태그 기능을 제공하고 있다. 내가 진행하고 있는 프로젝트에서도 아래의 요구 사항을 충족하는 태그 기능을 구현해야했다. #을 입력하고 스페이스바를 누르면 태그를 생성 (최대 5개까지만 입력 가능) 생성된 태그를 눌렀을 때 & 입력이 없는 상태에서 Backspace를 눌렀을 때 태그 삭제 드래그 앤 드롭으로 순서 변경 가능하도록 1. #을 입력하고 스페이스바를 누르면 태그 생성 태그의 목록들을 보여주기 위한 template 코드는..

vue에서 제공하는 v-model은 input, textarea, select 등의 구성요소에서 양방향 바인딩을 구현하는 데 사용될 수 있다. v-model 속성은 v-bind와 v-on의 기능의 조합으로 동작한다. v-bind : 뷰 인스턴스의 데이터 속성을 해당 HTML 요소에 연결할 때 사용 v-on : 속성은 해당 HTML 요소의 이벤트를 뷰 인스턴스의 로직과 연결할 때 사용 사용자 이벤트에 의해 실행된 뷰 메서드(methods) 함수의 첫 번째 인자에는 해당 이벤트(event)가 들어온다 HTML 입력 요소의 종류에 따라 v-model 속성이 각각 다음과 같이 구성된다 input 태그에는 value / input checkbox 태그에는 checked / change select 태그에는 val..

웹 UI, UX개발을 하다보면 scroll event 및 특정 Element의 위치는 거의 무조건 다루게 된다. 때문에 JavaScript에서 Scroll event를 이해하고, Element의 위치에 따라 특정 로직을 매끄럽게 수행하도록 하는 것은 웹 개발에서 중요한 부분 중 하나이다. 내가 구현하고자 하는 부분은 DOM을 활용하여 아래 GIF와 같이 스크롤 시에 해당 id가 나타나게 되면 목차에 하이라이팅을 하는 것이다. 우선 해당 기능을 구현하기 위해 알아야할 것이 어떤 정보들이 있을까? 수직 스크롤바 위치 목차에 해당하는 elements 요소들의 Y축 위치 값 즉, 수직 스크롤바 위치 = elements 요소들의 Y축 위치 값 — 80 다음과 같은 조건으로 해당 기능을 구현하도록 로직을 구성했다...