이전 글과 이어지는 글입니다.
seongonion.tistory.com/61?category=833472
지금까지 wordcount 페이지에서 form 태그로 값을 입력받고, 해당 값을 result 페이지로 옮겨가는 과정까지 완료했다.
이번에는 form 태그로 입력받은 값을 result 페이지에 옮겨갈 뿐 아니라 직접 '띄워주는 것'도 해보자
우선, myapp 폴더의 wordcount.html에 약간의 수정을 해준다.
수정된 부분은 textarea 태그 내에 name="fulltext"가 추가되었다는 것이다.
이 이름은 GET 방식으로 받는 데이터 중 textarea 태그 내의 내용만을 따로 구분해 뽑아주기 위한 식별자 정도로 생각하면 된다.
이렇게 가져온 데이터는 views.py의 result 함수 내에서 뽑을 수 있다.
기존에 return render(request, 'result.html') 만 적혀있던 result 함수에 새로운 내용들이 추가되었다.
첫 줄부터 살펴보자.
첫 줄은 GET 방식으로 요청한(request) 데이터 중 'fulltext'라는 이름을 가진 데이터를 가져오겠다는 의미이다.
추측할 수 있다시피, form태그의 method를 "GET"으로 정의했고, form태그 내의 textarea태그의 이름을 fulltext로 입력해주었다.
이렇게 가져온 데이터를 text라는 변수에 저장해준다.
마지막으로, return 부분에 추가된 {'mytext' : text}를 보자
파이썬에서 render 함수는 templates의 html 파일을 띄워주는 역할을 함과 동시에, 별도의 데이터도 함께 전달해줄 수 있다.
여기서 별도의 데이터란, 좀전에 form 태그로 받아온 입력값과 같은 데이터가 될 수 있다.
데이터는 파이썬의 딕셔너리 형태로 정의해 넘겨줄 수 있으며, 'mytext'란 이름의 변수에 text(request.GET['fulltext']로 받아온 데이터)를 담아 render 하려는 html로 넘겨줄 수 있다.
다시 말해, wordcount 페이지에서 form 태그를 통해 넘어온 request.GET['fulltext'] 데이터를 'mytext'라는 이름의 변수에 담아 result.html로 넘겨주겠다는 것으로 해석하면 된다.
이제 할 일은 이렇게 넘겨온 데이터를 result.html에서 띄워주기만 하면 된다.
여기서 필요한 것이 템플릿 문법(Template Syntax)이다.
views.py의 각 함수들에서 지정한 변수들을 그대로 HTML에 가져다 쓰면, 이게 변수인지 아니면 그냥 문자를 쓰려는건지 컴퓨터는 이해할 수 없다. (실제론 그냥 HTML에 입력된 글로 인식해버린다)
따라서, '여기서 입력하려는 mytext는 views.py에서 지정한 변수야' 라는 걸 알려주기 위해 조금 다른 방식의 표현이 필요하다.
우선, 파이썬의 변수를 적기 위해선 변수명을 두 개의 {} 로 감싸주면 된다.
이러면 HTML은 mytext라는 것이 파이썬 변수명라고 해석한다.
한 번 저장하고, wordcount에서 글을 입력 후 제출버튼을 눌러보자.
wordcount 페이지에서 넘겨준 입력값이 result 페이지로 전달되고, 해당 내용이 페이지에 띄워지는 것까지 구현완료했다.
이제 다시 페이지를 만드는 목적을 살펴보자.
우리는 단지 form태그로 입력받은 값을 띄워주는 게 아니라, 입력받은 값들의 단어 수를 세 주는 페이지를 만드려하였다.
이제 해당 내용을 작성해줄 차례이다.
입력받은 값의 단어 수를 세주기 위해선, 입력값들을 띄어쓰기를 기준으로 모두 나누어줘야한다.
이를 위해 필요한 것이 split() 함수이다.
파이썬에선 리스트이름.split(기준점) 을 입력하면 해당 리스트를 기준점을 기준으로 잘라 리스트로 반환해준다.
만약 기준점을 입력하지 않는다면 공백(띄어쓰기)을 기준으로 값을 나눈다.
한 번 실험해보자.
이번엔 입력받은 text를 split() 하여 반환된 값을 다시 text에 저장하고, 해당 데이터를 result.html에 가져가도록 하였다.
저장하고 다시 wordcount 페이지에서 값을 입력 후 제출버튼을 누르면
띄어쓰기를 기준으로 문자가 잘려 리스트에 저장된 것을 알 수 있다.
이제 이렇게 잘린 문자들을 각 개수별로 세어주기만 하면 된다.
글자를 세어주기 위해서는 많은 방법이 있을 수 있겠지만, 딕셔너리를 이용하면 쉽게 구현 가능하다.
우선, 단어의 갯수를 세어 줄 딕셔너리를 하나 선언한다. 이 때, 단어를 key, 갯수를 value로 설정한다.
각 단어별로 모든 갯수를 0으로 초기화시켜준다.
이 후, 각 단어들을 돌면서 + 1씩 증가시키며 갯수를 세준다.
갯수가 잘 세어지는지 확인하기 위해 print해보면
다음과 같은 값들을 wordcount페이지에서 입력해주면
터미널에 갯수가 잘 출력됨을 알 수 있다.
이제 글자를 세는 것까지 잘 해줬으니, 해당 딕셔너리를 result.html에 띄워주자.
이번엔 text가 아닌 갯수를 센 text_dict를 넘겨줘야하므로 넘겨줄 값의 이름을 text에서 text_dict로 바꿔준다.
이후, 똑같이 wordcount에서 글자를 입력 후 제출 버튼을 눌러보자.
우리가 원하는 값이 알맞게 넘어왔다.
하지만 이건 너무 허접하고 못생겼다. 총 몇 개의 단어가 나왔는지도 알고싶고, 각 단어에 대한 갯수도 알아보기 쉽게 세로로 출력하고 싶다.
조금만 수정해보자.
총 몇 개의 단어가 나왔는지는 어떻게 알 수 있을까?
딕셔너리에서 각 단어의 갯수가 담긴 값을 text_dict의 value값들이다.
해당 value 값들을 모두 더한 값을 구하면 총 몇개의 단어가 나왔는지 쉽게 구할 수 있다.
이 작업은 파이썬의 함수들을 요하므로, html이 아닌 views.py에서 작업한 후 넘겨주도록 하자.
text_dict의 values를 리스트로 바꾼 후, sum함수를 통해 해당 값들을 모두 더해주었다.
그 값을 total_sum이라는 변수에 담은 후, text_dict를 result.html에 넘겨줬던 것처럼 total이라는 이름에 담아 result.html에 넘겨주었다.
그리고, result.html에 {}를 두 개 묶어 변수임을 알려준 후, h1태그 내의 글들 사이에 넣어주자.
해당 값을 다시 한 번 wordcount 페이지에 입력하면
다음과 같이 사용한 총 단어의 갯수가 올바르게 표시되는 것을 알 수 있다.
이번엔 각 단어 별로 몇 번씩 등장했는지를 세로로 적어보자.
또 다른 템플릿 문법이 사용되었다.
일반적인 변수는 {} 두개에 변수명을 넣어 나타냈지만, 반복문(for)이나 조건문(if)을 사용할 때는
{% 반복문 or 조건문 %}의 형태로 나타낼 수 있다.
주의할 점은 각각의 반복문과 조건문이 끝날 때마다, 끝나다는 표시인 {% endfor %} 혹은 {% endif %}를 꼭 써줘야한다.
위의 코드는 mytext 딕셔너리의 items의 key와 value 값을 반복문으로 돌면서 {{key}} : {{value}} 개의 형태로 나타냈다. (여기서 key는 각 단어, value는 단어의 갯수이다)
한 줄에 한 단어씩 표시해주기 위해 각 값 사이에 br 태그를 삽입하였다.
여기까지 마친 후, 서버를 실행시켜보면 다음과 같은 결과를 얻을 수 있다.
wordcount를 만들며 알게된 html을 띄워주는 방식, 데이터를 전송하는 방식, 그리고 템플릿 문법을 잘 활용하면 우리가 원하는 페이지를 수월하게 만들 수 있을 것이다.
Reference
django-doc-test-kor.readthedocs.io/en/old_master/topics/templates.html
'프레임워크 > Django' 카테고리의 다른 글
[Django] DRF에서 JWT 사용하기 - PyJWT 이용 (0) | 2021.10.09 |
---|---|
[Django] Word Count 만들기 - 1 (0) | 2021.02.15 |
[Django] MTV 패턴 (0) | 2021.02.15 |
[Django] Hello World 페이지 만들기 (0) | 2021.02.15 |
[Django] django 프로젝트 및 앱 폴더 생성 (0) | 2021.02.15 |