[WIL] 항해99 OT주차

Doyeon·2023년 1월 15일

Toy Project

주제 선정

항해99의 첫 프로그램은 월~목 4일 동안 완성할 프로젝트의 주제를 자유롭게 정하고 구현하는 토이 프로젝트였다.
어떤 주제를 잡을까 고민하다가 사전강의로 제공된 웹개발 종합반에서 실습한 내용들을 최대한 구현해보는 것으로 방향을 잡았다.
Flask를 이용한 API 작성, Ajax로 서버 API에 데이터를 주고 받기, 크롤링 기능을 활용할 수 있는 주제를 생각했다.
그래서 정한 주제는 다음과 같다.

인기 영화를 한 눈에 보고(크롤링),
보았던 영화를 기록하고(게시글 등록 / 수정 / 삭제)
보았던 영화를 기록하는(체크리스트)
무비 스토리지 사이트

구현 기능 정리

ranking, review, list 총 세 개의 페이지를 만들고, 각 페이지별로 구현할 기능을 정리했다.

[ranking] 인기 영화 순위 조회
- 인기 영화 순위를 크롤링하여 DB에 저장하고, 저장된 데이터를 보여준다.
[review] 인기 영화 리뷰 등록 및 조회
- [ranking] 페이지에서 영화 클릭 시, 해당 영화의 리뷰를 등록할 수 있다.
- [ranking] 페이지에서 넘어온 경우, 해당 영화의 리뷰가 조회된다.
- [review] 페이지에서 영화 제목을 선택하여 리뷰를 등록할 수 있다.
[review] 리뷰 수정 및 삭제
- 등록된 리뷰를 수정하고 삭제할 수 있다.
[list] 영화 리스트 저장 및 체크 표시
- 보고싶은 영화 리스트를 저장할 수 있다.
- 이미 본 영화는 체크표시하여 보지 않은 영화와 구분할 수 있다.
[list] 영화 리스트 조회 및 삭제
- 체크 유무에 따라 영화 리스트를 나누어 보여준다.
  - (ALL - 전체, TO WATCH - 미체크, WATCHED - 체크)
- 저장한 영화 리스트를 삭제할 수 있다.

와이어 프레임

[ranking] 페이지 - 인기 영화 순위 조회
[review] 페이지 - 리뷰 작성 및 조회
[list] 페이지 - 영화 리스트 저장 및 조회

역할 분담

혼자서 git을 사용해 프로젝트 실습을 해본 적은 있지만, 팀으로 협업을 하는 것은 처음이어서, 역할을 어떻게 분담하고 git을 어떻게 시작해야할 지 감이 잘 오지 않았다.
팀원들과 얘기를 나누면서 방법을 찾아보았다.
먼저 list 페이지를 각각 작업해보고 코드 리뷰를 통해 뼈대를 잡을 한 명의 코드를 github에 올린 후,
github repository를 클론하여 나머지 기능들을 구현해보기로 했다.
ranking 페이지와 review 페이지는 두명씩 나누어 맡기로 했다.

구현 과정

각자 맡은 부분을 코딩하고 기능이 어느 정도 구현되었으면 결과물과 함께 코드 리뷰하는 시간을 가졌다.
코드 리뷰가 끝나면 합칠 코드를 정하고, 원격 repository에 push하고 pull request, merge 후, 로컬 repository로 pull하여 작업을 계속 진행했다.
git을 이용해서 형상관리를 하고 각자 작성한 코드들을 하나로 합치는 것을 실제로 해보니 신기했고, git의 구조를 잘 그려나갈 수 있었다.

협업의 묘미를 느낀 순간도 있었다.
ranking 페이지에서 각 영화에 표시된 ‘리뷰 확인’을 누르면, review 페이지에서 해당 영화의 리뷰만 보여주는 기능을 구현하고 싶었는데,
잘 안되어서 4명 모두 이 기능에 매달린 때가 있었다.
이 때 완벽하지는 않지만 구현한 방법을 공유하고 개발 브랜치로 코드를 push했는데, 공유된 코드를 참고해서 다른 팀원이 완벽하게 기능을 구현해내었다.
각자의 코드를 공유하고 참고하면서 기능을 구현하여 프로젝트를 완성했을 때, 협업의 묘미를 느낄 수 있었다.

프로젝트 결과물

https://github.com/web-pre-learn-team19/movies

알게된 것 정리

API

API는 Application Programming Interface의 약자로, 두 애플리케이션(서버와 클라이언트)이 요청과 응답을 사용하여 서로 통신하는 방법을 정의한다.
클라이언트가 서버에 요청하는 것을 받는 창구와 같다.
어떤 요청을 하느냐? 이번주에 다뤘던 것은 GET 요청과 POST 요청이다.

GET 요청
- 통상적으로 데이터 조회(Read)를 요청할 때
  - ex) 영화 목록 조회
- 데이터 전달: URL?key=value
  - ex) google.com?num=1
POST 요청
- 통상적으로 데이터 생성(Create), 변경(Update), 삭제(Delete) 요청할 때
  - ex) 회원가입, 비밀번호 수정, 회원 탈퇴
- 데이터 전달: HTML body에 key:value 형태로 전달

[클라이언트] 서버에 GET 요청(request)을 보낸다.(Ajax 코드)
데이터는 url 주소 물음표 뒤 key=value 형태로 보낸다.

$.ajax({
    type: "GET",
    url: "/test?title_give=봄날은간다",
    data: {},
    success: function(response){
       console.log(response)
    }
  })

[서버] GET 요청을 받아서 어떻게 처리할 것인지 작성한다.(API 코드)
→ API 코드에서 무언가 처리해서 응답(response)을 클라이언트로 준다.

@app.route('/test', methods=['GET'])
def test_get():
   title_receive = request.args.get('title_give')
   print(title_receive)
   return jsonify({'result':'success', 'msg': '이 요청은 GET!'})

[클라이언트] 서버에 POST 요청(request)을 보낸다.(Ajax 코드)
데이터는 {key: ‘value’} 형태로 보낸다.

$.ajax({
    type: "POST",
    url: "/test",
    data: { title_give:'봄날은간다' },
    success: function(response){
       console.log(response)
    }
  })

[서버] POST 요청을 받아서 어떻게 처리할 것인지 작성한다.(API 코드)
→ API 코드에서 무언가 처리해서 응답(response)을 클라이언트로 준다.

@app.route('/test', methods=['POST'])
def test_post():
   title_receive = request.form['title_give']
   print(title_receive)
   return jsonify({'result':'success', 'msg': '이 요청은 POST!'})