[Django, Vue]Django + Vue 연동하기 3 - Front end

이전 포스팅에서는 CRUD를 위한 화면을 구현하였다. 이전에 구성했던 장고의 모델은 username, age, city로 이루어져 있으니

입력화면도 이와 같이 수정할 것이다.

 

Content.vue

// components/Content.vue 파일 수정

<template>
    <div>
        <v-container fluid>
            <v-layout column>
                <v-flex xs12>
                    <h3 class="subject">User CRUD</h3>
                </v-flex>
                <!-- 수정 부분 start -->
                <v-flex column>
                    <v-row>
                        <v-col cols="4" md="4">
                            <!-- 합이 12가 되면 전체 화면을 사용한다는 의미입니다. -->
                            <v-text-field v-model="username" :counter="15" label="Username" required></v-text-field>
                        </v-col>
                        <v-col cols="4" md="4">
                            <v-text-field v-model="age" label="Age" required></v-text-field>
                        </v-col>
                        <v-col cols="4" md="4">
                            <v-text-field v-model="city" :counter="15" label="City" required></v-text-field>
                        </v-col>
                    </v-row>

                    <v-form ref="form" v-model="valid" lazy-validation>
                        <v-btn @click="create" style="background: green">create</v-btn>
                        <v-btn @click="clear" style="background: red">clear</v-btn>
                    </v-form>
                </v-flex>
                <!-- 수정 부분 end -->

                <v-flex class="userList" column>
                    <v-card max-width="600" tile>
                        <v-list-item>
                            <v-list-item-content>
                                <v-list-item-title>Title</v-list-item-title>
                                <v-list-item-subtitle>content</v-list-item-subtitle>
                            </v-list-item-content>
                        </v-list-item>
                    </v-card>
                </v-flex>
            </v-layout>
        </v-container>
    </div>
</template>

<script>
export default {};
</script>

<style>
.subject {
    color: blue;
    font-style: oblique;
    padding: 30px;
    text-align: center;
}
.userList {
    margin: 30px 0px 30px 0px;
}
</style>

 

수정된 화면

 

약간의 코드를 수정하여 입력을 받는 명과 입력받는 개수를 장고 모델에서 선언한 것과 동일하게 해주었다. 

이제부터는 백엔드 서버와 통신하기 위해 axios를 이용해 볼 것이다. (장고 서버는 running 상태여야 함)

 

axios 란?

axios는 브라우저, Node.js를 위한 Promise API를 활용하는 HTTP 비동기 통신 라이브러리이다.

즉, 우리가 만든 장고 백엔드서버와 프론트엔드랑 통신을 쉽게하는 용도로 사용한다.

 

axios 설치

# cd /vue프로젝트명
$ npm install axios

axios는 node 패키지 이므로 vue 프로젝트가 존재하는 폴더로 이동하여 npm install 명령을 통해 간단하게 설치할 수 있다.

 

axios 사용

// main.js
import axios from "axios";


let url = "http://localhost:8000/user/"; // 장고 서버 주소

axios.get(url)
.then(function(response){
  console.log(response);
})
.catch(function(response){
  console.log(response);
})

main.js 파일에 설치한 axios 라이브러리를 import 하고 url 에는 백엔드 서버인 장고 서버 주소를 적어준다.

그 후 axios 를 통해 get 요청을 하여 성공 시, 실패 시의 메시지를 console에 출력해본다.

별다른 설정을 하지 않았다면 개발자도구의 console에 다음과 같은 에러 메시지가 출력되는 것을 볼 수 있다.

 

CORS 에러

간단하게 해석해보자면 axios를 이용한 get 요청이 제대로 수행되지 않았다는 소리이고, CORS 정책에 의해 막혔다는 것을 의미한다.

그렇다면 CORS란 무엇일까?

 

CORS 란?

Cross-Origin Resource Sharing (CORS) 는 추가 HTTP 헤더를 사용하여 브라우저가 한 출처에서 실행중인 웹 애플리케이션에 선택된

액세스 권한을 부여하도록 하는 메커니즘이다. 즉, 서로 다른 서버에서 자원을 요청하거나 교환할 때 발생한다.

우리는 이 에러를 해결하기 위해서 django-cors-headers 패키지를 설치하여야 한다.

 

django-cors-headers 설치

# 가상환경에 진입
(venv) $ pip install django-cors-headers

파이썬 가상환경에 진입하여 위의 패키지를 먼저 설치하여 준다.

 

settings.py 설정

# cd /장고프로젝트/settings.py

INSTALLED_APPS = [
    'corsheaders',  # cors 사용 
]

MIDDLEWARE = [
    'corsheaders.middleware.CorsMiddleware',  # django cors 사용
]

CORS_ORIGIN_ALLOW_ALL = False
CORS_ORIGIN_WHITELIST = (
    'http://localhost:8080',  # vue의 포트 번호
    'http://127.0.0.1:8080',
)

앱 목록에 설치한 corsheaders를 추가시켜 주고, MIDDLEWARE 부분에도 역시 cors 를 추가하여 준다.

그 후에 뷰의 CORS를 이용하려는 대상 주소와 포트번호를 설정해주는 코드를 아래와 같이 추가하여 준다.

이제 다시한번 새로고침을 하면 console에 데이터가 정상적으로 넘어오는 (GET) 것을 확인할 수 있다.

 

cors 설정 후 넘어오는 data

여기까지 axios와 cors를 이용하여 장고 서버로부터 데이터를 받는 코드를 만들어 보았다.
다음 포스팅에서는 이를 활용하여 데이터를 CRUD 하는 기능을 구현해볼 것이다.

 

출처 : https://leffept.tistory.com/290?category=950490