구현 1일차

메인화면

부트스트랩을 이용해서 간단히 홈화면을 꾸미고, Navbar 및 footer를 생성.
중앙에는 평판을 검색할 수 있는 검색창을 추가했다.
검색창에서 주소를 검색하면, Naver Geocoder API를 이용해 주소를 위/경도로 변환해 주었다.

검색 리스트

올바른 주소가 검색되었을때 이미 평판이 있으면 해당 평판을 볼수있는 링크를 보여주게 구현하였다.
DB내에 평판이 없을 경우 평판이 없음을 보여주고, 마찬가지로 링크를 선택하면 평판을 추가할수 있는 화면으로
이동하게 했다.

평판 디테일 뷰

네이버 지도 API를 통해 검색한 주소의 마커를 보여주고, 평판을 추가할 수 있는 폼을 생성했다.
지도상에서 맵을 선택하면 해당 위치에 평판을 추가할 수 있도록 하고, 평판이 있다면 보여주도록 했다.

고생한 점

Naver Geocoder에서 주소를 찾지 못할때 404 Not Found를 날려주는 것을 모르고 있다가 한참 헤맸다.
문서를 잘 읽자는 교훈 네이버 지도 API 명세 - 5. 에러 코드 참조
또한 경도/위도의 자릿수를 8, 9자리에 6자리 소숫점 고정으로 생각하고 있다가,
경도/위도의 소숫점 아래 자리수가 7자리수인 좌표들이 등장하며 url 패턴에 맞지 않는 url들이 나와
계속 오류가 나는 것을 알아채지 못하고 한참 삽질을 했다.
굳이 Redirect가 필요하지 않은 것을 한단계 더 거쳐가는 형식으로 구현했다가 수정했다.
간단하다고 설계를 할때 깊게 생각하지 않으면 구현하면서 고생한다는 것을 다시금 깨달았다.

진행률

기본적인 기능 구현은 2/3 정도 끝난것 같다.

추후 일정

1. 로그인/회원가입 등 구현
2. 가입한 사용자만 정보를 등록할 수 있도록 구현
3. 디테일뷰에서 DB에 평판 추가하는 부분 구현
4. UI/UX 개선

일주일내로 기본 기능을 완성하기로 한 일정을 맞출 수 있을 것 같다.
여전히 개선할 부분과 디테일 개선은 갈길이 멀긴 하다.

DB 구성

Reputation 테이블

App 구성 및 외부 라이브러리

App 구성

평판 조회/출력하는 단일 app으로 구성

주소검색 라이브러리

주소검색솔루션
행정자치부에서 만든 솔루션이다.
자체적으로 서버에 솔루션을 설치해야 하기에 간단히 제작한다는 취지에 너무 과하다는 생각이 들어 패스했다.

네이버맵스
간단하고 쓰기편한 네이버 지도 API 선택.

프론트엔드 라이브러리

부트스트랩
프론트엔드는 그냥 고민없이 부트스트랩으로…

추후 일정

Generic View, Admin 기능 등.. 최대한 장고 자체의 기능을 이용해서 빨리빨리 MVP 구현.
이후 저번 프로젝트와는 다른쪽에 중점을 두고 개선/확장 예정

Pycharm Community 에디션에 Django 가상환경으로 세팅

Pycharm Professional Edition과 다르게 Community Edition은 Django와 같은 프로젝트를 직접 생성할 수 없다.
결국 설정을 위해서 약간의 번거로운 작업이 필요하다.

가상환경 설정

python -m venv my-virtualenv my-virtualenv라는 이름의 가상환경 생성

가상환경 실행

source my-virtualenv/bin/activate
가상환경이 실행되면 (my-virtualenv) 프롬프트 이름$와 같이 프롬프트가 변경된다.
이 상태에서는 어떤 폴더로 이동하든 가상환경이 실행된 상태이다.

Django 설치

pip3 install django

Django project 생성

django-admin startproject 프로젝트이름

Git 설정

git init
git add .
git commit -m "first commit"
git remote add origin https://github.com/프로젝트github.git
git push origin master

Pycharm 설정

