이 프로젝트의 계기
이번 년도를 알차게 보내기 위해서 친구와 주기적으로 자기 계발을 진행하기로 결정하였다. 메인 주제는 "창작"인데, 나는 프로그래밍 역시 하나의 "창작"으로 여겼기에, 프로그래밍을 진행하기로 하였다.
주제
2023-02-15(약 일주일)까지의 주제는 연습이었다.
나는 무언가를 연습하는 것과 관련된 소프트웨어를 프로그래밍하기로 결정하였고, 그 결과 반응 속도를 연습하고 랭크를 세울 수 있는 사이트를 개발하기로 마음먹었다.
진행
반응 속도를 측정하는 도구를 위해서는 매우 널리 알려진 방법을 사용하기로 하였다. 어떤 변화가 생기면 그 변화에 대한 응답을 받고, 받는데까지 걸린 시간을 측정하는 방법을 사용하였다.
자바스크립트로 프론트 구성
간단하게 개발하기 위해 별도 클래스 등은 사용하지 않았고, 자바로 함수만 몇 개 구성하여 사이트를 개발하였다.
애니메이션
기타 라이브러리를 사용함으로써 애니메이션을 구현할 수 있지만, 나는 순수한 CSS 로 애니메이션을 사용하기로 하였다. CSS에서는 간단하게 애니메이션을 적용할 수 있도록 강력한 기능들을 제공하고 있었다.
@keyframes show {
0% {
opacity:0;
}
100% {
opacity:1;
}
}
이렇게 애니메이션이 선언되었으면, 이제 애니메이션을 반영한 CSS의 CLASS 를 하나 만들어주면 되는 것이며, 그 방법은 다음과 같다.
반응 속도 측정
반응 속도 측정에 중요한 것은 시간 계산이다. 시간 계산에 오차가 심하다면 값을 신뢰할 수 없을 것이고, 이는 시스템의 생명과도 같다. 따라서 시간 계산에는 직접 interval 이벤트를 통해 계산하는 것이 아니라 시간 차를 활용해 계산하기로 하였다. interval 이벤트를 통해 매 시간 초를 더해주는 방식으로 시간을 계산한다면, 함수와 함수가 실행되는 내부 시간 복잡도 등에 의해 오차가 쌓일 것이고, 기대한 시간보다 더 적게 나오는 오류가 발생할 수 있게 된다. 따라서 작업 시작시의 밀리초, 작업 종료시의 밀리초를 각각 구하고 차이를 계산함으로써 걸린 밀리초를 표현하기로 하였다.
세계 기록 및 랭킹
기록 시스템을 구성하기 위해서 데이터베이스 시스템을 사용했다. 여기서는 관계형 데이터베이스로 MariaDB를 활용하였고, PHP에서 데이터를 업로드할 수 있도록 하고, 측정 완료 후 페이지 이동 없이 내부 XMLHTTPREQUEST를 통해서 데이터를 업로드할 수 있도록 하였다. 별도 토큰 없이 게시할 수 있도록 하였기 때문에 외부 조작 가능성의 문제가 존재하며 이를 막을 방법이 필요하지만, 여기서는 고려하지는 않았다. 이 부분에 대해서 다양한 해결 방법을 시도하고 보고할 예정이다.
환경
웹 언어
HTML 언어
CSS 언어
JAVASCRIPT 언어
PHP 언어
서버
Ubuntu Server
Apache2 엔진
PHP 7 버전
Mariadb Server Client
서버 환경
Memory 2GB
SSD 40GB
VCore 2
결과
이로써 1차 주제 "연습"에 관련된 개발은 마무리되었고, 시스템 역시 제대로 동작하였다. 개발 기간은 놀고 먹고 자며, 약 "2일"이다. 순수 개발 시간은 약 4시간.
되돌아보기
배우거나 고찰할 점은 다음과 같다.
한계
랭크 데이터를 보낼 때 어떻게 유효성 검증을 해야할까? 외부 조작은 어떻게 막아야 할까?
이 프로젝트는 소프트웨어 공학에 맞게 유지보수에 용이하지 않다.
기타 버그 또는 잠재적 문제가 있을 수 있다.