Project 32

[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

[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

[2nd Project] 2차 프로젝트를 끝내며, 당근과 채찍 (+ 결과)

2차 프로젝트 주제여기서 맡은 내 역할은 로그인/회원가입/ 마이페이지 구글, 네이버, 카카오 로그인 API와 마이페이지에서 사용할 공공데이터.  저렇게만 보면 얼마 없어보이는 페이지였지만, 생각보다 연결된 페이지가 무지 많았다.  1. 구글 로그인/회원가입2. 네이버 로그인/회원가입3. 카카오 로그인/회원가입 4. 이메일 회원가입 - 이메일 인증5. 아이디 찾기6. 비밀번호 찾기 7. 프로필 편집8. 마이페이지 홈(공공데이터, 여행일정, 내 게시글 불러오기)9. 마이페이지 각 네비바에 연결된 페이지들(내 여행, 내 게시글, 내 저장목록)10. FAQ각 페이지 별로 어렵고 난해했던 부분 보충했으면 하는 부분들을 정리해 보려고 한닷.   🍟1. 구글/카카오/네이버 로그인 회원가입처음 API를 불러와야 한다..

Project/javachip 2024.11.07

[2nd Project] 자바스크립트와 JSP로 챗봇 만들기

사람의 욕심은 끝이 없고~ 계속 볼수록 수정사항이 생기는 CSS 네 마이페이지 홈이구여! 네비바 누르면 각 탭으로 이동되게 해놨습니다. 근데 페이지가 너무 정적이라서 촌스러워가지고 이거 어떻게 해야하나 고민하던 중 챗봇을 하면 어떨까 생각했다.  숙슉 말풍선이 나오니까 꽤 동적인 요소이고, 자바스크립트로 충분히 구현이 가능하다니까 3시간 잡고 해봤다. 지선생님과 함께 자바스크립트 공부를 하면서 했기 때문에 더디고 조금 시간이 걸렸다. 아 마이페이지 닉네임이 왜 일론머스크냐고요?일론머스크가 되고 싶어하는 ...염소의 영감을 잔뜩 받았어요(ㅋㅋㅋㅋ)무튼 완성본 먼저    이렇게 해당 카테고리를 누르면하위 컨텐츠가 나오고 해당하는 질문을 클릭해서 답변을 볼 수 있다.    코드 리뷰를 해보겠습니다.  🩰se..

Project/javachip 2024.10.26