oyatplum

2. 검색결과 구현_1 : 검색 결과를 검색 폼 아래 위치시키기. 검색 폼 아래 검색 결과를 위치시켜야 하는데 이는 동적인 작업이기 때문에 우선 content class에 search-result를 id로 만들어준다. 그리고 새롭게 ResultView.js를 만들어주었고.. FormView와 동일하게 view를 복사하고 setup함수를 써줌!! 역시나 view의 init을 이용해서 element를 속성으로 가지고 있게끔! 이제 Maincontroller에서 ResultView를 import 해서 가져오고 init 함수에서 ResultView를 setup했다.. id 값은 html에서 작성한 search-result로! 이렇게만 하면 아무 것도 그려지는 것이 없기 때문에... 이제 render함수를 사용할..

1. 검색폼 구현_1 : 검색 상품명 입력 폼이 위치. 검색어가 없는 경우이므로 x 버튼 숨기기. 검색 페이지에서 가장 기본이 되는 검색 창을 우선 구현하였다. 우선 form 태그를 사용하여 검색 창을 만들었다. form 태그는 웹 페이지에서의 전체적인 입력 양식을 의미한다. form 태그 내부에는 input 태그를 사용하여 실질적으로 사용자가 양식을 입력하게 해준다! 위의 코드 실행 결과는 두둥! 여기서 새롭게 알게된 input 태그 내부의 autofocus !! autofocus는 페이지가 로드될 때 자동으로 포거스가 input 요소로 이동되게 해준다. 즉, 처음 페이지에 들어가거나 새로고침 시 이렇게 input 태그에 자동으로 포커스를 이동시켜준다. "검색어를 입력했을 때만 x 버튼이 나와야 하기 ..

학습 목표 순수 JS와 Vue.js를 사용하여 검색 폼 구현하기 이를 통해 순수 JS와 Vue.js의 차이를 알고 익숙해지기 앞으로의 쇼핑몰 검색 페이지 구현 포스트들은 인프런의 이 강의를 바탕으로 이루어 질 것이다!! 1. 순수 JS 먼저 JS를 통해 검색 폼을 구현하기 위해서 MVC 패턴을 이용할 것이다. 그렇다면.. MVC 란? Model : 데이터를 관리하는 역할. DB(data base)와 객체 사이에서 데이터 전달. View : 모델의 데이터를 화면에 그리는 역할. 사용자가 화면에 입력한 값을 처리. (model과 view는 직접적으로 연결되어 있지 않기 때문에 controller!!) Controller : model과 view 사이에서 데이터 전달하는 역할. 폴더 구조 우선 기본적으로 ht..