FE/Vue4

• 

  [Vue] Axios vs Fetch API : 어떤 것을 선택해야 할까? Axios vs Fetch API : 어떤 것을 선택해야 할까?Axios와 Fetch API는 네트워크 요청을 보내고 응답을 처리하는 데 사용됩니다.각각의 장단점과 사용 사례를 고려하여 어떤 것을 선택해야 하는지 살펴보겠습니다.   ▼ Axios 장점 :1. 간단하고 직관적인 API를 제공하여 요청을 보내고 응답을 처리하기 쉽습니다.2. 다양한 기능을 제공하며, 요청 및 응답의 인터셉터, 자동 JSON 파싱 등이 있습니다.3. 브라우저 및 Node.js 환경에서 모두 사용할 수 있습니다. 단점:1. 추가적인 번들 크기를 가질 수 있으며, 특히 브라우저에서는 성능 이슈로 이어질 수 있습니다.2. 별도의 라이브러리이므로 프로젝트에 추가적인 의존성을 추가해야 합니다. [예제 코드]import axios fro.. FE/Vue 2024. 5. 3.

• 

  [Vue] <template v-for> key should be placed on the <template> tag. 페이징 처리를 구현하다가 다음과 같은 에러가 발생했다.컴파일이 실패할 정도의 에러는 아니었지만, :key 부분에 빨간 줄로 에러가 떴다..!!  [에러 발생]   VueCompilerError:  key should be placed on the  tag.     해결과정찾아보니 태그를 사용하여 여러 개의 버튼을 렌더링 하는 경우에는 'v-for' 디렉티브를 사용하여 반복되는 템플릿을 정의하고, 해당 템플릿에는 키를 지정할 수 없다고 한다. 올바른 방법은 각 버튼 요소에 직접 키를 지정하는 것이다. 예를 들어, :key="index" 부분은 각 요소의 인덱스를 key로 사용하는 것이다.이렇게 하면 Vue.js가 각 요소를 효율적으로 관리할 수 있다. ▼예시 코드 ▼ {{ item }} ▷키(Key).. FE/Vue 2024. 4. 29.

• 

  [Vue] Vue.js Excel 다운로드 (xlsx 라이브러리 사용 버전) [ vue.js 테이블 list 엑셀 다운로드 ] 라이브러리 사용 버전 npm install --save xlsx 라이브러리 설치. (다른 라이브러리도 있다고 하는데 필자는 위 명령어로 라이브러리를 설치하였습니다.) 라이브러리를 설치하고 서버를 재기동하였는데 아래 오류가 발생했다. [ console 오류] export 'default' (imported as 'Xlsx') was not found in 'xlsx' (possible exports: CFB, SSF, parse_xlscfb, parse_zip, read, readFile, readFileSync, set_cptable, set_fs, stream, utils, version, write, writeFile, writeFileAsync, w.. FE/Vue 2024. 4. 17.

• 

  [Vue] Vue CLI를 사용할 때 PowerShell 실행 정책 오류 해결하기 [ UnauthorizedAccess 오류 해결 방법 ] Vue CLI를 사용하여 Vue 프로젝트를 생성할 때, 때로는 PowerShell에서 실행 정책으로 인한 오류가 발생할 수 있습니다. 이 오류는 PowerShell이 스크립트 실행을 허용하지 않아 Vue CLI를 실행할 수 없는 것입니다. 이 문제를 해결하기 위해 다음 단계를 수행했습니다. 1. PowerShell 관리자 권한으로 실행 시작 메뉴에서 PowerShell을 찾고 마우스 오른쪽 버튼을 클릭하여 "관리자 권한으로 실행"을 선택합니다. 이렇게 하면 PowerShell을 관리자 권한으로 실행할 수 있습니다. 2. 실행 정책 변경 PowerShell 창이 열린 상태에서 다음 명령을 실행하여 실행 정책을 변경합니다. Set-ExecutionPo.. FE/Vue 2024. 4. 2.