TIL #13 팀 프로젝트

DO YEON KIM·2024년 5월 1일

TIL frontend js localstorage 개인프로젝트 로컬스토리지 부트캠프 스파르타코딩클럽 프론트엔드

부트캠프

목록 보기

13/72

하루 하나씩 작성하는 TIL #13

오늘부턴 새로 발제된 팀 과제가 있다.

과제 개요

개인과제에서 작성한 [내배캠 인기영화 콜렉션]을 발전시키는 팀 프로젝트
팀원들의 프로젝트 N개 중 1개를 대표로 선택, 팀 프로젝트로 발전 ( 선택 완료 )

요구사항

[1] TMDB API 이용
[2] 영화정보 상세 페이지 구현
- 기존 영화정보 카드 리스트에서 특정 item을 선택할 시, 상세 페이지로 이동하도록 구현합니다.
- 상세 페이지에서 메인 페이지(홈)로 이동하는 UI도 함께 구성합니다.
[3] 상세 페이지 영화 리뷰 작성 기능 구현
- 상세페이지에서 특정 영화에 대해 의견을 작성할 수 있는 UI를 구현합니다.
- 작성자, 리뷰, 확인비밀번호를 입력하도록 구현합니다.
- 작성한 정보는 브라우저의 localStorage에 적재하도록 합니다.
[4] github PR(=Pull Request) 사용한 협업
[5] UX를 고려한 validation check
- 영화 검색 시
- 댓글 작성 시
- 추가 기능 구현 시 반드시 삽입
[6] 하기 기재된 Javascript 문법 요소를 이용하여 구현
- 문법 리스트(아래 사항 중 5개 이상)
- 형 변환 : 하기 예시 중 2개 이상 사용
  - number → string
  - string → number
  - boolean → string
- 연산자 : 하기 예시 중 3개 이상 사용
  - 논리곱(&&) 연산자
  - 논리합(||) 연산자
  - 논리부정(!) 연산자
  - 삼항연산자(? :)
  - 타입연산자(typeof)
- 화살표 함수
- 조건문 : 하기 예시 전부 구현
  - if문
  - switch문
  - 삼항연산자
- 반복문 : 하기 예시 전부 구현
- for문(3개 중 2개 이상 구현)
  - 일반 for문
  - for … in문
  - for … of문
- while문(2개 중 1개 이상 구현)
  - 일반 while문
  - do ~ while 문
- 반복 제어 명령문(2개 중 1개 이상 구현)
  - break문
  - continue문
- 객체 병합
- 배열(1) : 하기 예시 중 2개 이상 사용
  - push
  - pop
  - shift
  - unshift
  - splice
  - slice
- 배열(2) : 하기 예시 중 3개 이상 사용
  - forEach
  - map
  - filter
  - reduce
  - find
- Map 생성 및 사용하기
- set 생성 및 사용하기(반복 포함)
- null, undefined : 하기 예시 필수 구현
  null과 undefined를 활용한 ‘없는 값'에 대한 처리

if(testValue === null) {
	// do something
}

if(testValue === undefined) {
	// do something
}

callback 함수
setTimeout, setInterval을 활용한 callback 함수 처리하기
module
- import
- export
그 외 언급되지 않은 건 이전 개인 프로젝트에서의 필수 & 선택 요구사항과 일치한다.

구현해야할 기능들은

영화 카드 클릭 시 상세 페이지로 이동
상세 페이지에선 영화의 상세 내역을 받아와 보여주며,
바디 하단엔 작성자, 리뷰, 비밀번호를 입력하여 리뷰를 작성한 뒤,
작성한 리뷰를 수정, 삭제 가능하도록 하여야 하며,
모든 입력 값은 로컬 스토리지에 저장되도록 하여야한다.
메인 페이지에서 영화를 찜할 수 있는 버튼을 생성하여야 하며,
찜 버튼이 클릭된 영화는 로컬 스토리지에 저장되도록 하며,
찜 목록 페이지에 출력되도록 해야한다.

필자가 이해한 과제 내용 + 추가적 기능을 작성하자면 이정도이다.

필자는 상세 페이지 하단에 들어갈 영화 리뷰 작성란 제작을 맡았다. 이전 학부생 때 과제로 localStorage를 사용해 본 경험이 있어서 쉬울 줄 알았으나, 그 때의 제작했던 프로젝트를 보고 ,,, 교수님께선 이런 것도 과제라고 점수를 부여해 주신 것에 감사할 뿐이었고,,, 하하하

우선 상세페이지 제작은 다른 분이 맡으셔서 따로 로컬에 짜놓았다.