교내 문제풀이 사이트 개발기

자격증 시험을 보거나 연습하기 위해 CBT(컴퓨터로 문제 푸는 거) 문제풀이 방식을 사용합니다.

학교 시험공부를 CBT로 하면 어떨까라는 생각으로 시작하였습니다.

(만들어놓고 거의 안씀)

 

(아마 시험 2주전인가 1주 전에 제작했던 걸로 기억)

 

소프트웨어와 관련된 학교이고 반이기 때문에 "소프트" 유사 단어인(???) "수프트"로 프로젝트 이름을 결정하였습니다. 늘 만들던 데로 Front-End는 TypeScript, React로 Back-End는 TypeScript, NodeJS로 결정했습니다.

 

초기 계획은 관리자가 과목별로 문제를 작성하고 일부 문제는 랜덤으로 출제되는 방식입니다. 학교에서 배우는 것중 제일 간단하고 기초적인 문제는 '2진수를 10진수로 변환하기'와 같은 진수 변환입니다. 랜덤 한 숫자를 만들어내고 paserInt()를 통하여 다른 진수로도 바꿀 수 있게 때문에 '랜덤으로 출제되는 방식'에서 이 방법을 사용했'었'습니다. 아쉽게도 작성해놓고 쓰이지 않아서 레거시 코드로 남아있다가 삭제되었습니다. (GitHub에 기록도 안 남아있음;;)

 

* 처음 개발 당시 사진이 없어서 최근 사진으로 대체합니다.

 

처음에는 작성자 표시과 카테고리 기능이 없었다.

처음에는 카테고리 기능이 없었습니다. 시작을 하면 과목, 학년 등 상관없이 Database에서 모든 문제를 가져왔습니다.

문제를 작성하면 Auto increment 기능을 이용해 Key를 만들고 Database에서 문제 전체 개수를 가져와 이걸로 중복 없이 랜덤 값을 뽑아서 문제를 가져왔습니다.

 

COUNT 쿼리 함수를 이용했는데 찾아보니까 데이터가 많아지면 속도가 체감될 정도로 느려진다는 글을 보았습니다. 아직은 그 수준은 아닌 거 같으니 보류했습니다.

지금 생각해보면 이때는 문제 Key를 주면 해당 문제를 반환하는 구조였는데 어차피 문제 많지도 않은데 COUNT 안 쓰고 전체 문제 가져오는 구조로 했으면 됐을 거 같기도 합니다. 

 

처음에는 위키하고 회원정보 안내 문구는 없었다.

 

이때까지 로그인 기능이 없었습니다. 관리자 페이지는 하드코딩되어있는 암호를 입력하면 접근 가능했었습니다.

처음으로 Session기반 로그인이 아닌 JWT(Json Web Token) 기반으로 개발해봤습니다. 

  

로그인 구현을 위해 Passport.js 라이브러리를 사용했습니다. Passport는 passport-local과 passport-jwt로 JWT 기반 로그인을 구현할 수 있는 Strategy를 제공해줍니다. 이를 이용해서 회원가입을 구현하고 로그인, 로그아웃, 회원정보를 가져오는 HTTP API까지 구현했습니다.

 

나름 비밀번호 조건 괜찮은거 같음

 

사실 관리자 페이지를 먼저 만들었는데 글 순서가 바뀌었습니다.

관리자 페이지는 별 다른 거 없이 Flex를 이용하여 Sidebar 형태의 레이아웃으로 만들었고 글 작성, 수정할 때 쓰이는 위지윅 에디터는 react-draft-wysiwyg를 사용했습니다.

에디터에서 이미지를 올리기 위해서는 이미지 서버가 필요한데, 이미지 서버는 한 번도 만들어 본 적이 없어서 구글링을 해고 multer 라이브러리를 이용해서 구현했습니다.

const storage = multer.diskStorage({
    destination: function (req, file, callback) {
        callback(null, './static');
    }
});

(대충 이런 느낌으로 가능)

 

 

여기까지 시험 전까지 개발을 완료하고 다음 내용부터는 시험이 끝나고 구현을 했습니다.

카테고리가 없다 보니 원하는 과목을 집어서(?) 풀기가 어려웠습니다. 과목, 학년, 학기 · 시험 차시 별로 카테고리를 추가했으며 HTTP API 구조를 해당 카테고리 조건에 맞는 모든 문제를 가져오게 변경하였습니다.

Boards.findAll({
            where: {
                [Sequelize.Op.and]: {
                    subject: subject,
                    grade: grade,
                    times: times
                }
            }
        })

 Sequelize에서는 Sequelize.Op.and로 조건을 걸 수 있습니다.

 

과목, 학년, 학기를 선택하면 문제 풀이를 시작 할 수 있다.

 

 

 

최종 완성 모습

최종적으로는 카테고리 기능을 추가하고 작성자 기능까지 추가하여 완성했습니다.

 

GitHub Issues

아직까지 완성되지 않는 기능도 있고 개선점이 많긴 한데... 일단

 

- 어쩌다 보니 커뮤니티 기능을 하기 위해 Mediawiki를 이용해서 위키를 만들었습니다. 문제는 해당 사이트와 위키 계정이 공유가 되지 않습니다. -> 두 사이트 계정 정보 공유하기

- 교내 학생이 아니어도 누구나 가입 가능하고 별도의 이메일 인증 같은 게 없어서 무분별한 가입이 가능합니다. -> 이메일 인증과 교내 학생인걸 인증할 수 있는 방법 도입

- 학년 별로 과목이 추가되거나 다릅니다. 현재는 과목 선택 -> 학년 선택 순이기 때문에 이를 바꿀 필요가 있습니다.

- 프로젝트가 Private입니다. 코드를 좀 더 다듬어서 Front-End만 오픈소스화 할 계획입니다.

- 객관식이면 번호만 고르면 되는데 정답란에 문제를 입력해야 합니다. -> 버튼 만들거나 등등으로 해결

- 디자인 개선

 

그리고 요즘에 중요도가 올라간 건데,

- 문제를 등록하고 싶으면 관리자 권한을 줘야 되는 문제가 생깁니다. -> 문제 출제를 공개로 바꾸고 문제 관리 페이지를 추가할 예정

 

- IE에서 페이지를 볼 수 없습니다. -> 안 고칠 겁니다.

 

 

 

아마 위 내용이 추가, 개선되면 개발기 2편이 올라오지 않을까 싶습니다.