Lecture 7
이번 강의에서는 신입생의 기숙사를 등록하는 웹페이지 시스템을 구성하는 예시로 진행한다.
위에서 보여주듯 python에서 웹사이트를 만들때의 상황이며 Flask라는 framework를 사용한다.
Controller라고 칭하는 것은 논리적 코드로 구성이 된 것을 의미하며 View는 좀 더 미적으로 보여주도록 하는 것을 말한다. 다음주에는 SQL등으로 이루어진 Model 파트에 대해 알아본다고 한다.
1997년의 하버드의 기숙사 등록시스템 웹페이지이며 이와 같은 사이트를 한번 구축해보고자 한다.
위와 같이 python을 통해 구성할 수 있지만 결국엔 html 코드를 내재해야 함으로 굉장히 비효율적인 것을 볼 수 있다.
Flask를 사용하면 위와 같이 굉장히 단순화 시킬 수 있음을 알 수 있다. 그리고 flask run이라는 명령어로 서버에 지속적으로 운영할 수 있음을 알 수 있다.
결과는 당연히 동일하게 나오며 어렵지 않게 사이트를 구현할 수 있음을 확인하였다.
또한 name이라는 변수에 인자를 받아 해당 name을 전달해주는 결과를 얻도록 하려면 위와 같이 name=name으로 설정을 하면된다.
그렇다면 저번에 구글검색과 같이 ?name=David로 입력을 하면 hello, David로 결과값이 반환되는 것을 알 수 있다. 물론 name=name으로 입력하면 hello, name으로 출력이 되는 등의 휴먼에러가 발생할 수는 있다.
따라서 name에 default값을 world로 준다면 어렵지 않게 해결할 수 있게 된다.
위에서 지속적으로 rendering했던 index.html이며 여기 body에 hello, {{ name }}으로 인자 전달이 되고 있었는데 만약 변수 name을 foo로 바꾼다면 index.html에서도 hello, {{ foo }}로 변경하면 되는 내용이다.
이제 본격적으로 기숙사 등록 시스템을 만들어본다. 위와 같이 index.html을 구성하고 application.py를 실행을 해보면,
위와 같은 모습으로 초기화면이 작성이 된 것을 알 수 있다. (templates폴더에 index.html 파일을 옮겨야하는 간단한 오류 확인)
현재 submit 버튼이 없으므로 submit 버튼을 만들고 등록할 수 있도록 추가해준다.
Register 버튼까지 활성화 되었고
선택을 할 때 Dormitory라는 것을 초기에 표기만 해주고 밑의 선택지를 선택할 수 있도록 변경하는 모습이다. 여기에 /register이라는 기능을 추가해주면
application.py에서도 /register에 대한 내용을 정의해주면 된다. 이 기능은 submit 버튼을 눌렀을 때 해당 정보를 저장하게 된다. 만약 name or dorm 둘중 하나의 정보가 없으면 failure를 반환하며 정상적으로 입력 시 success.html 페이지로 이동하게 된다.
하지만 해당 상태로 진행해도 계속 failure를 반환하는 데 이는 register를 할 때에는 name, dorm에서 request.args.get으로 전달하는 것이 아닌 request.form.get으로 전달해야 학 때문이다. (이번에는 제대로 동작하는 것을 알 수 있다)
이번에는 index.html이나 success.html이나 똑같이 구조를 가지고 낭비하고 있는 상태에 대해 layout.html로 묶어서 body의 내용만 바꿀 수 있도록 구성할 수 있다. 그렇기 때문에 index.html 파일의 내용은
{% extends "layout.html" %}
{% block body %}
~~~(내용입력)
와 같이 변경된다.
success.html도 위와 같이 변경이 됨을 알 수 있다.
이제는 .append를 통해 students의 정보들을 받으며 {name} from {dorm}의 형태로 저장이 됨을 알 수 있다.
위와 같이 입력을 완료하면 언급한데로 {name} from {dorm}의 형태로 저장이 되는 것을 확인할 수 있었다.
registered.html에서는 Jinja라는 python 하위 기능으로 보면 되는 개념이 도입이 되어 {{ students }}에 해당 정보들을 for문처럼 반복하여 전달해주는 역할을 수행한다.
이번에 좀 더 화려하게 변경된 application.py 코드를 볼 수 있으며 여기서는 SMTP(Simple mail Transfer Protocol)을 활용하여 e-mail로 결과도 전송해주는 기능을 추가한 것을 보았다.
22번째 줄을 보면 smtplib.SMTP함수를 통해 어떤 서버로 전송할 것인지 (여기서는 gmail) 어떤 TCP포트로 보낼 것인지 (관습적으로 587 사용) 23번째 줄은 해당 내용을 암호화하고 24번째 줄에서는 login을 진행하며 25번째에서는 메일을 보낸다.
따라서 위와 같이 이름과 이메일, 기숙사를 선택하고 등록을 하게 되면 이메일이 보내지고 success.html로 전환이 되는 것을 확인 할 수 있다. (실제로 메일이 도착)
다음 단계에서는 csv를 활용하여 저장하고 불러오는 방법에 대해 적용을 하였다. 이의 장점은 서버가 멈추더라도 csv로 저장이 되었기 때문에 백업이 되는 것이다.
16번째 줄에서 registered.csv 파일을 열어 데이터를 append한다는 의미이며 17번째 줄에서 csv에 값을 입력해 넣기 위한 준비과정이고 18번째에서 각각의 열에 해당되는 정보들 name, dorm을 입력한다. 그 후 19번째 줄에서 해당 파일을 닫음으로 저장이 된다.
똑같이 입력하고 see who else is registered라는 링크가 생기며 등록 후 클릭하면
위처럼 등록이 되었음을 알려주며,
제대로 등록이 되었음을 확인 할 수 있음과 동시에
registered.csv 파일에도 정확히 저장이 되었음을 알 수 있다.
하지만 user input에 comma(,)가 포함되어 csv전환에 문제가 생길 여지가 있을 수 있기에 lib를 활용하여 double quotation mark("")로 묶어 csv인식에 오류가 생기지 않도록 한다고 설명한다. 25번째 줄에선 해당 csv 파일을 read 모드로 읽어들여 활용하는 것을 확인할 수 있다.
좀 더 업그레이드를 진행하여 위와 같이 failure 메세지를 띄우는데 이는 javascript를 활용하였다. 이는 서버에 요청하여 정보를 받아오는 것보다 훨씬 빠르다.
개발자 툴에 접근하여 Debugger에 disable javascript를 클릭한다면 위와 같은 메세지는 뜨지 않지만 이를 디펜스하기 위하여 작성한 failure.html로 화면전환이 되는 것을 확인할 수 있다. 이처럼 UX(User eXperience)를 통해 어떠한 상황에도 제대로 작동할 수 있도록 구성하는 것이 중요하다.
위는 Bootstrap사이트로 무료 CSS를 배포하는 곳으로 유명하다.
다시 javascript로 메세지를 띄우는 기능에 대해 살펴보기 위해 index.html 파일로 이동하여
아래 쪽을 보면 위의 내용이 추가된 것을 볼 수 있다. querySelector를 통해 name이나 dorm이 제대로 입력되지 않은 상태에서 제출이되었을 경우 false를 반환하며 그 이외에는 true값을 주는 것을 알 수 있다.
clients-side code로 보았을 때 동일하게 같은 기능을하는 부분이다.
이번에는 단어들을 검색하는 시스템에 대해 꾸며보는 시간을 갖는다. 14000개의 단어에 어떤방식으로 접근하여 어떻게 결과값을 반환하는지 확인할 수 있다.
마찬가지로 application.py를 통해 코드를 들여다 보면 WORDS라는 전역변수를 먼저 선언하며 한줄씩 읽어들이는 for문을 활용하여 WORDS에 하나씩 append한다.
이번에도 search를 통해 검색기능을 가지도록 하며 현재 autofocus를 검색쿼리로 맞춘 것을 알 수 있다.
layout.html에서도 특이한 점은 없는 것같지만 5번째 줄에서 보이는 것처럼 모바일환경같이 작은 화면에서 적응이 잘 되도록 꾸며진 것을 알 수 있다.
중간에 pythonic code에 대한 대표적인 예시가 나오는 데 24번째 줄의 내용이 18~22번째 줄을 한줄로 표현한 것이다. 여기서 python이 굉장히 효율적으로 작동할 수 있음을 알 수 있다.
이번에는 조금 더 기능을 확장하는데 글자를 입력하자마자 autocomplete를 통해 사용자가 찾고자 하는 단어를 좀 더 효과적을 찾을 수 있게 도와주는 기능이다. 개발자툴에서 Network tap을 확인하면 글자를 입력하자마자 서버에 응답이 돌아오는 것을 확인 할 수 있다.
이에 대해 clients-side code를 살펴보면 위처럼 script가 추가되어 있는 것을 알 수 있으며 여기서 17번째 줄부터의 내용은 저번주에 보았던 html tree 구조로 구성되어 있다고 한다.
18번째 줄에서 키가 입력이 되는 순간 함수가 동작을 하며 다음 줄을 보면 이전에 서버에 정보를 요청하는 내용과 같은 구조로 구성이 된 것을 알 수 있다. (/search?q=~~)
다시 첫 페이지로 돌아가서 입력값이 없을 때는 Elements tap에 ul tag 내에서 아무런 내용이 없는 것을 볼 수 있지만 값이 들어서면 바로 ul tag 내에 내용이 변경되는 것을 알 수 있다.
ul tag 내에 li tag로 해당 내용들이 차있는 것을 확인할 수 있다.
이는 Jinja format이며 위와 같이 search.html이 꾸며져 있기 때문에 작동하는 것이며 이는 다른 방면으로 보면 굉장히 메모리 낭비가 될 수 있는 면이 있다. 따라서 list에 값들을 담는 방식으로 변경하고자 하면
이처럼 메모리낭비를 훨씬 절감하며 동일한 결과를 낼 수 있게 된다.
추가적으로 flask내의 jsonify라는 기능을 포함하여 더욱 화려하게 변화시키는 모습이며 large.js의 내용을 보게 되면 해당 14000개의 단어를 모두 저장하여 동작하는 것이며 좀 더 빠르게 반응한다고 한다.
19번째 줄부터 볼 수 있는 것처럼 동일하게 for문을 통해 매칭되는 단어들을 찾아 li tag 사이에 위치시켜서 ul tag내의 내용을 변경하고 해당 html을 반환시키는 것을 확인할 수 있다.
위의 내용을 기반으로 페이지를 활성화했을 때 network tap에 보이는 것처럼 더 이상의 트래픽이 걸리지 않는 것을 확인할 수 있으며 이는 json을 통해 이미 local page에 정보가 담겨있기 때문이다.
이번 강의에서는 신입생의 기숙사를 등록하는 웹페이지 시스템을 구성하는 예시로 진행한다.
위에서 보여주듯 python에서 웹사이트를 만들때의 상황이며 Flask라는 framework를 사용한다.
Controller라고 칭하는 것은 논리적 코드로 구성이 된 것을 의미하며 View는 좀 더 미적으로 보여주도록 하는 것을 말한다. 다음주에는 SQL등으로 이루어진 Model 파트에 대해 알아본다고 한다.
1997년의 하버드의 기숙사 등록시스템 웹페이지이며 이와 같은 사이트를 한번 구축해보고자 한다.
위와 같이 python을 통해 구성할 수 있지만 결국엔 html 코드를 내재해야 함으로 굉장히 비효율적인 것을 볼 수 있다.
Flask를 사용하면 위와 같이 굉장히 단순화 시킬 수 있음을 알 수 있다. 그리고 flask run이라는 명령어로 서버에 지속적으로 운영할 수 있음을 알 수 있다.
결과는 당연히 동일하게 나오며 어렵지 않게 사이트를 구현할 수 있음을 확인하였다.
또한 name이라는 변수에 인자를 받아 해당 name을 전달해주는 결과를 얻도록 하려면 위와 같이 name=name으로 설정을 하면된다.
그렇다면 저번에 구글검색과 같이 ?name=David로 입력을 하면 hello, David로 결과값이 반환되는 것을 알 수 있다. 물론 name=name으로 입력하면 hello, name으로 출력이 되는 등의 휴먼에러가 발생할 수는 있다.
따라서 name에 default값을 world로 준다면 어렵지 않게 해결할 수 있게 된다.
위에서 지속적으로 rendering했던 index.html이며 여기 body에 hello, {{ name }}으로 인자 전달이 되고 있었는데 만약 변수 name을 foo로 바꾼다면 index.html에서도 hello, {{ foo }}로 변경하면 되는 내용이다.
이제 본격적으로 기숙사 등록 시스템을 만들어본다. 위와 같이 index.html을 구성하고 application.py를 실행을 해보면,
위와 같은 모습으로 초기화면이 작성이 된 것을 알 수 있다. (templates폴더에 index.html 파일을 옮겨야하는 간단한 오류 확인)
현재 submit 버튼이 없으므로 submit 버튼을 만들고 등록할 수 있도록 추가해준다.
Register 버튼까지 활성화 되었고
선택을 할 때 Dormitory라는 것을 초기에 표기만 해주고 밑의 선택지를 선택할 수 있도록 변경하는 모습이다. 여기에 /register이라는 기능을 추가해주면
application.py에서도 /register에 대한 내용을 정의해주면 된다. 이 기능은 submit 버튼을 눌렀을 때 해당 정보를 저장하게 된다. 만약 name or dorm 둘중 하나의 정보가 없으면 failure를 반환하며 정상적으로 입력 시 success.html 페이지로 이동하게 된다.
하지만 해당 상태로 진행해도 계속 failure를 반환하는 데 이는 register를 할 때에는 name, dorm에서 request.args.get으로 전달하는 것이 아닌 request.form.get으로 전달해야 학 때문이다. (이번에는 제대로 동작하는 것을 알 수 있다)
이번에는 index.html이나 success.html이나 똑같이 구조를 가지고 낭비하고 있는 상태에 대해 layout.html로 묶어서 body의 내용만 바꿀 수 있도록 구성할 수 있다. 그렇기 때문에 index.html 파일의 내용은
{% extends "layout.html" %}
{% block body %}
~~~(내용입력)
와 같이 변경된다.
success.html도 위와 같이 변경이 됨을 알 수 있다.
이제는 .append를 통해 students의 정보들을 받으며 {name} from {dorm}의 형태로 저장이 됨을 알 수 있다.
위와 같이 입력을 완료하면 언급한데로 {name} from {dorm}의 형태로 저장이 되는 것을 확인할 수 있었다.
registered.html에서는 Jinja라는 python 하위 기능으로 보면 되는 개념이 도입이 되어 {{ students }}에 해당 정보들을 for문처럼 반복하여 전달해주는 역할을 수행한다.
이번에 좀 더 화려하게 변경된 application.py 코드를 볼 수 있으며 여기서는 SMTP(Simple mail Transfer Protocol)을 활용하여 e-mail로 결과도 전송해주는 기능을 추가한 것을 보았다.
22번째 줄을 보면 smtplib.SMTP함수를 통해 어떤 서버로 전송할 것인지 (여기서는 gmail) 어떤 TCP포트로 보낼 것인지 (관습적으로 587 사용) 23번째 줄은 해당 내용을 암호화하고 24번째 줄에서는 login을 진행하며 25번째에서는 메일을 보낸다.
따라서 위와 같이 이름과 이메일, 기숙사를 선택하고 등록을 하게 되면 이메일이 보내지고 success.html로 전환이 되는 것을 확인 할 수 있다. (실제로 메일이 도착)
다음 단계에서는 csv를 활용하여 저장하고 불러오는 방법에 대해 적용을 하였다. 이의 장점은 서버가 멈추더라도 csv로 저장이 되었기 때문에 백업이 되는 것이다.
16번째 줄에서 registered.csv 파일을 열어 데이터를 append한다는 의미이며 17번째 줄에서 csv에 값을 입력해 넣기 위한 준비과정이고 18번째에서 각각의 열에 해당되는 정보들 name, dorm을 입력한다. 그 후 19번째 줄에서 해당 파일을 닫음으로 저장이 된다.
똑같이 입력하고 see who else is registered라는 링크가 생기며 등록 후 클릭하면
위처럼 등록이 되었음을 알려주며,
제대로 등록이 되었음을 확인 할 수 있음과 동시에
registered.csv 파일에도 정확히 저장이 되었음을 알 수 있다.
하지만 user input에 comma(,)가 포함되어 csv전환에 문제가 생길 여지가 있을 수 있기에 lib를 활용하여 double quotation mark("")로 묶어 csv인식에 오류가 생기지 않도록 한다고 설명한다. 25번째 줄에선 해당 csv 파일을 read 모드로 읽어들여 활용하는 것을 확인할 수 있다.
좀 더 업그레이드를 진행하여 위와 같이 failure 메세지를 띄우는데 이는 javascript를 활용하였다. 이는 서버에 요청하여 정보를 받아오는 것보다 훨씬 빠르다.
개발자 툴에 접근하여 Debugger에 disable javascript를 클릭한다면 위와 같은 메세지는 뜨지 않지만 이를 디펜스하기 위하여 작성한 failure.html로 화면전환이 되는 것을 확인할 수 있다. 이처럼 UX(User eXperience)를 통해 어떠한 상황에도 제대로 작동할 수 있도록 구성하는 것이 중요하다.
위는 Bootstrap사이트로 무료 CSS를 배포하는 곳으로 유명하다.
다시 javascript로 메세지를 띄우는 기능에 대해 살펴보기 위해 index.html 파일로 이동하여
아래 쪽을 보면 위의 내용이 추가된 것을 볼 수 있다. querySelector를 통해 name이나 dorm이 제대로 입력되지 않은 상태에서 제출이되었을 경우 false를 반환하며 그 이외에는 true값을 주는 것을 알 수 있다.
clients-side code로 보았을 때 동일하게 같은 기능을하는 부분이다.
이번에는 단어들을 검색하는 시스템에 대해 꾸며보는 시간을 갖는다. 14000개의 단어에 어떤방식으로 접근하여 어떻게 결과값을 반환하는지 확인할 수 있다.
마찬가지로 application.py를 통해 코드를 들여다 보면 WORDS라는 전역변수를 먼저 선언하며 한줄씩 읽어들이는 for문을 활용하여 WORDS에 하나씩 append한다.
이번에도 search를 통해 검색기능을 가지도록 하며 현재 autofocus를 검색쿼리로 맞춘 것을 알 수 있다.
layout.html에서도 특이한 점은 없는 것같지만 5번째 줄에서 보이는 것처럼 모바일환경같이 작은 화면에서 적응이 잘 되도록 꾸며진 것을 알 수 있다.
중간에 pythonic code에 대한 대표적인 예시가 나오는 데 24번째 줄의 내용이 18~22번째 줄을 한줄로 표현한 것이다. 여기서 python이 굉장히 효율적으로 작동할 수 있음을 알 수 있다.
이번에는 조금 더 기능을 확장하는데 글자를 입력하자마자 autocomplete를 통해 사용자가 찾고자 하는 단어를 좀 더 효과적을 찾을 수 있게 도와주는 기능이다. 개발자툴에서 Network tap을 확인하면 글자를 입력하자마자 서버에 응답이 돌아오는 것을 확인 할 수 있다.
이에 대해 clients-side code를 살펴보면 위처럼 script가 추가되어 있는 것을 알 수 있으며 여기서 17번째 줄부터의 내용은 저번주에 보았던 html tree 구조로 구성되어 있다고 한다.
18번째 줄에서 키가 입력이 되는 순간 함수가 동작을 하며 다음 줄을 보면 이전에 서버에 정보를 요청하는 내용과 같은 구조로 구성이 된 것을 알 수 있다. (/search?q=~~)
다시 첫 페이지로 돌아가서 입력값이 없을 때는 Elements tap에 ul tag 내에서 아무런 내용이 없는 것을 볼 수 있지만 값이 들어서면 바로 ul tag 내에 내용이 변경되는 것을 알 수 있다.
ul tag 내에 li tag로 해당 내용들이 차있는 것을 확인할 수 있다.
이는 Jinja format이며 위와 같이 search.html이 꾸며져 있기 때문에 작동하는 것이며 이는 다른 방면으로 보면 굉장히 메모리 낭비가 될 수 있는 면이 있다. 따라서 list에 값들을 담는 방식으로 변경하고자 하면
이처럼 메모리낭비를 훨씬 절감하며 동일한 결과를 낼 수 있게 된다.
추가적으로 flask내의 jsonify라는 기능을 포함하여 더욱 화려하게 변화시키는 모습이며 large.js의 내용을 보게 되면 해당 14000개의 단어를 모두 저장하여 동작하는 것이며 좀 더 빠르게 반응한다고 한다.
19번째 줄부터 볼 수 있는 것처럼 동일하게 for문을 통해 매칭되는 단어들을 찾아 li tag 사이에 위치시켜서 ul tag내의 내용을 변경하고 해당 html을 반환시키는 것을 확인할 수 있다.
위의 내용을 기반으로 페이지를 활성화했을 때 network tap에 보이는 것처럼 더 이상의 트래픽이 걸리지 않는 것을 확인할 수 있으며 이는 json을 통해 이미 local page에 정보가 담겨있기 때문이다.
댓글
댓글 쓰기