최근에 만든 사이트

 

최근에 EZ2ON이라는 리듬 게임의 패턴을 보여주는 사이트를 만들었다.

개발기간은 약 일주일이다.

 

원래는 EZ2DB라는 EZ2ON의 거의 모든 데이터와 플레이 영상을 모아둔 사이트가 문을 닫아서

해당 사이트를 카피할려는 프로젝트로 시작하였으나, 도중에 해당 사이트가 다시 문을 열어서

위의 패턴만 보여주는 사이트로 우회하였다.

 

먼저 웹프레임워크로 장고(django)를 선택하였다.

웹 개발에 대해서는 잘 모르기 때문에 일단 내가 잘 사용할 수 있는 파이썬을 사용하는 웹프레임워크를 어떻게든 찾아서 사용하였다.

django는 파일이 변경될 경우 서버 재시작 없이 자동으로 적용되기에 개발을 단축할 수 있다는 장점이 있었다.

django를 사용하면서 사용하는 db는 sqllite를 사용하게 되었다. DB또한 따로 사용해본적이 없었기 때문에 컴퓨터활용능력 1급을 취득했을 때 공부한 DB 사용법을 머릿속에서 더듬어 가면서 배웠다.

 

DB의 구조는

1. 곡(노래)의 정보를 저장한 테이블

2. 1을 외래키로 가지는 곡의 패턴의 개수와 난이도 값을 저장한 테이블

3. 1을 외래키로 가지는 곡의 패턴에 대한 정보를 저장한 테이블

4. 코스(곡을 연속으로 플레이하는 모드)의 정보를 저장한 테이블

5. 1과 4를 외래키로 가지는 코스의 곡의 정보를 저장한 테이블

 

DB를 구현하면서 원래 계획의 변경과, 관련 경험의 전무로 인해 위와같이 바람직하지 않은 구조가 되었다. 개발 과정에서 계획 단계가 부족했다는 점이 문제였던 것으로 파악되며, 현재 이 구조는 엑셀의 연산에 의존되어 겨우 작동하고 있다. 이후 다음에 개발하게 된다면 좀더 나은 구조로 개발할 수 있겠지만 현재는 이상태로 넘어가기로 했다. 

 

위에서 불리해진 부분은 백엔드인 파이선과 프론트앤드인 자바스크립트에서 적절히 처리하여 감추었다. 또한 이전에 다른 사람이 작성한 자바스크립트 파일도 서버에서 GET요청으로 파일을 받아올수 있게 xmlhttprequest()로 고치고, 일부 출력버그를 수정하여 페이지에 잘 녹여냈다.

 

또한 부트스트랩을 사용하여서 페이지 디자인에 드는 시간을 어느정도 줄일 수 있었다.

 

배포용으로 쓸 서버는 오라클 클라우드의 프리티어 서버를 사용했으며, nginx와 uWSGI를 물려서 페이지를 정상적으로 띄울 수 있었다. 이 작업을 하느라 오랜만에 ssh로 작업을 하였으며 종합적으로 풀스택 프로그래밍에 대한 경험이 되었다.

 

 

내용이 이렇게 적은 이유는 일주일동안 쉴틈 없이 개발하느라 어떻게 개발했는지 기록한 것이 없기 때문이다. 코드에 대한회고를 할 틈새도 없이 일주일간 잠자는 시간과 일하는 시간 빼고 개발을 한거 같다. 위의 사진은 DB에 값을 입력하고 페이지를 처음 띄었을 때의 사진이며, 이후 5일만에 페이지를 완성하였다.

 

정확하게 기억나는 것도 없으니 현재 개발하면서 참고한거랑, 현재 서비스에서 문제인것만 정리하고 글을 마치겠다.

- 문제점

1. 사이트가 간헐적으로 502 Bad gateway를 반환함 -> uwsgi의 문제?

2. DB의 구조가 이리저리 꼬여 사용하기 어려운 형태임

3. JS의 취약점 : JS에서 파일을 로드하는데 이 파일의 위치가 공개되면 안됨 -> 파일 이름을 암호화 하여 전달하고, 코드도 난독화 한뒤 GET error 메시지도 안나오도록 처리를 했지만 좀 불안함

4. 부트스트랩의 불완벽한 사용

 

- 참고한 자료

점프 투 장고 - https://wikidocs.net/book/4223

점프 투 장고

오라클 클라우드 가입 - https://it.gwangtori.com/40

무료 VPS!? 오라클 클라우드를 사용해 보자! [1]

오라클 클라우드 방화벽 설정 - https://kibua20.tistory.com/124

Oracle Cloud 방화벽 설정 (http/https 특정 포트 열기)

파이선 가상환경 설정 - https://stackoverflow.com/questions/46210934/importerror-couldnt-import-django

ImportError: Couldn't import Django

장고 static 파일 자체 서빙 - https://stackoverflow.com/questions/5836674/why-does-debug-false-setting-make-my-django-static-files-access-fail

Why does DEBUG=False setting make my django Static Files Access fail?

장고 nginx 연동 - https://nachwon.github.io/django-deploy-3-nginx/

[Deploy] Django 프로젝트 배포하기 - 3. Nginx

https://jinmay.github.io/2019/03/14/django/django-uwsgi/

django와 uwsgi 연동하기