JSON 데이터 가져오기

1. 가상환경 구축및 기본세팅

step1. 가상환경 폴더 만들어주기

python -m venv venv_mapping_django

위의 명령어를 실행해주면 위와 같이 터미널 앞에 (폴더명)이 생기고 이는 가상환경이 정상적으로 만들어진 것이다.

step2. django 파이썬 파일 설치하기

pip install django

위의 명령어를 입력해 주면 된다.
step3. 프로젝트 폴더 생성

django-admin startproject mapping_django_proj

위의 명령어를 실행하면 아래와 같이 프로젝트 폴더가 생성된다.

step4. VS코드에서 방금 만든 프로젝트 폴더 열어주기
vs코드내에서 폴더를 열어주면 된다.

step5. mapping_django_app폴더를 만든다.

아래의 명령어를 터미널에 입력하면 폴더를 생성할 수 있다.

python manage.py startapp mapping_django_app

step6. app폴더에 파일구조 만들기

static>images, css, js 폴더 3개 생성
이때 각 폴더에 미리 짜준 이미지 css파일을 넣어준다.
templates>mapping_django_app 폴더 생성
이 폴더안에 미리 짜준 html파일을 넣어준다.

2. JSON데이터 만들어주고 가져오기

step1. app파일에 있는 view.py폴더에서 json 데이터를 만들어 줄 수 있다.

json_data = {
        "Category": "Fisrt",
        "Writer": "수니니",
        "Place": "홍카페",
        "Coord": "36.6138938, 127.2896801",
        "Tag": "냠냠굿, 치즈케이크와 와플, 봄날에 카페",
        "Q1": "홍익대학교를 다니면서 과제할 카페를 찾으면서 알게 됐어요",
        "Q2": "봄에 남자친구랑 함께요.",
        "Q3": "거기 치즈케이크랑 와플을 먹고싶어용",
        "Q4": "치즈케이크랑 와플 먹기요"
    }

위와같이 객체 형식과 비슷하게 key : value형식의 데이터이고
다른점으로는 따옴표(" ")로 묶어준다는 점이 있다.

step2. url.py폴더에서 경로 지정하기

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

urlpatterns = [
    path('admin/', admin.site.urls),
    path('', views.index, name = 'index'),
]

step3. JavaScript에서 json데이터 가져오기

<script>
        let data = '{{ json_data }}';
        console.log(data);
        document.write(data);
</script>

변수 data에 json데이터를 가져올 수 있다.