99duuk

아이패드 감지

isMobile() { return Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(userAgent); }기존 이렇게 모바일 기기를 확인했다.  아이패드가 안잡힌다.isMobile() { const userAgent = navigator.userAgent || navigator.vendor || window.opera; console.log("userAgent:", userAgent); // 터치 장치 확인 const isTouchDevice = 'maxTouchPoints' in navigator ? navigator.maxTouchPoints > 0 : false; conso..

:class="{ 'dynamic-class': data.selectedYn } ...여기서 의미는:dynamic-class: 이 클래스 이름이 조건에 따라 적용data.selectedYn: 이 값이 true일 경우 selected-item 클래스가 적용즉, data.selectedYn가 true이면 해당 요소에 'dynamic-class' 클래스를 추가해서 특정 스타일을 적용할 수 있도록 하는 것반대로, data.selectedYn가 false이면 해당 클래스는 적용되지 않음. ∴ 선택된 항목에만 특정 스타일을 동적으로 적용할 수 있음

v-if="item"동작: item의 truthy/falsy 상태만으로 렌더링 결정.장점: 간결하고 직관적.적합한 경우:값이 null, undefined, false, 0, '' 같은 falsy일 때 렌더링을 막고 싶을 때.일반적인 조건부 렌더링에 적합. v-if="!!item"동작: !!로 값을 명시적으로 Boolean으로 변환 후 렌더링 결정.장점: 타입 변환 의도가 명확함.적합한 경우:item의 truthy/falsy가 헷갈릴 가능성이 있거나 명시적 Boolean 변환이 필요할 때.코드 읽는 사람에게 "Boolean 타입으로 변환함"을 명확히 전달하고 싶을 때. 대부분은 v-if="item" 사용.명시적 Boolean 변환이 필요하면 v-if="!!item" 사용.

사용자로부터 입력 받은 값이 공백인지, 유효한 값인지등 검증을 하고 서버 요청을 보내야하잖 ! 그래서 methods: { validateFields() { const requiredFields = [ { key: 'name', label: '이름' }, { key: 'no', label: '번호' }, { key: 'age', label: '나이' }, { key: 'phone', label: '전화번호' }, { key: 'address', label: '주소' }, ]; for (const field of requiredFields) { co..

스크립트 요소 순서문득 순서가 개판이길래... 스크립트 요소의 순서를 정하는 것은 가독성과 유지보수에 도움이 된다는 지피티의 말..공식적인 규칙은 없지만, 일반적으로 많이 사용되는 컨벤션이 있다고 함... 99duuk.tistory.com

개발은 크롬에서 함개발자 모드에선 height를 100vh를 하든 100% 이쁘게 잘나옴근데 그걸 모바일 브라우저로 들어가서 보면 하단이 잘림오 왜? 왜잘림? 모바일 브라우저의 주소창이나 인터페이스바가 뷰포트로 포함(?) 됨그럼 어캄?  mounted() { this.setVh();},methods: { setVh() { // 실제 viewport 높이의 1%를 계산 const vh = window.innerHeight * 0.01; // CSS 사용자 정의 속성 --vh를 설정 document.documentElement.style.setProperty('--vh', `${vh}px`); },},요로코롬 해주믄 ㄹㅇ 뷰포트를 계산해버림 .mobile-..

lazyvim 정의로 이동 못하겠음vscode에서 vue쓰는데 정의로 이동이 안되니까 (f12) 넘 불편해서 웹스톰으로 넘어갔다가 영 맘에 안들어서 lazyvim 입문했으나 lazyvim에서도 안됨ctag 설치해보래서 해보고 뭐 설정하래서 해보고 뭔 서버가 또 있어야하고 설정파일 추가해야줘야하고  다른 사람이 이미 github에 올려둔 설정파일 갖다 그대로 써도 안되고구글링해도 못찾겠고 지피티는 같은 소리만 반복 클러드도 마찬가지    그냥 초심 찾자!  vscode에서 문제를 해결해보았음 Vetur can't find tsconfig.json or jsconfig.json in /Users/tars/Documents/svn/sp_motras/vue.jsconfig.json 파일이 없었음 vetur가 이..

selectAll (computed):get과 set을 사용하는 양방향 바인딩 컴퓨티드 프로퍼티get: 모든 자식 체크박스가 선택된 상태인지 확인하여 부모 체크박스(selectAll)의 상태를 반환set: 부모 체크박스의 선택 상태를 모든 자식 체크박스에 적용selectedItemCount (computed):선택된 항목의 수를 계산하여 반환선택된 항목이 없을 때는 빈 문자열을 반환해 표시를 제어toggleSelectAll() (method):selectAll의 상태를 반전시켜 모든 자식 체크박스의 선택 상태를 변경getSelectedItems() (method):선택된 항목이 없으면 경고 메시지를 표시하고, 선택된 항목이 있을 경우 그 항목들을 배열로 반환 selectAll 체크박스를 통해 자식 체크박..

computed : 계산값watch : 사이드 이펙트 1. computed - 목적: 데이터를 가공해서 새로운 값을 자동으로 계산하고, 이 계산된 값을 캐시해서 효율적으로 사용하기 위해 쓰임.- 특징:캐싱이 적용되기 때문에 데이터가 변경되지 않으면 기존의 계산된 값을 재사용함.주로 간단한 계산이나 변형된 데이터를 반영하는 데 적합함.계산된 값을 자동으로 템플릿에 반응형으로 업데이트해줌.2. watch 목적: 특정 데이터의 변화를 감시하고, 그 변화가 발생했을 때 **부수적인 작업(사이드 이펙트)**을 수행함.특징:데이터의 변화가 있을 때마다 콜백 함수를 실행해서 필요한 작업을 할 수 있음.주로 API 호출, 애니메이션, 비동기 작업과 같은 데이터 변화에 따른 외부 액션을 처리할 때 사용함.변화에 따라 명..

toggleDetail(data) { // 다른 모든 항목의 상세 내용을 닫기 this.items.forEach((d) => { if (d !== data) { d.showDetail = false; } }); // 클릭한 항목의 상세 내용 토글 data.showDetail = !data.showDetail; // 스크롤 이동 if (data.showDetail) { this.$nextTick(() => { const element = this.$refs[data.id][0]; if (element) { element.scrollIntoView({ behavior: 'smooth', block: 'start' }); } }..