JSP 16

[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로 주차장 웹 구현하기 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

[2nd Project] 아이디, 비밀번호 찾기/재설정(이메일 인증, JSP, STS)

JSP와 스프링프레임워크로로그인 창에서 아이디, 비밀번호 찾기 구현하기아이디를 찾고, 비밀번호는 이메일 인증을 통해서 인증된 사용자가 비밀번호를 재설정할 수 있다.이 기능은 이메일 회원가입을 위한 기능!(메론빵과 소보로와 마라탕이랑 오레오랑 계란과자의 효과인가 오늘 무슨 일로 개발이 척척 되는거지? 더 많이 먹어야겠다.)       🍼아이디 찾기//회원정보 찾기@PostMapping("/findIdProcess")public String findIdProcess(@RequestParam("m_registration_type") String registrationType, @RequestParam("m_nickname") String nickname, ..

Project/javachip 2024.10.22

[2nd Project] 프로필 이미지 수정(JSP, STS)

마이페이지의 핵심이라고 생각되는 프로필 편집을 하고 있다.  영역이 다 깨져있지만지금 프로필 이미지 변경을 가능 하도록 만들고 있다.  비밀번호도 유효성에 맞게 변경하도록 했으며, 비밀번호 확인란과 일치 해야만 변경이 된다.닉네임도 마찬가지로 고유한 값이기 때문에 중복 검사를 필요로 한다. 닉네임, 혹은 비밀번호만 변경할 수 있으며 이 페이지 하단의 회원 탈퇴를 누르면 탈퇴가 된다!    오류로 인해 조금 미뤄두었던 프로필 이미지란을 구현하고 있다.사진 업로드라니!! 사진을 업로드 하면 경로가 어떻게 가는지가 궁금해서 흐름을 한 번 알아보았다. 위에 파일 선택 버튼을 누르면 파일창이 뜨고 이미지를 선택할 수 있다.선택 후 변경하기 버튼을 누르면 Form태그 안에 내용이 서버로 전송된다. enctype="..

Project/javachip 2024.10.22

[2nd Project] SQL 조인해서 테이블 연동하기, 마이페이지에 불러오기!

🎨다양한 페이지들과 내 마이페이지 연동하기 로그인을 한 경우 생기는 마이페이지에서 나의 활동 로그들을 한 눈에 볼 수 있도록하기 위한 테이블 조인 작업! 처음 해보는 테이블 조인으로 3일 전부터 무섭고 계속 퍼뜩 생각이 나가지고 빨리 해치우고 싶었으나, 제대로 해치워야지정리하면서 하면 하나하나 기억에 오래 저장할 수 있으니 한 번 기록해보겠어.  1. DB에 있는 공공데이터들 불러오기2. 내가 저장한 장소 저장 목록에 불러오기3. 내가 쓴 게시글 목록 불러오기    아래는 내가 그린 마이페이지 프로토타입  내 여행기 부분에 내가 쓴 게시글을 불러오기 위해서 조인 작업을 할 예정이다. 어제 공공API를 통해서 추천 핫플레이스를 DB에 저장해서 랜덤으로 불러오는 것과 핫플페이지 내 저장을 누르면 로그인한 ..

Project/javachip 2024.10.18

[2nd Project] 구글 API 구현하기

구글도 처음엔 mvc로 시도하다가 초기 셋팅이 오류가 있어서 다시 이클립스로 가서 작업했다. 그래서 파일이 비교적 단순한데 5개가 전부다.이걸로 간단히 하다가 네이버로 오니까 머리가 터질 수 밖에!한 번 짚고 가보다쿠👧🎅👩‍🚀👨‍💻👩‍💻      GoogleVOpackage dto;import java.sql.Timestamp;import lombok.AllArgsConstructor;import lombok.Data;import lombok.NoArgsConstructor;@Data // 게터, 세터, toString, equals, hashCode 등을 자동으로 생성@NoArgsConstructor // 기본 생성자 생성@AllArgsConstructor // 모든 필드를 매개변수..

Project/javachip 2024.10.04