4. 쇼핑몰 웹사이트 만들기 (21)

<알고리즘 단계>

//1. 전체 상품 페이지, 로그인 페이지, 상품상세 페이지 - 3개의 페이지 (가 필요) -완료-

//1-1. 네비게이션 바 (만들기.생성) !!!  -완료- 

//2. 전체 상품 페이지에서는 전체 상품을 볼 수 있다.   -완료-

//3. 로그인 버튼을 누르면 로그인 페이지가 나온다.

//4. 상품 디테일을 눌렀으나, 로그인이 안되어있을 경우에는 로그인 페이지가 먼저 나온다.

//5. 로그인이 되어있을 경우에는, 상품 디테일(상세) 페이지를 볼 수 있다. -완료-

//6. 로그아웃 버튼을 클릭하면 로그아웃이 된다.

//7. 로그아웃이 되면 상품 디테일(상세) 페이지를 볼 수 없고 다시 로그인 페이지가 보인다.

//8. 로그인을 하면 로그아웃이 보이고 로그아웃을 하면 로그인이 보인다.(상단 오른쪽)

//9. 상품을 검색할 수 있다.

 

검색창에 검색어를 입력하고 엔터를 치면 url이 바뀐다!

 

엔터, 즉 키를 입력했을 때 이벤트를 호출시킬 수 있는 것 : onKeyDown

onKeyDown에서 이벤트를 주도록 하겠다.

{search} – search라는 함수를 만들어보자

 

참고로 onKeyDown은 키를 누르는 순간마다 호출되는 이벤트이다.

 

<onKeyDown에 대해 알아보자>

유저가 키를 누르는 순간 발생한다.

ALT, CTRL, SHIFT, ESC(,스페이스바) 를 포함해 모든 키에 대해 동작한다.
(이 점이 onKeyPress와의 가장 큰 차이점이다)

보통

• 엔터 키 감지
• 키보드 단축키
• 실시간 입력 처리

같은 경우에 많이 사용한다.

 

***

cf. <강의> [현재는 사용 불가] 

<onKeyPress에 대해 알아보자>

유저가 키를 눌렀을때 발생한다

그러나 ALT,CTRL,SHIFT,ESC등의 버튼에 대해서는 작동하지 않는다.(그 외에 키에는 동작한다!)

***

 

<사진>

ㅇ 하나 입력 하면..

 

여러번하면...

 

 

 

우리는 모든 키에 대해서 이벤트를 듣고싶은게 아니라 엔터 버튼만 듣고싶다!

엔터를 클릭했을 때 검색이 되게끔~

우리는 엔터키에만 관심이 있다!

 

모든 이벤트 리스너는 이벤트를 매개변수로 넘겨준다!

 

event라는 것을 자동으로 보내준다.

search가 event라는 것을 받는다.

 

const~ (event) 

(받은 이벤트를 가지고...)

 

만약에 이벤트에 있는 키가 Enter이면...

console.log~ 로 테스트를 해보자!

 

<사진>

상단 일부

글자를 입력하면 console창에 아무것도 나오지 않는다

 

만약 엔터를 누르면...

상단 일부

 

"we click this key" 라는 메시지가 console창에 나온다!!!

즉,

엔터에만 작동할 수 잇게 세팅을 해주었다!