드디어 CRUD중 마지막 기능인 Update를 구현해 볼 것이다. update 버튼을 누를 시 수정할 수 있는 폼이 등장하고, 데이터를 수정하고 Save 버튼을 누르면 장고 백엔드 서버로 PATCH method를 보내는 것을 구현하려고 한다. 먼저 수정하는 폼은 update 버튼을 누를 시에만 구현되도록 할 것이기 때문에 이를 체크하는 is_hidden 이라는 플래그 변수를 활용하려고 한다. 장고의 model 에 is_hidden 필드는 존재하지 않기에 vue 에서 플래그 데이터(is_hidden)를 추가해주는 작업을 할 것이다. App.vue // App.vue 수정 // template 수정

이전 포스팅에서 Create 기능에 대한 부분을 완벽하게 구현해 두었다. 지금부터는 Delete 기능을 구현해볼 것이다. Content.vue // Content.vue 수정 user CRUD create clear 이름 : {{ data.username }} 나이 : {{ data.age }}세, 거주지: {{ data.city }} Delete methods: { sendForm: function() { axios({ method: "POST", url: url, data: this.data, }) .then((response) => { this.userList = response.data; }) .catch((error) => { console.log("Failed to get userList", ..

이전 포스팅에서 Create 기능을 구현하였지만 새로고침을 하지 않을 경우 추가된 데이터를 조회할 수 없는 상태이다. 실제로 서비스하는 환경이라면 무조건 고쳐야할 사항이므로 수정해보겠다. App.vue // App.vue의 mounted 부분 mounted() { // DOM 객체 생성 후 DRF 서버에서 데이터를 가져와 userList에 저장 axios({ method: "GET", url: url }) .then(response => { this.userList = response.data; console.log("Success", response); }) .catch(error => { console.log("Failed to get userList", error.response); }); }, A..

지금까지 Vue 에서 등록된 유저의 목록을 보여주는 Read 기능을 구현하였다. 조금씩 부분을 나눠 수정했던 일이 많았기에 Create 기능을 만들기 전에 통합된 코드를 한번 보여주고 갈 것이다. App.vue // App.vue Vuetify 레이아웃 변경 Vuetify 는 12구획으로 나누어진 Grid system을 지원한다. 즉, 하나의 열(row)는 12개의 컬럼(column) 으로 구성된다는 뜻이다. 따라서 우리는 이것을 사용하여 layout을 변경해볼 것이다. Grid system에서는 다음과 같은 세가지 컴포넌트가 존재한다. v-flex가 가장 하위 컴포넌트이다. v-container : 중앙 중심의 페이지에 적용됨, 컨텐츠를 담을 컨테이너를 의미함 v-layout : 각 섹션을 분리하는데 ..

이전 까지의 작업을 통해 이제 우리는 DRF Server 에서 데이터를 GET 할 수 있게 되었다. 이번 포스팅에서는 GET을 포함한 CRUD 기능을 구현해볼 것이다. 데이터를 가져왔으니 화면에 가져온 데이터를 출력해야 할 것이다. 데이터를 가져오는 방법에는 다양한 방법들이 존재하는데 여기서는 mounted를 사용하여 페이지 로드 시 데이터를 가져오는 방법을 택할 것이다. App.vue // App.vue mounted 를 활용하여 DOM 객체가 생성된 후에 DRF server로부터 userList를 가져와서 저장해주는 코드를 App.vue 에 작성하였다. methods 부분에서는 아직 구현하지는 않았지만 추후에 CRUD 로직을 구현하기 위한 메소드들을 미리 선언해 두었다. userList : [] 부분..

