팀프로젝트 1일차

개인프로젝트가 끝나고 팀프로젝트가 시작되었다. 팀프로젝트는 "팀원분들의 개인과제 중 하나를 선택해서 결과물 만들어보기"이다.

<필수요구사항>

• TMDB 또는 영화진흥위원회 오픈 API 이용(택 1 또는 중복 사용)
• 영화정보 상세 페이지 구현
  기존 영화정보 카드 리스트에서 특정 item을 선택할 시, 상세 페이지로 이동하도록 구현
  상세 페이지에서 메인 페이지(홈)로 이동하는 UI도 함께 구성
• 상세 페이지 영화 리뷰 작성 기능 구현
  상세페이지에서 특정 영화에 대해 의견을 작성할 수 있는 UI를 구현
  작성자, 리뷰, 확인비밀번호를 입력하도록 구현
  작성한 정보는 브라우저의 localStorage에 적재하도록 함
• github PR(=Pull Request) 사용한 협업

먼저, github에 대해 팀원들과 공부하는 시간을 가졌고 처음으로 팀원들과 github을 사용해보았다. git branch로 복사본을 만들고 git switch 혹은 git checkout으로 브랜치 이동을 했다. 나의 branch에서 기능을 구현하고 저장한 뒤 push도 해보고 팀원들의 브랜치에서 pull도 해보았다.

튜터님께서 충돌이 나지 않게 협업할 수 있는 방법을 알려주셨는데 다음과 같다.

그리고 팀프로젝트에 대한 전체적인 와이어프레임을 짜보았다.

프레임워크를 기반으로 프로젝트를 시작해보려고 하는데 처음부터 난관에 부딪쳤다. 상세페이지에서 다시 메인페이지로 이동하려면 새 페이지가 따로 열리는 것보다는 새 페이지로 바로 이동하는게 편할 것 같았고 누르는 카드마다 상세페이지가 다르게 나와야 된다는 것을 생각하니 막막했다. 찾아보니 여러 방법이 있었다.

location.replace('link')
location.href
window.open('link')

location.replace('link')는 페이지를 넘어가게 되면 이전 페이지로 돌아갈 수 없었고, window.open('link')는 새창으로 열린다. 가장 적절한 방법은 location.href라고 생각했다. 그런데 문득 a태그가 생각났다. a태그는 하나의 페이지에서 다른 페이지를 연결할 때 사용하는 하이퍼링크를 정의할 때 사용한다. 그래서 다음과 같이 코드를 짜보았다.

movie.html이라는 빈 html을 만들고 api의 id값을 가져와 붙여주었다. 코드 한 줄 추가하면 되는 거였는데 팀원들과 몇시간동안 고민했다.(ㅠㅠ) 그래도 고민하는 동안 많이 배웠다고 생각한다. 팀원들이 잘했다고 해줘서 고마울따름,, 아직 갈 길이 멀지만 화이팅!!