Django View 와 URL / DB랑 View 연결 / Django Template (chatroom with messages)

View - 사용자에게 보여줄 데이터를 준비해주는 역할

Template - 데이터를 바탕으로 사용자에게 시각적 표시를 해주는 코드

 

무슨 View가 필요할까

- 채팅방 / 채팅방들의 목록 : 채팅방 목록을 보여주는 url이 필요하다

- 채팅방 안의 뷰 (그 채팅방에 속한 메시지들을 표시) : 특정 채팅방을 보여주는 url도 필요하다

일단, 이렇게 view를 작성했는데, DB랑 연결하는 건 나중에. 일단은, View의 작동을 확인하기 위함.

 

그러면, 이제는 저런 화면을 보여주기 위해서는

urls.py 에서, /chatbot/ 이라고 입력했을때랑,

/chatbot/숫자 이렇게 입력되었을때 어떤 url을 넘겨줄 것인지를 작성해야 한다.

 

폴더 상황이, mysite 라는 폴더 안에, chatbot 이라는 폴더랑 mysite 라는 폴더가 있다.

mysite 폴더 안에 있는 mysite 폴더가 메인 화면을 담당하는 코드를 가지고 있다.

그래서 mysite 폴더 안에 있는 mysite 폴더에서, urls.py  를 보면,

admin/

chatbot/ 의

path 코드가 있다.

거기서, chatbot/ 의 path는, chatbot폴더 내에 있는 urls.py 라는 곳에서 담당을 하겠다는 의미의 코드가 있다.

그러면, chatbot 폴더에 있는 urls.py로 가자.

index 라는 함수가 view에 있을때에는 이게 맞지만,

이제는 index 함수는 없앴고, chatroomlist, chatroom 함수를 view에서 작성을 했다.

그러면, 변경해줘야 한다.

chatbot/ 뒤에 아무것도 없는 "" 공백일때는 chatroomlist 함수를 호출하겠다는거고

chatbot/ 뒤에 room_id 에 해당하는 정수값이 있으면, chatroom 함수를 호출한다는 것.

그러니까, 정리하자면,
전체 URL 구조가 mysite url에 들어가있다.
도메인 주소/chatbot 으로 들어가고 나면, chatbot url 의 하위 path는 chatbot.urls에서 처리한다고 했다.
chatbot/ 뒤에 아무것도 없는 "" 공백일때는 chatroomlist 함수를 이용해서 url에 대한 view를 표시해줄거고
chatbot/ 뒤에 정수값이 있으면, 그 숫자를 room_id 라는 이름을 붙여서, views.chatroom 함수에다가 그 숫자 값인 room_id를 넘겨줘서 처리한다는 것.

---

DB에 있는 데이터를 웹페이지로 보여주는 작업을 해볼 것.

웹페이지는 사용자들은 url을 통해서 접근한다.

 

그 전에, DB에 데이터가 어느 정도는 채워져 있어야 보여줄 게 있으니, 임의로 채워넣는다.

 

자, 이제 chatroomlist view의 경우에는 실제 DB에 있는 chatroom에서 가지고 올것이다.

< 조건 >

- 지금 가지고 있는 DB data 의 경우에는 chatroom이 몇개 없어서 상관없겠지만, 카톡 채팅방 화면을 보면, 채팅방 수가 많지만 처음에 보여주고 있는 채팅방의 수는 몇개만 있다. 스크롤을 해서 밑으로 내려야지만 추가로 더 보여준다. 그러니, 몇개만 보여주는 방식으로 코드를 작성할 것.

- 실제로는, 가장 최근에 주고 받아진 메시지에 따라서 채팅방도 리프레쉬가 되어서 메시지를 기준으로 채팅방의 최신 순서를 보여줄 수  있어야 겠지만, 여기서는 그냥, 최신순으로 채팅방을 보여줄 것.

하나 하나씩 분석하고 싶지만, 대략적으로 무슨 의미인지 이해가 되니까 그건 넘어간다.

다음은 채팅방 메시지를 보여주는 것.

이렇게 하면, 일단 chatroom에 해당하는 message를 보여주는 건 된다는 걸 확인함.

근데,

이렇게 보여주고 있기 때문에, 예쁘지가 않다.

그래서 template을 통해서 좀 그럴듯하게 보여주는 걸 해볼 것.

---

<Django Template>

 

지금까지는

DB(postgreSQL) -> View -> HttpResponse -> url -> 사용자에게 보여줬음.

