9. 이번 프로젝트의 전체적인 로직에 관하여

이번 프로젝트는 

 

1. 심리검사
2. 검사후 결과보기버튼 을 누른다.
3. 결과보기버튼은 URL 에 "결과ID" 를 담아 동적페이지인 [Result] 페이지로 이동한다.

4. Result 페이지는 "동적페이지"로, URL 정보에 "결과ID" 를 담아, 쿼리로 받을 수 있다.
5. 쿼리로 받은 "결과ID" 를 통해, 결과가 담겨있는 "DB에 API 요청"을 통해 테스트결과를 가져온다.
6. 결과를 확인했다면, "저장 후 개 페이지로 이동" 버튼을 누를 수 있다. (로그인되어있다면)
7. 버튼을 누르면, DB에 결과값을 저장과 동시에 "로컬스토리지" 에 값이 저장되고, 개 페이지로 이동한다.

8. 개 페이지 에서는 로컬스토리지에 담긴, 유저의 TEST결과값을 토대로 개의 성격을 매치시켜준다.
9. 매치된 개들의 성격을 토대로, 그에 맞는 개들을 사이즈별로 분류해서 보여준다.
10. 이때, 개들의 사진은 "DOGS API" 라는 "외부 API"에 요청을 해, 가져온다.

 

가장 고민했던 점은

 

1. 동적 데이터를 가지고 페이지를 구성하면되는데, 왜 동적페이지의 쿼리로 값을 빼왔는가?

 

가장 중요한 것은 SEO 라고 생각했기 때문이다.

심리검사의 결과값이 외부에 노출이 되므로써, SSG 를 통해, 더 나은 SEO 를 만들기 위해 

미리 동적 페이지를 구성하고 서버에 저장하는 방법인 SSG 를 선택했다.

 

또한, 결과보기 버튼을 눌렀을때, STATE 에 저장후, 해당 STATE를 통해 RESULT 값을 보게된다면,

유저는 새로고침을 했을때, 결과값이 전부 사라져 보지못하는 경우가 생길 수 있다.

 

따라서, 동적페이지를 통해, 페이지 자체가 그 결과값을 담고있는 페이지를 만들었다.

 

 

2. 왜 상태관리라이브러리에 저장하지 않고, 로컬스토리지에 저장하여, 값을 불러오는가?

 

유저의 테스트 결과값이 로컬스토리지에 저장되는 시점은,

[RESULT] 동적페이지가 들어가는 시점에 자동으로 저장된다.

 

이후 dogs 페이지로 이동할때, 상태관리라이브러리에 저장하면

결과값에 따라 정해지는 개들의 매치되는 데이터 자체가, "새로고침" 한번으로 사라질 수 있다.

따라서, 로컬스토리지에 저장하여 그 값을 영구히 저장하는데 목적이 있다.

 

또한 dogs 페이지는 굳이 SEO 를 할 필요가 없기 때문에, 일반페이지로 두고,

동적으로 데이터가 들어갈 때마다 화면에 출력되는 형태로 만들었다.