위 포스트에서 만들었던 심리테스트 코드를 가지고
간단하게 SPA 심리&성격&성향 테스트 사이트를 만들어봤다. 😏
심리&성향&성격 테스트
다양한 심리&성향&성격 테스트를 통해 자신의 성향을 알아보세요.
mooky1007.github.io
화면 구성
귀차니스트들을 위한 10초 MBTI 포스팅에서 만들었던 테스트도 내용만 가져다가 추가했다. 😛
뭔가 이렇게 이전에 만들었던걸 여기저기 간편하게 가져다 쓸 수 있을 때,
모듈형태로 스크립트를 작성하는 것에 대한 보람을 느낀다.
폴더 트리
작업 시 고려했던 건, 단발성이 아닌 꾸준하게 테스트 데이터를 등록해서
간편하게 추가할 수 있게 하는 것에 초점을 두었고,
또 추후에 서버까지 만들어서 DB에 테스트 데이터를 연동하고..
추가기능(테스트를 진행한 사람의 수, 결과가 몇 % 안에 들어가는지..)을 붙이기 쉬운지.. 등등
최대한 확장성과 사용성(사용자 말고 내 사용성)에 초점을 두어 작업을 했다.
assets
이미지를 넣기 위한 폴더로 생성했다.
음.. src 내부에 넣을지 루트에 놓을지 고민을 좀 했었는데
src에는 순수하게 html, css, js 파일들만 넣어둘 요량으로 루트 경로에 두었다.
각각의 test 아이디에 맞는 폴더를 만들어 결과이미지나, 문제 이미지를 저장해 둘 예정.
가장 외부에는 파비콘과 오픈그래프용 이미지, 그리고 카카오 공유하기를 위한 썸네일을 위치시켰다.
src
components, css, data, js, page라는 하위폴더가 존재한다.
바로 밑에는 App.mjs 파일과 index.js 파일이 있는데,
index.js에서는 App.mjs를 임포트 하고, App 클래스를 생성만 하고 끝난다.
각각 용도에 맞는 css와 js, mjs 파일이 위치한다.
화면 흐름
작업하면서 새로 시도해 봤던 것들
1. 바닐라 자바스크립트로 SPA 구현 - <script type="module" /> 사용
2. 카카오톡 공유하기 - 카카오 자바스크립트 SDK 이용.
3. 자바스크립트 Custom Event - 기존 함수를 호출하던 것 과 차이점, 그리고 장점을 좀 더 알아봐야겠다.
4. 자바스크립트 history.pushState - url을 변경하면서 새로고침을 하지 않음 - 좀 더 공부해봐야 함.
5. URLSearchParams() - 공부해봐야 함.. (기존까지 location.search.split... 사용)
2, 4, 5번은 카카오톡 공유하기를 위해,
SPA 특성상 결과 페이지나 리스트 페이지나 테스트 페이지의 링크가 다 똑같아서
결과 공유를 해도 공유를 받은 사람이 결과를 못 본다는 단점을 극복하기 위해,
url에 parameter를 붙여주고, App에서 render() 매서드가 실행될 때,
parameter를 받아서 테스트 페이지면 테스트, 아무것도 없으면 리스트, 결과까지 있으면
해당 페이지의 결과페이지로 까지 이동시키는 기능을 작업했는데
나름 재밌었다.
물론 SEO는.. 포기.. 겠지만..
좀 모르겠다. 이렇게 작업하면 새로고침도 안돼서
광고 노출도 적을 거고 SEO 노출도 안돼서 구글 검색도 안 올라갈 거고
(미침)
흠.. 그냥 생짜 html로 우다다하는 게 답인가..
여하튼 그래서 기존에 index.html에서 비어있던 app div를
실제 페이지를 킨 뒤 소스 복사-붙여 넣기로 초기 렌더링 된 데이터를 넣어주었다.
이러면 뭐 대충 걸리지 않을까?
사이트 맵이나 각각 테스트 페이지는 노출이 안 되겠지만..
SPA일 때 SEO에 대해서도 좀 알아봐야겠다.
그럼 20000 :)
