[심화] 결과 페이지 완성하기

1. 개발자 유형별 데이터 추가

1.1 JSON

{
    "title": "보이지 않는 것을 보는 당신은!",
    
    "features": [
      "어떤 일이든 안정적인 것이 우선임. 밴드 활동을 한다면, 화려한 보컬보다는 안정적인 연주를 이끌어나가는 베이스와 드럼을 맡는 편.",
      "주로 데이터를 다루는 데에 관심이 있음. 시각적으로 디자인을 하는 것에는 관심이 없고 귀찮음.",
      "논리적인 사고를 하는 것을 즐기는 스타일으로 추리소설, 방탈출 게임 등을 좋아하고 어려운 문제를 해결하는데 성취감을 느낌.",
      "효율적인 거 너무 좋아 최고야...! 목적지에 갈 때도 최단 경로 알아내서 그 길로 가는 편. 지하철 탈 때 아무 데서나 서 있지 않음. 빠른 환승 구역 앞에 서 있어야 마음이 안정됨."
    ],
  
    "descriptions": [
      "프론트 개발자가 사용자에게 보여지는 화면을 담당하는 개발자라면, 백엔드 개발자는 로그인, 추천 기능 등 서비스의 뒷부분 즉, 서버 설계를 담당하는 개발자입니다.",
      "클라이언트(사용자)와 데이터베이스(데이터가 모여있는 곳) 사이를 중계하는 서버를 개발합니다. 클라이언트가 요청하는 데이터를 가공하여 제공(예를 들어 넷플릭스에서 내가 원하는 영상 리스트업)하는 프로그램을 개발합니다."
    ],
  
    "languages": {
      "list": [
        {
          "name": "python",
          "img": "img/lang/python.png"
        },
        {
          "name": "Java",
          "img": "img/lang/java.png"
        },
        {
          "name": "JavaScript",
          "img": "img/lang/js.png"
        }
      ],
      "comments": [
          "python을 배우신 후에는, Django 또는 Flask 웹 프레임워크를 배우시면 됩니다.",
          "Java를 배우신 후에는, Spring과 Spring Boot 웹 프레임워크를 공부하시면 좋습니다.",
          "JavaScript를 배우신 경우 Node.js라는 런타임 환경과 그 위에서 동작하는 Express.js 등의 웹 프레임워크를 공부하시면 됩니다."
      ]
    },
  
    "lectures": [
      {
        "name": "Python 부트캠프",
        "img": "img/lec/lec_python_bootcamp.png",
        "url": "https://www.inflearn.com/course/파이썬-부트캠프"
      },
      {
        "name": "코알못에서 웹서비스 런칭까지 : 제주 코딩 베이스캠프(Django)",
        "img": "img/lec/lec_web_fullstack.png",
        "url": "https://www.inflearn.com/course/web_fullstack"
      },
      {
        "name": "Django Mini project BEST 3",
        "img": "img/lec/lec_django_mini.png",
        "url": "https://www.inflearn.com/course/Django-미니프로젝트강좌"
      }
    ]
  }

• title
다음 사진처럼 개발자 유형 이름 위에 붙는 제목입니다.

• features
개발자 유형의 특징에 대한 설명입니다.

• descriptions
개발자 유형마다 하는 일을 설명합니다.

• languages
해당 개발자가 되기 위해 공부해야 할 프로그래밍 언어에 대한 설명입니다.

• lectures
해당 개발자가 되기 위해 수강할만한 강의들의 목록입니다.

2.1 JSONField

class Developer(models.Model):
    name = models.CharField(max_length=50)
    count = models.IntegerField(default=0)
    data = models.JSONField()
    
    def __str__(self):
        return self.name

$ python manage.py makemigrations

$ python manage.py migrate

$ python manage.py loaddata data.json

$ python manage.py shell_plus

>>> backend = Developer.objects.get(pk=1)
>>> backend     
<Developer: 백엔드 개발자>
>>> backend.data
{'title': '보이지 않는 것을 보는 당신은!', 'features': ['어떤 일이든 안정적인 것이 우선임. 밴드 활동을 한다면, 화려한 보컬보다는 안정적인 연주를 이끌어나가는 베이스와 드럼을 맡는 편.', '주로 데이터를 다루는 데에 관심이 있음. 시각적으로 디자인을 하는 것에는 관심이 없고 귀찮음.', '논리적인 사고를 하는 것을 즐기는 스타일으로 추리소설,  방탈출 게임 등을 좋아하고 어려운 문제를 해결하는데 성취감을 느낌.', '효율적인 거 너무 좋아 최고야...! 목적지에 갈 때도 최단 경로 알아내서 그 길로 가는 편. 지하철 탈 때 아무 데서나 서 있지 않음. 빠른 환승 구역 앞에 서 있어야 마음이 안정됨.'], 'descriptions': ['프론트 개발자가 사용자에게 보여지는 화면을 담당하는 개발자라면, 백엔드 개발자는 로그인, 추천 기능 등 서비스의 뒷부분 즉, 서버 설계를 담당하는 개발자입니다.', '클라이언트(사용자)와 데이터베이스(데이터가 모여있는 곳) 사이를 중계하는 서버를 개발합니다. 클라이언트가 요청하는 데이터를 가공하여 제공(예를 들어 넷플릭스에서 내가 원하는 영상 리스트업)하는 프로그램을 개발합니다.'], 'languages': {'list': [{'name': 'python', 'img': 'img/lang/python.png'}, {'name': 'Java', 'img': 'img/lang/java.png'}, {'name': 'JavaScript', 'img': 'img/lang/js.png'}], 'comments': ['python을 배우신 후에는, Django 또는 Flask 웹 프레임워크를 배우시면 됩니다.', 'Java를 배우신 후에는, Spring과 Spring Boot 웹 프레임워크를 공부하시면 좋습니다.', 'JavaScript를 배우신 경우 Node.js라는 런타임 환경과 그 위에서 동작하는 Express.js 등의 웹 프레임워크를 공부하시면 됩니다.']}, 'lectures': 
[{'name': 'Python 부트캠프', 'img': 'img/lec/lec_python_bootcamp.png', 'url': 'https://www.inflearn.com/course/파이썬-부트캠프'}, {'name': '코알못에서 웹서비스 런칭까지 : 제주 코딩 베이스캠프(Django)', 'img': 'img/lec/lec_web_fullstack.png', 'url': 'https://www.inflearn.com/course/web_fullstack'}, {'name': 'Django Mini project BEST 3', 'img': 'img/lec/lec_django_mini.png', 'url': 'https://www.inflearn.com/course/Django-미니프로젝트강좌'}]}   

