파테슘 THINK에 사용된 웹사이트입니다. #UC_THINK 태그가 포함된 인스타그램, 트위터의 사진을 가져와서 캐싱하며, 웹으로 표시합니다.
iframe를 통해 웹사이트에 삽입합니다. 파테슘 think에 삽입된 원본 iframe 주소는 https://patexum-1.hyuns.dev/ 입니다.
관리자의 경우 관리자 페이지( https://patexum-1.hyuns.dev/admin )에서 특정 게시물을 삭제할 수 있습니다. 작품 조회는 얼마든지 가능하지만, 삭제를 위해서는 제공받은 키가 필요합니다.
| patexum.com/think | 관리자 페이지 |
|---|---|
 |
 |
크롤러도 Node.js를 통해 제작하였습니다. 따로 파일을 분리하지는 않았고, crawler.js 파일이 전부입니다. 트위터의 경우 공식 API를 통해 이미지를 조회하고, 인스타그램의 경우 별도의 크롤러를 통해 이미지를 크롤링합니다. 이미지는 서버에서 다운로드 받아 public/image/[instagram/twitter] 위치에 이름을 uuid로 변경하여 저장하여, 게시물 정보는 data/[instagram.json/twitter.json]에 저장합니다. 작동 방식은 아래와 같습니다.
트위터: 크롤링 시작 -> API 조회 -> 중복 확인, 이미지 있는지 확인 -> 이미지 다운로드 -> 게시물 정보 저장 -> 크롤링 끝
인스타그램: 크롤링 시작 -> 작품 리스트 크롤링 -> 중복 확인 -> 이미지 다운로드 -> 게시물 정보 저장 -> 크롤링 끝
원래 파테슘님의 웹사이트 빌더인 크리에이터링크의 코드를 따와서 만들 예정이었습니다만, 여러 사정으로 인해 거의 다 뜯어내고 새로 제작하였습니다. iframe에 사용되는 화면은 부트스트랩, 폰트어썸 등의 라이브러리를 사용하여 제작하였습니다.
관리자 페이지의 경우 순수 html과 css로 만들었으며, ajax를 위하여 jquery를 사용했습니다. (리액트를 사용하기에는 너무 작은 페이지라 제외했습니다)
참고로 관리자 디자인도 제가 했습니다.
백엔드는 별도의 데이터베이스 없이 Express의 웹서버만 존재합니다. 크게 별건 없고, 그냥 iframe에 나갈 웹사이트 뿌려주고, 관리자 페이지 표시해주고, 작품 삭제하는 것이 전부입니다. (대부분 SPA 방식으로 개발하였습니다)
이 프로젝트는 범용적으로 사용하기 위한 것이 아닌, 파테슘님의 #UC_THINK 프로젝트를 위해 개발되었기 때문에, 바로 사용하기는 어렵습니다. (주석도 대충 되어있고, 보안 때문에 일부 숨겨진 파일이 있습니다.) 시험기간이라 범용적으로 사용되는 걸 생각하지 않고 주먹구구식으로 코딩하다 보니 코드의 상태가 말이 영 아닙니다.
만약 사용하고 싶으시다면 hyuns@hyuns.dev로 메일하시거나 이슈에 올려주시면 코드를 정리해서 새로운 레포지토리로 올리겠습니다. (새로운 레포지토리의 라이센스는 MIT로 할 예정입니다. 라이센스로 인해 곤란하시더라도 연락부탁드립니다.)