만들자

https://generalcoder.tistory.com/4 [Javascript]위도 경도로 두 점 사이의 거리 구하기 - 카카오 지도api https://generalcoder.tistory.com/3 [Javascript]카카오 지도, 주소api 사용해보기 최근 진행중인 사이드 프로젝트에서 당근마켓에서처럼 특정 범위 이내에서만 정보를 출력해주는 기능이 필요해졌다. 그래 generalcoder.tistory.com 지난 시간에는 위도와 경도로 두 점사이의 거리를 구하는 방법을 살펴보았다. 이번에는 내가 설정한 거리안에 있는 게시물만 출력해주는 기능을 구현해보려 한다. 지난포스팅과 연속성을 갖기 때문에 이해를 위해서 이전 포스팅부터 보는 것을 추천한다. 1. 게시물 리스트 만들기 1.1 HTML 정적..

https://generalcoder.tistory.com/3 [Javascript]카카오 지도, 주소api 사용해보기 최근 진행중인 사이드 프로젝트에서 당근마켓에서처럼 특정 범위 이내에서만 정보를 출력해주는 기능이 필요해졌다. 그래서 찾던 중 다음(현 카카오)api중에 주소 api가 있는 것을 발견했다. 코 generalcoder.tistory.com 지난 포스팅에서 카카오 지도와 주소 api를 연동하는 방법을 알아보고 테스트까지 해보았다. 이번시간에는 지도 api에서 얻은 경도와 위도를 가지고 두 점 사이의 거리를 측정하는 방법을 알아보려 한다. 두 점 사이의 거리를 구하기 위해서는 두 가지를 알아야한다. 첫째, 각 점의 위도와 경도를 얻어온다. 둘째, 위도와 경도를 가지고 두 점사이의 거리를 측정할..

최근 진행중인 사이드 프로젝트에서 당근마켓에서처럼 특정 범위 이내에서만 정보를 출력해주는 기능이 필요해졌다. 그래서 찾던 중 다음(현 카카오)api중에 주소 api가 있는 것을 발견했다. 코드만 가져다가 붙이면 바로 작동 할 수 있도록 잘 작성되어 있어서 바로 테스트를 해보았다. 다음 주소api예제 코드 테스트 test용 html을 선언한 후 코드를 붙여봤다. 카카오맵을 사용해야 하기 때문에 스크립트 영역에 카카오 개발자 센터에서 발급받은 API 키를 입력해준다. API키는 애플리케이션을 등록한 후 발급받을 수 있다. 카카오맵에서는 javascript 키를 사용한다. 위 코드 스크립트 태그 중에 "발급받은 API KEY를 사용하세요" 라고 써있는 곳에 키를 넣어주면 된다. 최종적으로 테스트 코드는 이렇게..

지인의 추천으로 구글 Firebase를 알게 되었다. Firebase 기능은 간단하면서도 매우 강력하다. 백엔드에서 어렵게 구현해야 하는 인증이나 DB연동을 매우 간단한 방법으로 사용할 수 있도록 지원하고 호스팅도 지원하기 때문에 아이디어만 있다면 약간의 프런트엔드 지식만 가지고 파이어베이스를 이용하여 쉽게 프로젝트를 만들어볼 수 있다. 파이어베이스를 이용하여 간단한 마켓프로그램을 만들어봤다. 마켓 프로젝트를 통해 node.js환경에서 모듈을 입출력하는 방법과 파이어베이스 API를 내 프로젝트에 적용시켜보는 경험을 했다. 프로젝트 소개 프로젝트 명: Garden Market 사용한 툴(tool): -프론트엔드: HTML/CSS/Javascript -백엔드: Firebase -프레임워크: express(e..