FrontEnd/VanillaJs (12) 썸네일형 리스트형 [Frontend] VanillaJS vs Vue.js (3) KeywordModel.jsexport default { data: [ {keyword: '이탈리아'}, {keyword: '세프의요리'}, {keyword: '제철'}, {keyword: '홈파티'} ], list() { return new Promise(resolve => { setTimeout(() => { resolve(this.data) }, 200) }) }} list()프로미스를 리턴하고setTimeout을 이용하여 0.2초 뒤에this.data를 다른 함수에 파라미터로 전달한다. MainController.js fetchSearchKeyword() { KeywordModel.list().then(data => { KeywordView.render(data) }) }, fetchSearchK.. [JS] Promise Model을 이해하기 위해서Promise를 다시 한번 살펴보자. 프로미스(Promise) 싱글쓰레드인 자바스크립트에서 비동기 처리를 위해서 콜백(callback)을 사용해왔다.덕분에 비동기 처리를 온전히 해낼 수 있었지만 이런 콜백이 사용되는 경우가 많아지면서 단점이 드러났다.그 단점은 비동기 처리를 순차적으로 실행할 필요가 있는 경우에 비동기 처리를 중첩시켜서 표현하므로 에러, 예외처리가 어렵다는 것과 중첩으로 인한 복잡도가 증가하는 것이 이다.크게 이 두 가지의 단점을 해결하기위해 프로미스가 예전부터 라이브러리로 생겨났고, 이것을 ES6에서는 언어적 차원에서 지원하게 되었다. 출처: https://jeong-pro.tistory.com/128 [기본기를 쌓는 정아마추어 코딩블로그]Promise가 왜 .. [Frontend] VanillaJS vs Vue.js (2) 내용이 많아서 나눠서 해야 할 것 같다. 여튼Form과 Tab 컴포넌트를 끝내고 Keyword History Result 가 남음 KeywordView.jsKeywordView.render = function (data = []) { this.el.innerHTML = data.length ? this.getKeywordsHtml(data) : this.messages.NO_KEYWORDS this.show() this.bindClickEvent() return this} KeywordView.getKeywordsHtml = function (data) { return data.reduce((html, item, index) => { html += `${index + 1} ${item.keyword}` .. [Frontend] VanillaJS vs Vue.js (1) 어제까지 ES6에 관한 책을 읽고 나니, 내가 여태 까지 인강을 보며 짠 코드들을 얼마나 이해하지 않고 받아 적었는지 그리고 지금 보면 보이지 않는 것들이 보이지 않을까 싶어 강정환 강사님의 순수 자바스크립트와 Vue.js 강의를 다시 정리해보기로 했다. 다음 형태의 검색어에 따라 View가 바뀌는 앱이며,MVC패턴을 지닌다. 컴포넌트로 분류하면검색어를 받는 컴포넌트추천검색어와 최근검색어의 탭이 있는 컴포넌트 추천검색어를 클릭시에 나오는 컴포넌트최근검색어를 클릭시에 나오는 컴포넌트결과(제품)이 나오는 컴포넌트그리고 전체를 총괄하는 컴포넌트 가 있고 추천검색어, 최근 검색어, 검색결과는 각각 데이터를 지닌다. app.jsimport MainController from './controllers/MainCo.. [VanillaJS] 결과창(ResultView) 생성하기 View 15. render를 한다.결과창을 나타 낼 div태그에 innerHTML로써 결과를 입력해낸다.16. data.length 결과값에 따라 this.getKeywordHtml(data) 혹은 NO.KEYWORDS_message를 출력한다. 18.this.show()가 필요한 이유는 최근 검색어 추천 검색어 시에 ResultView를 hide시키기 때문이다.고로 render시에 show()를 한다. 21. getKeywordHtml()말 그대로 결과값을 얻기 위해 생성하는것reduce함수를 사용하였다. 다만 여기서 특이한건 변수 html에 더해질 값을 또 함수로 만들었다는 것이다.Controller export default{ init(){ ResultView.setup(document.getEl.. [VanillaJS] 최근 검색어(HistoryView) 생성하기 View18번째 줄 : bindRemoveBtn은 버튼에 이벤트를 달아주기 위함이다. (Click, onRemove()) 21. e.stopPropagation : 상위에 이벤트를 전파하는 것을 방지하는 것button이 아닌 li태그에 이벤트가 전파되는것을 방지하기 위해 사용 했다. 23. onRemove(btn.parentElement.dataset.keyword)onRemove는 MainController에 데이터를 보내기 위해 만들어 진것파라미터 값은 btn의 부모태그인 li태그의 데이터셋`28. onRemove : 파라미터값은 histroy의 keyword(검색기록) Controllerinit(){ HistoryView.setup(document.querySelector('#search-histo.. [VanillaJS] 추천 검색어(KeywordView) 생성하기 View 5번줄 : View의 속성을 받아 KeywordView라는 객체 생성 7번줄 : 값을 엘리멘트로 받음(왜냐면 메인 컨트롤러에서 불러와야 하기 때문임) 위와 같은 방식을 통해 메인 컨트롤러와 FormView 두 곳에서 객체로써 엘리먼트를 가져올 수 있음 15. render 함수를 만듬(render는 화면에 나타내는 것을 의미)여기서 함수 파라미터로 data=[]는 MainController를 통해 KeywordModel에서 가져오는 것임 16. 렌더를 통해서 가져올 것이 무엇인지 물어보는것data.length에 Ture false여부에 따라 HTML태그를 가져올 지, 혹은 메세지를 가져올지 결정함 17 .bindClickEvent는 이름과 같이 클릭이벤트를 위한 것 다만 bind인 것은 rende.. [VanillaJS] 검색폼 구현 3 빨간 색을 칠 한 부분이 추가된 코드이다. onKeyup함수에 추가된 것부터 확인해부다 enter는 코드 번호로 13번이다 그래서 변수로 지정해주었다.그리고if(e.keyCode !== enter) 키 코드가 엔터가 아닌 경우에는 return값을 주어 그냥 지나치고그렇지 않는 경우에는FormView의 emit메소드를 이용 하여 메인 컨트롤러에 값을 알려주는 역할을 한다.파라미터값은 우리가 새로 만들어줄 이벤트 @submit (여기서 @는 커스텀임을 표현하기 위해 사용하였다)데이터 {input : this.inputEl.value}이다. 애초에 FormView에서는 결과를 나타내는 역할을 하는게 아니기 때문에Form에서 일어난 이벤트를 MainController에 알려주기만 하면 된다. init()함수에F.. 이전 1 2 다음
