Side project/mistake

첫 프로젝트 '코시국 심리테스트'의 우여곡절 - 로딩 페이지 [토이 프로젝트]

은성 개발자 2022. 9. 5. 22:23
728x90

https://axexcovidpersonalitytest.netlify.app/

 

나의 위생 타입은?

하나도 안 궁금한 코시국 테스트

axexcovidpersonalitytest.netlify.app

첫 프로젝트인 '코시국 심리테스트'에서

제일 고생했던 건 '로딩 페이지'이다

 

export랑 import를 이용해 변수를 다른 html 파일에도 그 변수를 쓸 수 있도록 하고 싶었는데

(선택지 페이지 -> 로딩 페이지 -> 선택지에 따른 결과 페이지 이동을 위해)

구글링해서도 여기저기 수소문해서도 해결하지 못했다...

결국 같은 페이지 내에서 해결해서 결과 페이지로 이동했다

-> node 서버를 안 올려서 그런가?? node start 명령어로 안 해서??

아시는 분은 알려주세요...

 

선택지 페이지 -> 로딩 페이지

같은 url

전에 페이지의 구성요소를 display : none 처리시키고

로딩 페이지 구성요소를 display : block 처리를 해

페이지가 마치 이동한 것처럼 했다

하지만, url을 보면 선택지 페이지에서 로딩 페이지로 전환할 때 url이 똑같다

 

코드를 어떻게 할까?

와 carbon 써보고 싶었는데 이제 쓰네

3초 정도 뒤에 결과 페이지로 이동해야 하는데

선택지에 따른 결과 계산 시간을 이동하기 전에 수행하도록

비동기 처리를 했다.

 

즉, 3초 기다리는 동안 사용자의 선택지의 값을 계산하도록 설계한 것이다.


강의 보고 따라 하는 것보다 내가 스스로 부딪치고 구글링 해서 그런지 뿌듯하다

왜 토이 프로젝트하라는지 알겠다!

 

심리테스트 코드가 더 궁금하다면 여기로 오세요!!

코드 리뷰 대환영!

https://github.com/EunSung98/covidPersonalityTest

 

GitHub - EunSung98/covidPersonalityTest

Contribute to EunSung98/covidPersonalityTest development by creating an account on GitHub.

github.com

 

728x90
반응형