HTML 62

[html, css, js] 테이블 관련 코딩 팁

1. html 2. css1) 페이지 너비 축소시 글자가 삐져나감td{ word-wrap: break-word;}단어가 한 줄에 모두 들어가지 않을 경우 줄바꿈을 한다.영어는 단어 중간에 줄이 바뀌면 알아보기 어려워서 break-word가 기본값이 아닌 듯하다. 3. javascript1) 라디오, 체크박스가 선택되어있는 행 가져오기var table = document.getElementById('TableId');//라디오var selectedRow = table.querySelector('input [type="radio"]:checked').closest('tr');//체크박스var selectedRows = table.querySelectorAll('input [type="checkbox"]..

2025.01.24

[팀 프로젝트] 24.03.15. 노트

오늘 할일 1. 내비바 2-depth 지도에서 안 보이는 오류 수정 ✔ →시간이 촉박한데 이유를 알 수가 없어서 우회해서 해결함... 2. myCourses 뷰 개선 ✔ 2-1. 저장된 코스가 없을 경우 없다고 안내 ✔ 3. 상세페이지 뷰 개선 ✔ 3-1. 홈페이지 출력 부분: ...으로 줄이기or대체문구 넣기 ✔ - 그냥 버튼으로 만들까 - 홈페이지 없는 경우 버튼 출력 x 3-2. 빠진 항목 추가(반려견 시설) ✔ 4. 상세페이지에서 항목별로 출력되게 하기 ✔ 5. 상세정보 '-' 앞에서 줄바꿈 넣기 ✔ - content, mainFacility, useCost, policyCautions, petFacility - 각 도메인 setter 변경 public void setUsedCost(String ..

[팀 프로젝트] 24.03.13. 노트

오늘 할일 1. 뷰 조정✔ 2. 코스 만들기 코스 추가 form으로 제출할까 그런데 그러면 코스 순서가 바뀔 수도 있고 빠지고 추가될 수도 있는데 form으로 되나? form에서는 name에다가 하나하나 배정해야 하는데 영양군 나의여행코스 https://www.yyg.go.kr/ybscript.io/itinerary/index# 나의여행코스-만들기 공개 비공개 www.yyg.go.kr 코스 목록: li 필요한 js 함수 🌵 '코스에 추가' onclick 1. contentSeq 취득→배열 만들기 ✔ 2. title 취득→li 추가 ✔ 3. x 클릭하면 삭제됨 - li 삭제 - contentSeq 배열에서 삭제 🌵 '코스 만들기' onclick 4. 코스 이름, contentSeq 배열, mem_id DB..

[팀 프로젝트] 24.03.11. 노트

오늘 할일 1. DB 테이블 다시 만들기 지금은 숙소/관광지/식음료/체험 카테고리별로 테이블이 따로따로 만들어져있다. 그런데 여행코스를 관리하려면 다 합쳐져있는 테이블이 있는 게 나을 것 같다. ①테이블이 나눠져있을 경우 코스 스케줄에서 contetSeq 취득→카테고리별 contentSeq를 모아놓은 배열에 해당 값이 있는지 확인→해당하는 값이 있는 테이블에서 정보 얻어옴 ②테이블이 합쳐져있을 경우 코스 스케줄에서 contentSeq 취득→테이블에서 정보 얻어옴 API가 카테고리별 또는 지역별로 나눠서 조회하게 되어있어서 나도 카테고리별로 했는데 꼭 제공하는 방식 그대로 만들어야 하는 건 아니었다. 1) 새 테이블 작성 ✔ 2) API DB에 재연결 ✔ 3) 각 Repository의 SQL문 수정 ✔ 4..

[팀 프로젝트] 24.03.08. 노트

오늘 할일 1. 커스텀 오버레이 css 수정 ✔ 2. 마커 클릭시 지도 이동 ✔ 3. 코스 총 정보+코스간 정보 출력 코스 전체 정보 출력 1. DB에서 코스 가져오기 2. 티맵 API로 출발지/경유지/도착지 설정 3. 출력되는 값 정리 코스간 정보 출력 1. DB에서 코스 가져오기 2. 코스 클릭시 자바스크립트로 뒤 스케줄 파악, ajax로 넘김 3. 티맵 API로 출발지/도착지 설정 4. 출력되는 값 정리 * 코스 전체 정보와 코스간 정보를 같이 보여주고 싶음 - 경로 색상 다르게 설정 코스 시작에 특정 위치를 지정(예: 집)해서 저장할 수 있으면 좋겠다 경유지 포함된 코스 정보를 가져오려는데 code:0 message:undefined error:TypeError: Failed to execute ..

[팀 프로젝트] 24.03.07. 노트

