[1단계 - 나만의 유튜브 강의실] 밧드(감우영) 미션 제출합니다. #102
Conversation
Co-authored-by: jhy979 <jhy979@users.noreply.github.com>
Co-authored-by: jhy979 <jhy979@users.noreply.github.com>
Co-authored-by: jhy979 <jhy979@users.noreply.github.com>
Co-authored-by: jhy979 <jhy979@users.noreply.github.com>
Co-authored-by: jhy979 <jhy979@users.noreply.github.com>
Co-authored-by: jhy979 <jhy979@users.noreply.github.com>
Co-authored-by: jhy979 <jhy979@users.noreply.github.com>
- 썸네일 이미지 주소 - 제목 - 작성자 - 작성요일 - 비디오 id Co-authored-by: jhy979 <jhy979@users.noreply.github.com>
Co-authored-by: jhy979 <jhy979@users.noreply.github.com>
src/js/__test__/search.test.js
Outdated
| describe('API 요청을 하기 전', () => { | ||
| test('endPoint와 params로 requestURL을 만들 수 있다.', () => { | ||
| const endPoint = videoAPICaller.endPoint; | ||
| const params = { | ||
| q: 'woowa', | ||
| type: 'video', | ||
| }; | ||
|
|
||
| expect(APIManager.createQueryString(endPoint, params)).toEqual( | ||
| `${videoAPICaller.endPoint}?q=woowa&type=video` | ||
| ); | ||
| }); | ||
| }); | ||
|
|
||
| describe('API 요청이 끝나고', () => { | ||
| test('response 데이터를 썸네일 이미지 url, 제목, 작성자, 작성요일, id로 분리할 수 있다.', () => { | ||
| expect(videoAPICaller.parsingVideoData(videoData)).toEqual(parseData); | ||
| }); | ||
| }); |
There was a problem hiding this comment.
이 테스트는 search.test.js 보다는 각 APIManager, videoAPICaller 를 테스트하는 게 맞을 것 같습니다.
API 요청하기전/후 를 명시해놨지만 사실 테스트만 놓고 봤을 때, 전혀 상관없는 상황인 거 같아요.
createQueryString 를 테스트할 때 반드시 videoAPICaller.endPoint 가 필요한 게 아니라 endPoint 는 임의의 변수로 테스트해도 될 거 같고요!
There was a problem hiding this comment.
__test__폴더에서 각 파일에 기능 테스트로 분리했고, 파일이 있는 위치로 이동시켜 봤습니다.
분리하고 보니깐 기존에 테스트들을 모아놓은 것보다 확인하기 편하다는 느낌을 받았습니다.
API 요청하기전/후 를 명시해놨지만 사실 테스트만 놓고 봤을 때, 전혀 상관없는 상황인 거 같아요.
이 부분에서는 describe는 써야되겠고 뭐라고 할지 모르겠고 했던게 있었습니다. 애매하게 분리하기보다는 쓰지 않기로 했습니다.
104ef93
endPoint 는 임의의 변수로 테스트해도 될 거 같고요!
임의의 변수를 아무거나 endPoint로 줬습니다.
a479fbb
src/js/__test__/validate.test.js
Outdated
| describe('보고 싶은 영상을 검색 했을 때', () => { | ||
| test('입력 없이 버튼을 눌렀다면 error를 throw한다.', () => { |
There was a problem hiding this comment.
사실 엄밀하게 보면 이것들도 명확한 테스트라곤 볼 수 없을 것 같습니다.
지금 테스트에서는 검색을 하지도 않고, 버튼을 누르지도 않았으니까요..!
isValidSearchInput > 빈 값일 경우 throw 를 한다..? 정도가 맞지 않을까 싶은데 어떻게 생각하시나요!?
src/js/utils/constants.js
Outdated
| export const DOM_STRING = { | ||
| MODAL_CONTAINER: '.modal-container', | ||
| DIMMER: '.dimmer', | ||
| VIDEO_LIST: '.video-list', | ||
| SEARCH_BUTTOM: '.search-input__search-button', | ||
| SEARCH_INPUT: '.search-input__keyword', | ||
| SEARCH_NO_RESULT: '.search-result.search-result--no-result', | ||
| HIDE: 'hide', | ||
| MODAL_OPEN_BUTTON: '#search-modal-button', | ||
| SKELETON: 'skeleton', | ||
| VIDEO_ITEM_SAVE_BUTTON: 'video-item__save-button', | ||
| VIDEO_ITEM: 'video-item', | ||
| }; |
There was a problem hiding this comment.
클래스, 아이디, 태그명? (#, .)이 생략된 selector? 들이 섞여있는데 혼동될 여지는 없을까요?!
There was a problem hiding this comment.
실제로 사용하면서 헷갈린 적이 있었습니다..
css 클래스 상수를 CLASS_NAME_STRING으로 분리했습니다.
7e2d432
src/js/managers/videoAPICaller.js
Outdated
| title: item.snippet.title, | ||
| url: item.snippet.thumbnails.medium.url, | ||
| channelTitle: item.snippet.channelTitle, | ||
| isLastPage: isLastPage, |
There was a problem hiding this comment.
아실 것 같지만, key,value 가 같을 경우 생략가능합니당
| isLastPage: isLastPage, | |
| isLastPage, |
src/js/event/EventHandler.js
Outdated
| } | ||
| } | ||
|
|
||
| async onvideoListScroll(inputValue) { |
There was a problem hiding this comment.
(소곤소곤)
| async onvideoListScroll(inputValue) { | |
| async onVideoListScroll(inputValue) { |
이 부분은 스크롤을 강하게 했을 때 요청이 너무 많이 빠르게 갈까봐 의도한 부분이 있었습니다. 자연스럽게 추가 비디오 아이템들이 보이게 오프셋을 추가했습니다.
반영하지 못한 부분인데, 어떻게 보여주면 좋을지 생각이 안들었습니다. 지금 더이상 불러올 리스트가 없을 때 스크롤을 해도 추가 요청이 안들어가게 되어있어서 추후에 보완해보도록 하겠습니다!
찾아보니깐 IntersectionObserver을 무한 스크롤을 구현할 때 많이 사용하는 것을 알게 되었고, 적용해보느라 굉장히 애를 먹었습니다. 이걸 사용하려면 코드를 거의 대부분 수정해야되겠다고 생각했고, 부담이 있어서 오프셋을 주고 throttle 시간을 조절해서 최대한 자연스럽게 무한 스크롤이 되도록 수정했습니다! |
throttle을 제외하고 api 에 대한 loading 상태를 두어 해당 api 메서드가 요청이 되어 loading 이라면 early return (더 요청되지 안도록)하게끔 해 요청을 막아봐도 좋을 거 같아요.
그냥 단순 텍스트도 좋아요~ 그냥 마지막 리스트입니다? 더 이상 불러올 영상이 없습니다 정도?
지금도 좋은 방법입니다! 만약에 step2 에서 다 하신 후에 시간이 남으면 도전해보시면 좋을 것 같아요! |
|
@kamwoo 머지되었지만 step 2 PR올리기 전에 궁금한 점 있으면 코멘트 주세요! |
|
아 8ㅅ8 그리고 제가 제대로 확인을 못했는데, throttle 이나 말씀드린 인피니티스크롤 API 요청에 대해서 step2 에서 개선이 되면 좋겠습니다 :) |
안녕하세요! 고생 많으십니다 🙂
아래 유튜브 강의실 데모 페이지 링크입니다.
데모 페이지
검색 결과가 없을 때 이미지 경로를 못찾습니다. webpack으로 따로 설정을 해줘야할지, 외부 이미지 주소를 줄지 고민중에 있습니다. 왠지 간단한 문제일거라고 생각이 들어서 좀더 찾아보고 리뷰 후에 수정하도록 하겠습니다.
질문