[미니 프로젝트] 발표 정리

[프로젝트 소개 + 시연] <1분 30초>

간단한 인사와 소개, 프로젝트 이름: '연진아 날씨 어때?'

프로젝트 취지: 웹개발 종합반 강의를 듣고 그걸 복습하기

취지 기반 기획: 웹개발에서 배운 내용들을 기반으로로 탄탄하게 복습을 할 수 있는 프로젝트를 진행하기

프로젝트의 주 기능: 공공 기상 api를 가져와서 소스로 활용하여 날씨를 알려주고 맞춤 멘트를 출력하는 웹

부가적인 컨셉: 주 컨셉과 기능이 웹개발에서 했던 내용이었기 때문에 부가적인 기능들에 새롭거나 아예 안 해본 도전적인 기능들을 추가함

 

시연 영상:
https://www.youtube.com/watch?v=mVcP2YTTNzo

버튼을 클릭하면 메인 페이지로 이동

부가적인 버튼의 기능 언급

 

지도 이미지맵 태그를 이용해 각 구역 별로 커서를 올리면 지역 이름이 보이고 클릭하면 해당 지역의 날씨를 알려주는 페이지로 이동

기상 API를 기반으로 출력되는 정보가 써 있는 카드가 돌아가고 날씨 기반으로 맞춤 멘트가 이 버튼에 쓰임

해당 페이지에서 다른 지역 날씨 보기 버튼을 클릭하면 첫 페이지로 이동 (지도 이미지맵 태그가 있는 페이지)

 

html 태그를 이용해 타이틀과 아이콘을 직접 지정함

[트러블슈팅] <2분 30초>

첫 기획: 서울 지도를 기준으로 각 구 별로 날씨 api를 산출해 적절한 멘트를 알려주는 웹

하지만 이 기획을 구현하던 중 두 가지 문제 생김

1. 각 좌표값을 이용해 설정한 서울 이미지맵 태그가 반응형이 아니었기 때문에 지도의 크기를 줄여도 
각 좌표값이 움직이지 않아 이미지의 크기를 재설정하면 각 구 별로 선택할 수 없는 문제가 생김

2. 구 별 공공 api를 가져오려 했으나 api에서 돌려주는 데이터가 없음

=> 전국 지도로 바꿔 전국 공공 기상 api를 가져오고 오픈 소스를 이용해 전국 지도 반응형 이미지맵 태그를 사용해 해결함


조건문으로 api 값에 맞게 맞춤 멘트를 출력하려 했으나 원하는 대로 출력이 안 됨

=> in case_fold를 이용해 원하는 문자열을 포함하는지 확인하는 식으로 조건을 바꿔 해결함


(이 기능은 마지막에 삭제해서 지금은 볼 수 없음)
팝업 창에서 영상을 재생하고 자동으로 해당 영상이 종료되고 다른 페이지로 넘어가는 걸 기획했으나 안됨

=> alert를 이용해 영상이 끝나면 alert가 뜨고 메세지를 닫았을 때 다른 페이지로 넘어갈 수 있도록 해결 방안을 제시, 그러나 alert 안 뜨는 문제 발생

=> 영상이 끝났을 때 alert를 뜨도록 하는 코드에서 일정 시간이 지나면 자동으로 alert가 화면에 보일 수 있도록 코드를 고침


배포할 때 elastic beanstalk을 사용하려 했으나 계속해서 에러가 생기고 배포가 불가능한 상황이 됨

=> 웹을 파일질라로 ec2에 업로드 함. 

 

추가적으로 포트포워딩으로 주소값 뒤에 붙는 8000을 생략하려 시도했으나 실패함.

=>해서 해당 부분은 생략하고 도메인과 연결하여 배포에 성공함.

[앞으로 시간 있었으면 추가하고 싶은 내용] <1분>

커서를 올려놓으면서 일일히 지역을 찾는 게 아닌 더 쉬운 방법을 찾고 싶어서
DROPDOWN 식으로 만들어서 원하는 지역을 선택하면 지도에 표시가 되는 기능을 추가하고 싶었음.

전국의 각 지역 별로 클릭하면 또 상세 구역을 선택해서 날씨를 확인할 수 잇는 기능도 추가하고 싶었음

포트포워딩을 이용해 주소값 뒤에 붙는 8000을 생략하고 싶었음.

 

 

프로젝트를 진행하며 유동적으로 기획을 변경하며 진행하였고 팀원 간의 소통이 협업 때 중요하다고 생각해서 3시에 모였을 때 한 번, 매니저님 타임 직전에 7시부터 8시까지 한 번 시간을 정해놓고 모임.

 

그 시간에 현재 본인이 어디까지 했고 팀원들의 의견을 묻고싶은 게 있다면 그 때 다같이 소통하며 나아갔기 때문에 막히는 부분도 빨리 고쳐나가면서 할 수 있었음.

 

프로젝트에서 팀원들과의 소통이 정말 중요하다는 점을 다시 느끼는 계기가 되었음. 

 

마지막 인사

 

연진아 날씨 어때? 프로젝트 깃허브 주소

https://github.com/silversheep26/miniproject-1-