PrimeVue  - Vue.js를 기반으로 한 UI 컴포넌트 라이브러리   - 미리 만들어진 UI 컴포넌트를 제공함  - Bootstrap과 유사한 역할을 함     → 둘 중 하나를 선택하여 사용하는 것을 권장함          i. PrimeVue             - Vue.js의 컴포넌트 기반 아키텍처를 활용하기에 좋음            - Tailwind CSS와 함께 사용하여 좀 더 세밀하게 스타일을 적용할 수 있음          ii. Bootstrap            - 다양한 프레임워크와 쉽게 통합할 수 있음  - https://primevue.org/ ※ Tailwind CSS  - 유틸리티 기반의 CSS 프레임워크   - 클래스 이름을 사용하여 스타일을 직접 조합할 수 있..

이번에 국문/영문에 동시에 오픈해야 하는 시스템이 있었는데, 기능이 완전히 동일해서 view 파일을 각각 만들어서 사용하는 건 좀 비효율적이었다. 유지보수하기도 귀찮을거고..그래서 같은 view 파일로 사용하기 위해서 Vue-i18n이라는 라이브러리를 활용했다. Vue-i18ni18n은 Internationalization (국제화)의 약자다. i와 n 사이에 18글자가 들어가서 i18n이라고 줄여 쓴다고 한다.(발음은 보통 아이일팔엔 또는 아이eighteen엔이라고 한다는데, 아이십팔엔이라고 부르는 분들도 계시더라) https://vue-i18n.intlify.dev/guide/installation.html Installation | Vue I18n vue-i18n.intlify.dev나는 기존 프로..

@keyup.enter를 활용하면 jQuery로 구현할 때보다 더 간단하고 직관적이게 코드를 작성할 수 있다.  #  jQuery로 구현한 코드 #  Vue.js로 구현한 코드

nextTick데이터가 바뀌어서 재렌더링될 때, 바로 DOM 요소로 접근하려고 하면 해당 요소를 제대로 찾지 못한다.이때 nextTick을 활용하면 재렌더링이 완료된 후에 코드를 실행하도록 처리할 수 있다. // 변수 'var1'이 변경되었을 때 실행되는 코드watch(var1, (newVal, oldVal) => { nextTick(() => { // 실행할 코드 });});

이미지 에러 발생 시 기본 이미지로 표시하기 e.target.src = defaultImg" alt="슬라이드 이미지"> 'imgUrl' 변수에 저장된 경로로 이미지를 가져왔을 때 에러가 발생한다면 해당 img 태그의 src 속성을 'defaultImg' 변수에 저장된 경로로 변경하여 기본 이미지를 띄운다.