oyatplum

6. 최종 음... 기존의 툴은 재미 없어서 내 맘대로 바꾼 명수옹 검색 페이지 구현... ㅎㅎㅎㅎ... ㅎㅎㅎㅎ........ 귀여운 명수다. 까칠한 명수고 신이난 명수이며 라푼젤 명수에 현실적 명수까지 ㅎㅎㅎㅎ 아무리 생각해도 이렇게 냅다 SearchModel을 찍어내는 것보다 효율적인 방법이 있을 것 같은데.... 더 공부해야겠다. 헤헤 그래도 조금 허술한 명수옹 페이지 구현 완료>..

5. 최근 검색어 구현_1 : 최근 검색어 목록이 탭 아래 위치! 목록에서 검색어 클릭하면 해당 화면으로 이동!목록에서 검색어를 클릭하면 결과 화면으로 이동! 이는 추천 검색어에서 구현한 것과 비슷하다. 추천 검색어에서는 keywords로 빈 배열을 만들었듯이 최근 검색어에서는 histroy로 빈 배열을 만들었다. 그리고 최근 검색어 역시 history가 있을 경우와 없을 경우를 나누어서 html을 작성했다. 이렇게!! 그리고 fetchKeyword와 마찬가지로 fetchHistory를 통해 최근 검색어 데이터를 불러왔다. KeywordModel을 import 해오고 함수 구현도 동일하게 작성해주었다. 이러면 v-if 문을 작성할 수 있게 되었기 때문에 이 역시도 동일하게 이렇게 작성해주었다. 그러면 헤..

4. 추천 검색어 구현_1 : 번호, 추천 검색어 목록이 탭 아래 위치하도록 해보장~~~ 검색 결과를 searchResult 변수로 받은 것처럼 추천 검색어로 데이터를 받아 올 것이다. 어디서??? 모델에서!! 그래서 이렇게 data에 keywords 라는 빈 배열의 변수를 만들어 주었다. 그러면 이제 이 데이터가 있을 경우와 없을 경우를 따져줘야겠죵 그래서 추천 검색어 목록이 있던 div에 또 다시 v-if , v-else로 나누어 분리를 해주었다. 그리고 keywords가 있는 경우엔 모델에서 데이터를 가져와야 하기 때문에 KeywordModel를 inport 해오고 이는 뷰 인스턴스가 처음 실행이 될 때 가져올 것이기 때문에 created함수에서 this.fetchKeyword라는 함수를 호출하도록..

3. 탭 구현_1 : 추천 검색어, 최근 검색어 탭이 검색 폼 아래 위치! 기본적으로 추천 검색어! 추천 검색어와 최근 검색어라는 데이터를 이렇게 tabs 라는 변수에 배열로 넣어주었고 html로 돌아와 v-if 에 submitted를 div로 만들어줬었기 때문에 검색 결과 창이 아닌 경우 v-else에 이렇게 JS에서도 ul태그의 tabs의 class를 tabs로 해줬으니까... 맞춰주고 li 태그를 반복문으로 돌기 때문에 역시 v-for 사용! 그리고 출력할 탭들을 {{tab}}으로 작성해주면 추천 검색어와 최근 검색어가 차례로 출력이 된다.... 이렇게!! 그런데 출력될 탭을 {{tabs}}로 s를 붙여주면 이렇게 변수였던 tabs가 두 번 나오게 되는 것을 확인할 수 있다.... s의 영향력이 크..

2. 검색 결과 구현_1 : 검색 결과가 검색 폼 아래 위치하고 보이게! 우선 검색 결과 데이터를 정의해줘야 한다. JS에서 배열로 받았기 때문에 여기서도 뷰의 데이터에 빈 배열을 넣어줬다. 이렇게 빈 배열인 searchResult를 만들어 줬다. 그리고 이 searchResult를 html에서 출력할 부분을 만들어준다!! 데이터가 있을 경우와 없을 경우를 나누어서 있을 경우에는 배열의 길이가 있도록! 이렇게 검색폼인 form 태그 아래에 v-if 와 v-else를 사용해서 만들었다.. v-if는 " " 안의 값이 참일 경우에만 내용을 출력하도록 해준다!!! searchResult는 배열이기 때문에 배열을 순회하면서 출력해주면 되겠지! 검색 결과는 ul 태그를 이용해서 만들어줬고 li 를 출력하도록 한다..

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