이전 글 보기
2023.12.21 - [개발 일지] - vue.js 토이 프로젝트 - SQL 시험 대비 문제풀이 사이트 (1) 프로젝트 시작
지난 번에는 전체적으로 빠르게 코드를 짜고 핵심 기능까지는 만들어 놓았다.
깃허브 저장소에 코드도 올렸고, 이름은 뭐로 할지 고민하다가 정말 직관적인 sql-test-helper로 정함...
좋은 네이밍 센스 가지고 싶당
저번에 계획한대로 전체적인 디자인을 입혔다. 그럭저럭 완성도 있고 심플하게 나온 것 같아서 마음에 드는 듯 😘
아무래도 문제만을 보는 사이트다 보니까 복잡할 수록 시선이 분산될 것 같아서 웬만한 건 다 빼버렸다 그냥 ...
다른 문제풀이 사이트들도 많이 참고하면서 봤는데, 원하는 느낌은 없는 것 같아서
기존에 짜놓은 틀대로 가기로 결정! 반응형 처리도 훨씬 수월해졌다.
문제 표시 부분은 어렵지 않았는데, 답변 부분을 어떻게 표현해야 직관적이게 잘 표현할 수 있을지 고민을 참 많이 했다ㅜㅜ
문자열 답변은 가볍게 input 형태로 지원한다.
표 답변은 테이블 형태로 지원한다.
답변 유형으로 표 선택 시, 행 추가 및 열 추가 버튼을 제공해주고, 원하는 형태의 표로 만들 수 있다.
예를 들어 테이블을 연산하는 문제의 경우는
단순 입력만 지원하는 input 으로 답을 쓰기는 어려우니 위와 같은 형태로 만들었다.
건너뛰기를 누르면 문제를 건너뛸 수 있다.
테스트용 문제를 두 가지만 넣어서 다양한 문제에 대한 화면 처리는 작업하지 않은 상태이다.
생각보다 할 게 많아서 실시간으로 놀라는 중...
그래도 생각보다 수월하게 진행돼서 다행이다.
'Dev logs' 카테고리의 다른 글
| vue.js 토이 프로젝트 - SQL 시험 대비 문제풀이 사이트 (1) 프로젝트 시작 (1) | 2023.12.21 |
|---|---|
| vue.js 토이 프로젝트 - 코드 관리 서비스 제작기 (4) 반응형 처리 (1) | 2023.12.17 |
| vue.js 토이 프로젝트 - 코드 관리 서비스 제작기 (3) ui/ux (0) | 2023.12.15 |
| vue.js 토이 프로젝트 - 코드 관리 서비스 제작기 (2) localStorage (0) | 2023.12.14 |
| vue.js 토이 프로젝트 - 코드 관리 서비스 제작기 (1) 프로젝트 소개 (0) | 2023.12.13 |
