데브허브 | DEVHUB | Live Code: JavaScript Quiz AppLive Code: JavaScript Quiz App
- 라이브 코딩 챌린지를 통해 JavaScript 국가 퀴즈 앱을 개발하며 지식을 테스트합니다. 💻
- Dev Challenges.io의 요구사항에 따라 API에서 데이터를 가져와 퀴즈 질문을 구성합니다. 🌐
- React와 Next.js(App Router, 서버 컴포넌트)를 활용하여 앱을 구축하고, 서버 컴포넌트의 데이터 페칭 이점을 강조합니다. ⚛️
- 개발자는 최근 코딩 부족으로 인한 "녹슨" 상태와 새로운 분할 키보드 사용의 어려움을 언급합니다. ⚙️
- 퀴즈는 각 국가의 깃발과 4개의 선택지, 그리고 정답을 포함하는 형태로 질문을 생성할 계획입니다. 🚩
- Next.js 서버 컴포넌트 내에서 직접 비동기 데이터 페칭을 구현하여 API 라우트 설정의 초기 문제를 해결했습니다. 🔗
- 퀴즈 앱의 주요 기능은 질문 표시, 즉각적인 피드백, 질문 탐색, 그리고 최종 축하 페이지입니다. 🎉
- 데이터 구조화를 위해
Country 인터페이스를 정의하고 createQuiz 헬퍼 함수로 질문 생성을 모듈화합니다. 🧩
- 시청자들과 활발히 소통하며 코딩 과정과 기술 학습 경험을 공유합니다. 🗣️
- API의
limit 파라미터가 작동하지 않아 가져온 데이터 중 10개만 slice하여 사용합니다. 🔪