[내일배움단] 웹개발 종합반 4주차 (feat. 스파르타코딩클럽)

드디어 4주차의 고지도 넘었다.

 

영화를 몰아보러 다니느라 강의 듣는 속도가 느렸는데, 

어차피 다 들을 거니까^^ 

 

점점 더 내용이 어려워 진다고 생각했는데, 그건 아닌 거 같다.

지난번에 했던 것도 기억이 잘 안나서 ... 

바로바로 이어서 하지 못한 내 죄가 크다 ..ㅎ 

 

이번 주는 서버를 만든다. 

먼저 폴더를 만들어서, 파이참을 열고 새 프로젝트를 그 만든 폴더 안에 만들자. 

새프로젝트 생성법은 지난주차의 내용을 참고하자. 

프로젝트가 생성되었으면, 설정 즉 맥에서는 preferences에 들어가서 인터프리터를 켠 뒤 +를 눌러 

“Flask” 패키지를 설치해준다. 

 

서버를 만드는 패키지라고 한다. 

프레임워크라고 한다. 

 

그리고 파이썬 파일을 만든다.

이름은 반드시  app.py로 해야 한다. (뒤에 설명이 나온다. )

그런다음 스파르타코딩클럽에서 제공받은 코드를 넣고 실행을 해보았는데, 

오류가 났다.

맥북의 경우에는 시스템 환경설정 - 공유 폴더에 들어가서 airplay수신모드 체크를 해제해주어야 한다. 

 

 

윈도우와 맥은 달라서 초기에 세팅해줄때 계속 오류가 나는 듯 하다.

 

그런 다음 코드를 다시 실행시키고 

크롬 창에 localhost:5000을 쳐보면 

This is home! 이라는 문구가 뜨는 페이지가 보인다. 

mypage로 다 고쳤으므로 주소창에 /mypage 해주면 된다.

그러면 또 다른 페이지가 만들어진다. 

여기서 빨갛게 뜨는건 오류가 아니다

페이지를 여러 개 만들 수 있겠다는 희망을 주는 느낌 ㅋㅋㅋ

페이지가 늘어날때마다 웹주소도 늘어나는건가..

다음 주차 때 도메인을 연결해본다는데 두근두근 

 

이렇게 페이지를 두 개 만들었다. 매우 쉽고 간단해 보이는 구조이다. 아직까지는…

여기서 몇 가지 손을 보면 다른 사람도 접속해서 볼 수 있는 서버를 구축하게 된다고 한다. 

 

두근두근..

 

flask프레임워크의 룰을 따라서 세팅을 해보도록 하자.

기본 폴더 구조가 있으니, 그대로 따라 해 본다.

우선 폴더를 또 만들어 주어야 한다.

templates 폴더 ( html 파일용) 

static 폴더 (css, 이미지 파일용)

app.py 파일 - 이건 이미 시작할 때 만들었다. 

 

스펠링이 틀리지 않도록 유의해야 한다.

맥도  경로가 다르지 않지만 한글버젼이라..

파일 위에오른쪽 마우스버튼 클릭후 새로만들기로 들어가서 directory 혹은 경로로 들어가 폴더명을 써준다. 

현재 단계에서는 주로 templates만 쓸것이다. 

그렇다면, 이 부분에 html을 쭉 작성하면 되지 않을까 라는 생각이 들겠지만; 

그럴 수가없다. 그래서 templates폴더에html 파일을만들어서 연동을 시켜주도록 한다. 

 

내가 만든 파일을 내 컴퓨터에서 불러와서 봐도 되지만, localhost:5000은 서버에서 남들도 볼수 있도록 쏴준것이기 때문에 기존 html 파일 옆 아이콘으로 켜서 확인하는 것과는 차이가 있다. 

 

이제는 html 파일을 확인하는 것이 아니라 서버를 구축해 가는 것이기 때문에, 

