Conversation
- 요청 받을때 CORS 오류, 해결
- app.hbs: 클라이언트 서버로만 구축, 테스트용
- dummy code - 인풋 e.target.value - 인풋 value 값, 배열 값 검색 반환
- 예) app 라고 치면 출력은 apple , appstore - appl 라고 치면 출력은 apple 만 출력
- 네이밍 추후 변경 예정 - 검색 키워드 리스트, 해당 검색 갯수 만큼 볼드 처리
- 방향키 다운 (keyCode 40) on처리 - 방향키 업 (keyCode 38) on 처리
전 이걸 미션에 요구사항으로 넣지 않았는데, 왜 다들 했는지는 모르겠지만 |
|
앗 충돌이 났어요..PR이. |
crongro
left a comment
There was a problem hiding this comment.
MVC를 해보신 경험은 좋긴해요. 많이 공부하고 배우셨을거 같네요.
리뷰 남긴 부분 살펴봐주세요~!
승인/머지해요
app.js
Outdated
| import MainController from "./js/controllers/MainController.js"; | ||
|
|
||
| document.addEventListener('DOMContentLoaded', ()=>{ | ||
| MainController.init(); |
There was a problem hiding this comment.
클래스는 대문자로 시작하지만, 객체는 보통 소문자로 시작.
| const $ = selector => document.querySelector(selector); | ||
| const $$ = selector => document.querySelectorAll(selector); | ||
|
|
||
| export { $, $$ }; |
There was a problem hiding this comment.
유틸을 조금씩 더 늘려보세요~ 범용적인 기능을 늘려가면서요.
| const JSON_DATA_URL = | ||
| 'https://baekcode.github.io/codesquad-FE/day4_search/keyword.json'; | ||
|
|
||
| export default { |
There was a problem hiding this comment.
export default 하면 이름이 없어서. 이게 뭐지?? 라는 생각이 들긴하네요.
| this.resultList = -1; | ||
| SearchModel.setup(JSON_DATA_URL); | ||
| SearchView.setup($('#search')) | ||
| .on('@input', e => this.onInput(e.detail.input)) |
| const listChild = Array.from(list.children); | ||
| if (this.resultList === listChild.length - 1) return false; | ||
| listChild.forEach(v => { | ||
| if (v.classList.contains('on')) { |
There was a problem hiding this comment.
v 라고 쓸 수 있는데, 좀더 진짜 이름을 지어져도 되죠.
| }, | ||
| onKeyDown() { | ||
| const list = $('.keyword-list.open'); | ||
| const listChild = Array.from(list.children); |
There was a problem hiding this comment.
listChild가 아니고, 복수의 표현을 쓰셔야 할 듯. listChildrens ?? 음
| }); | ||
| }, | ||
| getData() { | ||
| return JSON.parse(localStorage.getItem('keyword_json')).keyword; |
There was a problem hiding this comment.
localstorage에 데이터가 없다면 어떻게 되는거죠?
| return JSON.parse(keywordDATA).keyword; | ||
| }; | ||
|
|
||
| const searchList = (el, arr) => { |
There was a problem hiding this comment.
이 함수는 리팩토링이 필요해 보이네요.
약간 중첩된 코드같아서요.
There was a problem hiding this comment.
search.js 파일은 dummy용.. 지우는걸 잊었습니다.
| @@ -0,0 +1,21 @@ | |||
| export default { | |||
There was a problem hiding this comment.
js/views/ResultView.js
라고 이름지으면 이게 slide인지 ,search인지, 아니면 Result 라는 하위서비스가 있는 서비스인지..잘 모를 듯.
There was a problem hiding this comment.
search 라는 디렉토리 만들고 그디렉토리에 위치하는 경우는 어떠한가요?
| @@ -0,0 +1,75 @@ | |||
| import {$,$$} from './util.js'; | |||
|
|
|||
| const search = $('#search'); | |||
There was a problem hiding this comment.
MVC 가 잇는상태에서 코드내용을 잘 뜯어보지 않으면,
search.js 는 어떤 역할일지 잘 모를거 같네요.
MVC이외에 뭔가 하나가 더 있는 느낌이랄까? MVC와 이 아이와의 관계는 무엇일지도 의문이 들고요.
There was a problem hiding this comment.
search.js 파일은 dummy용.. 지우는걸 잊었습니다.
|
충돌이 나서 일단 그대로 둡니다. |
충돌 해결했습니다! |
데모 : https://baekcode.github.io/codesquad-FE/day4_search/search
(영어 단어 1000개 사용)
느낀점
MVC 패턴을 공부 하면서 완벽히 이해 되진않았지만 각각의 역할에 대해서 어느정도 알게 되었으며,
특히 컨트롤러에게 이벤트/데이터 전달하는 과정에서 많은 것을 배웠습니다. 하면서 재밌기도 했구요.