웹개발종합반 4주차 회고록

1. Flask를 이용한 로컬서버 구축
2. Meta Tag를 이용한 조각기능 구현
3. 4주차 숙제

1. Flask를 이용한 로컬서버 구축하기

Flask 란,

파이썬으로 개발된 웹 프레임워크로 서버 구축 및 구동이 가능하다.

파이참 'settings'에 들어가면 설치가 가능하다.

Flask 기본 세팅

Flask는 실행 전 아래와 같이 기본 세팅을 해줘야한다.
1. static 폴더 생성 (이미지나 css 저장하는 곳)
2. templates 폴더 생성 (HTML 파일을 담아두는 곳)
3. API를 정의할 수 있는 파이썬 파일 생성 (통상 'app.py' 로 설정)

app.py 실행순서

1. 클라이언트(브라우저)에서 url을 이용하여 서버에 데이터 요청
2. 서버는 @app.route('')를 통해 값을 받아 특정 함수 실행
3. 실행된 함수는 결과값을 JSON 형식으로 다시 클라이언트에게 전달
4. 전달받은 클라이언트는 HTML를 통해 사용자에게 값 출력

Flask 실행 시

앞서 만들어놓은 app.py 실행 후 localhost에 접속 후 html에 접근 (기존에 HTML을 바로 여는것과 다른 개념! 로컬,서버의 접근 방식이 다름)

Flask 기존 포트 죽이기

다양한 예제들을 테스트 하던 중 직전 서버가 제대로 Terminate가 안되었는지 계속 브라우저가 전 예제의 HTML를 출력할 때가 있었다.

그래서 cmd에 들어가 현재 서버의 PID 확인 후 taskkill로 서버 종료 후 재실행하니 제대로 작동하는 모습을 볼 수 있었다. 므야호~

내가 참고한 링크는
https://ssodang.tistory.com/entry/windows-%ED%8F%AC%ED%8A%B8-%EB%A8%B9%EA%B3%A0%EC%9E%88%EB%8A%94-%ED%94%84%EB%A1%9C%EC%84%B8%EC%8A%A4-%EC%A3%BD%EC%9D%B4%EA%B8%B0

항해99 FAQ에서도 확인 가능하다.

내가 주관적으로 이해한 Post, Get 실행 방식

• POST (사용자 입장으로 우선 접근)
  1. 사용자가 입력한 데이터를 서버로 넘길 수 있는 ajax 생성
  2. 서버는 데이터 확인 후 디비 저장

• GET (서버 입장에서 우선 접근)
  1. 필요한 값을 DB에서 추출한 후 JSON 형식으로 클라이언트에 전달
  2. 전달받은 브라우저는 HTML를 통해
  사용자UI에 뿌려줌

2. Meta Tag를 이용한 조각기능 구현

Meta Tag란,

HTML Head안에 구현해 놓은 태그인데,
og 태그는 카톡, 페북 등 공유 시 썸네일 형태로 나오는 정보들을 구현해 놓은 곳이다.

og 태그와 beautifulsoup4 패키지를 이용하여 네이버 무비 썸네일 정보를 긁어오는 일을 하였다.

3. 4주차 숙제

4주차 숙제로 1,2주차에 만든 HTML에 Flask를 이용하여 Get,Post방식으로 DB에 데이터 저장 및 출력하는 기능을 추가하였다.

초반에는 헷갈리는 부분이 많았지만 웹개발종합반에서 다양한 예제로 반복 학습을 할 수 있어서 자연스럽게 API 사이클에 익숙해질 수 있었다. (물론! 배워야할게 훨씬 많지만!!)

4. 주저리 주저리

이제 4주차 강의가 끝났고 5주차와 파이썬 강의가 남아있다.

아무래도 SQLD 준비와 같이 병행하다보니 진도가 조금 더딘 느낌이 들어 괜히 마음이 조급해진다.

그래도 매순간 헛되이 쓰지않고 열심히 하다 보면 좋은 결과가 있을거라 믿는다.