본문 바로가기

전체 글388

[jQuery] var( ) 비밀번호 일치 여부 확인하기, (중복체크) HTML 삽입 미리보기할 수 없는 소스 HTML 삽입 미리보기할 수 없는 소스 var pass1=$('#pwd1').val(); 비밀번호 필드(#pwd1)에서 입력된 값을 가져와 변수 pass1에 저장한다. var pass2=$('#pwd2').val(); 비밀번호 확인 필드(#pwd2)에서 입력된 값을 가져와 변수 pass2에 저장한다. if(pass1==pass2) { ... } else { ... }: pass1과 pass2를 비교하여 비밀번호가 일치하는지 확인한다. $('#result').html(...): 결과 메시지를 표시할 요소(#result)의 내용을 변경한다. .css(...)를 사용하여 텍스트의 색상을 변경한다. 일치할 경우 녹색('green'), 일치하지 않을 경우 빨강('red')으.. 2023. 9. 4.
[jQuery] innerHTML, text 바꾸기 HTML 삽입 미리보기할 수 없는 소스 기존 javaScript를 이용해서 텍스트를 박아넣는 형식을 jQuery로 바꾸어보았다. HTML 삽입 미리보기할 수 없는 소스 HTML 삽입 미리보기할 수 없는 소스 var str=$('#txt').val(); 텍스트 입력 필드(#txt)에서 입력된 값을 가져와 변수 str에 저장한다. $('#view1').text(str);: 변수 str의 내용을 요소(#view1)의 텍스트로 설정하여 출력한다. 출력2 버튼도 위와 같은 방식으로 작동되는 것이다. HTML 삽입 미리보기할 수 없는 소스 HTML 삽입 미리보기할 수 없는 소스 .css({...}) .css() 메서드를 사용하여 요소의 스타일을 변경한다. 여기서는 텍스트의 색상('color'), 글꼴 굵기('fon.. 2023. 9. 4.
[jQuery] 보이기 숨기기 기능 (show, hide, toggle, slideup, fade) show()와 hide() HTML 삽입 미리보기할 수 없는 소스 HTML 삽입 미리보기할 수 없는 소스 $().ready(function(){ ... }); 이 부분은 문서가 로드될 때 실행할 JavaScript 코드를 정의하는 부분이다. $().ready(...) 또는 $(document).ready(...)와 같이 사용되며, 페이지가 완전히 로드되었을 때 내용을 실행다. $('#btn1').click(function(){ ... }); "보이기" 버튼(#btn1)이 클릭되었을 때 실행할 코드를 정의한다. 이 코드는 텍스트 입력 필드를 선택하여 show() 메서드 or hide() 메서드를 호출하여 표시한다. toggle(), slideup(), fade() HTML 삽입 미리보기할 수 없는 소스 H.. 2023. 9. 4.
[jQuery] 가장 기초적인 $( function() { .... } 에 대해 $( function() {... } 란? 자바스크립트의 $(document).ready(function() { ... }); 을 축약한 jQuery이다. HTML 삽입 미리보기할 수 없는 소스 두 코드 모두 웹 페이지의 DOM 요소가 완전히 로드 되었을 때 실행된다는 것이다. 즉, 웹 페이지의 HTML 구조가 완전히 로드되고 초기화되서 사용자에게 표시되기전까지 기다린다. HTML 삽입 미리보기할 수 없는 소스 그렇다면 이 두개는 무슨 차이가 있을까? 코드를 적용해보면 페이지로 들어왔을 때 2가 먼저 출력이 되고 이후 1이 출력이된다. alert(2) 이 코드는 스크립트가 로드되면 즉시 실행되기 때문이다. 웹 페이지 로딩과는 관련이없으며, 스크립트가 로드되는 즉시 실행된다. 주로 초기화와 관계없는 간단한.. 2023. 9. 4.
[jQuery] 아코디언(accordion) UI 써서 활용하기 https://jqueryui.com/tabs/ Tabs | jQuery UI Tabs A single content area with multiple panels, each associated with a header in a list. Click tabs to swap between content that is broken into logical sections. view source 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 jqueryui.com HTML에는 부트스트랩이 있다면 JS에는 이게 있다. 신기한 기능들이 많아 하나씩 공부해보려고한다. 내가 아는 jQuery의 지식은 $("h3") 은 d.. 2023. 9. 4.
[Spring-Legacy] mybatis 연결하기 프로젝트 생성 Legacy 프로젝트를 하나 만들어준다. porm.xml HTML 삽입 미리보기할 수 없는 소스 porm.xml로 들어가서 해당 코드들을 dependencies 안에 위치하도록 붙여넣어주자. 삽입한 코드는 Maven 프로젝트에서 사용되는 의존성 설정이다. 이 의존성들은 프로젝트가 특정 라이브러리와 연결되고 이용할 수 있도록 도와준다. 1.mysql-connector-java 이 의존성은 MySQL 데이터베이스와의 연결을 가능하게 하는 JDBC 드라이버를 제공한다. 2. org.mybatis:mybatis Mybatis는 SQL 매퍼 프레임워크로, 데이터베이스와 상호작용하는데 도움을 준다. 3.org.mybatis:mybatis-spring MyBatis-Spring은 MyBatis와 Spr.. 2023. 9. 3.
[Spring] 타임리프 경로(URL) 설정 컨트롤러 model 객체를 이용해서 data1과 data2 라는 문자열을 param1과 2로 뷰에 뿌려주었다. 뷰 HTML 삽입 미리보기할 수 없는 소스 컨트롤러에서 받은 데이터를 타임리프로 받아 다시 컨트롤러에 던지는 방법에는 두 가지가 있다. 1. 쿼리 파라미터 @{ /hello(param1=${param1} , param2=${param2} ) } 이 데이터는 /hello?param1 = data1 & param2 = data2 로 표시될 수 있다. 경로 뒤에 소괄호( ) 를 붙여 데이터를 넣어주는 방식이고 쉼표( , ) 를 통해 & 역할을 대신해준다. 2. 경로변수 @{/hello/{param1}/{param2} (param1=${param1}, param2=${param2} ) } 이 데이터는 .. 2023. 9. 2.
[Spring] LocalDateTime.now( ) 써서 시간 구하기 LocalDateTime.now( ) 란? Java 8 이상에서 제공되는 클래스로 현재 로컬 시간을 얻기 위한 메소드이다. 이 메소드는 현재 로컬 시간을 시스템 시계로부터 얻어온다. 다양한 오버로드를 가지고 있어서 , 시계를 사용하지 않고 기본적으로 시스템의 디폴트 시계를 사용할 수 있다. 컨트롤러 LocalDateTime.now( ) 를 호출하면 현재 시간 정보가 포함된 LocalDateTime 객체가 반환된다. 이 객체를 사용해 날짜 및 시간 정보를 추출하고 원하는 형식으로 출력하거나 다양한 연산을 수행할 수 있다. 뷰 HTML 삽입 미리보기할 수 없는 소스 ${#temporals} 타임리프에서 제공하는 내장 객체중 하나이다. 이를 사용하면 날짜와 시간을 다루는 기능을 템플릿에서 수행할 수 있다. 2023. 9. 2.
@ModelAttribute사용하여 극한으로 코드 줄이기 @RequestParam으로 데이터를 하나하나 받아서 처리하는 과정은 너무나 불편하다. 그래서 @ModelAttribute를 사용했다. @ModelAttribute란? 컨트롤러 메서드에서 모델 객체를 생성하고 초기화하는데 사용한다. 주로 웹 애플리케이션의 폼 데이터를 처리하고 뷰에 데이터를 전달하는데 유용하다 1. 요청 파라미터 처리 여기서 사용된 @ModelAttribute는 Item 객체를 생성하고, 요청 파라미터의 값을 set~~~ 으로 지정해준다. 2. Model 추가 또한, Model에 @ModelAttribute로 지정한 객체를 자동으로 넣어주기 때문에, 왼쪽 사진과 같이 model.addAttribute를 사용하지 않아도 자동으로 매개변수의 이름으로 들어간다. (@ModelAttribute(.. 2023. 9. 2.
@RequiredArgsConstructor , @PostConstruct @RequiredArgsConstructor이란? 생성자를 자동으로 생성하는데 도움을 주는 것이 주요 목적이다. 단, 인스턴스 변수에 final 이라는 키워드가 붙은 필드에 대한 생성자를 생성한다. 왼쪽 사진 처럼 ItemRepository에 대한 생성자를 생성하는 것 대신, 오른쪽 그림처럼 코드 한줄로 바꿔줄 수 있다. @PostConstruct란? 빈(Bean) 초기화 작업을 수행하기 위해 사용된다. 이 어노테이션을 사용하면 객체가 생성된 후에 특정 메소드가 호출되도록 할 수 있다. 일반적으로 Java 클래스의 생성자는 객체가 인스턴스화 될 때 실행되지만, 객체를 완전히 초기화하고 준비하는 작업은 생성자 안에서 수행하기에는 적절하지 않을 때가 있다. 이 어노테이션을 사용하면 객체가 생성된 후에 원하는.. 2023. 9. 2.
[JavaScript] 정규 표현식(RegExp) RegExp란? Regular Expression 의 줄임말로, 정규 표현식을 나타내는 자바스크립트의 내장 객체이다. 조건 1. 5~8자 이내여야 한다. 2. 반드시 영문(대, 소문자)로 시작해야한다. 그 외 나머지는 영문(대, 소문자) 또는 숫자로 만들 수 있다. HTML 삽입 미리보기할 수 없는 소스 HTML 삽입 미리보기할 수 없는 소스 var patt = new RegExp("^[a-zA-Z][0-9a-zA-Z]{4,7}$") ^ : 문자열의 시작 지점을 나타낸다. [a-zA-Z] : 첫 번째 문자는 영어 대문자 또는 소문자로 시작해야 한다. [0-9a-zA-Z] : 나머지 문자는 숫자 또는 영어 대문자 또는 소문자로 이뤄져야한다. {4, 7} : 총 길이는 4에서 7자 사이여야 한다. $ : 문.. 2023. 9. 1.
[JavaScript] JSON 객체, 배열 사용법 JSON 객체 HTML 삽입 미리보기할 수 없는 소스 HTML 삽입 미리보기할 수 없는 소스 JSON 배열 HTML 삽입 미리보기할 수 없는 소스 HTML 삽입 미리보기할 수 없는 소스 JSON(stingify, parse) HTML 삽입 미리보기할 수 없는 소스 HTML 삽입 미리보기할 수 없는 소스 stringify( ) JSON 객체를 string으로 변환해 준다. parse( ) string 객체를 JSON객체로 변환해 준다. 2023. 9. 1.

티스토리툴바