1. Pycharm 커뮤니티 에디션 실행, 프로젝트 폴더 위치 선택하여 프로젝트 열기
2. ⌘+, 입력하여 Preference 창 출력
3. Project -> Project Interpreter 선택
4. 맨 위의 Prject Interpreter 선택 창 옆의 설정 아이콘 선택 -> Add local
5. 생성한 가상환경 폴더의 /bin/python3 선택 -> Apply
6. Run -> Edit configurations 선택
7. + 선택 후 Python 선택하여 새로운 환경 설정 생성 후 이름 지정
8. Script: 프로젝트 폴더의 manage.py 선택, Script parameters: runserver

Pycharm에서 가상환경으로 작업

이제 커맨드라인에서 deactivate를 입력해 가상환경을 종료해도 Pycharm안에서 모두 해결 가능하다.
패키지를 인스톨하고 싶다면 ⌘+, 입력 후 Project Interpreter 항목의 리스트에서 선택하면 되고,
테스트 서버를 실행하고 싶다면 간단히 ⌃+r이나 재생버튼(?)을 선택하여 실행할 수 있다.

발단

1일 1커밋/포스팅의 압박에 무엇이라도 만들어내야 한다는 부담이 들기 시작했다.
누구에게 보여주고자 한 것도 아니고 스스로 한 약속이지만 부담이 있는 것은 사실이다.
다행히 아직까지는 그러한 부담이 긍정적으로 작용하는 것 같다.

지난 프로젝트 이후 느낀 점이지만 프로젝트가 커지는 경우 디버깅과 완성도의 압박에 프로젝트의 흥미를 잃게 된다.
그런 것을 방지하고자 최대한 간단한 기능과 구조로 출발하기로 했다.
사실 그런것보다 “다작”하기로 결심한 이후 무엇을 만들 것인가를 결정하는 것이 더 어려운 편이다.
다행히 이번에는 아이디어를 제공하는 사건이 있어 그것을 토대로 서비스를 만들기로 했다.

지인이 사무실을 이전하는데 이전 사무실 건물주가 에어컨을 떼는 날 잠적하거나,
이런저런 일로 꼬투리를 잡아가며 한푼이라도 더 뜯어가려는(?) 행태를 보였다.

이에 대해 이야기하다 기존 집주인/건물주의 평판을 조회할 수 있는 서비스를 제작해 보기로 했다.

요구사항

1. Google/Naver등 Map 서비스를 바탕으로 특정 위치의 건물주의 평판을 등록/조회할 수 있게 한다.
2. 간단한 토론이 일어날 수 있도록 등록된 평판에 댓글 기능을 지원한다. 그냥 평판이 여러개 등록되면 될듯 하다.
3. 회원가입 시 간단한 인증 절차를 통해 인증되지 않은 회원은 평판/댓글을 등록할 수 없게 한다.
4. 주소/위치 검색등을 통해 해당 위치의 평판을 보여주는 기능을 갖춘다.

목표

1. 간결한 UI/UX
2. 테스트 코드 삽입
3. Heroku등 무료 서비스를 이용한 퍼블리싱
4. REST API를 제작하여 App으로 연동 (옵션)

추가 목표

1. 안드로이드 App 연동
2. 1주일 내 MVP 완성 (~6/18일)

Phaser란

HTML5의 Canvas및 WebGL을 이용해 Web game을 제작할 수 있게 해주는 Javascript 라이브러리
Phaser를 테스트 하기 위해서는 로컬 웹서버를 실행해야 한다.
Python이 깔려있다면 Python의 기본 웹서버를 이용하면 간단하다.

python -m SimpleHTTPServer

구조

var game = new Phaser.Game(Width, Height, Phaser.AUTO, '', 
        { preload: preload, create: create, update: update });

위의 전역 변수 정의를 통해 width * height 크기의 게임창을 생성한다.
크게 preload, create, update의 세 메소드로 나뉘어져 있다.

Preload

게임 실행전에 실행되는 메소드로 주로 이미지나 기타 자료의 로딩에 쓰인다.

Create

게임이 실제적으로 생성될때 실행되는 메소드로 로딩된 이미지를 출력하거나 리스너를 할당하거나 등의 작업을 한다.

Update

주기적으로 실행되는 메소드로 주로 키 이벤트를 할당하거나 게임의 개체들을 업데이트 하는 등의 작업을 한다.

간단한 결과물

사용자의 마우스 이벤트에 반응해서 이미지의 알파값을 변경시켜 출력 시켜주는 애니메이션 예제
Phaser로 제작한 간단한 결과물

추후 계획

주 1회 협업, 매번 간단한 인터렉션 제작 (장기적으로는 게임이 될 수도…)