5/1 TIL

4월이 시작된지 얼마나 됐다고 벌써 5월이다.. 본격적으로 본캠프가 시작된 것도
벌써 3주차 수요일인 걸 생각하면 시간 참 빠르다

오늘은 본캠프 들어와서 진행하는 두 번째 팀 프로젝트 과제이다.

전에 TIL을 작성하면서 진행했던 개인과제의 확장판? 이라고 보면 될 거 같다

팀원의 과제 결과물을 보고, 그 중 가장 마음에 드는 결과물을 베이스로 깔고
그 홈페이지에 새로운 기능들을 구현 가능하게끔 코딩하는 것이 과제이다.

과제의 필수 요구 사항

• [2] 영화정보 상세 페이지 구현
  • 기존 영화정보 카드 리스트에서 특정 item을 선택할 시, 상세 페이지로 이동하도록 구현합니다.
  • 상세 페이지에서 메인 페이지(홈)로 이동하는 UI도 함께 구성합니다.
• [3] 상세 페이지 영화 리뷰 작성 기능 구현
  • 상세페이지에서 특정 영화에 대해 의견을 작성할 수 있는 UI를 구현합니다.
  • 작성자, 리뷰, 확인비밀번호를 입력하도록 구현합니다.
  • 작성한 정보는 브라우저의 localStorage에 적재하도록 합니다.
• [4] github PR(=Pull Request) 사용한 협업
• [5] UX를 고려한 validation check
  • 영화 검색 시
  • 댓글 작성 시
  • 추가 기능 구현 시 반드시 삽입
• [6] 하기 기재된 Javascript 문법 요소를 이용하여 구현
  • 문법 요소는 너무나도 많지만 대충
    변수 선언, 형 변환, 화살표 함수, 배열, 콜백함수, 돔 등등
    js로 쓸 수 있는 요소들 중 5개 이상만 포함시키면 된다고는 하시는데
    아마 이것저것 다 하면 10개는 족히 넘지 않으려나 싶긴 하다..

이렇게 필수 요구사항을 알아본 후, 팀원들끼리 조율하며 역할분담을 했다.

이렇게 역할을 다 나눈 뒤 바로 Github에 레포지토리를 생성 후, 협력자 초대 > 메인 브랜치에다 커밋했다가 잘못되는 경우 없게끔 dev 브랜치 생성 후 디폴트로 설정 > 레포지토리에 파일 push까지 다 마친 후에 바로 작업을 들어갔다!

내가 앞으로 할 것은, 저 영화 검색 입력창에 빈 값이나 혹은 글자수가 너무 말도 안 되게 길어질 시에 유효성 검사를 위해 문구를 출력하거나 실행을 막는 것이다.

또, 지금은 아직 상세페이지 구성을 맡은 팀원 분께서 ui 구현을 하시고 계신데
덜 완성된 상태에서 만들어두면 나중 가서 ui 구현이 다 끝났을 때 버튼의 위치만 재배치하면 되니 일단 버튼을 홈버튼, 뒤로가기 버튼을 만들어 두었다.

위 코드의 버튼 결과물 아직은 위치를 정하지 못해서 일단 왼쪽 위에 위치시켜뒀는데, 이 이미지들 누끼 따는 건 피그마 플러그인 Remove BG로 땄다

홈 버튼, 뒤로가기 버튼은 html 파일 body 부분에
각각의 div class를 만들어 주었다. 홈버튼은 a 태그의 href 속성을 사용해 메인 홈페이지가 될 index.html 링크를 걸어둬서 homeBtn을 클릭하면 메인 홈페이지로 가게끔 해줬다.

그러나 뒤로가기 버튼은 저렇게 링크를 거는 것이 아닌 script를 짜줘야 했는데,

뒤로가기 기능을 구현하고 싶을 땐 window.history.back() 메서드를 이용해 주면 브라우저가 세션 기록의 바로 뒤 페이지로 이동을 한다~!

저 메서드를 이용해서 뒤로가기 버튼의 클래스인 backBtn을 찝어준 뒤
addEventListner로 클릭 이벤트를 넣어준 후 위에 선언한 backSpace() 함수를 넣어주면 Finish!

내일은 검색 인풋창 유효성 검사에 대한 코드를 써볼 예정이다.