[단국대] 멋쟁이 사자처럼 9기 정규세션 4주차 - Wordcount, Git

Wordcount, Git 교육 내용 필기 (과제)

• template 언어
  • html 안에 파이썬 변수/문법 쓰고 싶을 때 사용
  • template 변수 : 파이썬 변수를 html 화면에 출력 {{python_variable}}
  • template 필터 : 템플릿 변수에 추가적인 속성 및 기능 제공 {{python_variable | filter}}
    ex) {{ value| length }} -> value의 문자열 길이 반환
    ex) {{ value| lower }} -> value를 소문자로 출력
  • template 태그 : html 상에서 파이썬 문법 사용, url 생성 등의 기능 제공 {% tag %} … {% endtag %}
    ex) {% for student in class %} 
             {{ student }}
         {% endfor %}
• Github 배포
  • Code 저장 기능
  • Undo 기능
  • 협업 기능
  • Web Hosting 기능
• Github 사용법
  • echo “# firstproject” >> README.md : readme.md 만들고, #firstproject 작성
  • git init : 현재 디렉토리를 새로운 git 저장소로 초기화
  • git add : 저장할 파일 선택 ->staging area로 올림
  • git commit –m “message” : 주석처럼 message 저장
  • git branch –M main : master branch의 이름을 main으로 변경 -> 새로운 분기점 생성
  • git remote add origin repository주소 : repository 주소를 origin이라는 이름으로 연결
  • git push origin main : main의 내용을 origin에 업로드

 

실습) 단어 개수 세기 웹

왼쪽 home.html의 입력 칸을 통해 문자열을 제출하면 해당 문자열을 띄어쓰기 단위로 나누어 총 단어의 개수와 각 단어가 쓰여진 횟수를 계산해 오른쪽의 result.html에 보여지도록 하는 실습을 진행했다.

위 실습의 코드 작성 순서는 다음과 같다.

1. App 생성하기
   • 터미널에서python manage.py startapp wordCount로 App 생성
   • counter>counter>settings.py의 INSTALLED_APPS 리스트에 'wordCount.apps.WordCountConfig' 추가
2. home.html - Template 생성하기
   • wordCount 폴더 아래 templates 폴더 생성
   • templates 폴더 아래 home.html파일 생성 후 코드 작성

   • <div style="text-align: center">
         <h1>WordCount 페이지입니다.</h1>
         <br>
         <h3>여기에 문장을 입력해 주세요.</h3>
         <form action=''>
             <textarea name="sentence" cols='60' rows='30'></textarea>
             <br>
             <br>
             <input type="submit" value='제출'>
         </form>
     </div>

3. Home - View 생성하기
   • counter>wordCount>views.py에home.html페이지를 render해주는 home 함수 작성

   • def home(request):
         return render(request, "home.html")

4. Home - URL 연결하기
   • counter>counter>urls.py에 views를 import한 후 urlpatterns 리스트에 views.py의 home 함수와 연결되는 path 추가

   • from django.contrib import admin
     from django.urls import path
     from wordCount import views as wc #
     
     urlpatterns = [
         path('admin/', admin.site.urls),
         path('', wc.home, name='wc'), #
     ]
     

5. result.html - Template 생성하기
   • templates 폴더 아래 result.html파일 생성 후 코드 작성
   • veiws.py에서 전달받은 인자 {{fulltext}}, {{count}}, {{wordDict}}

   • <div style="text-align: center">
         <h2>입력한 텍스트 전문</h2>
         <div>
             {{fulltext}}
         </div>
     
         <h3>당신이 입력한 텍스트는 {{count}}개의 단어로 구성되어 있습니다.</h3>
         <div>
             {% for word, totalCount in wordDict %}
                 {{word}}: {{totalCount}}
                 <br>
             {% endfor %}
         </div>
     </div>

6. Result - View 생성하기
   • counter>wordCount>views.py에 result.html페이지를 render해주는 result 함수 작성
   • welcome.html로부터 입력 문자열을 가져와 전체 문자열, 총 단어 수, 단어와 그 등장 횟수가 저장된 dictionary를 각각 'fulltext', 'count', 'wordDict'라는 이름으로 result.html render 시 인자 전달

   • def result(request):
         sentence = request.GET['sentence']
         wordList = sentence.split()
         wordDict={}
     
         for word in wordList:
             if word in wordDict:
                 wordDict[word] += 1
             else:
                 wordDict[word] = 1
     
         return render(request, "result.html", {'fulltext':sentence, 'count':len(wordList), 'wordDict':wordDict.items})

7. Result - URL 연결하기
   • counter>counter>urls.py의 urlpatterns 리스트에 views.py의 result 함수와 연결되는 path 작성

   • urlpatterns = [
         path('admin/', admin.site.urls),
         path('', wc.home, name='wc'), 
         path('result/', wc.result, name="result"), #
     ]

8. home.html 수정
   • home.html에서 input 값(문자열)이 제출되면 'result' url을 통해 result.html로 전달될 수 있도록 form태그의 action 속성을 'result'으로 지정

   • <form action='result'>
         <textarea name="sentence" cols='60' rows='30'></textarea>
         <br>
         <br>
         <input type="submit" value='제출'>
     </form>

전체 실습 코드는 아래 깃허브에서 확인할 수 있다.

https://github.com/J1Yun/likelion/tree/main/3.%20Django/wordCounter

J1Yun/likelion

 

 

Github repository 생성 및 업로드

  나의 Github 계정에 멋사 관련 코드를 저장하는 공간인 likelion repository를 만들고, git 명령어를 사용해서 관련 코드를 모두 업로드 하였다. 이 게시글을 포함해 앞서 공유했던 모든 github 코드는 이때 업로드된 것이다. 앞으로도 나의 멋사 활동을 이 repository에 꾸준히 기록해 놓을 예정이다!😊