모 Youtuber의 퀴즈 같은 SPA 만들어 보았다.

동기

프런트 엔드 공부를 위해 무언가 SPA를 만들고 싶었습니다.
그렇다고는 해도, 「무엇을 만들면 좋은 것인가」 생각하지 않는다・・・
그런 생각을 하면서 최근 좋아했던 QuizKnock의 동영상을 보고 있을 때, 문득 생각했습니다.

퀴즈 게임, 기본적인 곳을 망라 할 수 있고, 공부로 만드는 것으로서 최적인 것은?

정오 판정 등 조건에 따른 표시 내용의 변경이 필요하다

문제 페이지, 결과 페이지 등 여러 페이지가 필요합니다 (→ vue-router)

사용자가 선택한 대답을 유지해야합니다 (→ vuex)

퀴즈 문제를 서버에서 얻는 API 만들기 (→axios)

만든 것

htps : // 기주 b. 코 m / 시마 - 218 / 쿠이 ~ 아 p

구성

S3의 정적 호스팅 기능을 활용하고 Vue 앱 배포

API를 두드려 DynamoDB에 저장된 퀴즈 정보 얻기

APIGateway와 DynamoDB 사이에 lambda를 통한 구성이 많은 것 같습니다만, 이번에는 특히 복잡한 데이터 취득을 실시하지 않기 때문에, 불필요한 서비스는 끼지 않는 심플한 구성으로 했습니다.

소감 등

초보자에게 공식 문서는 난이도가 높다?

"Vue.js는 공식 문서를 알기 쉽기 때문에 공식 문서로 공부하면 된다"
말하는 기사를 자주 볼 수 있지만, 제 경우에는 처음에는 공식 문서를 읽어도 전혀 이해할 수 없었습니다 ...
그런 가운데 구세주가 된 것이 오사카 코드 학원의 Youtube 강좌
기본적인 내용으로부터 알기 쉽게 해설되고 있어, 이쪽의 동영상으로 일대로 기초를 이해한 후에라면, 공식 문서의 기재도 이해할 수 있게 되었습니다.

CDN 버전으로 시작하지 않아도 되나요?

"CDN 버전에서 공부하고 나서 Vue CLI로 이동한다"는 Vue.js의 학습 단계가 잘 소개되어 있지만, 제 경우에는 "언어 자체를 공부하고 싶다"라기보다는 "웹 앱 만들기 싶다는 목적이 강했기 때문에 CDN 버전은 사용하지 않고 처음부터 웹 앱 방향의 Vue CLI를 사용했습니다.
CDN판을 거치지 않은 것에 의한 학습에의 지장은 전혀 없었기 때문에, 반드시 CDN판으로 시작하지 않아도 좋을까라고 느꼈습니다.

Vue3는 (2021 년 3 월 현재) 아직 정보가 적습니다.

웹상의 정보는 대부분 Vue2입니다. 대략 Vue3에서도 적용되는 경우가 많습니다만, 세세한 곳에서 Vue3와 Vue2로 쓰는 방법이 다른 점이 있어, Web에서 해결책을 좀처럼 찾아낼 수 없었습니다.
또한 Buefy 같은 UI 컴포넌트도 아직 Vue3을 지원하지 않는 것이 많아 주의가 필요합니다.