Vue.js/ESLint & Prettier 2022. 9. 27.
Vue CLI 프로젝트 ESLint, Prettier 적용 방법
📢 들어가며 이번 포스팅에선 "Vue CLI"로 설치한 프로젝트에 ESLint와 Prettier를 적용하는 방법에 대해 다룬다. 맛집 지도 토이 프로젝트를 진행하며 겪었던 삽질을 정리하고자 글을 작성해본다. 👑 ESLint란? ECMAScript/JavaScript 코드 버그를 식별/회피하기 위한 도구. 버그를 잡음과 동시에 포맷 기능도 지원하고 있다. 코드 품질 에러를 잡는 데 도움을 준다. (ex. no-unused-vars , no-extra-bind , no-implicit-globals , prefer-promise-reject-errors...) Vue-cli v3 이상에서는 자동으로 eslint 가 추가된다. 또는 vue create 시에 ESLint 옵션 선택으로 자동으로 설치가 가능하다...
Vue.js/Nuxt.js 2021. 5. 21.
Nuxt.js 란? 개념과 예제 (SSR, CSR, Universal, asyncData, fetch...)
📢 들어가기 전에 이번 포스팅에선 Nuxt.js 의 개념과 구조에 대해 알아보고 간단한 예제를 구현해본다. CSR vs SSR Nuxt.js 에 대해 알아보기에 앞서, SSR과 CSR에 대해 알아보자. 이 두가지 개념은 Nuxt.js의 가장 큰 특징이라고 할 수 있다. CSR (Client Side Rendering) 클라이언트 사이드 렌더링. SPA(Single Page Application)에서 사용되는 방식이다. SPA란, 최초 한번 페이지를 전체 로딩한 후 데이터만 변경해서 사용할 수 있는 웹 어플리케이션을 말한다. 최초 페이지를 로딩한 시점부터는 페이징 리로딩(깜빡임) 없이 필요한 부분만 서버로부터 받아서 화면을 갱신하는 렌더링 방법이다. 필요한 부분만 갱신하기 때문에 페이지 이동이 자연스럽다...
Vue.js/Vuex 2021. 4. 8.
Vuex란? 개념과 예제
📢 들어가기 전에 이번 포스팅에선 Vuex가 무엇인지 알아보고, 간단한 예제를 구현해본다. Vue CLI로 설치한 Vue.js 프로젝트 환경에서 진행했다. Vuex를 시작하기 전에, 아래 방법으로 Vue.js 프로젝트를 설치해야한다. Intellij IDE 또는 WebStorm IDE File - New - Project - Vue.js npm npm i -g @vue/cli vue create '프로젝트 명' ✌ Vuex 란? Vuex는 한마디로 얘기하자면 상태(state)를 관리하는 라이브러리이다. 여기서 상태란 무엇일까? new Vue({ // 상태 data () { return { count: 0 } }, // 뷰 template: ` {{ count }} `, // 액션 methods: { in..