HomeAboutMeBlogGuest
© 2025 Sejin Cha. All rights reserved.
Built with Next.js, deployed on Vercel
📝
나의 MBIT(My Best IT personalities) Page 만들기!/
🌐
[심화] 결과 페이지 완성하기
🌐

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

1. 개발자 유형별 데이터 추가1.1 JSON2.1 JSONField2. 결과 페이지 템플릿에 데이터 추가2.1 title2.2 features2.3 descriptions2.4 languages2.5 lectures3. static 폴더 수정4. 다른 결과 알아보기4.1 URL4.2 View4.3 Template5. 카카오톡 공유하기 기능 구현

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

현재까지 만든 결과 페이지에는 개발자 유형별 설명이 포함되어 있지 않습니다. 이제 각 개발자 별로 상세 설명을 추가하겠습니다.

1.1 JSON

각 개발자 유형별 설명 데이터를 DB에 JSON 형식으로 넣을 것입니다. JSON(JavaScript Object Notation)이란 자바스크립트 언어에서의 객체 표기법으로 자세한 설명은 부록(용어집, 교양을 위한 얇은 지식)의 JSON 파트에서 확인하실 수 있습니다.
다음은 백엔드 개발자에 대한 설명 데이터의 JSON입니다.
  • title
      • 다음 사진처럼 개발자 유형 이름 위에 붙는 제목입니다.
      notion image
  • features
      • 개발자 유형의 특징에 대한 설명입니다.
      notion image
  • descriptions
      • 개발자 유형마다 하는 일을 설명합니다.
      notion image
  • languages
      • 해당 개발자가 되기 위해 공부해야 할 프로그래밍 언어에 대한 설명입니다.
      notion image
  • lectures
      • 해당 개발자가 되기 위해 수강할만한 강의들의 목록입니다.
      notion image

2.1 JSONField

이러한 JSON 데이터를 DB에 넣기 위해서 Developer 모델에 JSONField를 추가합니다.
 
모델이 변경되었으니 makemigrations, migrate 명령을 수행합니다. 중간에 data 필드가 다른 데이터에 비어있다는 문구가 뜰텐데 1을 입력하고, 다시 1을 입력해서 모든 값들을 다 1로 채워줍니다.
notion image
 
데이터를 일일이 타이핑해서 집어 넣기는 힘들겠죠? 그래서 업데이트된 새로운 data.json을 준비했습니다.
data.json
28.4KB
내용을 복사 붙여넣기 하시거나, 파일 자체를 교체하신 뒤에 Database Seeding 파트에서 배운 loaddata 명령을 수행합니다.
 
shell_plus를 이용해 데이터가 잘 들어갔는지 확인 할 수 있습니다.
backend.data의 타입을 확인해보면 딕셔너리임을 알 수 있습니다.
이렇게 Python에서는 주로 JSON 데이터를 dictionary로 변환하여 표현합니다.

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

이제 결과 페이지 템플릿 result.html을 추가된 데이터들이 보여지도록 수정하겠습니다.

2.1 title

2.2 features

2.3 descriptions

2.4 languages

2.5 lectures

 

3. static 폴더 수정

위와 같이 템플릿을 올바르게 수정하여도 아직 노출 되지 않는 이미지들이 있을 것입니다. 왜냐하면 필요한 이미지들을 static 폴더에 아직 업데이트를 하지 않았기 때문입니다.
http://paullab.co.kr/static.zip
위의 파일을 다운 받아서 staticfiles 폴더를 교체해주세요. 필요한 이미지가 많아졌기 때문에 img 폴더 하위에 추가적으로 분류하였습니다.
  • lang 폴더(프로그래밍 언어 이미지)
  • lec 폴더(강의 의미지)
이제 문제 없이 이미지들이 잘 노출될 것입니다.
👉
영상에도 static폴더에 업로드를 하였다가 작동이 되지 않아 staticfiles에 업로드를 하였는데요. static 폴더가 아니라 staticfiles에 이미지를 업로드 해주셔야 합니다.
 

4. 다른 결과 알아보기

마지막으로 아직 구현되지 않은 부분이 있습니다. 바로 다른 결과 알아보기 입니다.
notion image
이를 구현하기 위해서 /all_results/ 라는 경로에 원하는 유형을 골라 볼 수 있는 페이지를 만들 것입니다.
여기서도 마찬가지로 URL → View → Template 순으로 개발합니다.

4.1 URL

4.2 View

views.py에 all_results 뷰 함수를 정의합니다. all_results.html은 다음에 만들 템플릿 파일입니다.

4.3 Template

all_results.html 템플릿을 다음과 같이 작성합니다.
 
이제 /all_results/ 경로로 접속하면 개발 유형을 선택할 수 있는 페이지가 보입니다. 각 캐릭터를 클릭하면 해당 개발 유형의 페이지로 이동됩니다.
notion image
 

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

  1. result.html에 js 순서를 아래와 같이 바꿔주세요.
      2. notion image
  1. result.js 파일 안에 있는 url을 모두 현재 자신의 url로 바꿔주세요.
      2. notion image
  1. 카카오 developers에서 여러분의 web을 등록해주세요. (강의 영상 참고하세요.)
      2. notion image
  1. kakao 키가 아래 제대로 입력되어 있는지 확인해주세요.
      2. notion image
      notion image
       
{
    "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-미니프로젝트강좌"
      }
    ]
  }
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'>
...

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

....
<div class="explain">
    <h3 class="title">나와 맞는 개발 유형은 {{ developer.name }}?!</h3>
    <ul>
        {% for feature in developer.data.features %}
        <li>
            {{ feature }}
        </li>
        {% endfor %}
    </ul>
</div>
<div class="explain">
    <h3 class="title">{{ developer.name }}(이)가 뭐지?</h3>
    <ul>
        {% for description in developer.data.descriptions %}
            <li>
                {{ description }}
            </li>
        {% endfor %}
    </ul>
</div>
<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>
<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>
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'),
]
main/urls.py
def all_results(request):
    return render(request, 'main/all_results.html')
main/views.py
{% 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 %}