첫 장고 프로젝트 개발일지 | Django | 인터넷라디오만들기 | 계속 업데이트되는 글 @koshkaradio ฅ^•ﻌ•^ฅ

🐣 첫 장고 웹개발, 그 고군분투의 기록!

꾸-욱..

 

2020년 2학기 웹개발기초 강의를 수강했다. 장고(Django)로 프론트와 백 모두를 경험하고, AWS 서버에 올리는 것까지가 커리큘럼이다.  우리 팀은 라이브채팅이 가능한 간단한 인터넷 라디오 서비스를 기획했다. 앞단의 기획은 최소화하고 빠르게 개발에 착수해 장고의 구조에 익숙해지는 것을 목표로 했다. 이름은 코슈카라디오(Koshka Radio)! (코슈카는 러시아말로 고양이라는 뜻! ฅ^•ﻌ•^ฅ )

 

올해 여름 웹 퍼블리싱 정도까지만 경험을 해본 터라, 여러모로 도전적인 시간이 될 것 같다. 학습 과정을 하나하나 차근차근 기록으로 남기기로 한다.

📌 데이터를 프론트에 띄웠다! 

2020. 12. 11(금)

 

오늘 처음으로 '백단'의 문을 열었다. 아직 대단한 데이터를 관리하는 것은 아니지만, 퍼블리싱 경험만 있는 나에게는 한 계단을 더 올라서는 일이다. 장고 인프라가 잘 되어 있어서, 기본적인 모델을 생성하고 어드민에서 관리하기까지 큰 어려움은 없었다. 폭풍전야가 그렇듯이 아직까지는 괜찮다. (곧..카오스가.. 시작될지도..) 

 

아래 사진은 라디오 프로그램 스케줄을 띄워주는 'schedule.html' 화면이다. 어드민(admin)에서 등록한 타임테이블을 시간순서대로 html에 주르륵 띄워주는 것이 목표였다. 그리고 결과는 아래와 같다!

 

html에 어드민에서 입력한 데이터를 꽂아줄 때 아래와 같은 코드를 작성했다. table 태그를 써본적이 없어서 검색해가며 진행했다! 

<!--time table -->


    <div class="TimeTableContainer">
        <table class="TimeTable">

            <tbody>
               {% for timetable in timetable %}
                    <tr id="TTtr">
                        <td> <p class = "ttext" style="font-size:11px;margin:0;margin-padding:0"> {{timetable.playingtime}} </p> </td>
                        <td> <p class = "ttext" style="margin:0;padding:0;font-family:'Montserrat'"> <b> {{timetable.show}} </b> </p> </td>
                     </tr>
               {% endfor %}
            </tbody>

        </table>
    </div>

 

거의 개발을 혼자서 진행하느라 클래스명에 신경을 너무 못 썼다. 다음 개발 프로젝트에서는 클래스명 제대로 작성하는 법부터 알고 시작해야겠다. 

 

모델을 생성한 뒤, 해당 모델을 어드민에 등록하는 방법은 아래 글에 나와있는 방법대로 진행했다. 

Django 장고 모델(models.py) 명령어 | 어드민에 띄우기 | DB Browser for SQLite | MAC OS

 

 

💬 라이브 채팅 기능을 심었다! 

2020. 12. 16(수) 

 

라이브채팅 구현화면

생각외로 정말 간단하게 라이브 채팅을 임베드할 수 있었다. 

chatango.com에서 무료로 가능하다. 디자인 커스톰도 무료라는 걸 감안하면 꽤 자유로운 편이다. 

(자세한 채팅 구현 절차는 곧 다른 포스트로 올리기로 한다.)

 

실제로 사람들이 마음껏 웹을 어지럽히면서 놀았으면 좋겠다!

이 인터넷 라디오 서비스의 차별점은 채팅창이 이만큼 크다는 데 있다. 

 

[Tip] CSS 반영이 안 될 때 : 여러 CSS를 수정하면서, 가끔 수정사항이 웹에 반영되지 않을 때가 있었다. 그때는 크롬 캐시 새로고침을 해야한다! 단축키는 다음과 같다. (window) ctrl + shift + R  (MacOS) Command + shift + R  

 

❤️ 일단 인스타 아이디를 찜하자! @koshkaradio 

2020. 12. 17(목) 

www.instagram.com/koshkaradio/

 

[TMI] 이 인스타 계정은 실제 서비스 가동 시를 대비해 예비로 만들어둔 것으로, 계정 생성 후에 아무런 활동을 하지 않았다. 그런데 이상하게도 현재 2020년 1월 3일 기준, 팔로워가 68명이 되었다.(?!) 계정들을 살펴보니, 세 네개를 제외하고는 봇으로 찍어낸, 똑같은 템플릿의 가상 인물들이다. 아마도 팔로우 수를 늘리기 위해 만들어진 계정인 것 같은데.. 어째서 그러한 커뮤니티에 이 계정이 노출되었는지는 전혀 알 수가 없다.  😧

 

 

 

📌 아마존 클라우드 서버 입문기 (프리티어) 

AWS는 1년 무료 서버를 제공한다! 프리티어로 AWS에 처음으로 입문했다.

설렌다! 드디어 서버의 시옷을 발음할 수 있다니!

 

과정이 다소 길기는 하지만, 후에 다시 참고하기 위해 각 단계 스크린샷을 남긴다. 이런 부분들이 특히, 누군가 같이 가르쳐주면서 진행하면 별 것 아닌데 혼자서 하다보면 뭐가 뭔지 몰라 고생할 때가 많다. 

 

클라우드 서비스 | 클라우드 컴퓨팅 솔루션| Amazon Web Services

12개월 프리티어 액세스

 

Step1. 계정만들기

Free 클릭

 

Step2. 새 액세스 키 만들기 

내 계정 > 내 보안 자격 증명 > 새 액세스 키 만들기 

 

Step3. 인스턴스 시작하기 

 

강의에서 골랐던 서버

 

 

 

지금 단계에서는 그냥 넘어가도 된다.

 

 

 

📌 AWS 인스턴트 접속 명령어 (mac) 

아래는 여러 번 반복해서 썼던 명령어이다. 

인스턴트 접속 명령어.. 메모메모

 

 

 

 

 

 

To be continued... 👩🏻‍💻