KDT5_이용수_2차 과제 제출 RE_4조 #75
Conversation
There was a problem hiding this comment.
고생하셨습니다.
전체적으로 잘 구현해 주셨습니다.
UI도 깔끔하게 잘 구현해 주신 것 같습니다.
영상이 재생되는 부분과 로딩중 상태 표시가 잘 된 것 같습니다.
commit 나누기가 고려 되면 더욱 좋을 것 같습니다.
core 폴더 내부 dragon.js 는 파일명이 어떤 것을 의미하는지 애매한 것 같습니다.
root 경로에 png, jpg가 있습니다. src > assets 과 같이 디렉토리 내에서 관리 하는 것이 좋을 것 같습니다.
env 설정을 시도하신 것 같은데 apikey가 노출되어 있는 것 같습니다.
| @@ -0,0 +1,7 @@ | |||
| export default function handler(request, response) { | |||
There was a problem hiding this comment.
test가 끝난 파일은 올리지 않으셔도 좋을 것 같습니다.
| } | ||
|
|
||
| // 닫기 버튼 정의. | ||
| const closeButton = document.querySelector('.close'); |
There was a problem hiding this comment.
비디오 관련 내용은 Headline과 분리되면 좋을 것 같습니다.
|
|
||
| // 포스터 미리보기 대체 이미지 | ||
| if (movie.Poster === "N/A") { | ||
| this.el.style.backgroundImage = `url('https://www.freeiconspng.com/uploads/no-image-icon-8.png')`; |
There was a problem hiding this comment.
class로 css 쪽에서 작업하면 좋을 것 같습니다.
| movieStore.subscribe('movies', () => { | ||
| this.render() | ||
| }) | ||
| movieStore.subscribe('loading', () => { |
There was a problem hiding this comment.
subscribe로 store의 값이 변화 될 때 재렌더링을 위해 작성하신 부분인데
구독하는 대상이 3개나 있는데 loading 하나로 하여도 충분하지 않을까요?
(data fetch 시작과 종료에 따라 재렌더링이 이루어지면 될 것 같습니다.)
| for (let i = morePage + 2; i <= morePage + 4; i += 2) { | ||
| await searchMovies(i); | ||
| } |
There was a problem hiding this comment.
추가 load 를 할 때 page 요청이 순차적이지 않습니다.
4, 6 과 같이 + 2 하신 만큼 3, 5 페이지 요청이 누락됩니다.
| export default class Home extends Component { | ||
| render() { | ||
| const headline = new Headline().el | ||
| const banner = new Banner().el |
| this.el.classList.add('container') | ||
| this.el.append( | ||
| headline, | ||
| banner, |
|
|
||
|
|
||
| await getMovieDetails(history.state.id) | ||
| console.log(movieStore.state.movie) |
| const bigPoster = movie.Poster.replace('SX300', 'SX700') | ||
|
|
||
|
|
||
| <!-- 상세 페이지 내에서의 대체 이미지 --> |
There was a problem hiding this comment.
문법 오류 입니다.
js 에서 주석은 // , /* */ 를 이용해 주세요
| class="poster"> | ||
| </div> | ||
| <!-- 상세 페이지 내에서의 대체 이미지 --> | ||
|
|
🎬 2차과제 : API를 활용한 영화검색 사이트 만들기
작성자 : KDT5 이용수 - 4조
제출 날짜 : 5월 7일
결과물 : https://prismatic-chimera-d2347d.netlify.app/
HTML, JS, 활용
필수 요구사항
선택 요구사항
문제점
영화의 목록을 20개 이상 불러오는데 최대치가 넘어가면 검색했던 목록들이 사라지는 문제