API 활용 과제

📌 할 일 관리(Todo)

작업물 배포 링크 : '오늘의 할 일'

스택

• 
• 
• 
• 
• 

오류 수정 중

• 새로고침 시 todolist의 텍스트 사라짐
• 완료한 list 비활성화 안됨
• list 내용 수정 기능 추가 필요

❗ 기능 구현

• 할 일 목록(List)이 출력.
• 할 일 항목(Item)을 새롭게 추가.
• 할 일 항목을 삭제.

❔ 기능 추가 예정

• 할 일 항목의 순서를 바꿀 수 있도록 만들어보세요. (추천 라이브러리 - SortableJS)
• 할 일을 완료하지 않은 항목과 완료한 항목을 분류해서 출력해보세요.
• 할 일을 완료한 항목을 한 번에 삭제할 수 있도록 만들어보세요.
• 할 일 항목의 최신 수정일을 표시해보세요.
• 할 일 목록이 출력되기 전에 로딩 애니메이션이 보이도록 만들어보세요.
• 기타 동작이 완료되기 전에 로딩 애니메이션이 보이도록 만들어보세요.
• 차별화가 가능하도록 프로젝트를 최대한 예쁘게 만들어보세요.
• 할 일과 관련된 기타 기능도 고려해보세요.

---

🎬 영화 검색

작업물 배포 링크 :'완성 사이트'

<영화 검색 메인 페이지>

<영화 검색 결과>

<영화 상세 페이지>

<페이지 구성>

스택

• 언어 : JS
• 번들러 : Webpack
• 스타일 : Scss
• 배포 : 넷리파이

구조

• 진입점 : main.js

  ______________   _________     _________    __________________________
  | index.html |--| main.js |---|  App.js |--| TheNav.js, TheFooter.js |
  ¯¯¯¯¯¯¯¯¯¯¯¯¯¯   ¯¯¯¯¯¯¯¯¯  |  ¯¯¯¯¯¯¯¯¯    ¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯
                              | ___________    __________   __________________________________________________________
                              ㄴ| index.js |---| Home.js |--| TheHeader.js, Search.js, MovieList.js, MovieListMore.js |
                                ¯¯¯¯¯¯¯¯¯¯¯ |  ¯¯¯¯¯¯¯¯¯¯   ¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯
                                            |  __________
                                            |-| About.js |
                                            |  ¯¯¯¯¯¯¯¯¯¯
                                            | ___________
                                            ㄴ| Movie.js |
                                              ¯¯¯¯¯¯¯¯¯¯¯

문제사항

• add.hide // remove.hide 적용이 안됌. (영화 검색 로딩 애니메이션 & 검색 더보기 버튼)
• 영화 검색 시 포스터, 제목, 출시년도 중 년도 데이터 못읽음 ->undefined
• 영화를 검색하고 'view more'버튼으로 다음 페이지를 불러는것 까지는 작동. 이후에 같은 영화목록이 무한대로 불러와짐

❗ 기능구현

• 영화 제목으로 검색이 가능!
• 검색된 결과의 영화 목록이 출력!
• 단일 영화의 상세정보(제목, 개봉연도, 평점, 장르, 감독, 배우, 줄거리, 포스터 등)조회!
• 한 번의 검색으로 영화 목록이 20개 이상 검색.
• 영화 목록을 검색하는 동안 로딩 애니메이션이 보이도록.
• 무한 스크롤 기능을 추가.
• 영화 상세정보가 출력되기 전에 로딩 애니메이션이.
• 영화 상세정보 포스터를 고해상도로 출력(실시간 이미지 리사이징)

❔ �추가 기능 예정

• 영화 개봉연도로 검색할 수 있도록.
• 영화 포스터가 없을 경우 대체 이미지를 출력하도록.
• [△] 차별화가 가능하도록 프로젝트를 최대한 예쁘게.
• 영화와 관련된 기타 기능도 고려.