김정환
-
[js] mvc 패턴을 연습해보자 -4 최근 검색어(3) mvc패턴 연습 순수js 마지막Javascript 2023. 7. 21. 12:14
mvc패턴 순수 자바스크립트 부분 마지막 요구사항 ● 검색시마다 최근 검색어 목록에 추가된다 모델 역할을 하는 Store.js 파일에 removeHistory(keyword) { this.storage.historyData = this.storage.historyData.filter( history => history.keyword !== keyword) } addHistory(keyword) { keyword = keyword.trim(); if(!keyword) { return; } const hasHistory = this.storage.historyData.some(history => history.keyword === keyword) if(hasHistory) { this.removeHistor..
-
[js] mvc 패턴을 연습해보자 -4 최근 검색어(2)Javascript 2023. 7. 21. 11:55
요구사항 ● 목록에서 x 버튼을 클릭하면 선택된 검색어가 목록에서 삭제된다 HistoryListView.js 파일에 bindEvent를 생성해준다 bindEvent() { delegate(this.element, "click", "button.btn-remove", event => this.handleClickRemoveButton(event)) super.bindEvent(); } delegate는 강의에서 제공해주는 헬퍼함수. 그 후 부모의 bindEvent로 오버라이딩 해준다. handleClickRemoveButton(event) { console.log(tag, "handleClickRemoveButton",event.target); const value = event.target.parentE..
-
[js] mvc 패턴을 연습해보자 -4 최근 검색어(1)Javascript 2023. 7. 21. 10:42
요구사항 ● 최근 검색어 이름, 검색일자, 삭제 버튼이 목록 형태로 탭 아래 위치한다 (추천 검색어와 비슷) ● 목록에서 검색어를 클릭하면 선택된 검색어로 검색 결과 화면으로 이동한다 (추천 검색어와 같음) HistoryListView.js 파일을 만들고 초기 세팅을 해준다. 그런데 가만보니, KeywordListView와 굉장히 유사한 방식이기 때문에, export default class HistoryListView extends KeywordListView { constructor() { super(qs("#history-list-view"), new Template()); } } extends View가 아닌 extends KeywordListView로 해준다. 그러나 KeywordListView..
-
[js] mvc 패턴을 연습해보자 -4 추천검색어Javascript 2023. 7. 20. 18:37
추천 검색어 구현 ● 번호, 추천 검색어 이름이 목록 형태로 탭 아래 위치한다 ● 목록에서 검색어를 클릭하면 선택된 검색어의 검색 결과 화면으로 이동한다 KeywordListView.js 파일을 만들어주고 초기 셋팅을 해준다. export default class KeywordListView extends View { constructor() { super(qs("#keyword-list-view")); this.template = new Template(); } show(data = []) { this.element.innerHTML = data.length > 0 ? this.template.getList(data) : this.template.getEmptyMessage(); super.show()..
-
[js] mvc 패턴을 연습해보자 -3 탭(3)Javascript 2023. 7. 20. 15:02
오늘의 요구사항. ● 각 탭을 클릭하면 탭 아래 내용이 변경된다 Tabview.js 파일에 bindEvent를 추가해준다. export default class TabView extends View { constructor() { super(qs("#tab-view")); this.template = new Template(); this.bindEvents(); } bindEvent는 bindEvents() { delegate(this.element, "click", "li", event => this.handleClick(event)) } delegate는 강의에서 제공해주는 헬퍼 함수이다. 쉽게 설명하면, 이벤트를 위임받은 자식 요소들에 대해 특정 이벤트를 처리하는 메서드이다. tabView 아래 내..
-
[js] mvc 패턴을 연습해보자 -3 탭(2)Javascript 2023. 7. 20. 14:37
오늘의 요구사항은, ● 기본으로 추천 검색어 탭을 선택한다 이 역할은 TabView.js 안에 show 메서드가 해야할 일이다. 먼저, show(selectedTab) { this.element.innerHTML = this.template.getTabList(); qsAll("li", this.element).forEach(li => { li.className = li.dataset.tab === selectedTab ? 'active' : ''; }) super.show() } 모든 li태그에 반복을 돌며 selectedTab과 같으면 클래스에 active를 활성화 시켜준다. 이렇게 하기 위해서는, selectedTab에 대한 정보를 어디서 들고있어야한다. 이는 model의 역할을 하고있는 Store..
-
[js] mvc 패턴을 연습해보자 -3 탭(1)Javascript 2023. 7. 20. 11:35
추천검색어와 최근 검색어가 있는 '탭'을 만들어보자. 이번 페이지의 요구사항은 ● 추천 검색어, 최근 검색어 탭이 검색폼 아래 위치한다 index.html에 추가해주고, TapView.js 파일을 만들고 초기 셋팅을 해준다. const TabType = { KEYWORD: 'KEYWORD', HISTORY: 'HISTORY' } const TabLabel = { [TabType.KEYWORD]: '추천 검색어', [TabType.HISTORY]: '최근 검색어', } 탭타입과 탭라벨을 만들어주고, export default class TabView extends View { constructor() { super(qs("tab-view")); this.template = new Template() } s..
-
[js] mvc 패턴을 연습해보자 -2 검색결과(2)Javascript 2023. 7. 20. 00:05
오늘 구현할 요구사항이다. ● x버튼을 클릭하면 검색폼이 초기화 되고, 검색 결과가 사라진다 x버튼을 클릭했을 때의 플로우를 점검해보자. x버튼은 SearchFormView에서 관리하고 있다. 아래 코드의 마지막 줄은 이벤트를 바인딩하는 메서드다. export default class SearchFormView extends View { constructor() { super(qs("#search-form-view")); this.inputElement = qs("[type=text]", this.element); this.resetElement = qs("[type=reset]", this.element); this.showResetButton(false); this.bindEvent(); } 아래 코..