KDT5_김성은_6조 #74

kse-seong-eun · 2023-05-10T12:28:42Z

6조 김성은
영화 검색 사이트

2023.5.6 [18:50] ver
'결과물 보기'

언어 : JS
번들러 : Webpack
스타일 : Scss
배포 : netlify

❗ 필수

영화 제목으로 검색이 가능해야 합니다!
검색된 결과의 영화 목록이 출력돼야 합니다!
단일 영화의 상세정보(제목, 개봉연도, 평점, 장르, 감독, 배우, 줄거리, 포스터 등)를 볼 수 있어야 합니다!
실제 서비스로 배포하고 접근 가능한 링크를 추가해야 합니다.

❔ 선택

한 번의 검색으로 영화 목록이 20개 이상 검색도록 만들어보세요.
영화 목록을 검색하는 동안 로딩 애니메이션이 보이도록 만들어보세요.
무한 스크롤 기능을 추가해서 추가 영화 목록을 볼 수 있도록 만들어보세요.
영화 상세정보가 출력되기 전에 로딩 애니메이션이 보이도록 만들어보세요.
영화 상세정보 포스터를 고해상도로 출력해보세요. (실시간 이미지 리사이징)
[△] 차별화가 가능하도록 프로젝트를 최대한 예쁘게 만들어보세요.
영화 개봉연도로 검색할 수 있도록 만들어보세요.
영화 포스터가 없을 경우 대체 이미지를 출력하도록 만들어보세요.
영화와 관련된 기타 기능도 고려해보세요.

문제점 ❎

API 불러오는 코드의 문제로 제대로 된 값이 나오지 않아 부가적인 기능들 구현이 어려워짐.

classList.add('hide') // classList.remove('hide') 적용이 안됌.
1. ~~영화 검색 로딩 애니메이션~~ [수정 완료 : API로딩 함수 pageMax 문제 ]
2. 검색 더보기 버튼
~~영화를 검색하고 'view more'버튼으로 다음 페이지를 불러는것 까지는 작동. 이후에 같은 영화 목록이 무한대로 불러와짐~~ [수정 완료 : 증가함수 코드 문제 ]
~~영화 상세페이지 내 감독, 장르 데이터 연동 안됨~~ [수정 완료:오타]
~~영화 검색 시 포스터, 제목, 출시년도 중 년도 데이터 못읽음 -> undefined~~ [수정 완료:오타]

아쉬운 점 💦

코드를 완벽하게 이해하고 사용하지 못함.
Netlify 업로드 문제

깃허브 래퍼지토리 연결을 통한 배포링크는 에러 발생함. (build 결과물인 dist폴더를 직접 넷리파이에 업로드해 배포용 url 생성)

배운 점 ✅

비동기 통신의 이해
component의 개념과 사용법
번들러의 개념과 사용법
JS 문법, 리액트 문법 개념 맛보기

구조

진입점 : 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 |

iamidlek

고생하셨습니다.
전체적으로 잘 구현해 주셨습니다.
UI도 보기 좋게 잘 구현해 주신 것 같습니다.
readme도 잘 작성해 주시고
commit 도 잘 나누어서 작성해 주셔서 좋습니다.

commit message 작성은 조금 더 고려가 되면 더욱 좋을 것 같습니다.
함수 명이나 로직을 조금 더 확인하면 좋을 것 같습니다.
검색 전에 view more 버튼이 나와있어 어색한 것 같습니다.

iamidlek · 2023-05-11T17:09:51Z

src/components/MovieList.js

+    this.el.innerHTML = `
+      <div class="movies"></div>
+      <div class="loading hide"></div>
+    `
+    const moviesEl = this.el.querySelector('.movies')


innerHTML로 붙이고
다시 querySelector로 찾는 것은 좋지 않은 것 같습니다.
createElement 하시거나 Template strings으로 필요한 요소를 만든 후에
한번에 붙이는 것이 좋을 것 같습니다.

iamidlek · 2023-05-11T17:10:36Z

src/components/MovieList.js

+    </span>
+    <img src="${movie.poster === 'N/A' ? 'https://upload.wikimedia.org/wikipedia/commons/thumb/d/dc/No_Preview_image_2.png/1200px-No_Preview_image_2.png?20200726064257' : movie.poster}" onerror="this.onerror=null;)" alt="이미지를 불러올 수 없습니다.">
+  `
+      moviesEl.append(movieEl)


반복적으로 append 하는 것은 좋지 않은 것 같습니다.
요소를 전부 만든 후에 한번에 붙여주는 방법이 권장됩니다.

iamidlek · 2023-05-11T17:11:14Z

src/components/MovieListMore.js

+    movieStore.subscribe('pageMax', () => {
+      const { page, pageMax } = movieStore.state
+      pageMax <= page ? this.el.classList.remove('hide') : this.el.classList.add('hide')
+      console.log(pageMax, page)


확인이 끝난 후에는 console.log 지워주세요

넵 알겠습니다!

iamidlek · 2023-05-11T17:13:06Z

src/components/MovieListMore.js

+export default class MovieListMore extends Component {
+  constructor() {
+    super({})
+    movieStore.subscribe('pageMax', () => {


구조상 pageMax 값이 동일하더라도
할당이 이루어져 재렌더링이 일어나지만
의미적으로는 page 의 변화를 바라보고 있어야 할 것 같습니다.

현재 구조에서는 아래처럼 될 것 같아요.

Suggested change

movieStore.subscribe('pageMax', () => {

movieStore.subscribe("page", () => {

const { page, pageMax } = movieStore.state;

if (page === 1) {

this.el.classList.remove("hide");

return;

}

iamidlek · 2023-05-11T17:16:57Z

src/components/MovieListMore.js

+
+    const btnClickHandler = async (page) => {
+      movieStore.state.page += 1
+      await totalPages(movieStore.state.page)


totalPages 함수가 movieStore 안에 있는데
movieStore.state.page를 굳이 빼서 더해주는 이유가 있을까요?

또한 영화 검색 결과를 더 가져오는 요청인데 totalPages 는 이름이 어색한 것 같습니다.

아니요! 특별한 이유는 없습니다. 코드 작성 다시 살펴보고 수정해두겠습니다!
함수명은 함수 역할에 맞게 수정하겠습니다 :)

iamidlek · 2023-05-11T17:31:14Z

src/routes/Movie.js

+    }
+
+    this.el.innerHTML = `
+      <div style="background-image: url(${bigPoster})"


