티스토리챌린지 21

[3nd Project]카카오 Api로 주차장 구현하기 9

네 검색창 기능 완벽 구현 나야나 (소곤소곤 행복행복 신남신남) 검색창 기능 코드 리뷰하고 빨리 바나나랑 요거트 먹으러 떠날거랍니당 배고파 리뷰하기 넘 싫고 빨리 튀고 싶었는데요 그럼에도 참았어요. 내일의 나는 더 하기 싫을테니까요 헤헤 오늘의 리뷰! 검색창에서 주차장을 검색할 때 자동완성 기능과 키보드 탐색 기능을 구현 🎒1. searchParking 함수function searchParking() { const searchInput = document.getElementById("parking-search").value.toLowerCase(); // 검색어를 소문자로 변환하여 가져옴 const resultsContainer = document.getElementById("autocomplete-re..

Project/5V 2024.11.17

[3nd Project] 카카오 Api로 주차장 구현하기 8

나는 힘들 때 햄토리 오프닝을 들어. 길찾기 하는 날! 일단 탭함수를 내가 막아놔서 주석을 풀고 탭 함수를 살려서 길찾기로 넘어가게 해보겠다. 먼저 parkinglot.jsp에서 영역을 만들어주었다. 출발지: 도착지: 길찾기 길찾기 경로 🚍showTab 함수// 탭 전환 함수 function showTab(tabName) { // 모든 탭 콘텐츠 숨기기 document.querySelectorAll('.tab-content').forEach(tab => { tab.style.display = 'none'; }); // 선택한 탭만 보이도록 설정 document.getElementById(tabName).style.display = 'block'; // 모든 탭 버튼에서 'active' 클래스 제거 doc..

Project/5V 2024.11.16

[3nd Project] 카카오 Api로 주차장 구현하기 7

형돈이 뱃살 = 내 뱃살 목요일이 밝았습니다. 이번주는 정말로 힘이 들어요! 헤헷 .. 할 게 너무나도 많네요!어떻게든 되겠지 나는 날 믿어 인생을 대충 살지 않으니까뭐든 뚝딱 잘 해낼거니까성실하니까암암 오늘의 목표는길찾기 기능 구현하기 - 호달달 - 길찾기를 하려면요! 일단은 카카오 모빌리티에서 API를 받아와야 한답니다. 저는 제 javascript 코드 한 번 쭉 보면서 흐름을 읽고 매개변수들 좀 본 다음에 진행하도록 하겠습니다. 리뷰를 한 번 하고 해야지 잘 되더라고요, ,그래서 오늘 7편은 코드 리뷰 및 흐름 이해로 하고 길찾기는 8에서 하겠습니다. ㅎ . 챌린지 때문에 나누는거 맞음!🚧주요  흐름페이지가 로드되면 카카오 지도가 초기화되고, fetchParkingLotData호출fetchTot..

Project/5V 2024.11.15

[3nd Project] 카카오 Api로 주차장 구현하기 6

자 이제 제일 큼직 큼직한 것만 나왔습니다. 처음부터 잘 모르고 무턱대고 덤벼서 생긴 일인 걸까?아니면 원래 다 이렇게 하는 건가 궁금하네 엄청 어려운 단계를 지나면 그 이후가 쉽고 이해가 빠르듯 지금도 그런 과정에 일부라고 생각한다.하지만, 그 어려운 단계를 잘 극복해 나가는 것도 쉬운 일은 아니니 ,, 과자를 먹자운동은 밤에 하고! (@^0^@)/(ノ◕ヮ◕)ノ*:・゚✧✪ ω ✪   일단 나는 전체 데이터를 받아와서 필터링을 해야하는데 한 번 호출 할 때 제한이 있이 때문에 페이지 별로 반복 요청으로 모든 페이지의 데이터를결합하는 방식으로 진행해야 한다.API 페이지네이션을 사용해 한 번에 불러올 수 있는 데이터 수가 제한되어 있으니까어쩔 수 없이 순차적으로 데이터 요청 후 모아서 결합해야 한다.  1..

Project/5V 2024.11.14

[3nd Project] 카카오 api로 주차장 구현하기 5

오늘의 첫 곡은 응급실입니다.이 드라마의 최고 아웃풋 응급실.(Tmi: 초딩 때 저 머리를 하고 싶어서 하고 다니다가 언니들한테 찍힌다고 친구가 겁줘서 튀는 머리 안했어요.그래서 29살이지만 머리 땋기, 양갈래 이런거 해도 되는 장소에는 내면의 욕구를 충족시키기 위해 하고 감요)무튼 오늘은 나 무조건 80% 끝낼거야. 오늘 해야 할 일1. 필터링된 공공데이터 주차장 리스트에 출력하기2. 지역 검색 필터 완벽 구현하기3. 내 위치 찍히게 바꾸기 4. 길찾기 부분 구현 해놓기 와 나 진짜 오늘 집중 빡할거야 그럴려고 아침에 빵 두 조각 냠냠굿나 오늘도 실패로 돌아가면 SQLD고 뭐고 집 안감ㅠㅠ 해보자 예슬아  🥊fetchParkingLotData - 주차장 데이터 불러오기 function fetchPar..

Project/5V 2024.11.13

[3nd Project] 카카오 Api로 주차장 구현하기 4

아침부터 헤드에이크에 시달리고 있는 나 .. Api부터 아주 새로 시작할 생각에 퀭해진 나두통의 원인 잡았다 요놈!이번주에 개발 완료의 목표가 산산조각이 나서 착잡한거지다시 하려고 해서 슬픈 건 아니야!!!!나니요.. 나니요... 나니요오오  시작해보자 !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!주차장 이놈!!!!  기존 데이터// 공공데이터 API에서 주차장 리스트 가져오기function fetchParkingLotData(tabName) { $.ajax({ url: 'http://api.data.go.kr/openapi/tn_pubr_prkplce_info_api', data: { serviceKey: '', // 공공데이터 포털에..

Project/5V 2024.11.12

[3nd Project] 카카오 Api로 주차장 구현하기 3

5시 20분에 울린 알람에 이젠 벌떡 일어날 수 없다.밍기적 느그적 10분만..으어어ㅓ어 박예슬 한 달만 참아. 너 할 수 있어.   오늘의 첫 번째 할 일상단에 있는 검색바에서 공공데이터를 검색할 수 있게 하기검색창 기능을 살려보잣이거 하다가 두 번 날려먹었음 공공데이터가 자꾸 안나와서,, 일단내 위치 아이콘 클릭 시 지도에 내 위치가 지도에 뜨게끔 바꿔보잣 // 내 위치 버튼 클릭 시 현재 위치로 이동 document.getElementById('myLocationButton').addEventListener('click', function() { if (navigator.geolocation) { navigator.geolocation.getCurrentPosi..

Project/5V 2024.11.11

[3nd Project] 공공데이터와 카카오 API로 주차장 웹 구현하기 2

오늘은 카카오 api를 통해 가져온 지도에 공공데이터 API를 호출하여 주차장 데이터를 가져올 것이다. 가공까지 할 수 있으면 좋은데 목표는 일단 데이터 가져와보기,, 개발할 때는 처음부터 설계를 잘 해야 한다는 것을 깨달았지만 동시에 사소해 보이는 모든 기능들을 구현하기 위해서는 눈을 부릅뜨고 해야한다 어텐션플리즈 공공데이터를 가져오려면 XML/JSON형식이 있는데 정확히 어떤 건지 잘 몰라서 찾아봤다.결론: 웹 및 앱은 JSON을 더 많이 사용하며 일반적이다. 왜냐하면 속도가 빠르고 데이터 크기가 작아서 전송에 유리하다. 그래서 나는 json을 사용해서 데이터를 받아오려고 한다. 공공데이터 포털에서 미리 신청해둔 전국주자창표준데이터를 활용했다.벌써 무려 6건!!!! 앞으로 100건이 될 때까지 데이터..

Project/5V 2024.11.10

오타쿠 무의식 흐름

오블완 챌린지를 위한 무의식 흐름 아님. 재밌어서 하는 거임 카라스노만 보면 눈 돌아 카라스노 삼학년 내 아픈손가락 나 하이큐 반팔티도 있다고! 네코마에 쿠로오 성우도 고죠 사토루 성우인데 나는 역시 .. 고죠와 연결되어 있는 무스비가 있나 고죠 레이더 발동쿠로오 멋쁨 ㅠ 역시 주장 오빠들은 멋져 나 이거 사려고 들었는데 거렁뱅이라 내려놈..히나타야 누나가 곧 데리러갈게 ㅜㅜ 근데 너 하나론 안돼 ㅠㅠ 옆에 카게야마라도 같이 있던지 카라스노 전체 데꼬와야지 누나 지갑 열 수 있다.히나타를 뽑고 싶었으나 ..카게야마가 나왔다.. 힝구르르 내가 라프텔로 낳은 자식 둘고온~~! 끼르아! 레오~~/리오 크.라피카! 희쏘카! 곤 말투 따라하기 저렇게 기엽고 해맑은 곤이 곤육몬 됐을 때는 증말 다소 충격 그리고 ...

Ordinary things 2024.11.09

[3nd Project] intro 주차장 찾기 웹페이지 구현

갱장히 피곤한 오늘더 잘까? 20번 고민하다 일어난 내 신체 칭찬해. 아침부터 800미터 전력질주 계단 20층 오른 나 칭찬해이래서 피로가 안 풀리는 건가봉가 ..   내일은 우리 집 고양이 화장실 청소 해주는 날고앵이 화장실 청소는 무지 힘들어(유사 유산소) 무튼 내일 토요일!!!!!SQLD 딱 대 너.그리고 오블완씨 나 21일 뒤에 생일이야 매일 써줄게.  2차 최종 발표 후 D+3 3차 프로젝트 착수보고 D-DAY네.. 2차 끝나기 2주 전 3차 팀을 구성하고1주 전부터 준비했습니다. (그래서 피로가 안 풀리는 건가) 3차 프로젝트 주제에 더하여 주차장을 넣을 거다.  지도를 사용하는 기술은 처음이라 카카오 지도 API 가이드를 정독하고그 방법대로 해보려고 한다.  카카오 맵 api 가이드 카카오ㅆ..

Project/5V 2024.11.08