[완성모습] 우정테스트 사이트 만들기(Feat.리액트)

정말 간단한 우정테스트 사이트를 통해서 리액트 기초를 다져보자!!

 

Start.js (시작화면)

 

메인화면을 통해서 이름을 입력하고 시작하면은 간단한 퀴즈화면이 나온다!

Quiz.js (퀴즈화면)

간단한 몇가지 퀴즈를 통해 점수를 매긴다! 

캐릭터를 움직여서 O,X 정답을 맞춰볼 수있다. 이건 만드는 기능은 간단하면서도 복잡해서 별도로 정리를 해야될것같다.

 

Score.js 

그다음 모든 퀴즈를 풀고나면은 거기에 해당하는 점수가 나온다! 

점수에따라서 보여지는 문구도 세분화되어있다.

 

Message.js

마지막으로 한마디를 적고 퀴즈에 대한 랭킹을 확인할 수 있다! 

 

 

이렇게 간단한 몇가지 화면만으로도 구성해야되는 부분들이 굉장히 많은것 같다.

이부분들을 차근차근 정리해나가면서 기초를 다지고 어떻게 동작하는지 이해한다면 더 복잡한 리액트앱도 충분히 만들 수 있을거라 생각한다.

 

더 좋은 아이디어가 구현될 수 있도록 열심히 배워두자!!!