wordcount 3

저는 css를 못하기 때문에 디자인은 무시하고 봐주세여..(눈 감고 보셔도 됩니다.)

 

일단 about.html 파일을 만들어서 페이지를 이동하는 걸 해보겠습니다.

home.html이 저장된 위치에 about.html 파일을 만들고, 대충 내용을 입력해줍니다.

 

생성한 html파일을 보여주려면? 먼저 해당하는 url 주소를 설정해야 하니까

urls.py로 갑니다.

대충 눈치보고 위에 코드를 따라 비슷하게 작성하면 됩니다.

about은 home과 달리 첫 번째 인자를 빈 문자열로 두지않고 'about/'이라는 문자열을 두었습니다.

이는 http://127.0.0.1:8000/about 으로 접속했을 때 about.html을 보여주기 위함입니다.

하나의 주소에는 하나의 html만 띄웁시다.

그리고 저장을 하면

서버가 여전히 실행 중이라면 터미널에 위와 같이 출력됩니다. urls.py에 방금 views안에 있는 about 함수를 실행하라고 했는데 views.py에는 about이라는 함수가 없기 때문이죠.

 

얼른 views.py로 가서 about 함수를 작성합니다. 이번에도 대충 눈치보고 home과 비슷하게 만들어 봅니다.

그리고 나서 직접 주소를 입력해서 about.html 파일을 열어 봅시다.(잘 뜹니다.)

 

그럼 이제 home.html에서 about.html로 넘어갈 수 있도록 a 태그를 home.html에 만들어 줘야 합니다.

codecademy를 통해 배우고, 프론트 엔드 세션 때 배웠듯이 a 태그를 만들고 href 속성에 주소를 넣어 주어야 합니다.

href에는 https://www.naver.com/ 같이 직접 주소를 넣어줄 수도 있습니다.

하지만 about.html은 어떻게 적어줘야 할까요?

 

이 때 django가 큰 힘을 발휘합니다.

바로 템플릿 태그입니다.

다음과 같이 입력해 봅시다.

 

html은 h1, h2, a, form 등 html만의 문법이 있습니다.

html 파일에서 사용할 수 있습니다.(html파일은 ~.html 파일을 말합니다.)

def, class, for ~ in ~ 과 같은 python 문법을 쓰려면 ~.py 파일에 사용해야 합니다.(django는 파이썬 문법을 사용합니다.)

 

하지만 템플릿 태그를 사용하면 html 파일안에서 django를 위한 문법들을 사용할 수 있습니다.

{% 장고 문법을 사용 하세요 %}
{{ 장고 변수를 나타 낼 수 있습니다. }}

{% %} 이 사이에는 장고 문법을 사용할 수 있고, {{ }} 이 안에는 장고 변수를 넣어서 표시할 수 있습니다.

 

위 사진에서 a 태그는 장고 문법을 통해 주소를 설정했습니다.

저장 후 서버의 첫 페이지로 가봅시다.

about을 클릭하면 about.html로 넘어갑니다. url도 보시면 바꼈죠.

어떻게 된 것이냐.

 

세션 때 말씀드린 개발자 도구를 통해 보여드리겠습니다.

f12를 누르고 빨간 박스를 표시된 곳을 클릭한 후 about을 클릭합니다.(Ctrl + shift + c를 누르고 about을 클릭해도 같은 동작입니다.)

그러면 오른쪽에 html 코드가 나타나는데, 보시면 a 태그의 href에 주소 값이 들어가 있습니다.

코드에는 장고 문법을 사용해서 넣었는데 말이죠.

이게 장고와 같은 웹 프레임워크의 역할입니다. 덕분에 편한 코딩을 할 수 있습니다.

href에 들어간 about은 바로 urls.py에서 name으로 설정한 값을 가져온 것입니다.

따라서 이 두 값을 맞춰줘야 제대로 동작합니다.

{{ }} 이 템플릿 태그는 나중에 사용하겠습니다.

다시 home.html로 돌아가서 form 태그를 만들어 보겠습니다.

우리는 textarea에 단어를 적고 제출 버튼을 눌러 단어의 개수를 셀 겁니다.

그러면 우리가 입력하는 문장을 어디로 보낼까요?

 

