[ TIL ] [ 웹 미니 프로젝트 DAY1-3 ] 공공주차장 찾기 '여긴어때?'

 
이번 주차의 3일은 '웹 미니 프로젝트'를 진행했다. 
기본적인 '웹개발 지식 + 팀으로 하나' 되어 서비스를 완성하는 경험을 가지는 것을 목표로 했다.

---

웹 미니 프로젝트 DAY1

 

SQL스터디(필수트랙) 팀과 동일하게 유지되어 총 5명의 팀원으로 구성되어 진행되었다.
나는 필수트랙 이후 팀원들에게 양해를 구하고 3일간의 휴가를 가졌다..(일정이 미리 픽스되어 있어서 어쩔 수가 없었다..ㅜ)
그래서 프로젝트라도 피해가 되지않도록 열심히 해야겠다는 생각을 했다. 팀원들의 열정과 실력이 뛰어나서 일단 나도 뭐든 닥치는 대로 열심히 하자! 싶었다!
 
프로젝트 내용에대한 발제가 끝난 후,  프로젝트를 주제에 대해  각자 고민 후 회의를 진행했다.
평소 일상생활에서 영감을 많이 얻는 편이라 크게 고민하지 않고 불편했던 부분을 아이디어로 녹여내고 싶었고 '공중화장실 찾기'라는 주제를 선택한 후 'pocket toilet'이라는 가제를 넣어 PPT를 만들었다.
회원가입 및 로그인 화면을 구현하고 주소를 검색해 근처에 있는 공공화장실을 조회하여 코멘트 및 별점을 넣을 수 있도록 화면을 구현하는 것으로 아이디어를 생각하여 간략하게 PPT를 만들었다.(아래이미지 참조)
일상에서 아이디어를 낸 부분에서  팀원들에게 좋은 평가를 얻어 '공중화장실 찾기'로 를 프로젝트를 진행하기로 했다.

아이디어회의에 제출한 PPT

 

---

 
프로젝트를 계획 및 일정기록을 위한 노션 및 S.A를 만들기 시작했다. 그리고 일자별 역할 분담도 나누었다.
프로젝트 구현을 위한 실질적인 와이어 프레임을 구상하고 API구현을 어떻게 할 것인지와 팀원이 사용할 github를 만들었다.
프로젝트의 기본 준비과정을 마치고, 먼저 화면의 제일 첫 접속페이지인 '로그인' 그리고 '회원가입' 화면을 구현했다.
 이미 팀 내 로그인 화면을 구현해 보신 분들이 있어서 쉽게 갈 수도 있었지만, 배움의 목적을 가지고 해보지 않은 팀원들(나포함)이 진행해보기로 했다. 그리하여 [로그인/회원가입] 화면 구상을 하는 팀원 3명과 메인화면의 지도, 검색화면을 구현하는 팀원 2명이 첫째 날은 분담하여 업무를 맡았고, 우리의 업무가 끝나면 메인화면을 서포터 하기로 했다. 회원가입을 할 때 정규식을 활용해서 만드려고 하니 은근히 복잡했다. 조건값을 다 넣어주어야 하는 부분이 또한 나에겐 아직 어려웠다. 로그인 부분은 가입된 회원정보를 저장하는 방법으로 진행하기로 했다.

회원가입  정규식 코드 일부

4-12자리의  영어와 숫자를 넣은 ID , PW는 4-20까지의 영문과 숫자를 넣은 pw, 이름은 한글로된 2-15의 이름을 넣도록 값을 넣었다. 
또한 값이 입력되지않으면 팝업창이 뜨도록 설정해두었다.

 

---

 
저녁시간 이후 기술매니저님 순회시간이 되어 조언을 얻을 수 있었고 메인화면을 구성하던 팀원들의 이야기를 들을 수 있었다.
크롤링을 하는데 많은 시간을 보냈고, 확인해 보니 카카오맵에서 따로 오픈된 API가 없었고, 공공데이터를 활용하려 하니 너무 양이 방대하고 열결이 잘 되지 않는 문제가 있었다. 3일이 채 안 되는 시간에 아직 본 과정도 들어가기 전이라 매니저님은 좀 더 쉬운 방향인 인근지역 DB만을 활용하여 지도에 검색 기능과 마킹기능을 넣어보는건 어떠냐는 제안을 하셨고, 그렇게만해도 큰 성과를 내는 부분이 이고 하여 팀원 모두가 잠깐 고민에 빠졌다.
잠깐의 고민끝에 카카오맵에서 제공하는 '공공주차장'으로 주제를 변경하기로 했다. 차선책이긴 했지만 생활에서 동일하게 고민을 많이 하고 있는 문제이기도 해서 팀원들이 다 같이 고민 후 주제는 그대로 가지고 가면서 장소만 변경해서 그대로 프로젝트를 진행하기로 했다.
 첫째 날은 주제선정과 요청사항 제출에 일부시간을 사용하고 로그인 구현과 회원가입을 어느 정도 구현했다. 그리고 메인화면의 크롤링을 하는데 많은 시간을 할애했다. 
 
카카오 MAPS API : https://apis.map.kakao.com/

 

