학습내용
오늘은 일지를 적기에 앞서 적을 내용이 없음을 알린다. 왜냐하면 나에게 너무 어려웠던 내용이라 적을 내용이 많이 없다. 수업이 끝났더니 머리가 아플지경이다. 그저 강사님의 코드를 따라적으며 중간중간 아는것만 써보겠다. 이걸 읽게될 미래의 나는 놀라지 말자.
이 코드는 Flask를 이용하여 웹서버를 만든 코드다. visual code 프로그램의 Teminal 창을 열어서 거기에 pip3 install flask를 입력한다. 그럼 플라스크 프로그램이 다운로드된다(지난 실습에서 pandas를 다운로드한 방법과 동일).
이후 Flask 사이트에서 quickstart 배너를 누르고 Minimal application이라는 문구가 나오고 아래에 코드가 나온다. 코드를 카피한 후 새 파이썬 파일을 생성 후 붙여넣기 한다. 이 코드를 실행시키기위해 사이트에 소개된 코드가 아닌 강사님이 알고계신 간단한 코드를 알려주셨다. 그게 9번줄의 app.run()이다. 그리고 터미널에서 파일을 실행시킨다.
그럼 이런 문구가 출력된다. warning 적혀있어서 실패한줄 알고 황급히 봤는데 실패한건 아니었다. ctrl+click 으로 출력결과의 마지막줄에 ip를 누르니 hello world가 나오는 웹페이지가 떴다. 그냥 html로 작성해서 hello world 적으면 될걸 뭐이렇게 어렵게 하나 싶었는데, 강사님이 우리가 방금 한게 웹서버를 만든 코드라고 하셨다. Flask를 다운해서 flask의 부품을 이용해 간단한 코드로 웹서버를 만든것이다. flask가 아니었다면 엄청 긴 코드로 작성해야했다고 한다. 나는 이때도 flask사이트를 헤메고 간신히 찾아 코드를 작성 후 실행했다.
그리고 재밌는걸 가르쳐주신다며 어떤 사이트를 가르쳐주셨는데, Glitch라는 사이트를 가르쳐주셨다.
여기서 flask를 검색해 remix your own을 클릭하면 내 입맛대로 코드를 변경할 수 있다. 나는 이 사이트가 너무도 싫다. 지금도 싫다.
이 사이트의 오류때문에 수업도 다 놓치고 수업을 듣는 Microsoft teams도 다시깔고, 하루종일 코드도 보여주지않고 로딩창만 띄워대는 행패에 못이겨 점심시간에 다시 깔고 컴퓨터도 다시켜고...여기까지만 하겠다. 흑흑
하여튼 glitch에 접속해서 sign in 한 다음 flask를 검색하고 뜨는걸 눌러서 remix your own을 누르면 수정이 가능하게 된다. 그리고
왼쪽에 이런 리스트가 있는데, 여기서 start.sh를 클릭하면
이런 코드가 나온다. 2번줄의 python3는 나에게 python3가 필요하기 때문에 3을 붙인것이다. 그렇게 해 python3로 server.py를 이용하겠다는 내용의 2번줄이 되는것. 우린 python3코드를 작성하면 된다.
사이트 아래에 이런 아이콘들이 있는데, 아는것만 설명하자면 status는 이 코드가 정상일땐 저렇게 환하게 웃고있고, 뭔가 잘못되었을때는 얼굴이 화난표정으로 바뀐다. 성질이 괴팍한가보다.
preview를 누르면 open preview pane, open in the new window라는게 나온다. 후자의 문구를 누르면 저 코드의 실행창을 윈도우창으로 따로 볼 수 있다. open preview pane이라는걸 누르면 코드 에디터 오른쪽에 간략히 실행화면을 볼 수있게 작은 창이 나온다.
이러한 코드로 랜덤한 수를 출력하는 페이지를 작성한다. 그리고 그 페이지에서 페이지 소스코드를 확인하면
이렇게 나온다. 여기에 python 문법은 없다. 왜일까?
먼저 우측의 Server.py를 실행시키면 프로세스가 실행이 된다. 그걸 As(application server)라고 부른다.
웹서버에서 요청이 들어오면 As가 server.py에 적힌대로 Html코드를 생성한다. 그리고 As가 Wb(web server)에 생성한 html 코드를 보내준다. 이 때문에 페이지 소스코드에선 python문법이 보이지 않는것.
Wb입장에서는 html,css,js만 알고있다. 받은코드가 html이기 때문이다. python으로 작성한줄은 모른다고한다.
User 입장에선 시각적으로 보이는 UI는 전부 html,css,js만 보인다.
사용자 입장에서 front에 있다.
이것을 Front end라고 부른다.
반대로 Wb너머에 있는, 서버 안에서 동작하는 기술을 Back end라고 한다(php,nodejs,java등 경쟁관계의 기술들이 있다고 한다)
front end를 부르는 또 다른 표현은 client(user)에 있다고 해서 client side.
back end를 부르는 또 다른 표현은
Server측에 있다고 하여 Server Side라고 한다.
front end engineer들은 유저의 눈에 보이는것들을 다루는 일을 하고
back end engineer들은 Server side쪽의 일을 한다.
이걸 둘 다 하는 엔지니어를 Full stack engineer라고 한다. 라고 강사님이 말씀해 주셨다.
우리가 하는 코딩, flask들은 web framework 라고한다. 뼈대를 설치하는 일이라고 생각하면 된다.
우리가 만드는 application은 왼쪽의 create,read,update,delete 기능을 구현하는게 목표다.
이 앱을 완성하여 주소를 확인하면 끝에 /create이런식으로 붙는다. 이게 일종의 입력값이 된다.
네개 각각의 기능마다 Url이 있을것이다.
오른쪽의 그림처럼 각각의 담당자가 있는데, 각각의 기능을 각 담당자에 맞게 교통정리 해주고 연결해주는 것을 Routing 이라고 한다.
그리고 이런 연결,정리를 도와주는 장비를 Router라고 한다.
3/30 08:44 수정
위에서 이야기한것을 바탕으로 이야기 하자면 30번줄은 route("/")는 경로 없이 그냥 들어왔을때를 이야기한다. 이때 담당자를 index로 지정한다(어떤 문자든 상관없음 다만 알아듣기 쉬운걸로 쓰는게 좋다). 경로없이 들어오면 index함수가 return한 값이 응답되는것이다.
같은 원리로 아래 사진의 45번,57번 줄 또한 @app.XXXX('/nnn')이라는 경로로 들어왔을때 def로 aaa라는 함수를 지정하고 return에 지정한bbb를 받아 출력한다.
ex)
@app.XXX('/nnn')
def aaa():
return 'bbb'
다음, 위쪽 5번줄을 보면 topics라는 배열이 안에 element로 배열들이 3개 지정되어 있는것을 볼 수 있다. 자세히보면 실습할때 html을 누르면 html is...라고 뜨던 그 문자들을 배열로 지정한 것이다. 배열 안의 element를 구성하는 배열들은 중괄호로 되어있다. 사전형(dictionary)이라고 해서 배열을 빼서 쓰기좋게 열거하는 것이다.
12번줄은 Litags라는 변수를 하나 만든것이다. 이전 html실습을 할땐 li * 3 으로 li를 하나하나 만들어 리스트를 작성했는데, Litags는 일일히 코딩할 필요 없이 한줄로 작성하기 위해 만든것.
그렇게 litags 변수를 지정하고.
for in문을 사용해서 topics안의 데이터를 하나하나 꺼내는것이다. 꺼낼게 없을때 까지! 그래야 작성한 배열안의 리스트가 다 만들어 지기 때문.
Litags에 f를 넣어 데이터를 넣어주기 위해 f를 써서 f'<엘아이>'(코드가 실행돼서 한글로 표기)로시작하여 코드를 적는다.
topic안의 id,title은 밖에서 작은따옴표를 썼기 때문에 큰따옴표를 쓴것.
또 Litags 안에 Litags+가 들어있는 이유는, 이렇게 적지 않으면 Litags가 하나만 적히고, 그 한개가 계속 덮어쓰기 되어 출력되어 결국 하나만 나오기 때문에, 이전에 작성한Litag에 +해서 적는것이다.
Litag안에 출력으로 topic의 id와 title을 출력되게 만들었다. 꺼낼때 없을 때 까지.
그렇기 때문에 topics 안에 있는 html, css, js에 해당하는 데이터들이 차례대로 리스트를 작성하면 코드는 끝난다.(아래 결과물 1,2번사진)
/create를 직접 주소에 기입하여 접속하면,
함수에 지정된 route()가 return한 값이 웹브라우저로 응답이 되어 create가 웹페이지에 뜬다.
update도 마찬가지.
글을 작성해 서버로 데이터를 전송하는 UI를 제작하는 코드가 45번부터 54번 까지.
그리고 create함수를 지정해주고 내용을 만들어준다. title과 body라는 글상자를 만들어주는 코드, 그리고 submit 버튼을 제작한다.
placeholder는 텍스트상자 안에 title이라는 가이드 문구(우리가 글을 적으면 삭제되는 회색 문구)가 작성된다. 여기가 title이다 이런뜻이다. - 아래의(3번)결과사진
textarea로 여러줄의 글을 작성할 수 있는 텍스트상자도 만들고, 옆으로 나열된 title과 body 텍스트상자를 세로로 가지런히 정리하기위해 앞 뒤에다 p태그를 앞뒤로 붙여준것이다.
만들어 놓은 이것들의 데이터를 어디로 전송할것인가? 를 지정해주는것이 content 안의 큰 태그 form태그다. 저 form action에 구글 사이트를 지정하면 텍스트박스 안에 입력되어있는 데이터가 구글로 넘어가 구글에서 검색을 해주는 셈이 되는거다.
title 박스를 구글에 검색하는 기능으로 주고싶으면, title을 작성한 구글 태그에 name을 "q"로 주는것이다. q라는 이름을가진 데이터가 form이 가리키는 주소로 입력되는 것이 원리, 만든 서버로 데이터를 전송할때는 title의 name을 title로 주고, body의 name은 body로 준다. 구글이 아닌 내가 만든 create 페이지로 전송을 하기위해 form에 create를 지정하고 저장한다. 그러면 create를 하고난 뒤 사이트 주소 끝에는 /name이 q인 title 텍스트박스에 입력한 값과 & body 텍스트박스안에 입력한 값이 출력된다. title에 1234를 입력하고, body에 abcd를 입력하여 create 하면아래 (4번) 결과물 사진처럼 나온다.
ex)/?q=1234&body=abcd
이러한 코드로 나온 결과물
(↑1번)
(↑2번)Css목록을 누르면 나오는 결과
(↑3번)
위에 기술한 대로 title에 1234 body에 abcd를 적어 submit(create)하면
(↑4번) 이렇게 출력이 되는것이다.
다음과 같이 웹 주소 끝에 ?q=1234&body=abcd로 나오는걸 확인할 수 있음
어려웠던점
glitch 사이트가 flask 코드를 불러오질 않아 오전수업 후반부를 다 놓쳤다. 이게 원인인지 이상하게 microsoft teams 프로그램도 먹통이라 점심시간을 다 버리고 삭제하고 다시깔고 코드 받아 적고... 수업도 못따라가서 멘탈이 가루가 되어 날아갔지만 조금이나마 들어보겠다고 들리는것만 들었다. 끝날때 까진 끝난게 아니라는 관장님의 말씀이 생각난 하루였다.
해결방법
운동하고 개운하게 경건한 마음으로 다시 앉아서 금일 수업 영상기록을 다시 들었다.
강사님의 친절한 목소리와 눈높이 설명은 지능이 못생긴 나에게 안성맞춤이라 너무도 다행이라는 생각을 했다. 강사님 최고에요
학습소감
블록처럼 쌓아나가는 지식이지만
다시금 개발자들이 대단하다고 생각하고
이걸 만든 사람들도 대단하다고 느낀다.
강사님도 대단하시고, 같이 수업을 듣는 많은 분들도 숙련자가 아닌 분들은 오늘 수업이 많이 힘들었으리라 생각한다. 하지만 해야한다.
그리고 내가 잘해도 프로그램이 말썽이라면..곤란할 수 있다는걸 느꼈다.
