쇼핑몰 검색 페이지 구현_순수 JS_1

 

학습 목표

 

• 순수 JS와 Vue.js를 사용하여 검색 폼 구현하기
• 이를 통해 순수 JS와 Vue.js의 차이를 알고 익숙해지기

 

앞으로의 쇼핑몰 검색 페이지 구현 포스트들은

인프런의 이 강의를 바탕으로 이루어 질 것이다!!

 

---

1. 순수 JS

 

먼저 JS를 통해 검색 폼을 구현하기 위해서 MVC 패턴을 이용할 것이다.

 

 

---

그렇다면.. MVC 란?

Model : 데이터를 관리하는 역할. DB(data base)와 객체 사이에서 데이터 전달.

View : 모델의 데이터를 화면에 그리는 역할. 사용자가 화면에 입력한 값을 처리.

(model과 view는 직접적으로 연결되어 있지 않기 때문에 controller!!)

Controller : model과 view 사이에서 데이터 전달하는 역할.

 

---

폴더 구조

 

폴더 구조

 

우선 기본적으로 html이랑 css, js가 있고 js는 model과 view로 구성되어 있다.

 

 

초기 html

 

초기 html 코드... 아직 저 meta 부분은 모르겠다ㅜㅜ 나중에 더 찾아봐야지

 

view 폴더 중 view.js

 

스크립트에서는 다른 모듈을 import 하거나, 스크립트 내부에서 export를 통해 컴포넌트를 조정, data를 제공할 수 있다.

즉, export란 쉽게 말해, 내가 만든 모듈의 함수, 객체, 변수를 다른 모듈에서 가져다 사용할 수 있도록 내보내는 것!!

 

그렇다면 export만 써도 되는데.... default는?? 특정 하나만 내보낸다는 의미다.

그래서 위의 코드처럼 export default를 사용함!!

 

그럼 반대로 가져올 때는 import를 쓰면 되겠군

 

내부의 컴포넌트에는 return할 함수나 객체를 넣어줘야 한다.

여기선 객체를 return

 

 

 

view에는 몇 개의 메소드가 있는데...

1. init

: element를 인자로 받아서 this.el = el를 통해 자신의 property로 사용... 자세하게는 모르겠다ㅠㅠ 일단 그렇구나!!

 

2. on / emit

: on은 event와 handler를 인자로 받아와 현재 가지고 있는 element에서 특정 event가 발생했을 때, handler가 실행되도록 하는 역할!

: on이 특정 event에 대한 행동을 정의했다면, emit은 스스로 event를 방출하는 역할이다. event와 data를 인자로 받고

evt는 CustomEvent를 통해 첫 번째 인자로 event 이름을 받고, 두 번째 인자로 detail 키를 가지고 있는 data 객체를 받는다.

그러면 element는 dispatchEvent 메소드를 이용하여 인자로 evt의 객체를 넘겨주면 element는 event를 방출하게 된다!

 

+ ) CustomEvent / dispatchEvent

: CustomEvent는 말 그대로 event 객체를 생성! 그러면 반드시 해당 event를 '실행'시켜야 하기 때문에 dispatch(실행하다)를 사용하여 실행시킨다 ~ 만들었으니까 써 먹어야지..뭐 그런거지

 

2. hide / show

: hide와 show는 css 속성 중 style.display를 사용하여 값을 'none'으로 주면 hide가 되고, ' ' 공백 처리하면 show

 

 

 

 

model 폴더 중 HistoryModel.js

HistoryModel.js는 검색 내역에 대한 데이터

 

내부적으로 data는 컬렉션 형태이고 각 항목은 keyword와 date로 구성

 

1. list

list 메소드를 통해 data를 return 해주는데.. 그냥 return this.data를 사용하지 않고 Promise 패턴을 사용함!

그 이유는 히스토리 같은 경우, 서버에서 비동기로 데이터를 가져오는 경우도 있고 혹은 쿠키로 데이터를 얻어서... 공통적으로 사용하기 위함! 이라고는 하는데... 지금은 이게 무슨 소리인지?!! 모르겠지만 그렇구나~~

 

2. add

add는 추가될 검색어를 인자로 받아서 기존에 데이터가 있는지 없는지 체크하여 있으면 삭제하고 날짜를 다시 산정하여 기존 데이터와 합쳐서 추가한다.

 

+) data.some / data.every

: some은 조건을 만족하는 값이 발견되면 순회를 중단! 반대로 every는 만족하지 않는 값이 발견되면 순회를 중단!

 

3. remove

keyword를 인자로 받아서 keyword에 해당하는 것을 삭제

 

+) data.filter

: 주어진 함수를 만족하는 모든 요소를 모아 새로운 배열로 반환

 

 

 

model 폴더 중 KeywordModel.js

 

History와 비슷하게 data를 컬렉션 형태로 가지고 있지만 keyword만 있다. (추천 키워드!)

 

list 메소드만 이용하였고, 역시 History처럼 Promise 사용..!!

단순히 data를 반환하지 않고 setTimeout을 사용하여 200ms 이후에 data를 return하도록 설정했다.

반환하는 this.data를 res로 썼는데.... response 같긴 하다만...아직 모르겠다..

 

+) setTimeout()

: 일정 시간 기다린 후 코드를 실행함. 첫 번째 인자로 실행할 코드를 담고 있는 함수, 두 번째 인자로 지연될 시간을 밀리초(ms)로 받는다.

 

 

model 폴더 중 SerachModel.js

 

마지막으로 Search는 이전과 마찬가지로 data 컬렉션을 가지고 있고 list 메소드를 통해 query를 인자로 받아서 data를 반환한다.

 

 

 

음.. js에 controllers폴더와 MainController 파일을 만들어 주었고..

 

controllers 폴더 중 MainController

 

우선 간단하게 tag를 찍고 init이 실행되었다는 태그를 해주었다..

app.js

그리고 app.js에서 import를 통해 이 MainController를 호출하였다.

controller가 동작하는 시점은 dom이 모두 load되었을 때 실행되도록 작성했다...

 

 

사실 이렇게 하면... lite-server가 작동을 하지 않고.. 자꾸 404(NOT Founded)에러가 뜸..

콱...

어쩌다 보니

결과랑 같이 뜸... 하....

 

해결하지 못한 채 일단 다음 step....ㅋㅋㅠㅠㅠㅠ