JavaScript 26

[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.06.11. 노트

자바스크립트1. Object.create(Object1)2. indexOf()가 -1을 반환하는 경우3. toFixed()4. mCustomScrollbar()5. jQuery를 사용하는 즉시 실행 함수 1. Object.create(Object1)새로운 객체를 생성하고 이 객체의 내부 [Prototype]을 매개변수로 받은 객체 Object1로 설정함-> Object.create(Object1)로 만드는 객체는 Object1 객체의 변수와 메서드에 접근할 수 있다. 2. indexOf()가 -1을 반환하는 경우indexOf()는 매개변수 안의 문자를 찾는 메서드인데, 찾고자 하는 문자가 없는 경우 -1을 반환한다.다음과 같이 사용하면 찾고자 하는 문자가 있는 경우와 없는 경우로 나누어 코드를 작성할 수..

정리노트/메모 2024.06.11

[팀 프로젝트] 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/ 지도에 ..

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

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

[JavaScript] 자바스크립트 BOM⑤ navigator 객체

자바스크립트 navigator 객체: 브라우저 버전이나 브라우저명 등 브라우저 정보에 관한 객체 navigator 객체 프로퍼티 appCoeName: 브라우저의 코드명 반환 appName: 브라우저명 반환 appVersion: 브라우저 버전 반환 platform: 플랫폼명 반환 userAgent: 브라우저의 코드명과 저번 반환 let browser = navigator.userAgent; alert(browser); let browserName = ''; if(browser.match(/Trident/)){ browserName = '인터넷 익스플로러'; }else if(browser.match(/Chrome/)){ browserName = '크롬'; }else if(browser.match(/Firef..