99duuk

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' }); } }..

selectedItemCount() { const count = this.data ? this.data.filter((item) => item.selected).length : 0; return count === 0 ? '' : count; }this.data.filter((item) => item.selected).length는this.data 배열 내에서 selected 속성이 true인 항목의 개수를 계산함   this.data.filter((item) => item.selected):filter 메서드는 this.data 배열을 순회하면서 각 항목(item)에 대해 item.selected가 true인 항목만 남김결과는 selected가 true인 항목들로만 이루어진 새로운..

endDt가 있을 때는 2024-10-28 ~ 2024-10-30없을 때는 2024-10-28 이라고 써주고 싶을 땐... 1. 템플릿에서 조건식 사용 {{ startDT }} {{ endDt ? " ~ " + endDt : "" }}endDt가 있으면 startDT ~ endDt 형태로, 없으면 startDT만 보여줌. 조건식을 템플릿에 직접 작성하여 필요한 값을 표시함 장점직관적: 바로 값이 어떻게 변하는지 보임간단한 조건 처리에 적합: 조건이 복잡하지 않은 경우 편리단점가독성: 조건식이 복잡해질 경우 템플릿이 지저분해질 수 있음복잡한 로직에 불리함: 로직이 길어지면 관리가 어려워질 수 있음.2. Computed 속성 사용computed: { formattedDate() { return thi..

야매로 만들어 보았읍ㄴ다람쥐

언젠가 써봐야지..1. vue-query를 사용하지 않은 기존 방식기존 방식으로 데이터를 페칭할 때는 fetch, 상태 변수 관리, 에러 핸들링 등을 직접 작성import { ref, onMounted } from '@vue/composition-api';export default { setup() { // 상태 변수 정의 const data = ref(null); const isLoading = ref(true); const isError = ref(false); // 데이터 패칭 함수 const fetchUsers = async () => { isLoading.value = true; isError.value = false; try { ..

문득 순서가 개판이길래... 스크립트 요소의 순서를 정하는 것은 가독성과 유지보수에 도움이 된다는 지피티의 말..공식적인 규칙은 없지만, 일반적으로 많이 사용되는 컨벤션이 있다고 함... 일관성을 유지하고 가독성을 높혀 협업에 도움이 된다고 함...   name: 컴포넌트 이름components: 컴포넌트 등록directives: 커스텀 디렉티브 등록mixins: 재사용 가능한 로직을 포함extends: 다른 컴포넌트를 상속props: 부모로부터 전달받는 속성 정의emits: 컴포넌트에서 발생하는 이벤트 정의data: 컴포넌트의 상태 정의 (반환된 객체로 작성)computed: 계산된 속성 (종속성을 기반으로 데이터를 자동 업데이트)watch: 데이터 변경 시 특정 로직 실행lifecycle hooks:..

약속!!! ㅁ Promise.all()Promise.all([promiseA, promiseB]) .then(results => { console.log('모든 프로미스 완료:', results); }) .catch(error => { console.error('하나 이상의 프로미스 실패:', error); }); 여러 프로미스를 병렬로 실행하고, 모두 완료될 때까지 기다림사용 사례: 동시에 여러 API 요청을 하고, 모두 성공했을 때 결과를 처리해야 할 때 사용주의점: 하나의 프로미스라도 실패하면 전체가 실패하며, catch()가 호출 ㅁ Promise.race()Promise.race([promiseA, promiseB]) .then(result => { console.log..

{{ data.name }} {{ data.age ? ' | ' + data.age : '' }} age가 있으면 김동우 | 26세age가 없으면  김동우

mounted() { this.preventNavigation(); // 네비게이션 방지 추가 }, methods: { preventNavigation() { history.pushState(null, null, location.href); window.onpopstate = () => { history.go(1); }; },},

사용자는 뒤로 가기 버튼을 통해 이전 화면으로 이동하길 기대합니다.라우터를 사용한 일반적인 경우라면 화면 전환에서 굳이 뒤로 가기 버튼 같은 걸 신경 쓸 필요가 없이브라우저 뒤로가기 누르면 이전 페이지로 이동함니다... 하지만 라우터와 url없이 페이지가 이동하는 컴포넌트라...게다가 모바일 웹을 위한 컴포넌트 였기에...컴포넌트 내 '닫기' 버튼 같이 버튼으로 관리하면 될 듯 싶었으나... 막상 핸드폰으로 열어봤더니 드럽게 불편하다......  지피티가 vuex니 뭐니 무슨무슨 방법이 있다고 했는데 최대한 뭐 덜 붙이고 popstate를 활용해  {{ headerTitle }}  화면 전환 (changeView)change..