버릴 것과 가져갈 것 정리하기
Chapter 2. 프론트엔드 개발 (W2 D1)
드디어 스파르타 코딩 클럽 메이커스 2주차가 시작됐다. 1주 차는 기획안을 정리하고 내가 개발할 서비스의 방향을 설정하는 것이었다면 이제는 본격적으로 개발 작업에 착수해야 한다. 지난 해커톤 때도 느꼈지만 처음에는 3주라는 시간이 넉넉하게 느껴질 수 있어도 초보인 나로서는 벼락치기를 할 역량이 되지 않으니 차근차근해 나가는 수밖에 없다.
2주 차 첫날, 오늘은 나의 기존 코드를 살펴보기로 했다.
(... 내 기억대로 runserver 하면 바로 나올 줄 알았는데 중간에 내가 고치면서 뭘 잘못했는지 에러가 왕창 났음. 자세히 살펴보니 taggit 관련한 거라 페이지 띄우지 말고 그냥 코드만 살펴보기로... )
실제로 내가 만들었던 서비스 첫 화면은 저 기획안과 거의 유사했다. 하지만 화면 섹션 나누는 부분이나 내비게이션 바 부분은 한 땀 한 땀 CSS로 만드느라 거기에 시간을 너무 많이 썼다는 점. (그 시간에 부트스트랩 썼으면 다른 데 신경을 더 썼을 텐데)
뭔가 key color가 마음에 든다그래서 나는 이번에 튜터님이 알려주신 Bulma라는 라이브러리를 적극 활용하기로 했다. 색감도 온화(!)한 게 딱 괜찮다는 느낌이 들었음.
바꿔야 할 것
# 내비게이션 바
이번 프로젝트에서는 저번과 달리 상단 메뉴를 구성하지 않을 생각이다. 괜히 상단 로고 영역이 허전해 보여서 억지로 About Us, FAQ 같은 아직은 채울 말이 없는 메뉴를 만들었었는데 이번에는 본질에 집중하기로. 그래서 과감히 메뉴를 없앴다.
쏘 심플마침 Bulma 페이지를 보니 로고만 나와있는 Navbar도 있어서 이걸로 갖다 써야지. 3주 중에 여력이 생겨서 Featured Article을 채울 시간이 되면 그때 메뉴를 추가해보는 걸로.
https://bulma.io/documentation/components/navbar/
# (가능하면) 인스타그램 위젯
저번에는 시간이 없어서 내 인스타그램 콘텐츠를 보여주는 영역을 위젯 써서 했는데 찾아보니 인스타그램 디스플레이 API가 있더라. 이번에는 이걸 써볼까 하는데.. 지금 내 수준에 가능할지는 튜터님께 여쭤봐야 할 듯. 시간 없으면 다시 위젯으로.
인스타그램 미디어 디스플레이 API
https://developers.facebook.com/docs/instagram-basic-display-api/reference/media
링크만 넣으면 되는 인스타그램 위젯인스타그램 위젯: https://lightwidget.com/
가져갈 것
# 구글 지도에 마커 표시
이건 저번 결과 페이지에도 넣기는 했었는데 연결이 안 된 상태였다. 요건 그대로 써도 되지 않을까...?
이렇게 해서 나온 결과는
테스트 좌표만 넣어놔서 휑
# 내가 만들어 둔 콘텐츠 (= place 자료)
그나마 시간을 절약할 수 있는 건 내가 저번 프로젝트하면서 콘텐츠를 미리 준비해 놓았다는 점이다. 물론 연동하는 방법을 몰라서 그냥 엑셀 파일로만 갖고 있지만....
시간을 많이 절약할 수 있을 거라고 생각했는데 제일 중요한 위/경도 값이 빠졌네. (....) 이건 나의 파워 엑셀 노동력으로 1-2시간이면 금방 할 거라 믿어 의심치 않는다. (미래의 앨리스가 하겠ㅈ..)
내일부터는 본격적으로 작업을 해보려고 한다. place 정보를 입력하는 폼을 만들고, 저장된 place를 볼 수 있도록 하는 게 이번 주 첫 번째 목표.
<2주 차 계획>
화(11/17): (태그 없는) 메인 화면 + NavBar, place 입력하는 화면 작업 (*place 입력창은 추후 로그인 창 만들어서 관리)
수(11/18): 입력된 place 전체 목록 뷰 --> 지도에 마커 올리기 전에 일단 목록으로 보여주기? 아니면 지도에 바로? (튜터님께 질문)
목(11/19): /api/place 작업 (GET, POST)
금(11/20): 작업한 것들 점검, 콘텐츠 작업 (해시태그 분류, 장소 정보 중 빠진 데이터 추가하기 등)
토(11/21): 오전 중 주간 리포트 작성, 13:30 튜터링
+ 가장 중요한 해시태그 작업은 3주 차에 다 할 수 있을까...?