카카오맵 API 가이드 https://apis.map.kakao.com 마커를 띄울 주소를 동적으로 생성하면 'Uncaught TypeError: a.e is not a function'이 발생하는 문제 1)함수 하나 안에 다른 함수들을 다 넣어봄 실패 2)gpt 다시 돌려봄 카카오맵 API 코드 예시를 주고, JSON으로 좌표를 받아오는 코드를 준 뒤에 이 좌표값을 사용하고 싶다고 함 코드 예시보다 훨씬 간단한 코드를 줬는데 정상적으로 작동함(표시되어있는 마커가 다른 데이터를 새로 받아왔을 때도 초기화되지 않아서 다소 수정은 필요함) 왜 되지...? function requestAddrArray(areaName, category){ $.ajax({ url: '/pet_hug/courses/getAddr..

[팀 프로젝트] 24.03.05. 노트

할일 식음료 뷰 연결하기 체험 뷰 연결하기 카테고리별로 정보 받아와서 지도에 띄우기 지도 이동 구현 메뉴 링크 정리 메뉴 링크 정리 회원정보를 마이페이지로 수정 마이페이지: 회원정보, 찜목록, 예약 목록, 여행 코스 여행지 two-depth: 숙소, 여행지, 식음료, 체험, 코스 만들기 리뷰에서 별점에 오류가 좀 있어서 일단 주석처리해놨는데 살릴 수 있으면 좋겠다. 코스 짜는 건 갈길이 멀다....... 오리지널 코스 짜는 건 어렵다고 함..일단은 추천코스를 만들고 넣고 싶은 경로 정보를 넣기로 함 시간이 남으면 오리지널 코스를 짤 수 있게 해야겠다. 남을 것 같지는 않지만... 카카오맵 api 이용 https://apis.map.kakao.com/web/sample/categoryMarker/ 지도에 ..

[팀 프로젝트] 24.02.29. 노트

*url 파라미터로 보낸 값의 키와 input 태그의 path 이름이 같으면 파라미터의 값이 input 태그 안에 출력된다. 여행 코스 구현을 위해 네이버 길찾기 API로 코스간 소요시간을 구하는 함수를 만들었다. 그런데 지도에 길을 표시하려면 자바스크립트를 사용해야 한다...자바를 쓰고 싶어서 티맵이 아니라 네이버 길찾기를 사용한 건데... 2시간동안 네이버 길찾기 만진 건 자바로 API 다루는 연습을 한 거라고 치자...속도가 느려서 연습해야 하기는 했다. JSONArray에서 JSONObject를 얻는 getJSONObject는 인덱스로만 사용할 수 있다. JSONObject에서 JSONObject를 얻는 getJSONObject는 키(객체 이름)로 사용할 수 있다. 티맵 API DB에 등록되어있는..

[팀 프로젝트] 24.02.28. 노트

앞으로 할 일 1. 지도 API 사용해서 여행코스 만들기 - 코스간 이동 거리 - 필요 비용 - 예상 유류비 - 여행지 비용 발생시 계산해서 총액 네이버 길찾기 API driving (ncloud-docs.com) driving api.ncloud-docs.com 2. 고속도로 휴게소 표시 오늘 할일 여행코스 만들기 - 1단계: 상세정보 없이 코스 목록 제작 - 2단계: 상세정보 삽입 - 1단계: 지도 없이 상세정보에서 코스 작성 - 2단계: 지도에서 마커 클릭해서 코스 작성 - 3단계: 상세정보 삽입 댕댕여지도에 없는 기능 - 숙소/관광지/편의시설 상세페이지에서 여행코스에 등록 - 여행코스 거리, 유류비 등 상세정보 - 여행코스 수정 코스 목록: 로그인 필요 숙소/여행지 목록의 상세정보에서 코스에 추가..

[JS]button 클릭시 엉뚱한 폼이 제출되는 문제: preventEvent()

버튼을 클릭하면 display:none 되어있던 div가 나오는 코드를 만들었다. (div는 css에서 display: none 처리되어있음) 내 여행 코스에 넣기 코스 추가 그런데 버튼을 클릭했을 뿐인데 페이지가 이동하려고 하고 다음과 같은 오류가 출력되었다. org.springframework.dao.EmptyResultDataAccessException: Incorrect result size: expected 1, actual 0 콘솔 로그를 확인해보니 같은 페이지에 있는 리뷰 작성 폼이 제출되었고, 필요한 데이터가 모자라서 오류가 발생한 것이었다. 이러한 경우, preventEvent()를 사용해서 기본 동작을 막아야 한다. 스크립트를 다음과 같이 수정해서 해결했다. 함수의 첫줄에 코드 한 줄을..