본문 바로가기

vanila5

[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] 검색 결과 기능 구현 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.

[Vanila.js] 환경셋팅 1 우아한 형제들에서 근무 중이신 프론트 개발자 김정환님의 강의를 기반으로 작성합니다.인프런 강의 제목은 '만들고 비교하며 학습하는 리액트'입니다. 해당 강의는 깃을 사용하며 Branch별로 강의를 해주십니다. 학습을 하기 위해 먼저 git을 fork합니다. fork가 잘되었다면, 강사님이 만들어 둔 branch로 이동할 수 없습니다.우선 fork한 내 레파지토리를 clone하고 해당 폴더로 이동해서 git bash를 실행합니다.그리고 아래와 같은 명령을 작성합니다. 1. git remote add upstream https://github.com/jeonghwan-kim/lecture-react.git2. git fetch upstream3. git checkout -f upstream/ready/scaf.. 2024. 7. 30.

이전 1 다음

티스토리툴바