반응형 vue12 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 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 Lazy Load(비동기 컴포넌트) 및 prefetch Vue와 같은 SPA에서는 빌드 시 소스 코드가 하나의 파일로 합쳐지는데 이 파일의 크기가 커질수록 화면이 처음 로딩될 때 시간이 그만큼 많이 걸려서 렌더링 속도가 느려진다. 이러한 문제점을 보완하기 위한 방법이 Lazy Loading 인데, 한마디로 필요한 시점에 로딩이 되도록 로딩 시점을 늦추겠다는 의미이다. Lazy Load 리소스를 Component 단위로 분리하여 Component or Router 단위로 필요한 것들만 그때 그때 다운받는 방법 Lazy Load 적용 Lazy Load가 적용될 컴포넌트 impot 시 아래와 같이 /* webpackChunkName: "이름" */ 구문을 추가해준다. 1. Router 단위 적용 - '/about' URL로 이동을 할 경우 about.js(webp.. 2022. 3. 25. Vue.js 웹팩(webpack) 개념 및 설정 Vue CLI를 통해서 프로젝트를 생성하면 webpack 설정이 자동 적용되어 'npm run serve', 'npm run build' 실행 시 webpack 기반으로 동작을 하게된다. vue CLI 2버전까지는 프로젝트 생성 시 웹팩설정 파일인 webpack.config.js 파일 생성되었고, vue CLI 3버전 부터는 vue.config.js를 통해서 좀 더 간단하게 설정하도록 지원을 하고 있다. 먼저 webpack이 뭔지부터 알아본 후 vue.config.js 설정에 대해 알아봐야 이해가 될 것이다. webpack - 최신 프론트엔드 프레임워크(vue, react, angular)에서 모두 권장하는 모듈 번들러 - 위 공식사이트 그림처럼 서로 연관 있는 모듈 간의 관계를 해석하여 정적인 자원(j.. 2022. 3. 24. Vue.js Font Awesome 아이콘 사용 Font Awesome 웹 아이콘 모음 라이브러리 vue에서 사용 시 vue-fontawesome 컴포넌트 사용을 권장하고 있음 아이콘 렌더링 시 SVG + JS메소드를 사용 Font Awesome 설치(NPM) # 1. Core패키지 설치 npm i --save-dev @fortawesome/fontawesome-svg-core # 2. (무료) 아이콘 패키지 설치 npm i --save-dev @fortawesome/free-solid-svg-icons # 3. Vue 컴포넌트 설치 npm i --save-dev @fortawesome/vue-fontawesome 2번의 '아이콘 패키지'는 아래와 같이 무료/유료로 구성되어 있어서 원하는 패키지를 설치하면 된다. Vue 프로젝트 설정 src/main... 2022. 3. 22. VSCode Parsing error: No Babel config file detected for .vue, .js 파일 VSCode로 vue 프로젝트를 생성하고 .vue, .js 파일들을 클릭해서 보니 아래와 같은 빨간색 밑줄과 함께 Parsing에러가 떴다. 실행에는 문제가 없어보이지만 신경이 계속쓰여 조치 내용을 알아봤다. VSCode에서 프로젝트의 ESLint 설정 파일 관련 에러라고 하는데 VSCode settings.json에서 아래 내용 추가하면 없어진다. 1. VSCode 단축키 ⌘,(=Code > Preference > Settings) 실행하고, 우측 상단에 아래 아이콘을 클릭한다. 2. 아래 eslint 관련 설정을 추가하는 내용 작성 후 저장한다. "eslint.workingDirectories": [ { "mode": "auto" } ] 3. 다시 화면을 가보면 에러가 사라진 것을 볼 수 있다. 2022. 3. 20. 이전 1 2 다음 반응형
