Front-End(Web)/Vue
-
[Vue.js] Vue 3 가 도입되면서 달라진 점Front-End(Web)/Vue 2022. 3. 13. 20:12
🧐 서론 올해인 2022년 1월, Vue3의 안정화 버전(3.2.28)이 정식 릴리즈가 되면서, Vue 프로젝트의 기본 템플릿이 Vue3로 대체될 예정이다. Vue 2에 비해 함수형 프로그래밍화 된 점, 이에 따른 다양한 문법의 변화와 기능의 추가 등이 동반되었다. (Vue devtools 도 Vue3 버전으로 마이그레이션 되었으며, Vue 공식문서 역시 Vue3 개선점들을 기반으로 새로이 단장을 했다.) 지금 회사에서 사용중인 Composition API를 공부하면서 Vue3의 가장 큰 특징이자 코드포맷을 알아볼 수 있었다. 이를 계기로, 정식 릴리즈된 Vue3가 이전의 Vue2에 비해 보여주는 대표적인 차이점들은 어떤 부분들이 있을지 한 번 정리해보고 싶어졌다!! 📗 Vue 3 달라진 점들 1. 성능..
-
[Vue] Composition APIFront-End(Web)/Vue 2022. 3. 12. 05:44
이번에 새로 맡게 된 프로젝트에서는, Nuxt.js(Vue2)에 Composition API를 적용하는 기술스택으로 개발이 되고있다. Vue3가 정식 릴리스되면서 Vue2와의 큰 차이점중 하나인 Composition API에 대해 학습할 필요성을 느꼈다. 두 버전의 문법이 매우 상이했으며, 그래서 Composition API를 모르면 기존의 data(state), computed, methods, lifecycle 등의 기본적인 프로퍼티들마저도 원만하게 사용할 수 없었다. 본격적으로 개발을 시작하기 전에 Composition API의 차이점과 사용법 등을 공부하고자 하여 이 포스팅을 시작하게 되었다. 📗 Composition API 란? Composition API는 컴포넌트 내에서 사용하는 코드구조를 ..
-
[Nuxt.js] Nuxt 학습기 - (4) Store, asyncData & fetchFront-End(Web)/Vue 2021. 11. 30. 02:28
Nuxt 학습기의 4번째 시리즈는 이전에 정리하지 못한 Nuxt.js의 주요기능들이다. Nuxt.js 역시 Vuex Store를 사용할 수 있으며, SSR의 핵심이라 할 수 있는 서버에서의 최초 비동기 요청 메서드인 asyncData, fetch 등을 학습해보고자 한다. 📗 Store (Vuex) Nuxt.js 역시 Vue와 같이 Vuex Store 전역 저장소를 패키지에서 기본적으로 제공한다. 특정 규모 이상의 프로젝트는 보통 전역상태가 필요하며, 세션 정보나 복수의 페이지에서 필요하는 공통 데이터를 저장하는 용도로 사용된다. Vuex는 기본적으로 비활성화 상태이다. 그렇기에, 프로젝트 구조에는 /store 디렉토리가 존재하나 이는 빈 폴더로 존재하고 있다. 여기에 index.js 파일을 생성하면 Vu..
-
[Nuxt.js] Nuxt 학습기 - (3) Views, Routing, Middleware & ValidateFront-End(Web)/Vue 2021. 11. 29. 02:17
Nuxt 학습기의 3번째 시리즈부터는 Nuxt.js 토이 프로젝트를 진행하면서 사용해본 주요기능들을 정리해보려고 한다! 기능들이 전체적으로 유기적으로 연결되어 있어, 관련성보다는 Nuxt.js 가이드에서 소개하는 내용들 기반으로 진행해보려고 한다. 📗 Views Nuxt.js 어플리케이션의 기본적인 Viewing 구조를 먼저 짚고 넘어가보자. 1. Document Nuxt.js 어플리케이션 전체에 해당하는 HTML 도큐먼트이자 파일이다. 2. Layouts 모든 페이지에 공통으로 사용되는 레이아웃, 혹은 사용자 정의 레이아웃을 만들 수 있다. Header 등 공통요소를 반영하는데 용이하다. /layouts/default.vue 파일이 기본적으로 생성되며, 여기에 사용자가 커스텀도 적용할 수 있다. 또한,..
-
[Nuxt.js] Nuxt 학습기 - (2) LifeCycle & 렌더링 모드Front-End(Web)/Vue 2021. 11. 28. 19:54
🤔 서론 앞서 언급한, Nuxt.js의 SSR모드는 Universal SSR 이라고 지칭하며, 이는 고전적인 정적 SSR 방식과는 조금 다르다. 새로운 SSR 모드가 반영되게 된 배경으로는, 아무래도 기존 SSR의 단점인 데이터 통신 비효율성과 클라이언트 퍼포먼스를 개선하기 위해 CSR의 장점을 일부 차용한 것이다. 이러한 Universal 모드를 비롯해서, Nuxt.js 에서 지원하는 3가지 렌더링 모드(SPA, Universal, Static) 에 대해 자세히 알아보겠다! 📗 Nuxt.jsLifecycle 마지막으로, Nuxt.js의 각 사이드(Server, Client 및 라우팅 Navigation 시) Lifecycle을 좀 더 구체적으로 알아보고 포스팅을 마무리하고자 한다. 1. Server ..
-
[Nuxt.js] Nuxt 학습기 - (1) 개념 및 설치Front-End(Web)/Vue 2021. 11. 16. 01:06
🤔 서론 일전 Next.js를 공부하면서도, 그리고 회사의 이전 포털 사이트에 Nuxt.js를 사용하면서 SSR 프레임워크 환경을 어느정도 경험했었다. SSR(Server Side Rendering) 개념 자체가 이슈인 만큼, 학습뿐만이 아닌 다양한 경로(유튜브 등)를 통해 이를 접해왔었다. 회사의 리뉴얼 버전 코드에선 팀장님께서 Vue를 활용한 임의의 SSR 환경을 구성해주셨고, 여기서 역시 Nuxt와 유사한 개발경험을 해볼 수 있었다. (head 프로퍼티, asyncData 등) 이러한 개념들을 근본적으로 Nuxt.js 환경에서 개발해보고, 또 이외의 다양한 기능들을 학습해보고자 오픈API를 활용한 간단한 Nuxt.js 토이 프로젝트를 진행하였다. 이후 포스팅에선 Nuxt.js에서 활용한 주요 기능들..
-
[Vue.js] 재사용 & 컴포지션 - (2) 플러그인 & 필터Front-End(Web)/Vue 2021. 8. 4. 01:12
이전에 정리한 재사용 & 컴포지션 세션의 나머지 부분이다. 딱히 나눈것에 대한 의미는 없다. (분량이 길어진걸 뿐) 💚 Plugin(플러그인) Plugin(플러그인)은 전역 수준의 기능을 Vue에 추가하는 문법이라고 소개하고 있다. 실제로, 우리 회사도 modal을 키는 기능도 mapMutation이 아닌 플러그인으로 구현하며 store 활용을 최소화했다. 이렇듯 일종의 모든 곳에서 활용성이 높은 메서드를 제공하기 위한 문법이며, 플러그인엔 다양한 유형이 있다. 약간의 전역 속성 혹은 메서드 추가 (vue-custom-element, HTML 태그를 커스텀하는 플러그인) 하나 이상의 글로벌 에셋 추가 : 디렉티브 / 필터 / 트랜지션 등 (vue-router, 라우팅 기능) 글로벌 mixin으로 일부 컴..
-
[Vue.js] 재사용 & 컴포지션 - (1) Mixin, Directive, RenderFront-End(Web)/Vue 2021. 7. 20. 21:58
내가 Vue를 사용, 공부하면서 가장 정리하고 싶은 섹션이 시작되었다! 프론트엔드 작업을 하다보면 반복되는 컴포넌트와 기능들이 등장하기 마련이다. 특히, 이런 기능들이 필요할 때마다 매번 컴포넌트에 작성하게 된다면, 이후 수정 등 유지보수가 매우 안 좋을 것이다. 이러한 기능들을 공통화, 전역화하는 다양한 기법들이 Vue에 존재한다고 들었다. (믹스인, 플러그인 등) 이들의 차이점은 무엇인지, 그리고 어떻게 사용하며 어떤 상황에서 특히 적합할지를 공부해보도록 하겠다. 💚 Mixins(믹스인) Mixins는 Vue 컴포넌트에서 재사용 가능한 기능을 배포하는 유연한 방법이라고 소개한다. * 믹스인(Mixin) : 다중 상속을 지원하는, 구현된 인터페이스를 의미함 의미 그대로, 컴포넌트에 원하는 기능을 실행하..