Dalin's Archive

며칠 전, 마우스 클릭과 드래그를 구분해야 했다. 리스트가 있는데, 클릭했을 때는 상세 정보로 이동하고 드래그해서 텍스트를 복사하고 싶은 상황이었다. 기존에는 click event가 있으면 상세 페이지로 이동하게 해서, 드래그를 하고 싶어서 상세 페이지로 이동했다. 마우스 이벤트를 찾아보니 click 이벤트만 있는 게 아니라 다른 것도 있었다. 그것들을 활용하니 클릭과 드래그를 구분할 수 있었다. (아래 링크들은 MDN 사이트) mousedown event : 요소 안에서 포인터가 눌렸을(press) 때 발생 mousemove event : 요소 안에서 포인터가 움직일 때 발생 mouseup event : 요소 안에서 포인터가 release 될 때 발생 click event와 차이점 : 클릭 이벤트는 f..

상황 🤦‍♀️ 페이지에서 특정 Input 에 focus 를 해주고 싶다. (회원가입 폼에서 완료 버튼 클릭했는데, 필수로 입력해야 하는 이름을 입력하지 않아서 이름 인풋에 포커스해주고 싶을 때 등등) 그런데 이 페이지에는 여러 InputGroup이 있고, 그 안에 Input들이 여러 개 있다. 몇번 InputGroup의 몇번 Input인지는 아는데, 어떻게 그 input에 focus를 해주지?? 사실 회사에서 비슷한 작업을 하고 있는데 이 부분을 모르겠다... (회사 코드는 훨씬 복잡하고 몇번 InputGroup의 몇번 Input을 포커스해야 하는지 알아내는 것도 오래 걸렸다..! 아래 내용, 코드는 내가 공부용으로 간단하게 만든 것~~ !! ) 설명 ❤️ 완성 ~!! Message 부분에서 몇 번 In..

module.exports = { ... plugins: ["prettier"], rules: { ... "vue/multi-word-component-names": [ "error", { ignores: ["Message", "Input"], }, ], }, }; Message를 컴포넌트 이름으로 사용하고 싶은데, 한 단어라서 안된다고 했다. 그럴 때 .eslintrc.js에서 rules에 추가해주면 된당.

emit('이름', 보낼 값1, 보낼 값2)

provide와 inject 실무에서 일하다가 vue provide와 inject를 마주쳤다. 그 전에는 부모-자식 컴포넌트 간에 데이터를 주고 받을 때 prop과 emit을 사용했다. 그런데 좀 더 큰 걸음으로 후손에게 데이터를 줄 때 사용하는 것이다. A-> B -> C 로 컴포넌트가 있는데, A -> C로 데이터 바로 주고 싶을 때 ! https://vuejs.org/guide/components/provide-inject.html Provide / Inject | Vue.js vuejs.org 상위 컴포넌트에서는 provide로 줄 데이터를 정할 수 있다. 하위 컴포넌트에서는 inject로 받을 데이터를 정할 수 있다. (이 부분에 관련 코드 + 설명 추가하기) @@@ is not a functi..