nuxt3 + django로 풀스택 개발 - 개발환경구축 및 front/back 통합

 

Nuxt3 개발환경설정

https://nuxt.com/docs/getting-started/installation

Installation · Get Started with Nuxt

 

튜토리얼을 따라서 잘 한다면..

Welcome to Nuxt를 확인할수 있음.

내 경우는 frontend를 프로젝트 명으로 정해줬음.

 

Django 세팅

https://docs.djangoproject.com/ko/4.2/intro/tutorial01/

Django

 

이걸 참고해서 프로젝트를 생성하고, 내 경우는 backend를 프로젝트 명으로 정해줬다.

장고 앱서버 실행시 이와 같은 화면이 나오면 정상적으로 세팅이 된것이다.

 

django + nuxt3 통합

사실상 통합이라고 할만한것도 없다.

django가 사용하는 포트로 nuxt3에서 axios나 fetch를 통해서 request를 보내줄 수 있는 코드만 작성하면 된다.

 

Backend 단 테스트 코드 작성

생성한 backend 프로젝트 폴더 내에

backend/backend/views.py 파일을 아래 코드를 포함하여 생성

from django.http import JsonResponse


def test(request):
    return JsonResponse({"msg": "test"})

backend/backend/urls.py 파일을 아래와 같이 수정

from django.contrib import admin
from django.urls import path

from .views import index

urlpatterns = [
    path("api/test/", index, name="index"),
    path("admin/", admin.site.urls),
]

127.0.0.1:8000/api/test/ 주소를 호출하였을때 JSON형태의 응답이 정상적으로 오는지 확인해보면된다.

Frontend 단 호출코드 작성

frontend/nuxt.config.ts

frontend/nuxt.config.ts

// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
    runtimeConfig: {
      // Config within public will be also exposed to the client
      public: {
        apiBase: "http://127.0.0.1:8000/api",
      },
    },

})

frontend/app.vue

<template>
  <h1>
    {{ test.msg }}
  </h1>
</template>

<script setup>
const config = useRuntimeConfig();
const { data: test } = await useFetch(`${config.public.apiBase}/test/`);
</script>

test라는 글자가 잘 출력되면 호출이 정상적으로 된것이다.