WIL 1-2. 웹개발 종합반 4주차(6월 5주차)

< WIL이란? >

Weekly I Learend의 약자로, 주간 학습한 내용을 정리 후 공유하기 위해 작성하는 글이다.

 

아래는 웹 개발 종합반 강의 4주차를 1회독하면서 정리한 내용이다.

 

---

 

<스파르타 피디아 프로젝트>

4주차 10강부터 15강까지는 새로운 프로젝트를 한다.

 

pedia 프로젝트는 [영화 기록하기] 버튼을 누른 뒤
영화 URL, 별점, 코멘트 입력 후 [기록하기] 버튼을 누르면
웹 페이지에 카드가 등록되는 기능을 구현하는 프로젝트이다.

*기존 Mars 프로젝트에서 구현한 기능에 웹 크롤링 기능을 추가하는 것이 목표이다.

 

- 프로젝트 세팅

가상환경 구성, 라이브러리 설치를 진행한다.

 

라이브러리를 한번에 설치하는 방법

pip install libraryname1 libraryname2 libraryname3

 

새로 구현하고 싶은 기능과 기존에 구현할 줄 알았던 기능을 합치는 작업을 할 때는, 새로 구현하고자 하는 기능을 먼저 만들어야 한다.

*기존의 기능을 먼저 넣고 새로 만든 기능을 넣으면 어디서 에러가 나는지 찾기 힘들어진다.

 

---

 

- 조각 기능 구현

웹크롤링: Meta tag 가져오는 연습을 한다.

*Meta tag란?

 

→ meta tag 의 property 가 og=title 인 데이터 가져오기

ogtitle = soup.select_one('meta[property="og:title"]')['content']

 

1. 이번 프로젝트에서 메타 태그를 활용하기 위해...

URL을 가져오면, 웹 크롤링 과정에서 meta tag를 통해  정보를 가져옴.

→ 다음 영화뿐 아니라, 다른 영화 사이트에서 URL을 붙이더라도 기능은 정상적으로 작동해야함.

→ 공통적인 메타 태그만을 가져와야 함.

 

2. 이번 프로젝트에서 크롤링의 효용

크롤링 기능은 웹페이지에서 데이터를 기록하고 [기록하기] 버튼을 누를 때, 입력한 영화 URL에서 메타 테그의 정보를 불러오는 기능을 함. (크롤링한 데이터, 내가 입력한 별점과 코멘트가 함께 DB에 저장됨.)

 

 

 

- 뼈대 준비하기

강의를 따라하기만 하면 되는 구간. (코드 스니펫 + Atlas 페이지 열기)
웹 페이지를 열고 GET, POST 연결이 완료되었는지 확인한다. (서버-클라이언트 간 연결 확인)
*GET은 페이지 로딩이 완료되었을 때, POST는 [기록하기] 버튼을 눌렀을 때 확인할 수 있다.

 

 

 

- 데이터 쌓기(기록하기) 기능 구현

1. 서버만들기

meta_prac.py 파일에서 연습한 크롤링 코드를 가져와 수정한다.

*doc에&nbsp;넣을&nbsp;데이터들을&nbsp;정해준다.&nbsp;(title,&nbsp;image,&nbsp;description,&nbsp;comment)

2. 클라이언트만들기

[기록하기] 버튼과 연결된 posting 함수 코드 수정하기

[기록하기] 버튼과 연결된 posting 함수 코드 수정하기

그냥 차근차근 따라하기만 되어 어려운 것은 없었다.(Mars 프로젝트를 한 번 해보니 상대적으로 쉽게 진행이 가능했다.)

 

다만 문제는 웹페이지가 정상적으로 구동되는지 확인할 때 발생했다. 

URL을 치고, 저장완료 메시지가 뜨는지 확인하는 과정이었는데, 이때 오류가 또 발생했다.

 

혹시나 따라하는 과정에서 틀린 건 없는지 되돌려 봤으나 없었다. (이때 조금 좌절했다...)

... 혹시나 해서 웹페이지를 새로고침하고 다시 확인해보니 잘 됐다. (...ㅋ)

 

 

 

- 데이터 가져오기(가져와서 웹페이지에 카드 나열하기)

1. 서버 만들기

GET메소드에서 DB로부터 모든 영화 데이터를 가져오는 기능 구현

 

2. 프론트엔드 listing함수 코드 수정하기

백엔드로부터 data를 받아와서 카드 안에 넣어 웹페이지에 전시하기

• 데이터 받아오기: list, 반복문
• 카드 만들기: temp_html

 

---

 

<숙제: 별점만들기>

숙제는 별점을 선택해서 [기록하기] 버튼을 누르면 DB에 저장, 웹페이지에 카드 등록될 때 별점이 같이 나오도록 하는 것이다.

*app.py에서 별을 받는(index.html로 부터) 기능을 구현하는 것이 숙제

(근데 프론트에서 코드를 안 치는 건 아님...posting 함수에서 별점도 같이 읽도록 만들어야 한다.)

 

프론트엔드는 강의를 따라하면서 같이 구현할 수 있다. 
→ 숙제를 하기 전 star_repeat 부분을 같이 작성해준다.

이 부분이 없었다면 숙제 끝내는데 오래걸렸을 것 같다.

백엔드와 프론트엔드 모두 코드를 넣어야하는데, 사실 이미 구현된 url과 comment 에서 필요한 부분만 가져와서 수정만 하면 되기에 오래 걸리지 않았다. (강의에서 예상한 시간처럼 15분 정도 걸린 것 같다.)

 

먼저 코드를 쳐보고 웹페이지에서 정상 작동하는지부터 확인했다.

정상 작동 확인 후 답지와 비교해보니 코드는 동일했다.

 

다 만들고 난 화면을 보니 성취감이 든다.

 

 

---

 

- 학습 포인트(보완 사항 도출)

• 밤에 공부를 시작하니 늦게 자게 된다. (사실 이는 최근에 수면 패턴이 바뀐 것이 근본적인 문제이다.) 다음 주부터는 주간에 공부할 수 있도록 개선해야겠다. *다행히 아직 해는 뜨지 않았다.
• 강의와 너무 똑같이 진행하려고 하지 않는다. (네이버 영화 페이지가 서비스를 중단했다는 것을 오늘 알았다.)

띠용?