본문 바로가기
728x90

전체 글

 (150)
[Jquery] 데이터 탭 메뉴 (탭 바) 구현하기 jquery를 이용하면 탭 메뉴를 아주 쉽게 구현할 수 있다 웹 개발을 진행할 때, UI를 효율적으로 사용하기 위해 탭 메뉴가 자주 사용되곤 한다. 제이쿼리 문법을 통해 재사용할 수 있는 탭 메뉴를 만들어보자 1. cdn 참조 Jquery 3. 6 Jquery-ui (참고) 예제 1 JSP Insert title here Number 1 Number 2 Number 3 Number 4 탭 영역 1 탭 영역 1 탭 영역 1 탭 영역 1 Colored by Color Scripter cs 2 Javascript 2.1 기본적으로 탭 메뉴는 1번으로 초기화 된다 (원하는대로 설정하면 됨) 2.2 탭 메뉴를 클릭했을 때 이벤트 $(document).ready(function() { // 탭 메뉴를 1번으로 초기..
[Javascript] Url 파라미터 가져오는 방법, 새로고침 파라미터 수정 추가 방법 자바스크립트로 웹 페이지를 개발했을 때 데이터 통신 이후, 새로 고침을 이용하여 데이터를 다시 불러올 때가 있다 이번 포스팅에서는 새로고침을 했을 때 이전 페이지의 데이터를 가져올 필요가 있거나, 이전 데이터에 접근하는 방법을 포스팅할 예정이다 url파라미터를 이용하면 쉽게 구현할 수 있다 다음은 예제이다 먼저 URL 객체를 선언해서 url 데이터에 접근한다 url.searchParams.get(key) : url 파라미터 중 key 값을 통해 value에 접근한다 url.searchParams.set(key) : url 파라미터 중 key 값을 통해 value 값을 설정한다 var url_href = window.location.href; var url = new URL(url_href); // UR..
[Javascript] 객체에 데이터 담아서 전달하기 (서버에서 Map으로 데이터 받기), 객체 리스트에 담아서 전달하기 서버와의 연동 작업을 진행하면서, 제일 중요하다고 생각하는 건 데이터를 어떤 식으로 주고 받을지가 제일 중요하다고 생각한다 이번 포스팅에서는 서버에 파라미터를 전송할 때, 객체에 데이터를 담아서 서버에서 Map이나 VO 객체를 통해 데이터를 받을 수 있도록 구현해 볼 예정이다 만약 객체를 리스트에 넣어서 데이터를 전송하게 되면 객체 리스트로도 데이터를 받을 수 있다 아래의 예제를 보자 1 객체를 파라미터로 전달하기 해당 예제는 객체를 생성해서 파라미터를 전달한다 obj 라는 오브젝트 타입의 변수를 선언 후, key값을 지정하고 데이터를 넣는다 ajax 내부의 data 항목에 obj를 넣어주면 되는데, 브라우저에서 서버로 데이터를 전송하려고 하기 때문에, JSON.stringify를 사용해서 데이터 형식을..
[Jquery] 클릭한 특정 영역 id,class 없이 삭제하기 제이쿼리를 이용해서 특정 영역을 삭제하는 방법이다 화면에서만 삭제할 수 도있고, 서버랑 통신을 통해 데이터를 삭제할 수도 있다 방법은 아래 예제와 같이 작동된다 1 예를 들어 아래와 같이 리스트 데이터를 가지고 왔을 때, JSTL을 이용해서 반복해서 데이터를 그려준다 그려줄 때, li 태그에 onclick 속성을 이용해서 remove함수를 호출해준다 remove 함수의 파라미터로는 this를 넣어주어 클릭한 li 태그를 지칭하게 해준다 만약 여기서 id나 class를 이용해서 지칭하게 하면, 삭제 함수를 실행했을 때, 시스템 적으로 오류가 생길 수 있다 (중복 class가 들어가거나, 그러면 안되지만 id가 중복되거나 ..) JSTL DATA ${list.name } Colored by Color Scr..
[Mysql] 특정 컬럼으로 정렬 후, 조회 데이터 ROW에 인덱스 추가하기 특정 컬럼을 기준으로 정렬한 다음, 조회된 순서대로 ROW 마다 번호를 붙여줄 수 있다 id date name 1 2022-07-14 14:23:38 사과 2 2022-07-20 14:23:38 포도 3 2022-07-25 14:23:38 오렌지 4 2022-07-10 14:23:38 멜론 예를 들어 해당 데이터가 있다고 예를들면, 1. id 별로 정렬한 후, 정렬된 순서대로 인덱스를 붙여주기 SELECT id,name,ROW_NUMBER() OVER(ORDER BY date DESC) AS "idx" FROM tb_fruit; SELECT id,name,ROW_NUMBER() OVER(ORDER BY date ASC) AS "idx" FROM tb_fruit; 1.1 ROW_NUMBER() 함수를 이용..
[Mysql] 날짜 차이 계산하기 날짜 차이를 계산하는 방법 1. TIMESTAMPDIFF 날짜 1과 날짜 2사이의 기간 차이를 unit 단위에 맞게 구해서 Retrun TIMESTAMPDIFF(unit,날짜 1, 날짜 2) unit : 두 날짜를 비교하여 나온 데이터를 보여주는 단위다 (초, 분, 시, 일, 월 ,년) EX ) SELECT TIMESTAMPDIFF(month,reg_dttm,'20220819') FROM tb_user WHERE id=1; SELECT TIMESTAMPDIFF(year,reg_dttm,'20220819') FROM tb_user WHERE id=1; SELECT TIMESTAMPDIFF(day,reg_dttm,'20220819') FROM tb_user WHERE id=1; 2. DATEDIFF 날짜 1..
[JAVA] Mysql GROUP_CONCAT 데이터 int 타입으로 변경하기 마이바티스 환경에서 데이터를 GROUP_CONCAT을 사용하여 조회하면 데이터는 문자열 (String) 형태로 데이터를 받게 된다 해당 데이터를 형 변환하는 방법이다 해당 예제에서는 team_id를 기준으로 팀에 속해있는 사용자 번호를 GROUP_CONCAT하여 조회하는 데이터다. 먼저 데이터베이스를 조회하는 쿼리이다. SELECT team_id, team_name, GROUP_CONCAT(user_id) AS "userArr" FROM tb_student GROUP BY team_id; 위와 같이 데이터를 조회하게 되면, team_id team_name userArr 1 청팀 1,2,3,4,5 2 백팀 6,7,8,9,10 이런 식으로 데이터가 조회된다. 마지막 컬럼은 user_id 데이터가 모여있는 ..
[SpringFramework] 마이바티스 환경에서 INSERT,UPDATE 무시하기 스프링 프레임워크 환경에서 개발을 진행할 때, 서비스를 생성하여 데이터를 [등록] 하거나 [수정]하는 경우들이 있다. 하지만 해당 API를 요청하더라도 데이터를 등록하거나 수정하지 않도록 무시하고 싶은 경우가 있을 수 있다 이 방법을 사용하여 구현해 놓으면, 해당 서비스가 실행되어도 데이터베이스에서는 쿼리가 실행되지 않아서 등록되지 않는 현상을 볼 수 있다 구현 우선 해당 기능을 구현하기 위해 데이터베이스에서는 유니크한 인덱스를 생성해야한다. 생성한 유니크 인덱스 값을 통해 중복된 값이 들어오면 무시하도록 구현할 생각이기 때문이다 예를들어서, 책을 빌린 이력을 데이터베이스에 한 개의 row만 저장하고 싶다 그러면 책 빌린 이력테이블에 유니크 인덱스를 생성해준다 CREATE UNIQUE INDEX "id_..
728x90

티스토리툴바