분류 전체보기
-
[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(); } 아래 코..
-
[js] mvc 패턴을 연습해보자 -2 검색결과(1)Javascript 2023. 7. 19. 23:42
이 페이지에서 구현할 요구사항이다. ● 검색 결과가 검색폼 아래 위치한다. 검색 결과가 없을 경우와 있을 경우를 구분한다. index.html에 div태그를 추가해준다. 아직 데이터를 받기 전, storage.js 파일 안에 데이터가 담겨있다. 다음 사진은 데이터 중 일부이다. import { createPastDate } from "./helpers.js"; const storage = { keywordData: [ { id: 1, keyword: "샐러드" }, { id: 2, keyword: "커리" }, { id: 3, keyword: "햄버거" }, ], historyData: [ { id: 1, keyword: "검색기록1", date: createPastDate(3) }, { id: 2, k..
-
[js] mvc 패턴을 연습해보자 -1 검색폼Javascript 2023. 7. 19. 22:22
autofocus 란 정의 및 특징 태그의 autofocus 속성은 페이지가 로드될 때 자동으로 포커스(focus)가 요소로 이동됨을 명시합니다. autofocus 속성은 불리언(boolean) 속성입니다. 불리언 속성은 해당 속성을 명시하지 않으면 속성값이 자동으로 false 값을 가지게 되며, 명시하면 자동으로 true 값을 가지게 됩니다. -출처 http://www.tcpschool.com/html-tag-attrs/input-autofocus 코딩교육 티씨피스쿨 4차산업혁명, 코딩교육, 소프트웨어교육, 코딩기초, SW코딩, 기초코딩부터 자바 파이썬 등 tcpschool.com [extension 추천] Auto Import 파일명을 입력하면 자동으로 import가 된다. import View f..