반응형 개발/Vue.js21 Vue.js Pinia 사용법 Vue에서 상태관리 시 많이 활용되고 있는 pinia 사용법에 대해서 알아본다. Vue에서 보통 상태관리에 Vuex가 많이 언급되지만 Pinia의 여러가지 특징으로 많이 활용이 되고 있다. Pinia 특징 Pinia의 특징으로 많이 언급되는 것들은 아래와 같다. 1. 가볍고 직관적인 API - Vuex보다 더 가벼우며, 직관적인 API를 제공. - Vue.js 3의 Composition API와 함께 사용되어, 개발자가 상태 관리를 더욱 쉽게 할 수 있도록 지원 2. TypeScript와의 호환성 - Vuex는 별도의 라이브러리(vuex-module-decorators) 필요 3. 컴포넌트 별 상태 관리 - 전역 상태 뿐만 아니라, 개별 컴포넌트에서만 필요한 로컬 상태도 관리 4. 성능 최적화 - Vue.. 2024. 3. 21. Vue.js 카카오 로그인 연동하기 Vue.js에서 카카오 로그인 연동하는 방법을 알아본다. 카카오 로그인 연동 프로세스는 다음과 같다. 1. 카카오톡 연동을 통해 동의를 거친 후 인가코드를 발급 받는다 2. 발급 받은 인가코드를 통해 토큰을 발급 받는다 3. 발급 받은 토큰으로 사용자 정보를 조회 한다. 카카오 개발자 센터 설정 카카오 개발자 센터에 접속하여 애플리케이션을 추가하는 과정이다. 먼저 카카오 개발자 센터에 접속해서 로그인 후 상단 메뉴의 '내 애플리케이션'을 클릭한다. https://developers.kakao.com/ '애플리케이션 추가하기'를 클릭한다. 애플리케이션 정보를 입력한다. 필자는 간단히 앱 이름만 'Vue 로그인'으로 입력하고 등록했다. 등록된 애플리케이션을 클릭하고 앱설정 화면으로 이동한다. 앱 요약 정보에.. 2024. 3. 17. Vue.js Google 로그인 연동하기 Vue.js에서 Google 연동하는 방법을 알아본다.Google 계정 로그인은 OAuth 2.0 기반의 사용자 인증을 제공한다. 구글 개발자 센터 설정 먼저 구글 개발자 센터로 접속하여 프로젝트 생성부터 진행을 해야하는데 아래 그림들을 순서대로 따라한다. 구글 개발자 센터: https://console.cloud.google.com/ 새 프로젝트 이름을 입력하고 프로젝트를 생성한다. 생성된 프로젝트의 좌측 메뉴에서 'API 및 서비스 > 사용자 인증 정보'를 선택한다. 사용자 인증정보 화면에서 '사용자 인증 정보 만들기'의 'OAuth 클라이언트 ID'를 선택한다. UserType은 '외부'를 선택한다. 앱정보를 등록한다. 앱 이름을 입력하고, 사용자 이메일과 개발자 연락처 정보는 필자의 google메.. 2024. 3. 15. Vue.js 네이버 로그인 연동하기 vue에서 네이버 API를 활용하여 로그인 연동을 하는 샘플을 구현해본다 네이버 개발자 센터 오픈 API 이용 신청 네이버 개발자 센터에 접속하고 로그인 후 하단에 '네이버 로그인'을 클릭한다. 하단에 '오픈 API 이용 신청'을 클릭한다. '애플리케이션 이름' 항목과 사용 API에서 필요한 정보를 선택한다. 필자는 테스트를 위해 '연락처 이메일 주소'와 '별명'을 체크했다. 그리고 '서비스 URL'과 'Callback URL'은 로컬 접속 정보로 http://localhost:8080, http://localhost:8080/naverlogin 을 각각 입력하고 등록한다. 등록을 완료하면 내 애플리케이션 메뉴에서 다음과 같이 확인 가능하다. 개발 상태인 경우에는 검수요청이 별도로 필요하지 않지만 실제 .. 2024. 3. 14. Vue.js slot 기본 이해하기 vue에서는 컴포넌트를 활용하여 재사용을 높일 수 있는데, 어떤 화면 경우 굉장히 비슷한 UI 및 기능을 가지고 있으면서 아주 일부부만 다른 경우가 있다. 이런 경우 slot을 사용하여 컴포넌트의 재사용성을 좀 더 높여줄 수 있다. 예를들면, Alert팝업, Confirm팝업 등과 같이 팝업 화면이 있을 수 있다. 샘플 코드를 통해 간단히 slot의 기능을 이해해본다 먼저 slot이 정의된 컴포넌트를 작성한다. 위 코드에서 으로 name이 지정된 slot을 Named Slot이라고 하고, name이 없는 slot을 Default Slot이라고 한다. 이제 위의 컴포넌트를 사용하는 부모컴포넌트를 작성한다. Slot1 Alert 닫기 Slot2 Confirm 저장 닫기 자식 컴포넌트를 import하고 2번 .. 2024. 3. 8. Vue.js emit 이해 및 사용(자식컴포넌트 -> 부모컴포넌트 이벤트/데이터 전달) vue에서 부모컴포넌트에서 자식컴포넌트로 데이터를 보내기 위해 props를 사용한다면, emit은 자식컴포넌트에서 부모컴포넌트로 이벤트나 데이터를 보내기 위해 사용한다. 사용법을 이해하기 위한 간단한 샘플은 아래와 같다. 먼저 자식컴포넌트를 아래와 같이 작성해준다. mount가 되면 $emit을 사용하여 메시지를 전달한다. 부모컴포넌트는 아래와 같이 작성해보자. 자식컴포넌트로부터 "send-message"를 받으면 부모컴포넌트 내부의 receiveMsg() 메소드를 호출한다. 이제 부모컴포넌트를 적용해보면 아래와 같이 자식컴포넌트로부터 전달받은 메시지가 로그로 출력되는 것을 확인할 수 있다. 정리해보면 자식컴포넌트에서 $emit으로 부모컴포넌트에 선언된 "send-message" 이벤트를 호출한다. th.. 2024. 3. 7. Vue.js computed와 watch 이해하기 Vue에서 computed와 watch 모두 인스턴스 내에서 정의된 데이터 값의 변경이 일어나는지 감시하고, 변경이 될 때마다 정의된 기능을 실행한다는 측면에서는 비슷해보일 수 있지만 특징이나 사용용도 측면에서는 차이가 있다. Computed 만약, 인스턴스 내에서 데이터 조합 등의 처리가 필요하고, 이 처리된 데이터가 화면 내에서 여러곳에서 사용을 해야 한다면 아래와 같은 처리를 생각해볼 수 있다. {{ fullNameCall() }} {{ fullNameCall() }} 위와 같이 필요한 처리를 하는 함수를 만들어서 실행을 할 경우 화면에 표시가 될 때마다 함수를 호출을 해야하는 비효율이 발생하고, 데이터가 변경(ex. fName, lName)이 되었을 경우 감지가 안되는 문제가 있다. 이런 경우를 .. 2024. 3. 3. Vue.js Bootstrap - Uncaught TypeError: Cannot read properties of undefined (reading 'prototype') Vue 프로젝트에 Bootstrap 적용을 위해 아래와 같이 BootstrapVue를 적용하고 실행하니 에러가 발생했다. - 설치 npm install bootstrap-vue bootstrap - 에러 단순히 적용만하고 실행만 했는데 무슨 에러가 발생했을까 해서 찾아봤는데 bootstrapVue 문제였다. bootstrapVue는 Vue3는 지원하지 않는다. - 해결 public/index.html 파일 header에 아래와 같이 bootstrap css와 js를 넣어줬다. https://getbootstrap.com/ 에서 파일 링크는 확인 가능하다. bootstrapVue3라는 패키지가 있어 vue3를 지원한다고 하는데 아직 알파버전으로 당장 적용은 좀 무리가 있을듯 하다. https://www.n.. 2022. 4. 10. 이전 1 2 3 다음 반응형
