oyatplum

1. 검색폼 구현_1 : 검색 상품명 입력 폼이 위치한다. 검색어가 없는 경우이므로 x버튼은 숨김! 검색어를 입력하면 x버튼 나옴! 우선 검색 폼이 나타나도록 JS에서와 마찬가지로 html에서 form 태그를 구현해주었다. 이렇게!! 그리고 app.js에서 msg를 지우고 query를 만들어줬다. 여기서 query의 역할은 입력 데이터를 받아서 저장하는 역할!! 그리고 html에서 input에 연결하기 위해 아래 그림처럼 v-model을 query로 생성해주었다. 데이터 바인딩이란 스크립트와 돔 사이의 데이터를 주고받는 과정을 의미한다. v-model이란 뷰 인스턴스와 html간의 연결을 바인딩한다!! 즉, 뷰에서 양방향 바인딩을 가능하게 한다. 즉, 사용자가 입력을 하게되면 그 데이터는 query로 들..

2. Vue.js MVC 패턴으로 JS를 활용하여 검색 페이지를 만든 것을 이제 Vue.js로 만들어 볼 것이다. Vue.js는 MVVM 패턴을 사용한다. 그렇다면.. MVVM 이란? MVC의 M과 V는 동일하고 뒤의 Controller가 아니라 View Model이 사용된다. 이전의 Model 과 View는 각각 Model : 데이터를 관리하는 역할. DB(data base)와 객체 사이에서 데이터 전달. View : 모델의 데이터를 화면에 그리는 역할. 사용자가 화면에 입력한 값을 처리. 이러한 역할을 담당했고 View Model은 View Model : 일반적인 Model과 달리 Model과 View사이에 위치한다. Moel로 부터 데이터를 가져오는데 그 데이터는 View에 적합한 형태의 데이터로 ..

5. 최근 검색어 구현_1 : 최근 검색어, 목록이 탭 아래 위치! : 목록에서 검색어를 클릭하면 선택된 검색어로 검색 결과 화면 이동! 추천 검색어 목록과 유사하지만 약간의 차이가 있기 때문에 KeywordView를 복사해서 사용할 것이다. 우선 html에서 search-keyword 아래에 search-history를 만들어 주었고 새롭게 HistoryView.js도 생성해준 뒤, KeywordView를 복사해왔다. 이제 Maincontroller와 연결해보자!! HistoryView를 import 해오고 이렇게 KeywordView와 똑같은데 History로만 변경해주었다. 그리고 onClickKeyword 함수와 똑같이 onClickHistory 함수에서도 search 메소드를 실행하도록 해주었다..

4. 추천 검색어 구현_1 : 번호, 추천 검색어 목록이 탭 아래 위치! 검색어 목록을 만들기 전에 tabs 클래스 부분을 div에서 ul로 바꾸어 추천 검색어와 최근 검색어 탭이 아래처럼 가로로 나오게 해주었다. 자 이제 검색어 목록을 만들기 위해 search-keyword를 id로 가지고 있는 div를 만들어주었다. 실제 데이터는 서버에서 가지고 오고 그 데이터를 기반으로 dom을 만들기 때문에 하나만 만들었다!! 오호라... 새롭게 KeywordView.js 파일을 생성하고 이전과 마찬가지로 기본 작업을 해주었다! 마찬가지로 데이터를 받아서 화면에 띄워줄 render 함수가 필요하기 때문에 요로코롬... 인자로 data를 받고 element의 innerHTML에 data를 넣는데 data가 있을 경..

3. 탭 구현_1 : 추천 검색어, 최근 검색어 탭이 검색 폼 아래 위치!! 우선 html 코드는 form 태그와 search-result 사이에 추천 검색어와 최근 검색어를 li 태그로 작성해주었다. 이렇게!! 3. 탭 구현_2 : 기본으로 추천 검색어 탭을 선택 먼저 TabView.js 파일을 만들어 주었당!! 그리고 다른 view들과 마찬가지로 기본적인 내용들을 작성해주었고 흠.. 그리고 이렇게 추천 검색어에 active 클래스가 생기도록 해줄 것이다!!! 그래서 아래처럼 setActiveTab이라는 함수를 만들어 줬다. tabName을 인자로 받고 element의 li를 찾는다!! 이것을 Array로 만들고!! (왜지....) forEach 함수를 통해 li의 className에다가 active ..

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..