>>> type(backend.data)
<class 'dict'>

2. 결과 페이지 템플릿에 데이터 추가

2.1 title

...

<div class="titles">
    <h3>{{ developer.data.title }}</h3>
    <h1>{{ developer.name }}</h1>
</div>

....

2.2 features

<div class="explain">
    <h3 class="title">나와 맞는 개발 유형은 {{ developer.name }}?!</h3>
    <ul>
        {% for feature in developer.data.features %}
        <li>
            {{ feature }}
        </li>
        {% endfor %}
    </ul>
</div>

2.3 descriptions

<div class="explain">
    <h3 class="title">{{ developer.name }}(이)가 뭐지?</h3>
    <ul>
        {% for description in developer.data.descriptions %}
            <li>
                {{ description }}
            </li>
        {% endfor %}
    </ul>
</div>

2.4 languages

<div class="explain">
    <h3 class="title">그래서 어떤 언어부터 공부해야 할까?</h3>
    <ul class="language_lists">
        {% for language in developer.data.languages.list %}
        <li>
            <div class="img_wrap">
                <img src="{% static '' %}{{ language.img }}" alt="{{ language.name }}">
            </div>
            <h3>{{ language.name }}</h3>
        </li>
        {% endfor %}
    </ul>
    {% if data.languages.comments %}
    <ul>
    {% for comment in developer.data.languages.comments %}
        <li>
            {{ comment }}
        </li>
    {% endfor %}
    </ul>
    {% endif %}
</div>

2.5 lectures

<div class="lectures">
    <h3 class="title">강의 추천</h3>                
    <p>{{ developer.name }} 공부를 시작하기 좋은 강의를 추천해 드릴게요!</p>
    <ul>
        {% for lecture in data.lectures %}
            <li>
                <a href="{{ lecture.url }}" target="_blank">
                    <img src="{% static '' %}{{ lecture.img }}" alt="{{ developer.lecture.name }}">
                    <h3>{{ lecture.name }}</h3>
                    <button type="button">강의 보러가기</button>
                </a>
            </li>
        {% endfor %}
    </ul>
</div>

3. static 폴더 수정

• lang 폴더(프로그래밍 언어 이미지)

• lec 폴더(강의 의미지)

4. 다른 결과 알아보기

4.1 URL

urlpatterns = [
    path('', views.index, name='index'),
    path('form/', views.form, name='form'),
    path('submit/', views.submit, name='submit'),
    path('result/<int:developer_id>/', views.result, name='result'),
    path('all_results/', views.all_results, name='all_results'),
]

4.2 View

def all_results(request):
    return render(request, 'main/all_results.html')

4.3 Template

{% extends 'main/base.html' %}
{% load static %}

{% block head %}
    <link rel="shortcut icon" href="{% static 'img/favicon.ico' %}">
    <link rel="stylesheet" type="text/css" href="{% static 'css/reset.css' %}">
    <link rel="stylesheet" type="text/css" href="{% static 'css/all_results.css' %}">
    <title>나의 개발 유형찾기</title>
{% endblock head %}


{% block body %}
    <section id="main_contents">
        <div class="wrapper">
            <h1>MBIT</h1>
            <div class="mbit">
                <div class="frontend">
                    <a href="/result/2/"><img src="{% static 'img/frontend-no-bg.png' %}" alt="프론트엔드"></a>
                </div>
                <div class="backend">
                    <a href="/result/1/"><img src="{% static 'img/backend-no-bg.png' %}" alt="백엔드"></a>  
                </div>
                <div class="security">
                    <a href="/result/4/"><img src="{% static 'img/information_security-no-bg.png' %}" alt="정보보안"></a>
                </div>
                <div class="game">
                    <a href="/result/5/"><img src="{% static 'img/game_developer-no-bg.png' %}" alt="게임개발"></a>
                </div>
                <div class="data">
                    <a href="/result/3/"><img src="{% static 'img/data_analyst-no-bg.png' %}" alt="데이터분석"></a>
                </div>
            </div>
        </div>
    </section>
{% endblock body %}

5. 카카오톡 공유하기 기능 구현

1. result.html에 js 순서를 아래와 같이 바꿔주세요.

2. result.js 파일 안에 있는 url을 모두 현재 자신의 url로 바꿔주세요.

3. 카카오 developers에서 여러분의 web을 등록해주세요. (강의 영상 참고하세요.)

4. kakao 키가 아래 제대로 입력되어 있는지 확인해주세요.