[Django Tutorial] Blog 만들기 (10)

Vue-Django 연동원리

웹 프로그램에서 css나 img, js 파일들은 static file 혹은 assets file 이라고 한다.

django 측면에서 static 파일은 지칭하는 url로 보통 /static/ 이라는 url을 사용한다.

/static/이라는 url이 들어오면 django는 루트폴더 밑에 static 폴더나 (~/static/)

루트 폴더 밑에 앱 디렉토리, 그 밑에 static 폴더를 찾게 된다. (~/blog/static/)

 

따라서 dist아래 css, img, js를 static 폴더 밑에 생성되게 한 다음에 django로 이동하자.

 

1. vue.config.js 수정 (웹팩설정항목 추가)

module.exports = {
  transpileDependencies: [
    'vuetify'
  ],

  outputDir: 'dist',
  publicPath: '/',
  assetsDir: 'static',
  
}

outputDir: 웹팩결과물이 놓이는 폴더를 지정, (default 랑 동일)

publicPath: 웹팩결과물들에 대한 루트 url 지정, (default 랑 동일)

assetsDir: asset 즉, static 파일들이 들어갈 폴더릴 지정 (default가 empty 문자열이다.)

 

설정항목은 공식문서에서 확인할 수 있다: cli.vuejs.org/config/

 

2. 다시빌드

npm run build

: 실행후 기존 static파일들이 지워지고 dist/static/ 아래로 static 파일들이 들어간 것을 확인할 수 있다.

 

3. django 폴더로 이동

윈도우 탐색기를 이용. 

frontend/dist/static 안의 파일들(css,img,js)을 복사해서 backend/static 아래에 붙여넣는다.

frontend/dist/index.html 을 복사해 backend/templates 아래에 넣어준다. 기존의 임시로 만든 home.html 삭제하고 

이름을 home 으로 변경해 대체해준다. 

 

runserver로 vue가 장고서버에 잘 나타나는지 확인해본다.

 

 

정리

vue project 에서 만든 home.html을 django project에서 보여준 것.

django MVT pattern 관점에서 보면 T에 해당하는 html, static 파일들을 vue project의 webpack을 이용해서 만들고 그걸 가져온 것.

현재 개발중인 django project에는 3개의 html이 필요했다. (home.html, post_list.html, post_detail.html)

home.html은 만들었고, 같은 방식으로 post_list와 post_detail을 만들 것이다.

 

* 주의할것

django에서는 static 파일처리와 관련해서 settings 에 아래 2가지가 정의되어있다.

STATIC_URL = '/static/'
STATICFILES_DIRS=[os.path.join(BASE_DIR, 'static')]

django에서는 /static/ url이 들어오면 2가지 폴더를 보는데 즉 static 파일을 찾을 때 project static directory를 찾아보고 없으면 app static directory를 찾아본다. 처음 찾아보는 project static dir로 STATICFILES_DIRS를 정의한거고 

두번째로 찾아보는 app static dir는 따로 지정 안해도 각 app 폴더 밑에 static 폴더를 찾게된다. 

이것을 유의하고 django 의 static과 vue의 static을  맞추어주어야 한다는 것을 주의하자.