Vue.js 썸네일형 리스트형 Vuex -> Pinia migration + 로그인 상태 유지 및 authStore https://pinia.vuejs.org/cookbook/migration-vuex.html Pinia | The intuitive store for Vue.jsIntuitive, type safe, light and flexible Store for Vuepinia.vuejs.org Vue 2버전대 레포를 Vue3 로 버전업을 하였는데요.상태관리라이브러리 역시도 Vue3 와 호환성이 좋은 Pinia 로 마이그레이션을 할려고 합니다. (vue공식 홈에서도 Pinia 사용을 권장하기도 함)Vuex는 Vue.js 애플리케이션에서 상태 관리를 위한 공식 라이브러리로, Vue 2와 함께 널리 사용되었습니다. 그러나 Vue 3가 출시되면서 새로운 상태 관리 라이브러리인 Pinia가 등장했습니다. Pinia는 .. 더보기 Vue3 + vite 에 Typescript 적용하기 vue2 프로젝트에서 vite 로 바꾸고, vue3 로 마이그레이션 까지 한 상태에서 typescript를 적용하기 위한 그 과정들을 적어봤습니다.보통 vue 프로젝트 생성 시 초기 설정에서 ts 를 선택할 수 있어서 큰 어려움이 없을겁니다.기본 베이스가 js 인 프로젝트에서 ts 를 설치하여 js와 함께 통합하여 쓸 수 있게 설정하기 위해 공식홈페이지, 블로그 등을 찾아보며 공부해봤습니다. 🁢 Typescript install & 컴파일 설정npm install typescriptyarn add typescript package.json 에 설치된 모습 npm install --save @types/nodeyarn add @types/node package.json 에 설치된 모습 npm .. 더보기 [Vue.js] Vue3 환경에서 Storybook 설치 및 Pagination 공통 컴포넌트 적용기 어느 날, 새로운 기획 요구사항을 받았습니다. "페이지네이션 디자인을 변경해야 합니다."일반적으로는 디자인 요구사항에 따라 기존 컴포넌트를 수정하거나 새로 제작하면 됩니다. 하지만 이번에는 단순히 디자인을 바꾸는 데 그치지 않고, 디자인 시스템을 도입해보면 좋겠다고 생각했습니다. 왜 디자인 시스템인가?페이지네이션 같은 공통 컴포넌트는 서비스 전반에서 자주 사용되므로, 디자인 변경 시 전체적인 일관성을 유지하는 것이 중요합니다.여러 개발자가 함께 작업할 때, 컴포넌트가 표준화되어 있지 않으면 유지보수성이 떨어지기 때문에 효율적인 협업 환경이 필요했습니다.Storybook을 활용하면 UI를 독립적으로 테스트하고 문서화할 수 있어 개발 및 디자인 협업이 수월해진다는 점에서 매력을 느꼈습니다. 왜 이 작업을 .. 더보기 [Vue.js] Vue2 탈출기: Vue3 마이그레이션 가이드 이전 글에 이어서 Vue2.7 upgrade + Vite 적용 +Vue3로 성공적으로 업그레이드 했습니다..! Vue2 에서 Vue3로 업그레이드하는 거는 금방이지만, 그에 맞춰 종속된 라이브러리들을 Vue3에 맞게 리팩토링하는게 더 오래 걸린 것 같아요.하면서 중간중간 기획개발도 같이 진행하고, QA도 진행하면서 수정개발하니 커밋 기록상 진행 일자는 아래와 같습니다. 프로젝트 규모 : 중규모 웹 애플리케이션마이그레이션 기간 : 2024.09.03 ~ 2024.10.04 (약 1개월)🗓️ 처음 시작일 : 2024년 9월 3일🗓️ 마지막 QA 수정 개발 완료 : 2024년 10월 4일실제 개발 기간 : 약 2주 마이그레이션의 주요 이점Composition API를 통한 더 나은 코드 구성과 재사용.. 더보기 [Vue.js] Vue2 프로젝트, Webpack에서 Vite로 마이그레이션하기! 현업에서 몇개의 레포들이 Vue2를 사용하고 있는데요. 올해의 목표에서 하나의 레포를 Vue2 → Vue3 로 마이그레이션을 하는 것으로 잡았습니다.Vue2 프로젝트를 진행하면서, 기존의 Webpack 빌드 도구가 무겁고 느리게 느껴지기 시작했습니다. 특히, 대규모 프로젝트에서는 빌드 시간이 길어지고, 개발 서버의 반응 속도가 떨어지는 문제가 발생했습니다.이러한 문제를 해결하기 위해 저는 Vite로의 마이그레이션을 고려하게 되었는데요! Vite는 빠른 개발 서버와 즉각적인 모듈 핫 리로딩을 제공하여 개발 생산성을 크게 향상시킬 수 있는 도구입니다. 또한, Vite는 최신 브라우저의 네이티브 ES 모듈을 활용하여 빌드 속도를 극대화하고, 번들링 과정에서의 불필요한 오버헤드를 줄여줍니다. 이전 회사에서 Vi.. 더보기 [Vue.js] Vue 프로젝트, ESLint, Prettier (+typescript) 설정하기! Vite 로 생성했던 프로젝트 구조를 설명하고, ESLint, Prettier 를 설정해보도록 하겠습니다. 팀원들이 모두 동일한 텍스트편집기를 사용하지 않을 수 있으므로 ESLint + Prettier 를 결합하여 프로젝트 설정 파일로 관리하는 것을 추천. 프로젝트 구조 ⏦├── node_modules│ └── ...├── public│ └── favicon.ico├── src│ ├── App.vue│ ├── assets│ │ ├── base.css│ │ └── logo.svg│ ├── components│ │ ├── HelloWorld.vue│ │ ├── TheWelcome.vue│ │ ├── WelcomeItem.vue│ │ └──.. 더보기 [Vue.js] Vue.js 개발을 위한 필수 VSCode 플러그인 추천 Vue.js로 개발할 때, 효율성을 극대화하고 생산성을 높이기 위해서는 적절한 개발 도구와 플러그인을 사용하는 것이 중요합니다.특히, Visual Studio Code(VSCode)는 Vue.js 개발에 최적화된 다양한 플러그인을 제공하여 개발자들이 더 편리하게 작업할 수 있도록 도와주는데요.이 글에서는 Vue.js 개발 환경을 더욱 강력하게 만들어줄 VSCode 플러그인들을 소개하고, 각 플러그인의 주요 기능과 설치 방법을 설명하겠습니다. 이를 통해 여러분의 개발 경험을 한층 더 향상시킬 수 있을 것입니다! VSCode Plugins 설치 HTML/CSS 마크업 (코드 입력) 을 도와주는 확장 프로그램을 설치해보도록 하겠습니다.확장 프로그램들은 우리가 코딩을 할 때, 더 효율적으로 작업 할 수 있.. 더보기 [Vue.js] Vue.js에서 BroadcastChannel 사용법: 실시간 데이터 동기화하기 최근 프로젝트에서 기획자분이 한 사용자가 같은 컴퓨터에서 여러 개의 브라우저 탭을 열어놓고 작업할 때, 'A' 탭에서 데이터를 변경하거나 어떤 처리를 했을 경우, 다른 탭('B' 탭)에 변경 사항이 즉시 반영되지 않는 문제를 해결해달라고 찾아왔다. 이 문제는 사용자 경험에 큰 영향을 미칠 수 있는 상황으로, 웹서비스가 관리자페이지이다보니 실시간 데이터 동기화가 중요한 서비스에서 반드시 해결해야 할 과제였다. 이번 글에서는 문제의 원인을 분석하고, 이를 해결하기 위해 어떤 접근 방식을 사용했는지 공유하고자 한다. 서론ATab, BTab 이 있는 상황에서 ATab이 로그아웃 할 경우 브라우저 내의 토큰을 제거하는 로직이 이미 구현되어 있었다.하지만 이렇게 할 경우 BTab 에선 ATab 에서 일.. 더보기 [Vue.js] Options API vs Composition API Vue3 에서 애플리케이션을 만들 수 있는 방법은 크게 2가지가 있습니다. 1️⃣ vue2 에서 사용해왔던 Options API 2️⃣ vue3 에서 새롭게 등장한 Composition API Vue2에서는 Options API 의 단점을 보완하기 위해 Composition API 가 등장했으며, Vuu3에서는 Composition API 를 권장하고 있다. Options API vs Composition API 비교 Options API data, methods, mounted 와 같은 옵션을 사용한다. Composition API 반응형 코드를 작성하는 단일 setup 함수가 있다. Compositions API는 옵션(data, methods, mounted ...) 을 선언하는 대신 가져온 함수 .. 더보기 [Vue.js] 컴포넌트에 대해 HTML -> Vue 로 변환해서 컴포넌트의 이점을 알아보자. 컴포넌트란? 컴포넌트를 왜 사용? 컴포넌트는 어떻게 사용? 컴포넌트 정의 ➜ 컴포넌트 등록 ➜ 컴포넌트 사용 컴포넌트 시스템이란? 컴포넌트 (Component) 자바스크립트에서 재사용할 수 있도록 코드를 분리한 파일을 모듈이라고 한다. Vue 에서도 UI(HTML, CSS, JS) 를 재사용할 수 있도록 정의한 것을 컴포넌트라고 한다. 📌 JavaScript 코드를 재사용하는 모듈과 다르게, 컴포넌트는 JavaScript 뿐만 아니라 HTML, CSS 도 함께 캡슐화하여 재사용이 가능하게 한다. 컴포넌트를 사용하는 이유 컴포넌트를 사용하면 UI를 재사용할 수 있다. ➜ 프론트엔드 개발을 하다보면 JavaScript 뿐만 아니라 HTML, CS.. 더보기 이전 1 2 다음
