지금 이 한국어, 뭔말인지 아는 그날까지! 뭔말이지? 뭔말easy!
“다함께 만들어 공유하는 재미있는 한국어 퀴즈 세상”
여러분, 모두 외국어를 공부하면서 '이거 무슨 말이지?' 하고 궁금해 하셨던 적이 많으실 거예요. '뭔말이지?'는 ‘무슨 말이지?’의 친근한 표현으로, 열정적인 한국어 학습자의 강렬한 호기심을 내포하고 있습니다. 뭔말easy?에서는 누구나 쉽고 재미있게 한국어를 학습할 수 있습니다.
뭔말이지? 뭔말easy!
아키텍쳐
주요 기능
•
자유롭게 문제와 객관식 문항을 추가 및 삭제할 수 있습니다.
(문제 최소 1개/객관식 선택지 최소 2개 이상)
•
퀴즈 썸네일/문제 이미지 첨부하거나 취소할 수 있으며, 썸네일을 첨부하지 않을 시 기본 이미지 3종 중 랜덤으로 등록됩니다.
•
퀴즈를 다 풀고 어떤 문제가 맞았고 틀렸는지 확인하고, 정답을 확인할 수 있습니다.
•
로그인 한 유저에 한하여 퀴즈 점수를 저장할 수 있습니다.
•
관리자가 작성한 공지글은 최상단에 고정되어 있습니다.
•
게시글 CRUD, 댓글 CRUD, 좋아요, 게시글 신고 기능이 있습니다.
•
작성한 게시글, 댓글, 좋아요한 게시글은 나의 활동 페이지에서 확인 가능합니다.
•
신고된 게시글은 관리자가 관리자 페이지에서 확인 및 숨김 처리 가능합니다.
•
난이도를 선택한 후 게임을 시작합니다.
•
주어지는 생명 5개를 모두 소진하면 게임이 종료됩니다.
•
난이도 5에서만 등장하는 특별 단어 블럭이 있습니다.
•
로그인 한 유저에 한하여 게임 점수를 저장할 수 있습니다.
기술적 의사결정
Framework
Next.js
Client-Side Rendering 방식의 리액트를 보완한 것이 Server-Side Rendering 방식으로 동작하는 Next.js! 서버에서 데이터를 보내 빈 브라우저에 페이지를 만드는 CSR보다 페이지를 다 채우고 브라우저에 보내는 SSR이 SEO(검색 엔진 최적화)에 유리하고, 원하면 CSR도 가능하기 때문에 선택의 폭이 넓습니다.
Programming Language - Typescript
TypeScript
자바스크립트에서 타입 시스템이 더해진 언어로 동적인 자바스크립트에 정적인 타입을 지정해둘 수 있습니다. 매개변수로 들어오는 값을 일일이 확인할 필요가 없어 코드 작성을 보다 쉽고 직관적으로 할 수 있고, 손쉬운 디버깅이 가능하다는 장점이 있습니다. 또한 intellisense(자동완성)을 제공해 더 빠르고 정확하게 코드 작성이 가능합니다.
Database
Supabase
데이터베이스와 API 를 구축하는데 필요한 설정, 관리와 시간을 최소화 하여 프론트엔드 개발에 집중할 수 있고, PostgreSQL 기반의 SQL DB 기능과 REST API, 이벤트 처리 등의 기능들을 오픈소스로 제공하여 보다 다양한 데이터 베이스 작업을 수행할 수 있습니다. 또한 RLS 기능으로 보안 문제를 해결 할 수 있고, RTSP(Real-Time-Stream-Protocol) 기능도 제공해주어 이후 프로젝트 발전 시 댓글, 좋아요 알림이나 채팅 기능 등의 기능 구현에 가능성을 열어두기에 적절하다고 생각하여 채택했습니다.
State Management Libraries
TanStack Query
fetch 요청 시 로딩, 에러, 성공 상태를 바로 얻을 수 있어 서버 상태 관리가 용이합니다. 또한 유니크한 key값을 갖고 데이터를 저장하여 특정 데이터 쿼리에 대한 조회 및 무효화를 쉽게 할 수 있습니다. 또한 동일한 네트워크 요청 발생 시 쿼리키에 캐싱된 값을 사용하여 불필요한 네트워크 재요청을 방지할 수 있습니다.
Jotai
간단하고 직관적인 API를 사용하여 미들웨어나 리듀서를 작성할 필요 없이 복잡한 상태 관리를 간소화할 수 있습니다. 또한 Typescript와 완벽하게 호환되기 때문에 타입 안정성을 보장합니다. 뭔말easy?는 외국인 학습자들을 위해 다국어모드를 지원합니다. langAtom을 사용하여 간단하게 다국어 설정을 구현할 수 있었습니다.
Styling
Tailwind CSS
일관된 클래스명으로 코드의 의도를 명확하게 전달 가능하며 유지 보수가 용이합니다. 미리 정의된 유틸리티 클래스를 사용하기 때문에 빠른 디자인 가능하며 렌더링 속도, 성능 면에서 다른 css 방식보다 유리하고 Next.js에서 권장하는 CSS 라이브러리로서 원활하게 사용할 수 있습니다.
Toastify
사용자에게 알리는 이벤트 발생을 성공, 에러와 등 타입에 따라 다르게 표시할 수 있고, alert과 같이 추가적인 이벤트를 요구하지 않아 더 편리한 사용자 경험을 제공합니다. 업데이트와 유지 보수가 활발하게 이루어지고 있는 안정적인 라이브러리입니다.
React Icons
사용 방법이 간단하고 다양한 아이콘들을 한곳에서 모아 볼 수 있습니다. 모든 아이콘은 SVG 형식으로 제공하여 어떤 해상도에서도 깨지지 않고 선명하게 볼 수 있습니다. 이는 웹 성능과 호환성에 유리합니다.
Next UI
React를 기반으로하여 JavaScript 응용 프로그램을 구축하는 것이 사용자 친화적입니다. 응용 프로그램이 커지면 크고 복잡한 앱을 처리 할 때 대단히 확장 가능합니다. 큰 파일을 처리 할 때 속도가 느려지지 않습니다.
트러블슈팅
Table
Search
팀원
Team Coding Zizon
Search
