[1단계 - 나만의 유튜브 강의실] 콤피(류현승) 미션 제출합니다. #95
Conversation
- 변경된 Display 코어 구조에 맞춰 구조 변경 - 스켈레톤 UI 처음 1회만 렌더링 - 로딩 중 상태에서는 동영상 목록을 추가적으로 요청하지 않도록 구조 개선 - 분산된 조건문 정리
- 검색 결과 페이지에서 오류 출력 이후 다른 검색어로 대체한 후 시도할 시 로딩 인터페이스가 하단에 표기되는 문제 해결
- 실용성 없는 테스트 코드 제거 - 검색 결과 상태 처리 부분 테스트 코드 추가
- 사용되지 않는 유틸
|
안녕하세요, 로이님! 말씀 주신 피드백에 대해 다시 한번 고민해보고, 전체적으로 수정한 후 추가로 내용에 작성해주신 부분들은 아래에 작성하였습니다.
12개씩 불러오도록 변경 완료하였으며, 스켈레톤 인터페이스도 해당 갯수에 맞춰 출력되는 것이 사용자 경험에 더 좋을 것 같아
유튜브 API를 통해 총 결과 갯수를 저장한 후
스크롤을 감지하는 엘리먼트를 로딩 중에는 출력되지 않도록 스타일시트로 처리하여
이번에 페어와 설계하는 것이 재밌긴 했지만 아직 추상화 클래스에 대해 이해가 많이 부족하지만... 부족했던만큼 더 열심히 배워보겠습니다! 이외 개선사항
여러 부분에서 다시 고민해볼 수 있었던, 세세한 피드백 정말 감사합니다 👍 이번 개선사항에서도 잘 부탁드립니다...!!!! |
src/js/domain/YoutubeSearchStore.js
Outdated
| }; | ||
|
|
||
| dispatch(type, data) { | ||
| const stateByType = { |
There was a problem hiding this comment.
this때문에 그렇게 하신 것 같군요. 각 메소드 내에서 state를 인수로 처리하면 아예 외부로 빼낼 수 있어요. redux를 많이 참고하신 것 같은데, 리덕스도 그렇게 구성되어 있습니다. 다음과 같이요
const reducers = {
[ACTION_TYPE.UPDATE_SEARCH_KEYWORD]: (state, keyword) => {
return { ...state, searchKeyword: keyword, ... }
}, ...
}
class YoutubeSearchStore {
dispatch(type, data) {
const newState = reducers[type](this.state, data)
if (newState) this.setState(newState)
}
...
src/js/utils/ManageData.js
Outdated
| const paramsResult = Object.entries(params).reduce((previous, [key, value]) => { | ||
| previous.set(key, value); | ||
| return previous; | ||
| }, new URLSearchParams()); |
| VIDEO_ITEM_SAVE_BUTTON: '.video-item__save-button', | ||
| SEARCH_RESULT_NOT_FOUND: '.no-result', | ||
| }), | ||
| }); |
There was a problem hiding this comment.
"약속일 뿐 실제로 변경이 안되는 것은 아니다" -> 참입니다.
"실제로 변경한다면 그 사람이 약속을 안지킨 것이다" -> 역시 참이죠.
그렇다면 다음과 같이 정리가 될 것 같아요.
- 누군가 약속을 지키지 않을 것이 염려되는 상황인 경우 -> freeze를 하여 강제성 부여.
- 팀 내 컨벤션이 확고하여 약속을 지키지 않을 가능성이 현저히 적은 경우 -> 굳이 freeze를 할 필요까지는 없을 듯.
| export const DOM_NAME = Object.freeze({ | ||
| ID: removeSelectorSymbol(SELECTOR.ID), | ||
| CLASS: removeSelectorSymbol(SELECTOR.CLASS), | ||
| }); |
There was a problem hiding this comment.
- "자바스크립트 내에서 사용 중인 선택자들을 다른 개발자에게 알려주어, 템플릿 수정 시 주의를 요하고 싶었습니다." 이 부분은 선택자를 사용하는 코드가 도처에 널려있을 경우에는 의미가 있습니다. 당연히 선택자가 수정될 상황이 생긴다면, html, css, js 모두에 수정이 필요할 것입니다. 그런 때에 js에서 해당 값을 찾아 변경하는 작업이 필요한 것도 맞죠.
- 그런데 각 선택자가 오직 한군데씩만 쓰이고 있다면, 그 곳을 찾아서 변경하는 것과 상수를 찾아가서 수정하는 것 사이에 얼마나 큰 차이가 있을까요? IDE의 일괄검색/바꾸기 기능을 쓰면 constant를 변경하는 것과 아무런 차이가 없지 않나요?
- 저는 일반론적인 말씀을 드린 것이 아닙니다. 지금 이 프로젝트에서의 효용성을 논하고 싶었던 거예요. 오버엔지니어링이 아닌지 고민해보자는 취지예요.
src/js/display/App.js
Outdated
| export default class App { | ||
| constructor() { | ||
| new Modal(); | ||
| new Navigation(); | ||
| new SearchForm(); | ||
| new SearchResult(); | ||
| } | ||
| } |
src/js/display/Share/Modal.js
Outdated
| this.addEvent('click', '.dimmer', () => { | ||
| this.handleCloseModal(); | ||
| }); |
There was a problem hiding this comment.
handleCloseModal을 arrow function으로 작성하면 이렇게 표현이 가능해요
this.addEvent('click', '.dimmer', this.handlerCloseModal)익명함수를 한 번 감싸지 않아도 되니 효율적이죠.
| } | ||
|
|
||
| bindEvents() { | ||
| this.addEvent('click', SELECTOR.ID.SEARCH_MODAL_BUTTON, this.handleOpenModal.bind(this)); |
There was a problem hiding this comment.
마찬가지로, handleOpenModal을 arrow function으로 작성하면 bind(this)가 없어도 됩니다.
| searchKeyword | ||
| ? this.$scrollObserver.classList.add('enable') | ||
| : this.$scrollObserver.classList.remove('enable'); |
There was a problem hiding this comment.
this.$scrollObserver.classList.toggle('enable', !!searchKeyword)
|
event handler를 arrow function으로 작성할 것을 추천드린 이유에 대해서는 링크로 설명 대신하겠습니다. |
- addEvent => addEventDelegate 함수명 수정
|
혹시 아직 작업 진행중이실까요? 아니시면 머지할까 하고요~ |
|
늦어져서 죄송합니다!! 지금까지 한 작업은 일단 모두 푸시하였습니다!!! 추가로 제가 몇몇 부분은 의도를 잘못 이해 했음에도 불구하고, 다시 알려주셔서 감사합니다.. 부족했던만큼 2단계에서 더 열심히 하도록 하겠습니다!! |
|
넵! 정말 고생하셨습니다!! |
안녕하세요, 로이님! 🙇♂️
만나뵙게 되어 영광입니다!!
이번 미션에서는 패턴을 미리 정하지 않고
저희가 이전에 경험해본 패턴들을 통해 좋았던 부분, 단점으로 느꼈던 부분들에 대해 먼저 의견을 나누고
구조를 제안해보며 구현해보았습니다!
데모 페이지
기능 목록
나만의 유튜브 강의실 설계
💁♂️ 구조
Core
Display
Store
Display
Share
Modal
YoutubeClassRoom
Navigation
SearchForm
SearchResult
Domain
YoutubeSearchStore
YoutubeSaveStorage
Api
Webpack 설정
절대 경로 설정
환경 변수 설정
파일 로더 설정
Sass 설정
작동 방식
🚀 후기
이번 미션에서는 패턴을 정하지 않고 구현하여, 정답이 정해져 있지 않다보니
서로 경험이나 학습했던 내용, 그리고 의견들을 많이 교환 해보고 새로운 시도도 많이하다보니
정말 재밌게, 배운 것도 많은 미션이었습니다!
누추한 코드지만, 잘못된 부분은 거침 없이 리뷰 해주시면 감사하겠습니다!!! 😀
잘 부탁드립니다!