아이콘을 눌러서 확인하지 않을 것이다. 서버를 통해서 확인하도록 하자 

 

API를 만들어보자! 

 

Get 방식 - 데이터 조회할 때

Post 방식 - 데이터 추가, 변경, 삭제할 때 쓴다. 

 

프론트엔드 - html

백엔드 - flask 서버 

 

JQuery 임포트를 먼저 하자. 코드 스니펫 복붙 

 

함수 ㅎㅎ

 

<title> 하단에 붙여넣어주고 그 밑에 또 <script>를 만들어서 ajax 코드스니펫을 복붙. 

이때 cmd option L로 줄 맞춤해주자 (맥) 

Test라는 창구에 가는데, title give라는 이름으로 봄날은 간다는 데이터를 가지고 간다는 의미이다. 

잘 된다면, 다시 네가 주는 데이터를 콘솔에다 찍어보겠다는 의미. 

 

하단에 썼던 <button>에도 onclick=“hey()”를 넣어서 버튼을 누르면 함수가 실행될수 있도록 만들자.

 

 

onclick 오타 나지 않게 조심

 

창구를 만드는 방법은 app.py에 코드스니펫 복붙..

복붙 너무 좋다..

 

그다음에 render_template 옆에 request, jsonify를 써준다. 

 

위의 코드는 외워서 쓴다기보다는 예전에 했던 것들에서 복사를 해와서 쓰는 것이라고.. 

 

하지만 어떻게 작동되는 코드인지 봐 두는 것은 중요하다. 

 

title_give라고 하는 이름에서 무언가를 받아와서 title_receive라는 변수에 넣었고, 

Print 해줬다는 뜻이다. 찍어줬다. 

/test라는 창구에서 그것을 받고 있다. 

 

제대로 작동하는지 여부를 확인하기 위해서 웹사이트로 가서, 오른쪽 마우스 버튼- 검사- 콘솔 창을 연채로

웹사이트 내에 있는 버튼을 만들자 라는 버튼을 클릭하면, msg: 이 요청은 GET!  Result : success라고 떠야 한다.

콘솔창을 통해서 제대로 작동하는지 확인하는 작업은 필요하다

 

이번에는 post 방식을 한번 살펴보자 

 

index.html에 post 요청 확인 코드스니펫을 붙여 넣고 줄을 맞춰주자 

오랜만에 보는 ajax. 구조가 눈에 익어야 한다

 

 

Get 요청에서 데이터를 가져갈 일은 많이 없고 post 요청에서 많이 가져가게 될 것이다. 

 

/test에서 title_give:봄날은 간다를 가져간다는 뜻이다. 

 

그다음 app.py에 post 요청 api 코드를 붙여넣기 해줬다. 

 

서버를 세팅할수 있다.

 

이번에는 삭제하지 않고, 바로 이어서 붙여줬다. 

/test라는 창구를 만들었고, 그 창구에서는 post 만 받는 것은 이쪽으로 와라.. 

… 흠…

 

이 요청은 post를 요청을 잘 받았어요로 고치고 제대로 잘 작동하는지 콘솔창을 통해 확인해본다. 

 

잘 연결되었다!

 

파이참 하단에는 봄날은 간다 라고 찍힌다. 

 

파이참 출력화면

 

이 전체 과정을 쭉 서술해보자면, 

 

버튼을 누르면, html 쪽hey()가 작동해서, ajax 요청을 했다. /test 창구에 post 요청으로.

그랬더니 app.py 쪽 /test에 post가 있는 구간이 발동되면서, 

title_give를 가지고 왔는지 확인한다. 

html 쪽에 보면 title_give값으로 ‘봄날은 간다’라고 써줬는데 그것을 가져왔다. 

그걸 변수에다 저장해서 한번 찍어봤더니 파이참 하단에 봄날은 간다라고 찍혔다. 

