[Final Project] 8/22 (일)

오늘 작업 내용

• 검색기능
• 로딩 이미지 제작
• iframe 에서 로딩 실패할 경우 alternative 이미지 띄우기
• wordcloud 조사

검색창

검색은 자동추천 되도록 만들었다. 글자를 하나 치면 그 글자가 포함되어있는 작품이 아래 추천된다.(네이버 영화처럼)
하지만 우리는 매번 query 가 일어나면 aws 과금이 걱정되어 먼저 모든 뮤지컬 정보를 redux 로 저장한 뒤 redux 상태에서 찾는 식으로 만들었다.

로딩 이미지

https://projects.lukehaas.me/css-loaders/ 에서 코드를 구해서 이걸 우리 브랜드 로고의 컬러로 만들었다.

iframe

• src 가 없을 경우 - 아무것도 표시되지 않음
• src 가 있고 잘못된 주소일 경우(http... 로 시작) - chrome 브라우저의 로딩 실패 이미지 띄움
• src 가 있고 주소가 아닌 문자열일 경우 - 현재 페이지가 화면에 표시됨

따라서 서버에서 불러오는 src 값이 null 인지 아닌지에 따라 iframe 혹은 에러메세지를 담은 div 가 표시되게 만들었다.

wordcloud

react library 가 있길래 이걸 활용하면 될 것 같은데 조금더 연구해 봐야할 것 같다.