---

 

웹 미니 프로젝트 DAY2

 


둘째날, 회원가입/로그인 기능 구현을 끝내고 두 개의 작업을 하나로 연결하는 작업을 진행했는데 생각보다 시간이 걸리는 작업이었다. 

회원가입 일부 코드

(왼쪽) type을 이름/ID/PW/PWCHECK 등으로 지정해 입력칸을 만들어주었다.
(* type 속성이 password이면, 입력한 내용이 *로 암호화되어 나타난다. ) 
 
(오른쪽) 코드의 첫 줄에서는 FormData라는 객체를 생성한다.
FormData 객체는 HTML 폼의 데이터를 쉽게 전송할 수 있도록 도와주는 객체.
다음 줄들에서는 formData 객체에 name, id, pw, pw2, nickname이라는 키와 각각의 값을 추가한다.
formData.append() 메서드를 사용하면 키와 값을 같이 추가할 수 있다.
마지막 줄에서는 fetch라는 함수를 사용하여 서버에 POST 요청을 보냅니다.
fetch 함수는 첫 번째 인자로 요청할 URL을 받고, 두 번째 인자로 요청의 옵션을 객체로 받는다.
여기서는 method 옵션을 "POST"로 설정하고, body 옵션을 formData로 설정하여 폼 데이터를 서버에 전송한다.
fetch 함수는 비동기적으로 작동하므로, 서버의 응답을 받기 위해서는 then() 메서드를 사용하여 콜백 함수를 등록해야 한다. 여기서는 서버가 보낸 JSON 데이터를 받아서 alert로 메시지를 보여주고, window.location.reload()로 페이지를 새 로고침하는 콜백 함수를 등록했다.
 

---

 

로그인 일부 코드

 
코드의 첫 줄에서는 (document). ready()라는 함수를 사용하여 문서가 로드되면 콜백 함수를 실행하도록 한다.
(‘#myid’)와 $(‘#mypw’)라는 id를 가진 HTML 요소의 내용을 비워준다.
signup()이라는 함수를 정의한다. 이 함수는 window.location.href를 '/join’으로 설정하여 회원가입 페이지로 이동하도록 한다.
log_in()이라는 함수를 정의한다. 이 함수는 로그인 기능을 구현한다.

 

---

 
 
두 메인페이지 작업하는 팀원들은 카카오맵을 통해 주차장 API를 찾고 jinja2 기능을 활용하여 지도기능을 구현했다.
이 과정이 얼마나 힘든 과정이었는지..! 중간에 많은 트러블슈팅이 있었다. ( 3일간 대부분 밤새워 프로젝트했다! )
그래도 모두 열정열정!!!! 포기하지 않고 끝까지 프로젝트를 끌고 나갔다! 메인페이지의 검색기능 그리고 로그아웃기능을 둘째 날에는 어느 정도 구현했다.
github 쓰는 방법이 익숙하지 않아서 과중에서 많은 트러블슈팅이 있었다. 해결방법을 찾고 VS코드로 하는 방법을 확인해서 조금 더 쉽게 접근할 수 있게 되었다. ( * youtube 생활코딩님 영상으로 공부를 조금 했는데, 도움이 꽤 된 것 같다! )
 
생활코딩 youtube URL : https://youtu.be/vI8FFvQge2w

---

2일 차에는 3일 차에 있을 발표를 위한 PPT도 함께 준비했다. 그동안 팀원들과 협업한 플로우를 생각하면서 내가 만들어 보기로 했다. 아래는 그 결과!

 

프로젝트 PPT.pptx

2.84MB

 

---

 
웹 미니 프로젝트 DAY3

메인페이지 검색 기능 구현을 완성시키고 간략하게 css통일화 작업도 진행했다.
전체적으로 화면이 잘 되는지 구현을 해보았는데 다행히도 완벽히(?) 어느 정도! 진행되었다.
주소에 마킹 부분이나 카카오맵API를 완벽하게 사용하지 못한 부분에서 팀원모두가많이 아쉬워했다.
하지만 3일 채 안 되는 시간에 이만큼 했다는것에 그리고 앞으로 더 발전 시킬수 있을것 같다는 생각에 서로를 격려했다!
프로젝트 발표자를 정하고 마지막 발표자료를 정리했다. 발표시간이 되어 발표를 잘 마쳤다. 역시나 다른 팀들도 프로젝트를 짧은 시간 내 잘 만들어서 감탄 하면서 보았다! 오래간만에 팀을 만들어 프로젝트를 진행해서일까? 아니면 단시간에 많은 시간을 써서 그런지 조금 힘들었다는 생각도 들었다.
하지만 뿌듯함이 더 컸다!  마지막 제출 자료를 내기 위해 시현영상을 제작했다 영상 만드는 건 꽤 간단한 작업이라, 내가 만들기로 했고 간단하게 자막을 넣어서 만들어 제출했다. 다 제출하니 정말로 긴장이 풀렸다. 처음 프로젝트를 진행하면서 정---말 많이 배웠다! 
 
10조 시현영상 URL : https://youtu.be/bOajqCPDzr4

10조 웹미니프로젝트 썸네일