190325_TIL

3월 25일 (월)

• 오늘은 프로젝트 첫째날이다. 앞으로 5일 동안 프로젝트가 진행된다. 팀원들과 프로젝트 주제를 선정하기 위하여 많은 의견을 나누었다. 게임 홍보 페이지, 크롬 웹 익스텐션, 패럴렉스, 불꽃놀이 축제 홍보 페이지 등등 많은 아이디어가 나왔다. 많은 고민을 거듭한 끝에 그동안 배운 내용들을 복습하기 가장 좋은 주제로 선정하였다. 주제는 바로 naver에서 출시한 브라우저인 whale이다. whale의 디자인과 기능을 벤치마킹하기로 했다. 역할 분담은 인원에 맞춰서 총 세 파트로 구성하였다. 첫번째 파트는 to-do-list, 현재 시각과 날씨 정보 표기 그리고 화면 테마 변경, 두번째 파트는 다이어리, 디데이 마지막 파트는 공통으로 들어가는 요소인 사이드바에 계산기 , 환율, 음악검색 api 등의 기능을 구현하는 것이다. 나는 첫번째 파트를 맡게 되었다. git flow로 작업할 feature branch를 생성하고 작은 기능 단위인 날씨 api 기능을 진행하였다. 먼저 어떤 api를 사용할지 검색을 하였다. 네이버, 다음, 구글과 같은 곳에서는 날씨 api를 제공하지 않았다. 상당히 많은 시간을 검색한 끝에 openweathermap이라는 해외사이트에서 제공하는 api를 사용하기로 했다. 홈페이지와 다른 사람의 개인 블로그를 참고하였다. ajax를 이용하여 JSON 형식의 데이터를 전송 받았다. 디자인적으로 예쁜 날씨 아이콘을 사용하기 위하여 아이콘을 사용하였다. 위 사이트에서 다운을 받아 css 폴더와 font 폴더를 작업 중인 폴더에 복사하고 html 파일에 링크를 걸어 사용하였다. jquery로 아이콘과 날씨 데이터를 html에 매핑하고 css를 이용하여 디자인 작업을 진행하였다. 작은 공간에 많은 데이터를 넣고 정렬하는 것이 쉽지 않았다. 머리 속으로 생각하고 실제로 그려보면서 어떻게 정렬할지 시뮬레이션 하고 코딩하였다. 결과적으로는 예쁜 디자인의 날씨 데이터를 보여주는 기능을 만들어서 매우 뿌듯했다.