[JS]아랍어 단어장 페이지 구현하기 - 3. 검색기능

Outline

단어장의 필수기능은 내가 어떤 단어를 저장해두었는지를 확인해야한다.
이때 사용되는 것이 바로 검색 기능이다.

만난 ERR

1. Cannot read properties of null (reading 'addEventListener') in a Javascript file

참고링크: stackoverflow

원인: 변수에 querySelector를 사용해서 input 요소를 할당할때,
this.el 이 아닌 document에서 사용했기 때문

// 🚨  : 수정 전
 const inputEl = document.el.querySelector('input')
// 💡 : 수정 후
 const inputEl = this.el.querySelector('input')

참고한 링크에서는 null 값이 발생하는 이유 두가지를 설명한다.
1.DOM 상에 요소가 만들어지기 전에 이벤트 리스너를 붙였을때
2.DOM상에 없는 요소에 이벤트 리스너를 붙였을때

나는 2번이다.

import { CoreCompoent } from "../core/coreComponent";
import { DATA } from "../worddata";

export default class Search extends CoreCompoent {
  render(){
		this.el.innerHTML = /* html */`
      <input placeholder ="Enter the word mean"/>
      <button>
        Search!
      </button>
      <div>
        <ul>
          <li class="result">값이 없다면 변하지 않음</li>
        </ul>
      </div>

    `
    const inputEl = this.el.querySelector('input')
    const btnEl = this.el.querySelector('button')
    const resultEl = this.el.querySelector('.result')
    btnEl.addEventListener("click",()=> {
      DATA
        .filter(data => data.mean === inputEl.value)
        .map(function(element){
          resultEl.innerHTML = /* html */
            `${element.single} : ${element.mean}`
        })
    })
  }
}

잘 보면, 내가 이 컴포넌트의 인스턴스의 el에 input 태그와 button 태그를 넣어두었다.
그런데 애꿎은 document 에서 input 태그를 찾아서 이벤트 리스너를 붙여두었다.

JS 입장에선 아무것도 없는데 input 태그를 찾으라고 하니 당연히 null 로 판단해서 에러를 발생시킨 것이다.

2. vercel통한 프로젝트 배포중 build 단계에서 에러
   

원인 : package.json 파일내 main: "index.js

참고 링크: npm Docs

이 main은 파일의 entry 포인트(진입점)이며,
진입점은 쉽게 실행이 시작되는 파일이라고 생각하면 된다.

그런데 왜 에러가 발생했나면, 경로지정을 하지 않았기 때문이다.
경로지정을 하지 않았기 때문에 build 과정에서 진입점이라고 설정해둔 index.js 파일을 찾기가 불가능했기때문에
에러가 발생한 것이다.

참고링크에서 보면, main 속성이 없으면 자동으로 루트경로의 index.js 를 찾는다길래 없애주었더니 정상적으로
build 완료!

구현 결과

단어장 페이지 Link - Al Klimat

보완 해야할 점

검색 관련

1. 검색 기능 고도화

   • 예를 들어 뜻이 내일 처럼 딱 한단어면 검색이 가능한데, 방향,방면 을 찾으러 방향 만 검색시 단어가 나오지 않는 현상이 발생한다

2. 검색 전에 전체 단어를 보여주고, 검색시 딱 그단어만 나오도록 수정이 필요하다

3. KR/AR 버튼을 만들어서 한글 검색과 아랍어 검색 둘다 지원하는 것이 필요하다

4. 검색 기록을 보여주는 기능 도입

단어 출력 관련

1. 단어옆에 체크박스를 만들고 이를 클릭하면 뒤집히면서 한글뜻만 보이도록 하여 암기하는데 도움이 되는 기능 도입

2. 단어 자체를 클릭하면 toggle 을 이용하여 예문과 예문의 뜻을 보여주는 기능 도입

Header

1. 현재 페이지가 어떤 페이지 인지를 h1 태그로 보여주지 말고, header의 요소를 이용하여 보여주는 것이 필요