전체 글
-
[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..
-
프로그래머스 lv0 배열의 유사도알고리즘(코딩테스트) 2023. 7. 13. 21:57
배열의 유사도 문제 설명 두 배열이 얼마나 유사한지 확인해보려고 합니다. 문자열 배열 s1과 s2가 주어질 때 같은 원소의 개수를 return하도록 solution 함수를 완성해주세요. 제한사항 1 ≤ s1, s2의 길이 ≤ 100 1 ≤ s1, s2의 원소의 길이 ≤ 10 s1과 s2의 원소는 알파벳 소문자로만 이루어져 있습니다 s1과 s2는 각각 중복된 원소를 갖지 않습니다. 입출력 예s1s2result ["a", "b", "c"] ["com", "b", "d", "p", "c"] 2 ["n", "omg"] ["m", "dot"] 0 풀이 : filter를 사용하여 s1배열이 s2배열의 있는 요소를 포함하고 있는 것들만 뽑아내면 어떨까? 라는 생각을 하였다. 뿌듯했던 점은, 가장 좋아요를 많이 받은 ..