KDT5-M2 - FE_이정환 - API를 활용한 과제 (reopen) #71
Conversation
| <title>Movie</title> | ||
| <link rel="icon" href="https://lh3.google.com/u/0/ogw/AOLn63Ho7yTWq8NFduxZOWQ4APLUF7_dDvHkXgSFYKfT=s32-c-mo"> | ||
| <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/reset.min.css"> | ||
| <link rel="preconnect" href="https://fonts.googleapis.com"> |
There was a problem hiding this comment.
preconnect를 사용하여 font 파일을 들고오고 있네요:) 해당 속성이 어떠한 의미로 사용되고 있는지 또 어떤 효과가 있어서 추가한 것인지 설명해주실 수 있을까요?
There was a problem hiding this comment.
font 리소스를 사용할때 가장 좋은 방법으로는 preroad가 있는데 이는 리소스 우선순위를 높게 하여 가져오게 되는데 장점으로는 폰트를 가져오는 대기시간을 줄일 수 있고 시스템 폰트와 선언된 폰트를 해결해 줄 수 있는데 단점으로는 as속성을 쓰면서 용도를 정하면 그 이외의 용도에서는 폰트를 사용되지 않는 점과 속성을 적용한 리소는 반드시 가져오기 때문에 중복된 리소스가 있으면 네트워크를 지연시킬 수 있다. 그에 반해 preconnect는 외부 리소스에 연결하는 방식으로 미리 연결된 리소스는 빠르게 접근이 가능합니다. 장점으로는 정확한 경로를 몰라도 사용이 가능하지만 단점으로는 미리 연결하는 만큼 cpu사용이 늘어나게 되고 브라우저를 빠르게 닫을 시 연결작업에 낭비가 발생됩니다.
| <div class = "the-loader hide"></div> | ||
| ` | ||
|
|
||
| const moviesEl = this.el.querySelector('.movies') |
There was a problem hiding this comment.
영화 목록 태그를 클래스명으로 조회하고 있는데, CSS 특이성에 따르면 구현하신 페이지 내에서 MovieList 컴포넌트는 하나만 사용되므로 클래스명이 아닌 ID를 통해서 요소를 조회하는 것이 더 효율적일 것으로 보입니다. 이와 마찬가지로 아래의 loadEl 또한 ID를 통해서 조회하는 방식을 검토할 수 있을 것 같아요! 클래스명을 사용하여 조회해야한다면 그 이유도 설명해주실 수 있을까요?🤔
There was a problem hiding this comment.
우선순위에 대한 생각을 못했던거 같습니다. id와 class에 대해 좀 더 생각해보고 사용하도록 하겠습니다.
|
|
||
| const movieInfo = await getMovieDetails(movie.imdbID) | ||
|
|
||
| this.el.innerHTML = /* HTML */ ` |
There was a problem hiding this comment.
해당 부분 멘토링에서 말씀드렸듯 꼭 중복을 제거하는 방식으로 진행해보시기를 권장합니다:)
| @@ -0,0 +1,13 @@ | |||
| import { Component } from "../core/core"; | |||
|
|
|||
| export default class NotFound extends Component { | |||
There was a problem hiding this comment.
NotFound 컴포넌트가 존재하지만, 실제 검색결과가 존재하지 않는 경우, Too many results가 나오고 있습니다. 해당부분 리팩토링 때 반영 부탁드립니다:)
There was a problem hiding this comment.
수정하는 과정에서 수정을 완료하지 못한 부분인거 같습니다. 오류가 발생한듯 합니다. 수정하도록 하겠습니다.
| store.state.message = '' | ||
| } | ||
| try { | ||
| const res = await fetch(`https://omdbapi.com?apikey=7035c60c&s=${store.state.searchText}&page=${page}`) |
There was a problem hiding this comment.
fetch를 통해 HTTP 요청을 진행하는 로직은 분리하여 관리해보는 것은 어떨까요? 현재 searchMovies 메서드는 영화를 탐색하는 의미의 비지니스 로직이지만, 해당 로직 내에서 HTTP 요청을 진행하는 로직을 분리해볼 수 있을 것 같아요. 또한 아래의 getMovieDetails에서도 HTTP 요청을 진행하는 로직이 사용되고 있어서 HTTP 요청을 진행하는 로직들을 모아서 관리할 수 있을 것으로 보입니다:)
There was a problem hiding this comment.
확실히 좀 더 세분화해서 작성을 하게 되면 추후 작업에 대한 효율성이 증가할 거 같습니다.
|
현재는 단 하나의 커밋으로 모든 변경사항을 반영하고 계신데요. commit 메시지 또한 기능별로 구분하여 커밋을 진행해보는 것을 추천드립니다. 기능별로 구분하는 경우에 추후 백업이 필요한 시점에 각 기능별로 반영할 수 있으며, 메시지만으로도 충분히 현재 정환님의 프로젝트의 과정을 파악할 수 있기 때문입니다:) |
배포사이트 : https://mellifluous-duckanoo-7285b4.netlify.app/
❗ 필수
❔ 선택
기능.
영화검색
영화포스터를 더블클릭하면 화면이 이동 되고 한번클릭하면 그 영화에대한 줄거리를 볼 수 있음.
더보기를 통해 10개 단위로 추가적으로 검색.