[HUFS/HUFStudy] #2 Word Counter 만들기

Word Count 이론

html로 여러 템플릿을 만들고 파이썬 코드를 삽입해 Word Counter를 만들어보자

 

3가지 html파일로 구성할 것이다

views.py에는 이러한 함수가 필요하다

url은 이런 식으로,,

html문서 안에 파이썬 코드를 넣으려면 장고의 템플릿 언어를 써야한다!

 

해당 파이썬 변수를 html파일에 담아 화면에 출력하는 코드

템플릿 필터는 템플릿 변수에 추가적인 속성 및 기능을 적용

템플릿 필터 예시

탬플릿 태그는 html상에서 파이썬 문법 사용, url생성 등의 기능을 제공

탬플릿 태그 예시 ~ 파이썬 for문을 구현

탬플릿 태그 예시 ~ 파이썬 if문을 구현

화면상에 url을 생성하는 탬플릿 태그

Word Count 실습

가상환경을 킨 상태에서 프로젝트와 wordcount 앱을 생성하자

이후 settings.py에서 앱을 연결해주고,,

앱 안에 templates폴더와 html파일을 만들어주자

views.py에 바로 home.html을 띄우도록 파이썬 코드 작성

url.py에 바로 home을 띄우도록 url을 설정해준다

home 의 대략적인 html 형태를 잡아준다 (form으로 데이터를 입력 받아 전달)

about.html 파일을 만들고 views.py, url.py에 동일한 작업을 해준다 (url은 ‘about/’ 붙여서)

이제 탬플릿 태그를 활용해 두 html파일을 a링크로 연결해주자

 

양쪽에 url 탬플릿 태그로 url.py에 설정한 이름을 넣어주면 된다

두 페이지가 연결되었다!

result.html 파일에 함수를 설정해 home에서 입력 받는 데이터를 처리하자

 

result.html 파일을 만들고 views.py와 url.py에 등록, 대략적인 형태를 잡아주자

form 의 action에 result url 탬플릿 태그를 넣어 데이터 경로를 연결하자

views.py에서도 request.GET에 form의 name을 넣어 변수로 받아주자

이후 render에 text변수를 사전형 객체로 받아 value로 설정하고 key값을 임의로 넣어주자

이제 템플릿 변수를 활용하면 html에 파이썬 변수를 출력할 수 있다!

 

이렇게 변수의 key값을 넣어주면 그대로 출력된다

총 단어 수를 산출해보자

 

split 함수로 텍스트를 공백을 기준으로 나눠 리스트로 변수에 저장하고 len으로 길이를 딕셔너리 값으로 넣어주자

동일하게 변수의 key 값을 템플릿 변수로 넣어주면 된다

이제 어떤 단어가 몇 번 나왔는지 단어 카운트 기능을 만들어보자

 

리스트에 저장된 텍스트들을 딕셔너리 key에 넣어 개수를 value값으로 받는 로직을 작성한다

items 를 활용해 딕셔너리 쌍들을 다시 render 객체로 받아준다

Items를 그대로 템플릿 변수로 넣어주면 이렇게 나오기 때문에 html상에 파이썬 반복문으로 표현해야 한다

이런 식으로,,

word counter가 완성되었다!

 

본 내용은 멋쟁이사자처럼의 '9기 운영진 교육'을 바탕으로 작성되었습니다.