정상적으로 봄날은 간다가 찍혔다는 건 난 일을 다했으니 너에게 데이터를 돌려주겠다며, 

    "msg": "요청을 잘 받았어요!",

    "result": "success" 

라는 response를 돌려주는데, 이게 html 쪽 console.log에서 작동되면서  콘솔창에 

저런 메시지가 뜨게 되는 것이다. 

 

마지막으로 한가지 더 해보면,

이 구조도 익숙해져야 한다

 

Return jsonify({Key value key value}) 로 되어있는데, 

html로 가서, response 옆에 [‘msg’]만 찍어본다면? 

 

msg인 요청을 잘 받았어요! 만 뜨게 된다

강사님도 이 부분이 코딩 공부를 할 때 가장 헷갈리는 부분이라고 한다. 

네 번의연습을 통해 숙달해가도록 하자. 

이번 주는 세 개. 

화성 땅 공동구매, 스파르타피디아, 팬명록 완성 과제까지

 

화성땅 공동구매와 팬명록은 유사한 형태로 구현하는 기능이 같았다. 

스파르타피디아의 경우 네이버 영화를 크롤링해와서 띄워줘야 하기 때문에 크롤링의 과정이 더 들어갔다. 

 

화성 땅 공동 구매와 팬명록은, 

유저가 사이트에 비어있는 칸을 채워주면, 

그 데이터가 mongoDB로 전송되어 저장되고,

곧이어 사이트 하단에 내용을 출력해주는 기능을 구현해야 한다. 

 

각 프로젝트 별로 세팅을 하기 위해서는 경로 폴더를 만들어서 패키지가 각 프로젝트마다 저장될 수 있게 한다. 

화성 땅 공동 구매는 mars라는 폴더를 만들었고,  스파르타피디아는 movie, 팬명록은 과제니까 homework 폴더를 만들었다.

 

폴더가 만들어졌으면, 파이참에서 새 프로젝트를 만들어준다. 폴더 지정을 잘해줘야 되고, venv가 잘 들어와 있는지, 파이썬 버전은 맞는지 확인한 후에 main.py 실행 체크 해제해준 다음 프로젝트를 열어준다. 

 

그다음에 바로 프로젝트 폴더에 오른쪽 마우스 클릭해서, 새폴더를 만들어준다. static, templates

새로운 파이썬 파일도 만들어준다. app.py라는 이름으로. 

templates폴더 안에 index.html 파일도 만들어준다.

 

그리고 설정으로 들어가서 프로젝트에 인터프리터를 열어서 필요한 패키지를 꼭 설치해준다. 

flask, pymongo, dnspython, /certifi(mac m1칩 쓰는 사람) / requests(크롤링을 할 거라면..) , bs4 (크롤링을 할 거니까..) 

 

처음에는 서버를 작성하고 (app.py) 경로지정 파트인 거 같다. 

그다음에 클라이언트 (html)을 작성한다. 여기서는 함수가 쓰이고 ajax를 통해서 구현해달라는 요청을 한다. 

항상 alert이나 console.log로 코드가 잘 작동되는지를 먼저 파악해야 한다. 

 

스파르타피디아 프로젝트를 하기 전에는 조각 기능이라고 해서 기능 구현이 잘 되는지를 먼저 테스트 한 다음에 

프로젝트를 시작했다. 

조각기능 구현이 프로젝트의 핵심이기 때문에 그게 실행되지 않으면... 

 

스파르타피디아에서는 크롤링이 메인 기능이었으므로 사이트를 제대로 긁어오는지가 중요했고, 

전에 과제로 했던 지니뮤직 크롤링과는 방법이 조금 달랐기 때문에 이건 다시 한번 복습이 필요할 것 같다.

이번에는 다음으로 해볼까... 

 

길게 쓴 노트를 복붙 하고 싶지만, 기본적인걸 위에서 설명했고, 계속 반복하는 작업이었기 때문에 

오늘 개발일지는 여기서 마무리한다.