근데, 사용자에게 보여주는 방식이 안 예쁨. 그냥 텍스트만 보여주고 있음.

사람들이 보기 좋게 보여주려면, 웹에서는 HTML 파일을 만드는 것.

 

html은 파일 종류를 뜻함.

일종의 mark up 파일. (mark up language - 모양을 묘사하는 언어 / 호환성, 유연, 용량이 적어서 저렴하다는 특징임. <-> bitmap 방식은 매우 비쌈.)

 

서버가 -> 클라이언트 웹브라우저한테 "사용자한테 이렇게 보여줘" 하는 언어를 써서 보내게 된다.

그럼 웹브라우저는 사용자에게 시각적으로 표시해서 보여줌.

 

django에서는 html 파일을 templates에 모아서 관리함.

django에서 templates을 관리하는 방법이,

appname 은 여기서는 그냥 chatbot 이라고 하자.

 

chatbot폴더에 templates 라는 폴더를 만들고, 그리고 거기에 또 다시 chatbot 이라고 똑같은 이름의 폴더를 만들고

그리고 그 안에 html 파일을 만든다.

chatbot/templates/chatbot/000.html

이런식으로.

chatbot 안에 templates 을 넣는건 이해가 될 것이다.

앱마다 템플릿을 별도로 관리해주고 싶으니까. 복잡성을 관리해주고 싶으니까.

근데, 템플릿안에 또 chatbot 이라는 걸 만드는 건 이유가 뭘까? (Django를 만드신 분들의 권장 사항임)

왜 권장하냐면, templates을 다 모아놓았다고 해보자.

A라는 앱, B라는 앱, C라는 앱. 각각의 templates이 있다고 하자.

그러면

A/templates/index.html

B/templates/index.html

C/templates/index.html

라고 하자. 그러면, 만약에 templates 안에 app name에 해당하는 폴더를 만들지 않는다고 해보자.

그리고나서, 전체 templates을 하나로 묶어서 보고 싶을때가 있을때 문제가 될 수 있다.

예를 들어서, A 의 templates 안에 index.html 이라는 파일이 있다고 하자.
관례상, B 의 templates 안에도 index.html 이라는 이름이 똑같은 파일이 있을 수 있다.

그러면, templates 을 하나로 묶어서 보고 싶을때, 어떤 app 에서 온 templates의 html 파일인지 구분할 수가 없게 된다.

그래서, Django를 만드신 분들은 앱 안의 템플릿 안에 앱이름과 똑같은 폴더를 만들기를 권장하는 것.

그래서, templates 전체를 불러오고 싶은데, 같은 이름이 있으면 충돌이 일어나니까,

A/templates/A/index.html

B/templates/B/index.html

C/templates/C/index.html

라고 해줬을때, templates 하위 전체를 불러오더라도 충돌이 일어나지 않게 된다.

꼭 그렇게 해야 하는건 아닌데, 권장 사항이니까.

 

암튼,

chatroomlist.html

chatroom.html

을 만들었음.

자세한 코드는 chatGPT에게 물어봐서 할 것.

 

프롬프트로는,

목적부: 내가 원하는 바를 두괄식으로 명시/선언

조건부: 원하는 바가 이루어졌을 때 만족해야 하는 조건들을 list up

예시부: 필요한 자료/정보를 통째 제공

1. 장고 프로젝트 코드를 작성 중이야. 아래를 참고해서 chatroom.html 파일을 작성해줄 수 있어?
2. 메시지들이 말풍선 모양으로 예쁘게 보였으면 좋겠어.
3. 현재 장고 모델 코드는 아래와 같습니다.
4. 현재 장고 뷰 코드는 아래와 같습니다.
1. I'm writing code for the Django project. Can you write a chatroom.html file like the one below?
2. I want the messages to look pretty with speech bubbles.
3. the current Django model code is below.
4. the current Django view code is below.

chatGPT에게 물어봐서 일단 한 번 해보자.

자세한 걸 다 여기에 기록할수가 없어서, 암튼, 약간의 수정을 조금만 해주었더니, 기가막힌 결과물을 만들어준다.

진짜 예쁘게 잘 만들어줬다.

심지어, 위에서 아래로, 가장 최신 것을 가장 아래에 두는 것까지.

그리고 bot 이랑 user 의 메시지를 구분해서 왼쪽 오른쪽까지.

그리고 메시지 생성된 시각까지 표시가 되어 있다.

맨 위에는 챗룸의 이름까지도 명시되어 있다.

 

나머지는 다음 글에서 작성하자.