Vue
webpack(웹팩)이란 무엇인가?
🙋♂️ 종종 React, vue와 같은 프레임워크를 이용해 웹을 만들 때, webpack이라는 단어를 많이 보실 수 있을 것입니다.web-pack이라는 단어를 볼때마다, '음, web-pack은 자주 등장하니 프레임워크를 구성하는 중요한 라이브러리겠지' 라고 생각하며 넘어갔을 수도 있습니다.하지만 그냥 넘어가는 것보다 간단히 무엇을 하는 라이브러리인지 알고 가는 것 또한 중요하다고 생각합니다.👉 webpack 이란 무슨 라이브러리일까요?webpack에 대한 위키백과의 설명을 보면,웹팩(Webpack 또는 webpack)은 오픈 소스 자바스크립트(JS) 모듈 번들러이다.웹팩은 의존성이 있는 모듈을 취하여 해당 모듈을 대표하는 정적 자산들을 생성한다.이라고 볼 수 있는데,즉, webpack은 모듈 번들러 ..
[Vue] 차근차근 Todo List 만들기 with typescript - (5) Axios 연동 후 JSON 객체 받아오기
TODO LIST 만들어보기 Vue with Typescript (뷰 + 타입스크립트) (5) ☞ Axios란? axios는 HTTP 클라이언트 라이브러리로써, 비동기 방식으로 HTTP 데이터 요청을 실행합니다. 내부적으로 AXIOS는 직접적으로 XMLHttpRequest를 다루지 않고 “AJAX 호출”을 할 수 있습니다. 따라서 Axios를 사용해 프로젝트 내에 있는 JSON 파일에 저장되어 있는 itemList를 Store에 itemList에 저장시켜보겠습니다. ☞ 우선 알아둬야 할 점은, Vuex의 원리입니다. 아래 그림과 같이 vuex는 크게 State, Mutations, Actions로 구성이 가능합니다. 앞서 만들어봤듯이, state는 클래스의 멤버와 같은 역할이고, mutation은 메서드..
[Vue] 차근차근 Todo List 만들기 with typescript - (4) Vuex.Store 만들기
TODO LIST 만들어보기 Vue with Typescript (뷰 + 타입스크립트) (4) Vuex 란? ☞ Vuex는 Vue.js 애플리케이션에 대한 상태 관리 패턴 + 라이브러리입니다. 애플리케이션의 모든 컴포넌트에 대한 중앙 집중식 저장소 역할을 하며 예측 가능한 방식으로 상태를 변경할 수 있습니다. 또한 Vue의 공식 devtools 확장 프로그램과 통합되어 설정 시간이 필요 없는 디버깅 및 상태 스냅 샷 내보내기/가져오기와 같은 고급 기능을 제공합니다. (참고 : https://vuex.vuejs.org/kr/) Vuex가 무엇인가요? | Vuex Vuex가 무엇인가요? Vuex는 Vue.js 애플리케이션에 대한 상태 관리 패턴 + 라이브러리 입니다. 애플리케이션의 모든 컴포넌트에 대한 중앙..
[Vue] 차근차근 Todo List 만들기 with typescript - (3) Header, Create Component
TODO LIST 만들어보기 Vue with Typescript (뷰 + 타입스크립트) (3) Header Component (Vuex 적용 전) 우선 Header Component는 동적 라우트 기능을 사용해야 하기 때문에 동적 라우트 설정을 따로 해줘야 합니다. 하지만 NuxtJs에서는 _.vue 와 같이 파일명 앞에 _ 를 붙여주면 자동으로 동적 라우트 설정을 해줍니다.^^ (NuxtJS의 장점) (참고 : https://ko.nuxtjs.org/guide/routing/) (※ 동적 라우트를 이용해서 활동 전, 후를 각각 불러오는 기능은 Vuex.store를 만들어 준 이후 구현하겠습니다.) status로 라우팅을 할 것이기 때문에 _status.vue로 pages 폴더에 만들어줍니다. 만들고 난..
[Vue] 차근차근 Todo List 만들기 with typescript - (2) List Component
TODO LIST 만들어보기 Vue with Typescript (뷰 + 타입스크립트) (2) List Component (Vuex 적용 전) 우선 기본적인 틀 (편리함을 위해 CLASS API 방식을 사용하겠습니다. 또한 Bootstrap 4를 사용하겠습니다.) ※ BootStrap 4를 적용시키는 방법은 nuxt.config.js 파일의 head 내 link 부분에 아래 코드를 추가해주시면 됩니다. { rel: 'stylesheet', href: 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css'} components/List.vue X ☞ Vuex를 적용해서 Store를 만들기 전에 미리 리스트로 보여줘야 하기 때문에 임시..
[Vue] 차근차근 Todo List 만들기 with typescript - (0) 클래스 스타일 Vue 컴포넌트
TODO LIST 만들어보기 Vue with Typescript (뷰 + 타입스크립트) (0) ☞ 클래스 스타일 Vue 컴포넌트 Typescript는 JavaScript의 객체 지향적으로 개발할 수 있도록 보완해서 만든 Javascript Superset 언어입니다. 그렇기 때문에 이번 Todo List만들기는 Typescript를 이용할 것이기 때문에 컴포넌트를 선언할 때 클래스 기반 API를 사용해 클래스 스타일(Class Style) 로 구현을 해보겠습니다. (참고: https://kr.vuejs.org/v2/guide/typescript.html) TypeScript 지원 — Vue.js Vue.js - 프로그레시브 자바스크립트 프레임워크 kr.vuejs.org 우선 클래스 스타일을 위해 vue-..