몽땅뚝딱 개발자

이번에 가로로 된 리스트를 구현하면서 모바일웹처럼 드래그 할 수 없는 점이 불편하게 느껴졌다. 사용자입장에서도 불편해 할 요소라 느껴져 적용하게 되었다. 📄 HTML Vertical Scroll 📄 script data() { return { // 드래그 제어 요소 isMouseDown: false, startX: 0, scrollLeft: 0, }; }, // 제어할 스크롤 요소 const verticalScrollWrap = this.$refs.verticalScrollWrap verticalScrollWrap.addEventListener('mousedown', (e) => { this.isMouseDown = true this.startX = e.pageX - verticalScrollWrap.o..

현재 url이 태그의 to 속성에 바인딩된 url과 동일하면 "router-link-active" 클래스가 자동으로 부여된다. 모든 url이 동일하다면 "router-link-exact-active"가 부여된다. 예를 들어 path가 /foo/bar 일 때, : router-link-active 적용 : router-link-active, router-link-exact-active 적용 이 클래스 이름을 변경하고 싶다면 따로 설정할 수도 있다. const router = new VueRouter({ routes, linkActiveClass: "active", linkExactActiveClass: "exact-active", }) 출처 및 참고 Interface: RouterOptions | Vue ..

지금까지 { dataName: 'data' } 같은 형태의 데이터만 보내다가 string만 달랑 보내는 형태를 처음 보았다. 그런게 있긴 한가?! 생각했지만 역시 그런게 있었다. 오늘도 경험치가 +1 되었습니다. export const testApi = (data: any) => { return apiRequest({ url: `/test`, method: 'patch', data: data, headers: { 'Content-Type': 'text/plain' }, // 여기를 넣어준다. }) } 개인적으로 공부한 내용을 정리하는 블로그로 잘못된 개념을 게시하지않도록 주의하고 있으나 오류가 있을 수 있습니다.

[Vue.js] 빌트인 컴포넌트 - component와 is Vue의 Built-In Components ◽ component 이 컴포넌트는 Build-In Component로 동적 컴포넌트를 렌더링 하기 위한 '메타 컴포넌트'라고 한다. 렌더링 할 실제 컴포넌트는 is prop에 의해 결정된다. ◽ is 속성 is.. be-a-weapon.tistory.com Vue2로 개발할 때는 를 한번도 사용해보지 않아서 차이점은 잘 모르겠지만.. Vue3부터 를 사용하는 방법이 바뀌었다고 한다. 📄 HTML ... ... 📄 Script import { markRaw, ref } from 'vue' import ChildComp1 from '@/components/ChildComp1.vue' import Chi..

영역을 눌렀을 때 이 display: block되면서(=input은 none) 문구를 수정하고, 에서 blur 됐을 때 다시 태그가 block되는 기능을 구현했다. (타이틀 수정 기능,,) 문제는 input이 활성화되면서 focus()가 되어야했는데 아래와 같이 작성 후 클릭이벤트를 주었을 때 아무런 동작도 하지 않았다. {{ title }} const tryEdit = () => { isTryModify.value = true if (titleRef.value) titleRef.value.focus() } 스크립트 부분에 setTimeout을 0으로 걸어주니 해결되었다. 왜인지는 더 공부해봐야하는 부분.... const tryEdit = () => { isTryModify.value = true set..

..🥺 ◽ props 📄 Vue2 📄 Vue3 개인적으로 공부한 내용을 정리하는 블로그로 잘못된 개념을 게시하지않도록 주의하고 있으나 오류가 있을 수 있습니다.

◽ 비트(Vite)가 나오게 된 배경 브라우저에서 ESM(ES Modules)을 지원하기 전까지는 자바스크립트 모듈화를 네이티브 레벨에서 진행할 수 없었다. 따라서 개발자들은 웹팩, Rollup, Parcel과 같은 도구를 이용하여 번들링(Bundling)이라는 우회적인 방법을 사용해야 했다. 하지만 자바스크립트 모듈이 1000개가 넘어가는 프로젝트라면 병목현상이 발생할 수 밖에 없다. 그래서 비트는 전 과정에 ESM을 이용하여 앱 사이즈가 커져도 갱신 시간에는 영향을 끼치지 않도록 했다. 📄 예제 번들러 없이 이 코드는 실행되지 않는다. // app.js import { sum } from './math.js'; console.log(sum(10, 20)); 📄 예제 type="module"을 추가하면..

0) setup() setup()은 beforeCreate 이전에 호출되는 것이며, this를 사용할 수 없다. 첫번째인자: _, props 두번째인자: { emit, root, refs } ... 1) reactive() 객체만 받을 수 있다. deep 서치가 가능하다. 접근할 때 [.value]가 아니라 [변수이름.key]로 접근한다. return시 ...refs([변수이름])을 사용한다. 2) ref() reactive와 달리 원시타입을 모두 받을 수 있다. 원시값을 'value’라는 key로 감싸 객체를 반환시킨다. 따라서 원본 값은 ref 객체의 value 속성을 통해 접근할 수 있으며, 값을 변경할 때에도 value 속성에 접근하여 조작한다. ref()로 선언한 변수를 setup()안에서 사용..

API가 다 만들어지기 전, 응답값 명세만 나온 상태에서 사용해보는 목업 API! 내가 직접 DB를 건드릴 수 없고 data 옵션에 하드코딩으로 넣어놓고 테스트하기에는 나중에 바꿀게 너무 많기때문에, 실제 api를 호출하면 목업 api에서 intercept하여 내가 원하는 데이터를 넣어 테스트 할 수 있어야했다. 팀장님이 이렇게 하라고 했지만 들을 당시에는 못 알아듣고..^^ 나중에 다시 얘기하다가 모킹 모듈을 추천받고 사용해보게 되었다. 결론적으로는 덕분에 너무 편하게 개발했고 간과했던 문제점들을 매우 많이 찾을 수 있어서 시간을 아꼈다. axios-mock-adapter-path-params Axios adapter that allows to easily mock requests. Latest ver..

맥북 재설정 중 정리해보는 node 버전 변경하는 방법 😎 1. node 설치 $ brew install node 2. node 버전을 변경하기 위한 nvm 설치 $ sudo curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.33.1/install.sh | bash 3. nvm 설정하기 $ vi ~/.bash_profile // => terminal이 bash인 경우 $ vi ~/.zshrc // => terminal이 zsh인 경우 3-1. 아래 입력 후 ESC 누르고 :qw export NVM_DIR="$HOME/.nvm" [ -s "/opt/homebrew/opt/nvm/nvm.sh" ] && . "/opt/homebrew/opt/nvm/n..