Ollim 개발기 7

1. Audio tag의 Source tag

input tag로 audio file을 받은 후 preview로 들려주고 싶다면, 받은 File을 URL.createObjectURL() 처리를 해주면 되지만, audio tag는 일반 image와 다르게 cache 때문에 src가 단순히 바뀐다고 재생되는 음악이 바뀌지 않는다.

그렇기 때문에 다음과 같이 useRef를 사용하여 처리해야 한다.

    // src의 state가 변화 할 때
    if (audioRef.current) {
      audioRef.current.pause();
      audioRef.current.load();
      audioRef.current.play();
    }

2. Search AutoComplete 구현

작가, 작품을 검색 할 때 algolia를 사용하여 AutoComplete을 구현 할려고 했지만, 혼자 구현해보는 게 더 도움이 될 것 같아서 만들어 봤다.

1. 작가를 검색 할 때는, firestore에서 모든 작가의 정보를 object 형태로 가져와서 username으로 검색을 한다.

2. 작품을 검색 할 때도 위와 같지만 title key로 검색한다.

3. 2개 이상 match되는 글자가 있어야 검색이 된다.

 

3. Ollim mobile 개발 시작

React native를 사용해 Ollim mobile을 개발 할 생각이다.

아무래도 mobile 버젼이라 작성 보다는 열람, 커뮤니티에 초점을 맞춘다.

우선 PWA를 이용한 Mobile UI를 완성할 생각이다.