날씨+대기질 Web Application 개발
1. 사전준비 단계
들어가며...
node.js, javascript 등을 공부하다 내용 정리 및 지식 공유를 하고 싶어 생에 처음으로 tistory 블로그를 개설했습니다.
비슷한 분야를 공부하는 사람들에게 도움이 되었으면 좋겠습니다.
자세히 내용을 추가할 예정입니다만 처음 글이다 보니 부족한 부분이 있을 수 있더라도 양해를 부탁 드립니다.
개발을 진행하면서 본 글을 지속적으로 수정/보완 할 예정입니다.
해당 항목에서 찾아보거나 공부해볼 부분은 파란색 글상자로 표기했습니다.
참고할 부분은 초록색 글상자로 표기했습니다.
주제 정하기
- web 개발에 대해 약간의 지식이 있거나 공부를 시작한 사람들이 해볼만한 내용
- 실제 데이터를 다뤄볼것. 공공 데이터 api를 사용해보자.
- 다양한 기술들을 적용해볼 수 있으면 더 좋을 듯
- front-end, back-end의 full stack 개발
- 평소에 대기질(공기질)에 대해 많은 관심이 있다.
- 실시간으로 데이터를 받아 보여주고 싶다. 내가 관심 있는 데이터만 보고 싶다.
→날씨와 대기질을 알려주는 web application 으로 개발 진행
개발에 필요한 기술
- language: javascript, ES6 적용
- front-end: bootstrap, jQuery, react(?)
- back-end: node.js
- DB: mongoDB
- build tool: grunt
- version control: git
- package manager: npm, bower
- 기타 등등
글을 작성하면서 하나하나 제가 아는 부분에 한해서 내용을 추가하도록 하겠습니다 ^^;
사전 준비: 공공 데이터 API 인증키 발급
일단 클릭해서 들어가 봅니다.
(신)과 (구) 동네예보정보보회서비스가 있습니다. 당연히 (신) 조회서비스를 이용합니다.
오픈api를 사용하려면 당연히 공공데이터포털에 가입을 해야 합니다.
사용신청을 해봅니다. 어려운 것은 없습니다.
신청 후 몇 시간 후면 자동승인이 됩니다.
주말에 신청하면 자동승인이 다음 주로 넘어가더군요. 주중에 신청하세요.
그리고 승인이 되더라도 바로 인증키를 사용할 수 없었습니다. Q/A를 보니 비슷한 질문들이 있던데 1~2시간 정도 후에는 동작을 하더군요.
대기오염정보 조회 서비스 도 사용 신청을 해둡니다.
마이페이지 에 들어가 보면 오픈 API 신청란에 신청한 건수가 표시 됩니다.
승인이 되면 활용 란에 표시 됩니다.
각 오픈 API 화면에 들어가서 기술문서를 다운로드 받아두세요.
해당 문서에 어떻게 오픈API를 요청해서 데이터를 받는지 규격이 자세히 나와 있습니다.
사전 준비: 공공 데이터 API 인증키 테스트 1
(신)동네예보정보조회서비스 화면에서 상세기능정보 부분을 보면 각 항목별 실행 버튼이 있습니다.
버튼을 눌러 해당 기능을 실행해볼 수 있습니다.
버튼을 누르면 펼쳐지는 부분에서 미리보기 버튼을 눌러보세요.
XML이 보이고 <resultMsg> 엘리먼트 값이 OK 면 인증키가 정상적으로 동작하는겁니다.
사전 준비: 공공 데이터 API 인증키 테스트 2
- GET, POST, PUT 등 요청방식에 대해 찾아보세요.
- JSON 타입이 무엇인지 필수적으로 알아야 합니다.
- 크롬 브라우저에서 서버 요청에 사용할 수 있는 다양한 확장 프로그램을 찾아보세요.
Advanced REST client를 찾아서 설치해 봅니다.
(신)동네예보정보조회서비스 에서 제공하는 docx 문서를 열어봅니다.
해당 문서에는 오퍼레이션 명세가 있습니다.
이중 초단기실황조회 기능을 테스트 해봅니다.
문서의 요청/응답 메시지 예제 항목을 보면 REST(URI) 부분이 있습니다.
이 내용을 복사해서 크롬 브라우저의 Advanced REST client 앱을 실행한 후 붙여줍니다.
그리고 해당 앱의 > 부분을 눌러보면 입력한 요청 메시지가 자동으로 각 필드별로 구분되어 입력이 되어 있습니다.
Send 버튼을 눌러보세요. 그러면 아래에 XML로 결과값이 표시될 것입니다.
Advanced REST client 앱은 서버 요청 테스트에 아주 유용합니다.
GET,PUT, JSON등 다양한 요청 타입을 테스트할 수 있습니다.
IDE 선택
개발에 필요한 IDE를 선택합니다.
Eclipse부터 Text Editor 까지 많은 유, 무료 에디터들이 있습니다.
eclipse야 워낙에 유명하니 뭐 따로 설명 드리진 않겠습니다.
node.js 개발을 위해 plugin 설치 등의 약간의 노력이 좀 필요합니다.
이번에 MS에서 무료로 개발툴을 배포했습니다. visual studio code라고 하네요.
한번 다운받아 사용해 보시는것도 좋을 듯 합니다.
https://code.visualstudio.com/
돈이 좀 있으신 분들은 WebStorm을 구매해서 사용해보시는 것도 좋을 듯 합니다.
개인적으로 webstorm은 버전업이 자주 되어서 좀 짜증나는 면이 있기도 합니다.
9 버전을 구매해서 사용했었는데 벌써 11이 나왔네요. 그리고 라이선스도 기간 만료라 재 구매를 해야하는... ㅠㅠ
그래도 그만큼 기능이 자주 추가되고 있다는 의미겠지요.
저는 이번 개발에 Atom을 선택했습니다. 무료이며 기능확장 plugin들이 많아 쉽게 필요한 기능들을 찾아서 추가할 수 있습니다.
그리고 webstorm과 같은 기능 좋은 툴들을 사용해서 편리하게 개발할수도 있지만
어느정도 초반에는 불편함을 감수하고 손수 이것저것 설정해주고 하는 것이 더 맘에 듭니다.
javascript 개발용 IDE들에 대해 비교한 글들도 많으니 한번 들어가서 읽어보세요.
다음편에 계속...