개발 블로그

공공데이터포털의 Open API를 활용하여 프로젝트를 진행했다. 코로나19 예방접종센터 조회 API를 활용해 지역을 선택하면 그 지역의 예방접종센터 목록이 표시되고, 지도보기를 누르면 모바일의 경우 새 창으로 지도를 열고, PC의 경우 같은 화면에 지도가 바로 표시되도록 했다. 주요 기능 설명 1. 지역 선택 -세부 지역을 json 파일로 구조화한 후 앞에서 선택한 지역에 따라 해당 json 데이터를 받아와서 option을 동적으로 생성하도록 하였다. -지역을 선택할 때마다 api를 통해 받아온 객체의 지역(key)이 사용자가 선택한 지역과 동일한지 비교 후, 최종 배열이 filter 되도록 하였다. - 2. 목록 표시 -검색 버튼에 이벤트가 발생하면 위의 필터된 최종 배열을 전달하여 html 태그를 생..

영화진흥위원회 api를 이용해서 날짜에 따른 박스오피스 정보를 출력해보았다. api를 이용하려면 아래의 영화진흥위원회 홈페이지에서 회원가입 후, 키 발급/관리 메뉴에서 키를 발급 받으면 된다. www.kobis.or.kr/kobisopenapi/homepg/main/main.do 영화진흥위원회 오픈API OPEN API 서비스 영화진흥위원회 영화관입장권통합전산망에서 제공하는 오픈API 서비스로 더욱 풍요롭고 편안한 영화 서비스를 즐겨보세요. www.kobis.or.kr 오픈 API 탭 > 제공서비스에서 다양한 API를 확인할 수 있다. 나는 이 중 일별 박스오피스를 이용했다. JSON을 이용할 거라서 아래와 같이 .json으로 적고 바로 뒤에 발급받은 키를 붙여 넣었다. 키는 앞에 ?(물음표)를 넣어주어..

자바스크립트 기초를 공부했다면 정해진 커리큘럼처럼 만들어 보는 것이 투두리스트인 것 같다. 근데 막상 하려고하면 배운 개념중에 어떤 것을 써야하는지 감이 안 잡힌다. 그래서 노마드코더 강의로 공부하면서 일단 무작정 따라쳤다. 이해가 안가는 부분이 너무 많았다. 그래도 꾸역꾸역 따라치고 이해가 안되어도 코드 한 줄 한 줄 뜯어가면서 리뷰했다. 여기서 배운것 + 내가 구현하고 싶은 기능 몇 가지를 추가해서 나만의 투두리스트를 완성했다. 주요기능은, 1)기본적인 폼을 제출하면 이를 자바스크립트로 리스트를 출력하고 로컬 스토리지에 저장&파싱, 리스트 삭제 2)목록 활성화, 비활성화 : 박스를 클릭해서 완료한 목록임을 나타내고 그 객체를 allCompleted 배열에 넣기 반대로는 완료하지 않은 목록임을 나타내고..

바닐라 자바스크립트로 뮤직 플레이어를 만들어 보았다. 주요 기능으로는, 1)앨범 커버를 클릭하면 모달창이 띄워지고 앨범정보를 JSON으로부터 받아온다. 2)제목을 클릭하면 음악이 처음부터 재생된다. 3)좋아요 기능 : 하트를 클릭하면 하트가 활성화 된다. but 저장이 되지 않아 새로고침을 했을 때 좋아요가 날라간다... 이 중 제일 어렵고 힘들었던건 1번이다. JSON 파일을 만들어서 해당 앨범정보를 작성한 다음, fetch를 이용해 불러온다. 앨범 커버를 클릭하면, html에서 작성한 data-key와 data-value를 기준으로해서 JSON의 value와 dataset.value가 같은 정보를 필터링한다. 그런 다음 모달창을 띄우고 createHTMLString을 통해 필터링된 해당 정보를 모달창..