바로 백엔드(views.py)로 보내서 단어를 세는 작업을 한 후 다시 결과를 프론트엔드(html파일)로 보낼 것입니다.

그러면 어떻게 보내나요?

 

form 태그의 역할이 바로 유저로 부터 입력받은 데이터를 백엔드로 보내는 것입니다.

a 태그는 href 속성을 이용해서 url을 이동했지만, form 태그는 action 속성을 이용해서 특정 주소로 데이터를 보낼 겁니다.

action에 주소를 넣어야 하는 데, 이 때도 a 태그에 사용했던 것처럼 템플릿 태그를 이용할 수 있습니다.

그러면 어떤 주소로 보내야 할까요?

 

주소를 먼저 설정합시다. 당연히 urls.py로 가야하겠죠.

path를 눈치껏 작성해줍시다.

url을 설정했고, name을 count로 했으니 거기에 맞춰서

action에 탬플릿 태그를 이용해서 주소를 작성해줍니다.

 

그리고 터미널을 보면

views.py에 count가 없다고 하죠.

views.py로 갑시다.

 

일단 count 함수를 여기까지 작성해 봅시다.

home.html을 보면 textarea의 name 속성에 fulltext를 주었습니다.

그리고 views.py에 request.GET으로 fulltext를 받습니다.

이 이름을 반드시! 맞춰주어야 제대로 받아 옵니다.

 

그러면 request는 뭐고 GET은 뭐냐.

request는 말 그대로 요청입니다.

웹을 이용하는 유저가 어떤 걸 클릭하거나 입력하거나 하는 모든 동작은 데이터화 되어 웹 서버에 request로 전달됩니다. 데이터를 전달할 때는 get, post, put, delete 방식이 있습니다.(자세한 것은 여기서)

간단하게 말씀드리면 get은 웹 서버에 요청한 내용이 url에 다 나타납니다.

views.py에 request.GET으로 받은 것은 get 방식으로 받은 것입니다.

하지만 로그인을 할 때는 아이디나 비밀번호 정보가 주소에 뜨면 안되겠죠.

그 때 post방식을 사용합니다. 지금은 이 정도만 알고 넘어가겠습니다.

 

결과적으로 textarea 태그에 입력한 문장은 form 태그에 의해 url에 설정한 주소를 본 후, 백엔드(views.py)로 넘어와 count함수를 실행시키고, full_text 변수에 저장됩니다.

split()함수는 파이썬 함수이고 띄어쓰기 단위로 단어를 구분하여 list를 반환합니다.

 

따라서 text 변수의 각 원소는 하나의 단어가 됩니다.

이제 wordcounter의 이름 값처럼 단어를 구분하였습니다.(단어의 수는 len() 함수를 이용하여 구할 수 있습니다.)

 

그렇다면 그 결과를 어디다가 띄울까요?

그렇습니다. 띄워 줄 html 파일을 하나 만들어야 합니다.

count.html을 만들어 줍니다.

url은 아까 설정해주었습니다.

views.py로 돌아가서 아래와 같이 한 줄을 추가해 줍시다.

 

render의 세 번째 인자로 딕셔너리가 전달되었습니다.

딕셔너리 자료형은 프로그래머스로 배우셨을 거고, 모르시면 구글링 하셔서 다시 복습하시면 됩니다.

이 때 key값인 'full_text', 'total', 'word_list'는 count.html에 넘어가서 아까 배웠던 {{ }} 이 템플릿 태그 안에서 사용됩니다.

 

count.html로 돌아갑시다.

아까 views.py 에서 key값들이 었던 full_text, total, word_list가 탬플릿 태그안에 들어가 있는 것을 볼 수 있습니다.(반드시 이름을 일치시켜 줘야 합니다.)

 

{{ }} 태그 안에는 변수 이름만 들어가고, {% %} 태그 안에서는 파이썬, 장고 문법을 통해 작업을 진행하는 것을 알 수 있습니다.

7~9번 줄의 코드는 마치 파이썬 코드처럼 작성되었습니다.

 

home에서 문장을 입력하고 제출을 하게 되면 이처럼 결과 페이지가 나타나게 됩니다.

url을 보면 get방식으로 요청을 받았기 때문에 주소창에 data가 그대로 보이는 것을 알 수 있습니다.

 

이상으로 wordcounter 설명을 마치겠습니다.