본문 바로가기

java script6

[Chrome Extension] 구글 딥다이브 크롬 확장 프로그램 제작기 구글 크롬 확장 프로그램을 제작하자. 나는 이걸 왜 만들었을까?구름 풀스택 과정 10기를 참여하면서 강의 리스트 중 중복되는 강좌가 있었다.중복되는 강좌를 식별하기 위해서 만들어봤다.ResultHow?우선 docs를 찾아봐야한다.https://developer.chrome.com/docs/extensions/get-started/tutorial/hello-world?hl=ko여기서 잘 설명되어있다.요약해보자manifest.json 이라는 파일과background.js, 그리고 동작을 할 js들이 필요하다. 자세한 코드는 git에 작성해두었다.이제 리팩토링을 해보자.https://github.com/groom-study-team1-project/chrome-extension GitHub - groom-st.. 2024. 8. 7.

[Vanila js] 최근 검색 구현하기 ResultViewexport default class HistoryListView extends KeywordListView { constructor() { super(qs("#history-list-view"), new Template()); } bindEvents() {} handleClickRemoveButton() {}} HistoryListView를 보면 KeywordListView 와 매우 유사하다.추천검색과 차별점을 생각하면, 검색기록을 지우는 작업이 추가로 수행되니까. 새로운 이벤트를 바인딩 해준다.또, KeywordListView를 상속받으므로 KeywordListView의 생성자의 구조 변경이 발생한다.Controllerexport defaul.. 2024. 8. 2.

[Vanila js] 탭 구현하기 ResultViewexport default class TabView extends View { constructor() { super(qs('#tab-view')); this.template = new Template(); } show() {} bindEvents() {} } 정적 페이지의 tab-view id를 가진 태그에 작업을 수행한다.Result와 같이 탭을 보여줄 기능과, 탭을 누르는 행위를 하는 기능이 필요Controllerexport default class Controller { constructor(store, {searchFormView, searchResultView, tabView}) { this.store.. 2024. 8. 1.

[Vanila js] 검색 결과 기능 구현 Viewexport default class SearchResultView extends View { constructor() { super(qs("#search-result-view")); this.template = new Template(); } show(data = []) { if (data.length > 0) { this.element.innerHTML = this.template.getList(data); } else { this.element.innerHTML = this. template.getEmptyMessage(); } super.show(); }}.. 2024. 7. 31.

[Vanila js] 검색 기능 구현하기 Branch - ready/search-form-1앞선 포스팅의 작업이 제대로 되었다면 main 브랜치에서1. git checkout -b ready/search-form-12. 코드 작성3. git add .4. git commit -m "feat: 내용"5. git push origin ready/search-form-1이후 PR 날리고 Rebase Merge 하기.git bash에서 코드로 할 수도 있지만, 협업 중 코드 리뷰를 하는 과정이 있음.그래서 직접 github 사이트에서 Merge하는 것에 익숙해지기 앞으로 모든 작업은 위 과정을 반복해서 branch를 업데이트 할 예정 // index.html // main.jsdocument.addEventListener("DOMContentL.. 2024. 7. 31.

[Vanila.js] 사전 코드 이해하기 강사님이 미리 구현해 둔 서비스 branch : ready/scaffodingIn Memory DB추천 검색어, 검색 기록, 상품 데이터Utility시간관련 UtilDOM Event를 활용한 Util기본적으로 JS에서 제공하는 기술들을 모듈화했다고 보인다.Model이후에 비즈니스 로직 및 중요 로직이 담길 것으로 보임.View정적 페이지 정보를 렌더링(수정)하는 페이지Utility를 활용해 기본적인 기능이 제공된다.ControllerView에 작성될 내용을 제어Model의 비즈니스 로직을 활용하거나 따로 서비스 로직을 작성할 듯 2024. 7. 31.

이전 1 다음

티스토리툴바