이런 글 보신적 있으신가요? 저도 이 글을 보고나서 검색하기가 힘드니 간단하게 검색할 수 있게 만들어볼려고 7시간 정도 들여서 만들었습니다.

사용한 기술은 html, vanilla javascript, 아이디어 입니다.

이 중에 핵심은 '아이디어'인데 

어떻게 데이터화하고 필터링할 것인가가 가장 큰 요소였습니다.

 

 

1. 데이터 편집하기

그래서 첫번째로 텍스트를 json형태로 변환하는 작업을 해줍니다.

먼저 javascript로 글의 큰 패턴을 찾아서 json format으로 바꿔줍니다.
(string 포맷 바꾸기 코딩 테스트입니다ㅎㅎ)

그리고 vi로 데이터가 빠진곳이나 자동화하기 힘든 부분은 하나하나 채워줍니다.
그렇게 완성된 데이터 형태는 이렇게 생겼습니다.

이 부분이 7시간 중 6시간 정도 걸렸습니다.

글을 작성하고 보니 이 부분을 보충설명할 필요가 있어서 적습니다.
데이터 형태는 화면의 기획과 데이터를 어떤 방식으로 처리할지 로직을 완성시킨 결과로 나온 것입니다.

따라서 [데이터 편집->화면 기획]이 아니라
[데이터 분석->화면 기획->로직 구성->데이터 편집]' 입니다.

 

2. 화면 만들기

기본적인 뼈대는 필터 역활을 할 input과 결과를 보여줄 영역 2개입니다.
input으로 들어오는 키워드를 포함하지 않는 항목들을 제거하여서 남은 키워드들을 보여주게 만들었습니다.

데이터 가공하고, dom 생성해서 보여주고...

3. 만약에 더 발전시키면

 

하고자 한다면 할건 많습니다.

 
python으로 mongod에 데이터 올려서 조회하게 만들고, 
사용자가 입력/수정/삭제할 수 있는 비지니스 로직 만들어주고, 
redis에 많이 검색되는 데이터들 cache도 해주고, 
클라이언트는 이왕에 Next.js로 올려서 virtual dom으로 플리커(흰색 번쩍) 없애고 SEO좋게 만들고, 

하지만 안하는 이유는 초기에 원했던 결과는 끝났기 때문입니다. 

 

4. Google ads 신청하고 광고판 달기

 

이왕 만드는거 광고까지 달아서 부수익이 발생하면 너무나 뿌듯할것 같아서 사이트를 google ads에 신청했습니다.

신청한 후 20일 후에 승인이 나와서 광고가 출력되기 시작했습니다.