[15일 메이킹 프로젝트] #11일차 개발일지

목차

1. 시작의 한마디

2. 오늘의 목표 

3. 회의 내용

4. 업무 이슈/고민 & 해결

5. Next up

---

1. 시작의 한마디

11일차.. 최종 목표까지 D-4일, 실질적인 시간을 따지면 1~2일내에 마무리짓고 서버 배포를 해야함.

2. 오늘의 목표

 1. 로그인, 로그아웃 Ajax

 2. Open API 데이터 Ajax 연결

 3. vs code 파이썬 연동 서버연결

 4. 자바스크립트 기본 문법 복습 

3. 회의 / 작업 내용

1. 로그인, 로그아웃 Ajax

- 결과적으로 아직 미완성이다. 로그인 기능은 대준님께서 작업해주셔서 서버와 연동되어 구동은 되어있는 상태. 문제는 기존 작업이 jinja2 문법을 사용해 작업된 백 위주의 작업이라, Ajax로 변환해서 작업해야할 필요가 있었음. Ajax와 자바스크립트 기본 문법에 대해 잘 모르는 상태라 6시간동안 삽질만 하다가 시간을 허비해버렸다. 

- 프로젝트의 취지를 살려 기존 form tag를 div로 변경해주고, Ajax로 서버에서 데이터를 받아와 로그인 <-> 로그아웃이 스위치 될 수 있도록... 서버쪽은 전혀 무지해서 혼자 Ajax 코드를 조금 짜보았다.

function logIn (
  $.ajax({
  url:'/login_done', //request 보낼 서버의 경로
  type:'post', // 메소드
  data:{'uid':'','pwd':''}, //보낼 데이터
  success: function(response) {
  if (login = 'True') {
  $('.login_btn').html('<li><a href="#" class="logut_btn">LOGOUT</a></li>'); 
  }}
  }));

- 혼자 해본거라 아직 되는지 안되는지도 모름... 로그인이 성공해서 서버에서 login = 'True'값을 전해준다면, nav 바에 있는 .login_btn class가 logout 이라는 html로 대체될 수 있게... 로직을 짜 보았다. 오류가 3개나 뜨는데 뭐가 틀린건지 잘 모르겠다. 

 

2. Open API 데이터 Ajax 연결

- 이 부분도... 원래 오늘 내에 반절쯤은 해결이 되어야 하는 상태였는데... 기존 api 데이터가 xml 형태라, 내일 json 변환 작업을 거쳐 현재 서버로 사용중인 firebase에 넣어줘야함. 튜터님께서는 그렇게 정리된 json에서 필요한 데이터, 특정한 id 값을 찾아서 html에 `$(id)` 넣어주면 분류가 될거라고 하셨다. 

- 이 기능이 구현되면 regions 페이지에서 각 circle을 클릭하면 분류가 완료된 지역별 페이지로 링크가 되어야한다. 또한 무한 스크롤이 될 수 있기 때문에, pagination을 이용해 백은 데이터 라벨링, 프론트는 몇개가 보이게 할 것인지 지정해 백으로 전달해야 한다고... 백과 프론트 작업의 정수 라는 표현까지 하셨는데, 솔직히 지금 이 상태로는 무리다. 

 

3. vs code 파이썬 연동 서버연결

- vs code 에서 파이썬, 라이브러리 연동 오류가 있었음. 서버가 실행되지 않았다. pip install에서도 모두 정상적으로 설치된 것으로 확인.

- 시스템 환경 변수 > path > 파이썬이 설치된 경로를 최상단으로 변경. 

 

4. 자바스크립트 기본 문법 복습 

- 부끄러운 이야기이지만, 15일 프로젝트 중반이 지나도록 내가 사용할 자바스크립트, 제이쿼리 작성에 대한 기본 문법도 거의 무지한 상태였다.

- 이런 상태에서 ajax로 데이터를 호출하고, 함수를 호출하기가 버거운 상태여서 차라리 자바스크립트 기본 문법에 대해 조금 이해가 있으면 앞으로의 구글링이 수월해질 것 같아 약 1시간 30분 가량 복습을 진행했다. 

- 객체, 메소드, 접근 및 추가/삭제, this, 배열, for문, for...in, for...of 등. 

 

4. 업무 이슈/고민 & 해결

- 이번 프로젝트를 하면서 가장 크게 느끼는 점은, 역시 기본기에 대한 부족함인 것 같다. 지금 프론트 작업을 진행하며 사용하는 자바스크립트에 대한 기본 문법도 터무니없이 부족하고, 그냥 웹개발이라는 분야에 대한 기초 자체가 거의 없다시피 하다.

- 지금까지의 작업은 html css 그리고 간단한 js 로 뼈대와 간단한 동적기능 추가정도였다. 이 부분은 조금이지만 경험했던 부분이기도 하고, 조금만 공부하면 비교적 쉽게 알 수 있는 부분이었다. 주말동안 데이터 작업을 하려고 했는데, 본격적으로 들어오기 시작하니 완전 멘붕이었다.

- 15일의 단기간이지만 그래도 팀플은 팀플인데, 팀 분위기도 희망에서 걱정으로 바뀌고... 5명 중 1명은 빠지고 4인에서 오늘은 3명이서 거의... 10시간 이상을 고군분투했다.

- 개인적인 생각이지만 이번 팀플의 문제점은 팀원 개개인의 역량을 초과한 목표설정이 아닐까싶다. 코딩클럽 웹개발 수업도 그리 친절한 편이 아니었고, 만약 복습 개념에 충실하고자 했다면 처음부터 이 정도 수준으로 만들 것을 권고한다고 강력하게 알려야하지 않았을까 싶다.

- 물론 기본기도 없이 무작정 부딪히려고 했던 나 자신이 가장 큰 문제다... 지금 생각은 메인 기능인 API 데이터 활용에 더욱 초점을 맞춰야 한다는 것이다. 아이디어 회의 때 기능이 점점 추가될 때, 누군가는 브레이크를 걸었어야 했는데...

5. Next UP

- API 데이터 활용

- Ajax 연결