전체 글 (251) 썸네일형 리스트형 [React]Movie_app//1. 기본 문법 App.jsApp에 담길 HTML들을 작성하는 곳 1. React, {Component} from 'react';- 리액트를 사용하기 위해 쓰는 라이브러리 같은 것 5. class App extends Component{ }-모든 리액트는 컴포넌트로 구성되는데, 그 컴포넌트를 만들기 위해 사용 되는 것 6. render()-화면에 출력시키는 리액트 메소드 7.return()App 컴포넌트를 불러오면 render될 html코드 8. [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.. [VanillaJS] 검색폼 구현 2 다음은 input태그에 값이 있을 경우에는 reset버튼이 사라지고값이 없을 경우에는 reset버튼이 생기는 코드가 15번째부터 추가되었다. bindEvents함수는 input엘리먼트에 이벤트리스너를 발생시키며keyup(키보드가 움직일 시 이벤트)function(e){this.onKeyup(e)} (이벤트 핸들러)가 발생한다. onKeyup함수는input엘리먼트의 벨류값의 길이를 부울형으로 받음만약 값이 있다면 True 없다면 false를 반납할 것임. [VanillaJS] 검색폼 구현 1 문서가 로딩될때, MainController의 메소드인 init이 실행된다. init()메소드는 작동여부 확인을 위한 콘솔을 찍고 FormView객체의 setup메소드를 호출한다.파라미터는 form엘리먼트이다. FormView.setup은 el을 파라미터로 가지는 함수이며,여기서 this.el(View.js의 init함수로 받음)this.inputElthis.resetEl 모두 FormView의 고유한 객체로 만들기 위함인듯하다. 그리고 showResetBtn이라는 함수를 선언한다. 파라미터로는 boolean형식을 받으며값에 따라FormView의 resetEl의 display스타일을 결정한다. 콘솔 결과는 위와 같다. this.el this.inputEl thisresetEL은 다음과 같이 정해졌다. 주.. [VanillaJS] 0.문서 구조 파일 구성은 Model - HistoryModel.js - KeywordModel.js - SearchModel.js View - FormView.js - View.js- app.js Controller - MainController.js index.htmlstyle.css로 구성되어 있다. style.css와 app.js를 참조하고 있다. 데이터가 컬렉션 형식으로 저장되어 있다(Map이라는 자료형식) list() - 이는 데이터를 리턴한다.Promise는 서버와 비동기로 통신하기 위해 사용하는 것resolve는 Promise의 상태를 이행(Fulfilled)상태로 만드는 것결론적으로만 말하자면 서버와 데이터를 통신하기 위한 방법인거 같다. add() - 데이터를 추가하는 기능.trim() - 문자열에 .. 이전 1 ··· 23 24 25 26 27 28 29 ··· 32 다음 목록 더보기
