190326_TIL(프로젝트 2일차)

3월 26일 (화)

• 어제 날씨 api를 이용하여 만든 기능은 온도, 습도, 구름량 등 많은 데이터를 알려주지만 데이터를 가져올 때 내가 위치를 지정해주어야만 했다. ##예) 서울의 날씨 데이터, 런던의 날씨 데이터## 이 정도 기능에 만족할 수는 없었고 내가 지금 현재 위치한 장소에 날씨 데이터를 받아오고 싶었다. 어떻게 기능을 구현할 수 있을지 생각해보니 이전 수업에서 자바스크립트로 내가 현재 위치한 위도와 경도 값을 얻어오는 것을 했던 기억이 떠올랐다. 그래서 어제 이용한 openweathermap 사이트에서 위도와 경도 값으로 위치를 찾아서 날씨 데이터를 넘겨주는 기능을 제공해주는지 찾아봤다. doc에서 찾아보다가 By geographic coordinates 라는 항목에서 제공을 해준다는 것을 알아내었다. API를 불러오는 Example은 api.openweathermap.org/data/2.5/weather?lat=35&lon=139 이러하다. 이제 자바스크립트로 작성을 해야하는데 막막했다. 결국 검색을 통하여 해결책을 찾아냈다.노마드코더 해결책은 바로 이것이다. 동영상으로 학습하며 결국 해내었다. 날씨 기능 완료! 날씨 기능을 완료하고 to-do-list 작업을 진행하였다. 먼저 이전에 팀원들과 논의하여 사용할 컨텐츠들을 화면에 어디에 배치할지 좋을지 생각하고 그 다음 html, css 작업을 진행하였다. 우리 팀이 만들어내야할 결과물은 carousel 안에 컨텐츠를 집어넣어서 마치 여러 페이지가 있는 것처럼 보이게 하는 것이 핵심이었다. Bootstrap을 활용하면 carousel을 쉽게 만들 수 있지만 내가 원하는 대로 커스터마이징 하기 어렵다고 판단하여 html,css,javascript 만으로 구성된 carousel을 만들고 싶었다. 하지만 프로젝트 기간이 짧고 쉽게 만들 수 있다고 판단이 되지 않아서 검색을 하여 결국 찾아내었다.w3schools 유명한 사이트인 w3schools에서 찾았다. 이 사이트 how to 탭에는 유용한 정보들이 많이 있다. 그 중 내가 마음에 드는 몇 가지를 소개하겠다.Full page, Toggle password visibility, Multi Step Form, Meet the team page

• 오늘 프로젝트를 진행하며 느꼈던 점 과 새롭게 알게된 점

1. Bootstrap 이나 material design lite 같은 프레임워크를 중간에 사용하면 기존에 코드에 영향을 미칠 수 있다.
2. input 태그 같은 inline 요소를 display:block; 로 지정해도 text-align:center가 적용되지 않는다. input 태그를 중앙에 배열하기 위하여 나는 input 태그를 div로 감싼 text-align:center를 적용하였다.
3. visibility:hidden 속성을 이용하여 태그들의 배치나 정렬을 도울 수 있다.
4. git은 팀원이 fork를 떠서 같은 파일을 서로 각기 작업했을 때 시너지가 좋다.
5. develop branch에서 feature branch를 딴 순간 develop branch에 있는 내용이 새로 딴 feature branch에 복제되어 넘어간다.
6. 어느 한 branch에서 작업을 하던 중 git bash를 꺼도 다음에 다시 git bash를 켜고 같은 경로로 들어가면 마지막에 위치해있던 branch로 되어있다.