[2단계 - 상세 정보 & UI/UX 개선하기] 우디(류정우) 미션 제출합니다. #100

jw-r · 2023-03-27T09:31:21Z

안녕하세요 포코!

우선 사죄의 말씀 드리겠습니다😭
step2의 요구 사항을 모두 구현하지 못했어요

step1에서 했던 코드는 잠시 주머니에 넣어두고 새로 미션을 시작했어요ㅠㅠ
step1의 코드는 리펙토링을 진행하려면 사실상 모든 것을 새로 만들어야 했고, 그럴거면 새로 시작하는게 낫겠다고 생각했습니다

이전의 코드는 전역에서 모든 상태를 관리했기 때문에 모든 컴포넌트들이 상태에 접근했기 때문에, 수정이 너무 어려웠어요
때문에 이번에는 상태를 최소화하고, 각 컴포넌트가 상태를 가지도록 했어요

또 컴포넌트 구조의 일관성을 높이고, 상하관계를 확실히 해주려고 노력했습니다

그러다보니 스켈레톤 코드를 hidden상태로 만들기위해 App -> MovieView -> MovieList -> SkeletonCards 과 같이 메서드 드릴링이 발생하긴 했지만 이전의 코드보다 훨씬 알기 쉬운 코드가 됐다고 생각합니다

이번에도 잘 부탁드리겠습니다!!

pocojang

@evencoding 👋
코드가 너무나 많이 변경되어 깜짝 놀랐네요... 😭
그나마 친절하게도 미리 알려주셔서 감사합니다

피드백

App.js

너무나 많은 일을 한번에 몰아서 하고 있습니다
이건 꼭 개선이 하시는게 좋겠어요!

대부분의 로직을 App에 방치해놓고 내려주는 형태이니... 확장성도 떨어지고 앞으로 코드가 더 좋아지기 어렵다는 생각이 드네요

비동기 통신

우선 fetch API를 분리하신 점은 정말 훌륭합니다 👍
다만 예외 처리가 부족해요.
이 점을 꼭 고려하셔서 더 꼼꼼하게 하시며 에러 처리까지 연계하시면 더 견고하고 단단한 앱이 될겁니다 💪

이정도로 수정 방향을 드려볼게요~
다만.. 아직 미완성된 부분이 너무나 많아.. 정말 아쉽네요 😭
그럼 미완성된 기능과 리뷰 반영 후 다시 요청해주세요!

pocojang · 2023-03-28T13:46:26Z

.DS_Store

더 신경쓰겠습니다🥲

pocojang · 2023-03-28T13:47:31Z

dist/index.html

+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>영화관</title>
+  <script defer src="bundle.js"></script></head>


코드 정리가 필요하겠어요~

애플리케이션의 실행 혹은 배포를 위해 생성되는 dist폴더의 코드를 제가 임의로 수정해도 괜찮은가요??

오호.. index.html도 생성된 파일이군요?

pocojang · 2023-03-28T13:48:55Z

tsconfig.json

OMG.. 😱
한번 정리하시는게 어때요

pocojang · 2023-03-28T13:49:53Z

templates/common.css

+@media screen and (max-width: 672px) {
+  .item-view h2 {
+    width: 370px;
+  }
 }

 /* https://andrew.hedges.name/experiments/aspect_ratio/ */


음 이건 뭘까요?

값을 비율로 계산해 볼 수 있는 사이트네요
이 또한 원래 있던거라 크게 신경쓰지 않았던 것 같아요🥲

pocojang · 2023-03-28T13:51:20Z

src/components/SkeletonCards.js