인라인 스타일을 주지 않고 구현 가능한 방법은 없을까요?

iamidlek · 2023-05-11T17:31:48Z

src/store/movie.js

+export default store
+export async function requestAll(searchText, year = '', page = 1) {
+  const s = `&s=${searchText}`
+  const y = `&y=${year}`


인자로 제대로 값을 받는 경우가 없는 것 같습니다.

iamidlek · 2023-05-11T17:32:45Z

src/store/movie.js

+      method: 'GET'
+    })
+    //로딩끝
+    store.state.loading = false


try 문 내에 로딩 끝을 내시면
요청 실패하여 catch로 가게되면 무한히 로딩 컴포넌트만 보일 것 같아요.

iamidlek · 2023-05-11T17:35:29Z

src/store/movie.js

+    store.state.loading = false
+
+    if (data.Response === 'True') {
+      store.state.pageMax = data.totalResults < 20 ? 1 : Math.ceil(data.totalResults / 10)


계산이 문제가 있어 보이는데 < 20 이 맞나요?

iamidlek · 2023-05-11T17:36:38Z

src/store/movie.js

+}
+
+//영화 전체 페이지 계산
+export async function totalPages(page) {


페이지 계산이 아닌 requestAll 함수가 불리면서 요청이 발생합니다.
두 함수 이름이 동작과 맞지 않는 것 같습니다.

kse-seong-eun added 26 commits April 23, 2023 00:03

eslint prettier weabpack 추가

81561f3

gitignore추가

57cbe97

gitignore재적용

c2876c8

babel_Scss설치

be884ff

cssreset작성

7f9d89b

movie 정보 불러오기_검색페이지

3901e98

movie title_poster_year render

f0cdfe1

2nd작업_컴포넌트 기능분리

2a172bd

영화 포스터,제목 불러오기

1c3d77a

영화 상세페이지 연결

8486b7c

상세페이지 정보 브라우저 출력

a5203cc

nav 생성

377301c

영화리스트 추가로드

96848ae

css적용

6e0644c

로딩애니메이션 추가_footer추가

79104ea

about page 생성

3d87938

gitignore

a675bbe

build projec

3213950

build project

a199fb8

build project

4cfaeb9

에러 수_년도 출력

5f433eb

에러수정_년도출력

dc3e2ba

스피너 로드 에러 수정

68ea2fb

영화 검색 목록 출력 오류 해결_페이지넘버 증가 코드 수정함

0dba52b

포스터 대체이미지 출력_상세페이지 누락 정보 수정

41db1b1

포스터 대체이미지 출력_상세페이지 누락 정보 수정

6f267f2

kse-seong-eun changed the title ~~KDT5_김성은_6조 [재업]~~ KDT5_김성은_6조 May 10, 2023

iamidlek reviewed May 11, 2023

View reviewed changes

iamidlek assigned kse-seong-eun May 11, 2023

불필요한 이미지 파일 import 코드 삭제

baf8367

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

KDT5_김성은_6조 #74

KDT5_김성은_6조 #74

kse-seong-eun commented May 10, 2023 •

edited by iamidlek

Loading

iamidlek left a comment

iamidlek May 11, 2023

iamidlek May 11, 2023

iamidlek May 11, 2023

kse-seong-eun May 16, 2023

iamidlek May 11, 2023

iamidlek May 11, 2023

kse-seong-eun May 16, 2023 •

edited

Loading

iamidlek May 11, 2023

iamidlek May 11, 2023

iamidlek May 11, 2023

iamidlek May 11, 2023

iamidlek May 11, 2023

-    movieStore.subscribe('pageMax', () => {
+    movieStore.subscribe("page", () => {
+    const { page, pageMax } = movieStore.state;
+	if (page === 1) {
+	  this.el.classList.remove("hide");
+	  return;
+	}

KDT5_김성은_6조 #74

Are you sure you want to change the base?

KDT5_김성은_6조 #74

Conversation

kse-seong-eun commented May 10, 2023 • edited by iamidlek Loading

6조 김성은 영화 검색 사이트

❗ 필수

❔ 선택

문제점 ❎

아쉬운 점 💦

배운 점 ✅

구조

iamidlek left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

kse-seong-eun May 16, 2023 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

kse-seong-eun commented May 10, 2023 •

edited by iamidlek

Loading

6조 김성은
영화 검색 사이트

kse-seong-eun May 16, 2023 •

edited

Loading