이전 포스팅에서는 CRUD를 위한 화면을 구현하였다. 이전에 구성했던 장고의 모델은 username, age, city로 이루어져 있으니 입력화면도 이와 같이 수정할 것이다. Content.vue // components/Content.vue 파일 수정 User CRUD create clear Title content 수정된 화면 약간의 코드를 수정하여 입력을 받는 명과 입력받는 개수를 장고 모델에서 선언한 것과 동일하게 해주었다. 이제부터는 백엔드 서버와 통신하기 위해 axios를 이용해 볼 것이다. (장고 서버는 running 상태여야 함) axios 란? axios는 브라우저, Node.js를 위한 Promise API를 활용하는 HTTP 비동기 통신 라이브러리이다. 즉, 우리가 만든 장고 백엔드서..

지난번 포스팅에서는 Vue를 사용하기 위한 여러 환경들에 대한 설치를 완료하였다. 이번 포스팅부터는 실제로 Vue 컴포넌트들을 하나씩 작성해보며 간단하게 프론트엔드 작업을 진행할 것이다. Vue src 디렉토리 구조 leffept@MacBookPro src % tree # tree 명령어로 Vue 프로젝트의 src 폴더의 디렉토리 구조 확인. . ├── App.vue ├── assets │ ├── logo.png │ └── logo.svg ├── components │ └── HelloWorld.vue ├── main.js └── plugins └── vuetify.js Vue-cli로 생성한 프로젝트의 디렉토리중 중요한 것들만 조금 설명해보겠다. build/ : webpack 빌드 관련 설정이 모여 있..

지난번 포스팅에서 Djagno CRUD 서버를 만들었으니 이제 Vue를 이용하여 프론트 화면을 만들고, 장고 서버로 CRUD 기능을 요청하는 프론트 작업을 해볼 것이다. Vue.js Vue 설치하기 Vue를 이용하는 방법에는 크게 두가지가 존재한다. CDN 방식 : 프로토 타이핑또는 학습 목적이라면 아래와 같은 코드를 html에 포함하여 최신 버전의 vue를 이용할 수 있다. NPM install 방식 : Vue를 사용하여 대규모 애플리케이션을 구축할 때 NPM을 이용한 설치가 권장된다. # 최신 안정화 버전 $ sudo npm install -g @vue/cli Vue CLI는 Vue.js 프로젝트 생성을 돕는 vue 공식 CLI 다. 이것을 이용해 vue 명령어를 사용할 수 있고 프로젝트를 생성하거나..

오늘 포스팅할 내용은 Vue 컴포넌트이다. 여기서 말하는 컴포넌트란 무엇일까? 컴포넌트는 하나의 블록을 의미한다. 레고처럼 여러 블럭을 쌓아서 하나의 집을 모양을 만들 듯이, 컴포넌트를 활용하여 화면을 만들면 보다 빠르게 구조화하여 일괄적인 패턴으로 개발할 수 있다. 이렇게 화면의 영역을 컴포넌트로 쪼개서 재활용할 수 있는 형태로 관리하면 나중에 코드를 다시 사용하기가 훨씬 편리하다. 또한 모든 사람들이 레고의 사용설명서처럼 정해진 방식대로 컴포넌트를 등록하거나 사용하게 되므로 남이 작성한 코드를 직관적으로 이해할 수 있다. 위 그림에서 보듯이 하나의 페이지를 여러 블록으로 나누었고, 여러 블록으로 조합하여 하나의 화면으로 만들었다. 그리고 하나의 특징이라면 하나의 블록 안에 또 다른 블록들이 들어가 있..

뷰 인스턴스의 정의와 속성 뷰 인스턴스는 뷰로 화면을 개발하기 위해 필수적으로 생성해야 하는 기본 단위이다. 즉 뷰로 화면을 개발하기 위해 빠트릴 수 없는 필수 조건이다. 뷰 인스턴스 생성 뷰 인스턴스를 사용하기 위해 아래와 같은 형식으로 뷰 인스턴스를 생성한다. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 Vue Sample {{message}} new Vue({ el:'#app', data:{ message: 'Hello Vue.js !' } }); Colored by Color Scripter cs 위의 코드를 간단히 설명하자면 HTML화면에 'Hello Vue.js !' 라는 텍스트를 출력하기 위한 코드이다. 일단 new Vue()로 뷰 인스턴스를 생..