Javascript
-
[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..
-
[js]해커뉴스 코딩 복습Javascript 2023. 7. 5. 22:35
괜히 코딩을 하기 싫은 날엔, 인강을 틀어놓으면 괜히 기분이 좋다. 오늘은 예전 23년 3월-4월쯤 연습했던 해커뉴스 클론코딩 인강을 다시 수강하였다. 오늘은 뭔가 괜히 코딩을 하기 싫은 날이다. 이럴 때마다 인강을 수강하면 공부를 하는 듯한 기분이 든다. 지금 다시 수강하니 이 것이 굉장히 기초적인 수준의 강의였다는 것을 깨달았다. (예전엔 이거 하나 이해하고자 하루10시간씩 투자했었는데...) 그 때보다 성장했다고 생각하니 다시 앞으로 나아갈 동기가 되는 것 같다. 다시보니 굉장히 간단한 코드였다. 이 간단한 것을 이해 못해서 당시에 50시간 가까이 이해하려고 노력했었던 것을 생각하면 성장했다고 느껴져 괜히 뿌듯하다. 조만간 css까지 완성하여 최종 완성본을 깃허브에 커밋해야겠다.