[Django] Word Count 만들기 - 1

이전 글과 이어지는 글입니다.

seongonion.tistory.com/59?category=0

[Django] Hello World 페이지 만들기

 

Django에서 특정 url을 탔을 때, 연결된 HTML을 띄워주는 방법을 이전 글에서 다루었다.

 

이번엔 동일한 로직을 응용해서 텍스트로 입력 받은 내용에 대해 각 단어들의 숫자를 출력해주는 페이지를 만들어보고자 한다.

 

이 페이지를 만들기 위해선 간단한 HTML 코드에 대한 지식과 파이썬의 for문, 리스트, 딕셔너리 등의 자료형에 대한 이해가 요구된다.

 

크게 어려운 개념은 아니니까 구글링을 통해 검색해보거나 그게 귀찮다면 그냥 글을 보면서 따라와도 괜찮다.

 

 

첫 번째로, 이전에 만들었던 Hello World 페이지를 조금 수정해보겠다.

 

이번에 만들 페이지는 Word Count라는 페이지이기 때문에, templates에 저장한 html 파일의 이름을 hello.html에서 wordcount.html로 바꿔주겠다.

 

  html의 이름이 바뀌었으니, 이 이름을 사용했던 views 파일에도 수정이 필요하다.

 

myapp 폴더 안의 views.py에 들어가 함수의 이름, 결과로 띄워줄 html의 이름을 모두 wordcount로 바꾼다.

 

마지막으로 사이트의 주소를 정의해주었던 myproject 폴더의 urls.py에서도 함수 이름과 url 이름을 wordcount로 바꿔준다.

 

이제, 이전에 했던 HelloWorld 페이지의 이름을 모두 wordcount로 바꾸는 작업이 끝났다.

 

이제 본격적으로 wordcount 페이지를 만들면 되는데, 우선 만들기 전에 무엇을 해야할지부터 정의해보자.

 

1. 글을 입력 받을 창, 결과를 띄워줄 창이 필요하다.

 

2. 입력 받은 글을 나누어 각 단어 수를 세어 주는 동작을 정의해줘야한다.

 

3. 2번 동작의 결과물을 결과창에 출력해줘야한다.

 

 

개괄적인 틀은 위 세 가지로 잡을 수 있겠다. 1번부터 차례로 해보자.

 

글을 입력 받을 창은 HTML의 textarea 태그를 이용해 만들어줄 수 있다. 또한, textarea에 입력받은 값을 단어를 세는 동작을 처리하기 위해 넘겨줘야하기 때문에 form 태그를 이용해 감싸줘야한다. (textarea와 form태그에 대해 잘 모른다면 구글링해보자)

 

따라서, 글을 입력 받기 위한 html 페이지는 다음과 같을 수 있다.

 

시험삼아 해당 내용을 저장 후, 터미널에서 python manage.py runserver를 입력해 결과를 확인해보자.

 

다음과 같이 떴다면 제대로 따라오고 있는 것이다.

 

이번엔 결과창을 정의해주자.

 

결과창은 result.html 이라는 이름으로 만들어줄 것이고, wordcount.html을 연결해줬던 것과 동일하게 views.py와 urls.py에 해당 페이지를 띄우는 작업을 작성해주어야한다.

 

result.html 생성 (html 내용은 일단 잠시 제처두자)

views.py에 result 창을 띄울 함수 작성

urls.py에 result/ 라는 경로를 지정해주고, 해당 경로를 타면 views.py의 result 함수를 실행해준다. (새 path를 작성할 땐 이전 path와의 구분을 위해 반드시 쉼표를 써주자! (22번째 줄 맨 끝))

이제 wordcount 페이지와 result 페이지를 모두 완성했으니 다음 단계로 넘어가자.

 

 

다음 단계에서는, wordcount 페이지의 textarea의 창에 입력된 값들을 받아 그 내용의 단어 수를 각각 세줘야한다.

 

form 태그를 다음과 같이 채워주자.

 

form 태그의 내용을 풀어쓰자면, "form 태그 내에서 입력 받은 값들을(textarea) "GET" 방식으로 "result"라는 이름을 가진 url로 넘겨줄거야" 이다. (여기서 GET 방식은 데이터를 불러오는 방법 중 하나로, 구글링해보면 쉽게 내용을 알 수 있을 것이다)

 

우리가 urls.py에서 각 경로들마다 name이라는 속성값을 정의해준 이유가 바로 이것에 있다.

 

이렇게 되면, form 태그 안의 입력값들은 그대로 옮겨가 name이 'result' 인 url을 탄다.

 

그러면 urls.py에 적힌 myapp.views.result를 타게 되고 views.py에 작성한 result 함수를 작동하게 한다.

 

이 흐름을 파악하는 것이 정말정말정말 중요하다!!!!

 

URLS -> VIEWS -> VIEWS에 정의된 함수 실행

 

form 태그 안의 textarea에 작성된 내용은 urls.py를 타고 views.py로 넘어와 result 함수로 넘어오게된다.

 

따라서, 작성된 내용의 각 단어 수를 세는 작업은 이 result 함수에서 작성해주면 되겠다.

 

 

그런데 여기서 한 가지 의문점이 들 것이다. 바로 form 태그의 action 속성 안의 {%%}는 도대체 뭘까?

 

이것은 django의 템플릿 언어 중 하나로, HTML에 파이썬 코드를 작성해야 할 때 필요한 표현 방식이다.

 

이 내용은 다른 부분에서 자세히 설명할 것이니 그냥 이 정도만 알고 넘어가도록 하자.

 

 

이제 한 번 코드가 잘 돌아가는지 실험해보자.

 

다시 터미널에서 python manage.py runserver를 실행시켜주고, wordcount 페이지가 뜨면 textarea에 아무 값이나 입력하고 제출버튼을 눌러보자.

 

제출버튼을 누른 후

아직 result.html에 아무런 값도 써주지 않아 백지가 뜨지만, url을 보면 기존 url에서 /result url로 넘어온 것을 확인할 수 있다.