+    return skeleton;
+  }
+
+  appear() {


hide와 반대되는 의미로 바꾸는게 좋지 않을까요?

pocojang · 2023-03-28T13:52:14Z

src/components/MovieView.js

+    this.movieListTitle.changeInnerText('지금 인기 있는 영화');
+  }
+
+  addMovies({ page, results: movies, total_pages }) {


서버에서 내려오는 snake_case가 계속되어 아쉽네요

pocojang · 2023-03-28T13:52:47Z

src/components/MovieList.js

+                  alt="${title}"
+                />`
+                : `<div class="item-thumbnail no-image">
+                  <span>No Image</span>


pocojang · 2023-03-28T13:53:10Z

src/components/MovieList.js

+    const movieLi = movies.reduce((li, movie) => {
+      return li + this.getMovieItemTemplate(movie);
+    }, '');
+
+    return movieLi;


바로 반환해도 되지 않을까요?

pocojang · 2023-03-28T13:55:12Z

src/App.js

+import MovieView from './components/MovieView';
+import MovieDetail from './components/MovieDetail';
+
+const pageCounter = (firstPage) => {


class의 기능을 온전히 활용하면 될텐데 Closure라니 너무 뜬끔없군요..?!

ㅎㅎ..🥲
이전 미션에서 상태가 많고 모든 컴포넌트에서 접근할 수 있다보니 �상태의 추적이 어려워져서 리펙토링하는데 큰 어려움을 겪었어요
'내가 직접 상태를 관리하지 않을 방법이 없을까?'를 고민하다 실험적으로 클로저를 사용해봤습니다

값을 초기화 해줘야 할 때에 적절하게 호출만 해주면 그 후로는 제가 신경쓰지 않아도 무방하니 '오~이거 좋다!' �했었는데 ㅋㅋ
클래스의 기능을 온전히 활용해도 보겠습니다!

뭐 학습 목적으로 시도해보는건 좋습니다 ㅎㅎ
하지만 Class를 사용한다면 이런 간단한 경우 전혀~~ 필요없는 기법일 수 있어요

pocojang · 2023-03-28T13:59:12Z

src/App.js

+    window.addEventListener('scroll', this.onScrollHandler.bind(this));
+  }
+
+  onScrollHandler() {


여기서 스크롤 이벤트는 따로 분리하는게 좋겠어요 💭

…에 구현

jw-r · 2023-03-30T13:44:01Z

애플리케이션 배포 링크

step1부터 제가 꼼꼼하지 못했던 점에 대한 피드백을 여럿 받았네요🥲
사용하지 않는 파일, 불필요한 주석 등에 대해서요ㄷ.ㄷ
사소한 것이지만 매우 중요하다고 판단되니 더욱 신경써보도록 하겠습니다

step1에서 리펙토링을 하고 모두 되돌리고 하던 과정이 반복되어 조금 힘들었었어요
포코의 리뷰도 모두 반영하지 못했었기 때문에 혼날 줄 알았는데...
포코가 '오히려 잘 하고 있는거다'라고 말해줘서 얼마나 신나고 용기가 생겼었는지 ㅋㅋ
감사합니다😆

왜 혼날거라 생각했는지 모르겠네요🤣
포코 덕분에 리뷰어와 리뷰이의 관계에 대해서도 한번 더 생각해볼 수 있었습니다

첫 리뷰 요청 때 다 못했던 기능을 구현하고,
컴포넌트에게 일관성을 부여, 상하관계를 명확히 하려고 노력했어요
또 포코의 리뷰대로 App이 너무 많은 일을 담당하지 않도록, 컴포넌트로 기능을 분리해 보다 독립적인 컴포넌트를 구현하려 했습니다

이 과정에서 props drilling, method drilling 을 어떻게 해결해야할까 고민하다 Custom Event를 도입해봤어요

앞으로 조금 더 고민하거나, 수행해야 할 내용은 아래와 같습니다

에러 처리를 어디서 해주는 것이 좋을까?

css 파일을 각 컴포넌트 별로 나누자
별점 리뷰 기능도 하나의 컴포넌트로 분리하자

step2 E2E 테스트 작성
애플리케이션 구조 도식화 작성

사실 위의 내용도 모두 끝낸 후 리뷰 요청을 하고 싶은데..
시간이 모자랄 것 같아서 리뷰 먼저 보내고 따로 branch 파서 수행하려합니다🥺

잘 부탁드리겠습니다!!

pocojang

@evencoding

언제나 내가 작성한 코드에 대한 아쉬움은 잘 지워지지 않죠..
저 또한 여러가지로 아쉬움이 많이 남고 더 많은 수정을 하셨으면 좋겠습니다만...
그래도 시간 투자하며 코드를 다시 작성하기 위한 훈련은 도전 자체로 의미있었습니다!

요구사항을 다 구현하지 못한건 저에게 죄송할 필요 없습니다!
다만.. 크론에게는 죄송해야.. 후후..

곧 방학일텐데 푹 쉬시며 재충전하시고 레벨2에서도 지금과 같은 강력한 실천력으로 성장하셨으면 좋겠네요.
이만 머지하겠습니다.
레벨1 기간 고생했어요!

pocojang · 2023-03-30T14:50:00Z

src/App.js

-      this.movieView.updateMovieListTitle();
+      document.dispatchEvent(new CustomEvent('updateMovieListTitle', { detail: { query: null } }));


pocojang · 2023-03-30T14:51:41Z

src/App.js

-    $target.addEventListener('click', this.onClickHandler.bind(this));
-    $target.addEventListener('submit', this.onSubmitHandler.bind(this));
+    // $target.addEventListener('click', this.onClickHandler.bind(this));
+    // $target.addEventListener('submit', this.onSubmitHandler.bind(this));


pocojang · 2023-03-30T14:52:15Z

src/components/Header.js


-    return $input.value;
+      const query = e.target[0].value;


[0]보다 더 좋은 방법도 고려해보세요!

pocojang · 2023-03-30T14:53:07Z

src/utils/localStorage.js

아주아주 멋진 시도입니다
추상화 시도는 언제나 좋아요 👍

pocojang · 2023-03-30T14:53:39Z

src/components/MovieDetail.js

-      for (let i = 0; i < Number(score); i++) {
-        $stars[i].src = star_filled;
-      }
+      [...$stars].forEach(($star, index) => {


굳이 [...$stars]해줄 필요가 있을까요?

pocojang · 2023-03-30T14:54:02Z

src/components/index.js

오우 좋네용

pocojang · 2023-03-30T14:54:19Z

src/constants/index.js

@@ -0,0 +1,13 @@
+const LOCAL_STORAGE_KEY = {
+  APP: 'woowa_movie-review-app',


신개념 케이스군요 ㅋㅋ

pocojang · 2023-03-30T14:55:10Z

src/domain/Movie.ts

+
+      return await this.getPopularMovies(page);
+    } catch (e) {
+      return e;


반환은 무슨 역할을 하나요?

pocojang · 2023-03-30T14:55:36Z

src/App.js

@@ -114,11 +114,11 @@ class App {
    this.isLoading = false;
  }

-  displayErrorMessage({ status_code }) {
+  displayErrorMessage({ status_code: statusCode }) {


어딘가에서 한번에 처리하는게 좋겠죠?

jw-r added 18 commits March 24, 2023 17:13

feat: 컴포넌트 뼈대 코드 작성

ef65a55

fix: insertAdjacentHTML을 insertAdjacentElement로 수정

2a91b21

feat: SkeletonCards 컴포넌트 구현

6d53e7a

feat: Header에 click, submit 이벤트 등록

ddf2b13

feat: 영화 렌더 기능 구현

9e74943

refactor: 스켈레톤 ul을 영화 ul의 내부가 아닌 형제 태그로 변경

68d012b

feat: 검색 결과 렌더링 구현

9963bd6

feat: loading 중 API에 추가 요청하지 않도록 구현

ca2c66e

feat: 마지막 page에서 render이벤트를 발생시켜도 스켈레톤을 표시하지 않고 종료하도록 변경

18d5e93

feat: Header 컴포넌트에 반응형 디자인 적용

4efe81a

feat: item-view 반응형 디자인 구현

1462656

feat: 영화 item에 hover와 애니메이션 적용

b4cf9c2

feat: movie detail 모달 반응형 디자인 구현

bc20911

feat: esc, backspace버튼으로 모달창 닫기 구현

07f3a64

feat: movie detail 모달 배경 구현

8e4a2f7

feat: 모달의 x 버튼과, background를 클릭하는 것으로 모달창을 닫는 기능 구현

4cbda59

chore: 프리티어 적용 및 불필요한 파일 제거

16ade29

chore: step2에 step3브렌치 merge

eec09db

pocojang self-assigned this Mar 27, 2023

pocojang self-requested a review March 27, 2023 13:01

pocojang requested changes Mar 28, 2023

View reviewed changes

jw-r added 9 commits March 29, 2023 23:26

refactor: 영화 리스트 Title을 변경하는 명령을 커스텀 이벤트를 사용하여 MovieListTitle 컴포넌트 내부…

83a00a4

…에 구현

refactor: 로고 클릭 이벤트 등록을 Header 컴포넌트 내에 선언 후, App에서 커스텀 이벤트를 사용해서 구현

b3737f5

refactor: 스켈레톤 컴포넌트를 MovieList의 하위가 아닌 MovieView의 하위로 변경

2de737a

refactor: 영화를 렌더링하는 로직을 renderMovies와 renderMoreMovies로 분리

ee35e61

feat: 상세 정보의 별을 누르는 것으로 영화에 리뷰를 남길 수 있는 기능 구현

2905d00

feat: 별점에 따른 점수 표시 기능 구현

a4e0f34

refactor: localStorage의 Key값과 Custom Event 이름에 대한 상수화

165b569

feat: 리뷰 점수에 따른 메세지를 표시하는 기능 구현

4d02933

feat: 에러 메세지를 렌더, 삭제하는 기능 구현

20ecb80

jw-r added 4 commits March 30, 2023 21:52

chore: tsconfig파일의 불필요한 주석 제거

b7ea4de

refactor(MovieList): movieLi의 템플릿을 반환하는 메서드에서 reduce문을 바로 return해 주도록 변경

71584a8

refactor: 서버에서 내려온 snake_case를 camelCase로 수정해서 다루도록 변경

558abfa

chore(common.css): 불필요한 주석 제거

632ef04

pocojang approved these changes Mar 30, 2023

View reviewed changes

pocojang merged commit e8984b6 into woowacourse:evencoding Mar 30, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[2단계 - 상세 정보 & UI/UX 개선하기] 우디(류정우) 미션 제출합니다. #100

[2단계 - 상세 정보 & UI/UX 개선하기] 우디(류정우) 미션 제출합니다. #100

jw-r commented Mar 27, 2023

pocojang left a comment

pocojang Mar 28, 2023

jw-r Mar 30, 2023

pocojang Mar 28, 2023

jw-r Mar 30, 2023

pocojang Mar 30, 2023

pocojang Mar 28, 2023

pocojang Mar 28, 2023

jw-r Mar 30, 2023

pocojang Mar 28, 2023

pocojang Mar 28, 2023

pocojang Mar 28, 2023

pocojang Mar 28, 2023

pocojang Mar 28, 2023

jw-r Mar 30, 2023

pocojang Mar 30, 2023

pocojang Mar 28, 2023

jw-r commented Mar 30, 2023 •

edited

Loading

pocojang left a comment

pocojang Mar 30, 2023

pocojang Mar 30, 2023

pocojang Mar 30, 2023

pocojang Mar 30, 2023

pocojang Mar 30, 2023

pocojang Mar 30, 2023

pocojang Mar 30, 2023

pocojang Mar 30, 2023

pocojang Mar 30, 2023

		this.movieView.updateMovieListTitle();
		document.dispatchEvent(new CustomEvent('updateMovieListTitle', { detail: { query: null } }));

		@@ -0,0 +1,13 @@
		const LOCAL_STORAGE_KEY = {
		APP: 'woowa_movie-review-app',

[2단계 - 상세 정보 & UI/UX 개선하기] 우디(류정우) 미션 제출합니다. #100

[2단계 - 상세 정보 & UI/UX 개선하기] 우디(류정우) 미션 제출합니다. #100

Conversation

jw-r commented Mar 27, 2023

pocojang left a comment

Choose a reason for hiding this comment

피드백

App.js

비동기 통신

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

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

Choose a reason for hiding this comment

Choose a reason for hiding this comment

jw-r commented Mar 30, 2023 • edited Loading

pocojang 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

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

jw-r commented Mar 30, 2023 •

edited

Loading