'이론' 카테고리의 글 목록 (4 Page)

1. 이론

1-1. Framework

뼈대나 근간을 이루는 코드들의 묶음
프로그램의 기본 흐름이나 구조를 정하고, 이 구조에 자신의 코드를 추가하는 방식으로 개발하는 프로그래밍 기본 틀
즉, 개발에 필요한 구조가 제공되고, 그 구조에 필요한 부분을 조립하는 형태로 개발이 진행된다.

1-2. 라이브러리

라이브러리란, 자주 사용되는 로직을 재사용하기 편리하도록 잘 정리한 일련의 코드들의 집합이다.

1-3. 프레임워크 vs 라이브러리

프레임워크는 자동차 프레임, 즉 기본적으로 구성된 뼈대를 말한다.
라이브러리는 자동차의 기능을 하는 부품을 의미한다.
한 번 정해진 자동차의 프레임은 바꿀 수 없다.
즉, 소형차를 만들기 위한 뼈대로 SUV를 만들 수는 없다.(프레임워크)
그러나 바퀴나 선루프, 헤드라이트 등은 비교적 다른 종류로 쉽게 바꿀 수 있다.(라이브러리)

1-4. Spring이란?

스프링 프레임워크는 자바 플랫폼을 위한 오픈소스 애플리케이션 프레임워크로써, 간단히 Spring이라 부른다.

동적인 웹사이트를 개발하기 위한 여러 가지 서비스를 제공하고 있다.

1-5. Spring Boot

스프링 프레임워크는 기능이 많아 환경설정이 복잡한 편이다. 이를 쉽게 만드는 것이 바로 스프링 부트이다.

Embed Tomcat을 사용하기 때문에 따로 Tomcat을 설치하거나 매번 버전 관리해 주어야 하는 수고로움을 덜어준다.
starter를 통한 dependency 자동화
스프링에서는 각각의 dependency들의 호환되는 버전을 일일이 맞추어 주어야 했고, 때문에 하나의 버전을 올리면 다른 dependency에 까지 영향을 미쳐 version 관리에 어려움이 많았다. 하지만 스프링 부트에서는 starter가 대부분의 dependency를 관리해주기 때문에 이러한 걱정을 덜게 되었다.
XML 설정을 하지 않아도 된다.
jar 파일을 이용해 자바 옵션만으로 손쉽게 배포가 가능하다.
Spring Actuator를 이용한 애플리케이션 모니터링과 관리를 제공한다.

2. 환경설정

STS3
- 설치 시 java 11이 필요하기 때문에 다운로드
java 8

2-1. 프로젝트 생성

https://start.spring.io/

Project : 사용할 필드 툴 선택(Maven/Gradle)
- Maven, Gradle은 프로젝트 의존성을 관리하는 빌드 라이프사이클을 관리해주는 툴이다.
- 과거에는 Maven을, 최근에는 Gradle을 사용한다.
Spring Boot 버전 선택
- SNAPSHOT이 붙은 것은 현재 개발 중인 버전
- M(Minor)은 정식 릴리즈 되지 않은 버전
- 아무것도 붙어있지 않은 것은 정식 릴리즈된 버전. 따라서 정식 릴리즈 된 버전 중 가장 최신 버전을 선택한다.
Project Metadata : 정보
- Group은 기업의 도메인
- Artifact는 비리드 결과물, 프로젝트 명
- 위 두 개를 설정하면 패키지 명이 자동으로 설정된다.
Packaging
- JSP 때는 War를 사용했지만, Spring Boot에서는 Jar를 사용한다.
Dependencies
- 기본적으로 Spring Web과 Thymeleaf를 선택해준다.
Generate 버튼 혹은 Ctrl+Enter를 하면 현재 설정을 기반으로 한 프로젝트 압축 파일이 다운로드 된다.

2-2. STS에 프로젝트 불러오기

생성된 파일을 STS 워크스페이스로 불러온 뒤 압축을 풀어준다.
STS 실행 후 Package Explorer에서 마우스 우클릭 후 import 클릭

import 창에서 Gradle 폴더 안 Existing Gradle Project 클릭

Next > 클릭 후 압축 파일을 풀어준 폴더 선택한 뒤 Finish 클릭

프로젝트 생성 시, 톰캣이 내장되어 있기 때문에 서버에 자동으로 추가된다.

2-3. application.properties

애플리케이션에서 사용하는 여러 가지 설정 값들을 애플리케이션의 밖이나 안에 정의할 수 있는 파일이다.

스프링 부트가 애플리케이션을 구동할 때 자동으로 로딩되는 파일로, key-value 형식으로 값을 정의하면 애플리케이션에서 참조하여 사용할 수 있다.

▶ #을 달아 주석처리가 가능하다.

▶ 포트 설정, 인코딩 설정, dbms 연결 등을 하는 곳이다.

▶ 한글이 깨지면 'Properties'에 들어가 UTF-8로 설정해준다.

2-4. build.gradle

▶ 프로젝트를 생성하면서 우리가 설정했던 사항이 들어가 있다.

▶ 다른 기능을 추가하고 싶을 때는 dependencies{} 안에 추가해주면 된다.

3. Welcome Page

스프링부트에서는 static 폴더 안의 index.html이 로컬주소를 주소창에 넣었을 때 처음으로 뜨는 웰컴페이지이다.

[출력 결과]

4. DispatcherServlet

스프링 MVC도 프론트 컨트롤러 패턴으로 구현되어 있다.
스프링 MVC의 프론트 컨트롤러가 바로 디스패처 서블릿이다.
그리고 이 디스패처 서블릿이 스프링 MVC의 핵심이다.
DispatcherServlet -> FrameworkServlet -> HttpServletBean -> HttpServlet

4-1. HTTP 요청 및 응답 흐름

1) 핸들러 조회 : 핸들러 매핑을 통해 요청 URL에 매핑된 핸들러(컨트롤러)를 조회한다.

2) 핸들러 어댑터 조회 : 핸들러를 실행할 수 있는 핸들러 어댑터를 조회한다.

3) 핸들러 어댑터 실행 : 핸들러 어댑터 실행

4) 핸들러 실행 : 핸들러 어댑터가 실제 핸들러를 실행한다.

5) ModelAndView 반환 : 핸들러 어댑터는 핸들러가 반환하는 정보를 ModelAndView로 변환해서 반환한다.

6) ViewResolver 호출 : 뷰 리졸버를 찾고 실행한다.

7) View 반환 : 뷰 리졸버에서 뷰의 논리 이름을 물리 이름으로 바꾸고, 랜더링 역할을 담당하는 뷰 객체를 반환한다.

8) 뷰 렌더링 : 뷰를 통해서 뷰를 렌더링한다.

5. 예제 코드

< index.html 링크 클릭 시 해당 페이지 불러오기 >

index.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	<a href="/hello">hello</a>
</body>
</html>

HelloController.java

@Controller
public class HelloContrller {
	@GetMapping("hello")
	public String hello(Model model) {
		model.addAttribute("data", "new springboot!!");
		return "hello";
	}

@Controller
- Controller 클래스에는 @Controller가 필요(import 필수)
- Controller에서 해당 mapping URL을 찾아 연결해준다.
@GetMapping
- get 방식의 요청 mapping(import 필수)
Model은 일종의 데이터 담는 형식(import 필수, 나중에 더 자세히 배울 예정)
- .addAttribute("key", "value")를 통해 데이터를 담아 전달할 수 있다.
"hello"를 return 시, templates/hello.html로 자동으로 매핑된다.
즉, 컨트롤러에서 리턴 값으로 문자를 반환하면 뷰리졸버(ViewResolver)가 화면을 찾아서 처리한다.
스프링 부트는 기본 viewName을 매핑해준다.
resources : templates/ + {viewName} + .html

hello.html

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	<p th:text="'/Hello.' + ${data}">Hello Spring Boot</p>
</body>
</html>

타임리프(thymeleaf)를 사용하기 위해서는 <html xmlns:th="http://www.thymeleaf.org">을 html태그에 넣어준다.
타임리프는 th:로 시작한다.
${data}에 HelloControler.java에서 넣어준 data를 가져온다. 출력 시 /Hello. new Springboot!!
위와 같이 코드를 작성함으로써, 프론트단 작업 화면과 개발자 화면을 분리해서(?) 볼 수 있다.

http://localhost:9999/hello

file:///D:/0900_GB_KMoon/spring/workspace/test/src/main/resources/templates/hello.html

728x90

저작자표시 비영리 변경금지 (새창열림)

'이론 > 자바 풀스택 국비수업' 카테고리의 다른 글

0713 Spring Boot 3 (0)	2022.07.22
0712 Spring Boot 2 (0)	2022.07.22
220523 jQuery 5 (0)	2022.07.17
220519 jQuery 4 (0)	2022.07.13
220519 jQuery 3 (0)	2022.07.07

1. each()

each() 메서드는 객체나 배열에서 모두 사용할 수 있는 범용적인 반복 함수이다.

$.each(object, function(index, item){});

object : 대상을 전달
function(index, item){}
- index : 인덱스 값
- item : 해당 인덱스가 가진 값

[예제 코드]

let arr = ['다음', '네이버', '구글'];
$.each(arr, function(index, item){
    let result = '';
    result = index + " : " + item;
    document.write(result + "<br>")
});

[출력 결과]

1-1. 객체 요소 출력하기

[예제 코드]

let obj = {
    daum : 'http://www.daum.net',
    naver : 'http://www.naver.com'	
};

$.each(obj, function(index, item){
    // index : 객체의 키
    // item : 객체의 값
    // 매개 변수이기 때문에 이름은 바꿔도 상관없음!!
    let result = '';
    result += index + ' : ' + item;
    document.write(result + '<br>');
});

[출력 결과]

1-2. 배열 요소 출력하기

[예제 코드]

let arr = [
    {title : '다음', url : 'http://www.daum.net'},
    {title : '네이버', url : 'http://www.naver.com'}
];

$.each(arr, function(index, item){
    let result = '';
    result = index + " : " + item.title + ", " + item.url;
    document.write(result + "<br>")
});

[출력 결과]

1-3. 선택자의 객체 가져오기

[예제 코드]

<body>
	<ul class="list">
		<li>HTML</li>
		<li>CSS</li>
		<li>JavaScript</li>
	</ul>
	
	<script type="text/javascript">
		$('.list li').each(function(index, item){
			// index : 말 그대로 index
			// item : 해당 선택자인 객체
			$(item).addClass('li_0' + index);
		});
		
	</script>
	
	<!-- 
		addClass 결과 
		<li class = "li_00">HTML</li>
		<li class = "li_01">CSS</li>
		<li class = "li_03">JavaScript</li>
	-->  
</body>

1-4. 문제 풀어보기

<문제 1>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<style>
	.s1{color: tomato;}
	.s2{color: powderblue;}
	.s3{color: green;}
	.s4{color: brown;}
</style>
</head>
<body>
	<p>HTML</p>
	<p>JavaScript</p>
	<p>Java</p>
	<p>DBMS</p>
	
	<script>
		/* 
			each문을 사용해서 스타일 클래스 p 태그에 적용하기
			HTML에는 style class s1,
			JavaScript에는 style class s2,
			Java에는 style class s3,
			DBMS에는 style class s4
		*/	
	</script>
</body>
</html>

<풀이>

$('p').each(function(index, item){
    $(this).addClass('s' + (index+1));
});

<문제 2>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<style>
	.s1{color: tomato;}
	.s2{color: powderblue;}
	.s3{color: green;}
	.s4{color: brown;}
</style>
</head>
<body>
	<p>HTML</p>
	<p>JavaScript</p>
	<p>Java</p>
	<p>DBMS</p>
	
	<script>
		/* 
			<문제2>
			each문을 사용해서 특정 P태그에 스타일 클래스 적용하기
			HTML에는 style class s1,
			JavaScript에는 style class s2
		*/
		
		$('p').each(function(index, item){
			if(index == 2){
				return false;
			}
			
			$(this).addClass('s' + (index + 1));
		});
	</script>
</body>
</html>

<풀이>

$('p').each(function(index, item){
    if(index == 2){
        return false;
    }

    $(this).addClass('s' + (index + 1));
});

2. extend()

두 개 이상의 객체의 모든 속성을 하나의 객체로 병합한다.

[예제 코드]

let obj1 = {
    "name" : "google"
};

let obj2={
    "url" : "www.google.com",
    "abc" : "def"
};

// 이 메소드는 인수로 전달받은 첫 번째 객체에 두번째 이후 객체의 모든 속성값을 추가한다.
$.extend(obj1, obj2);

$.each(obj1, function(key, value){
    document.write("key = " + key 
        + ", value = " + value + "<br>");
});

[출력 결과]

2-1. value가 중복될 경우

[예제 코드]

let obj1 = {
    "name" : "google"
};

let obj2={
    "url" : "www.google.com",
    "abc" : "def"
};

let obj3 = {
    "name" 	: "hkd",
    "url" 	: "www.hkd.com",
    "book"	: "jQuery"
};

$.extend(obj1, obj2, obj3);

$.each(obj1, function(key, value){
    document.write("key = " + key 
        + ", value = " + value + "<br>");
});

[출력 결과]

▶ value는 중복이 가능하지만, key는 중복이 불가능하다.

▶ 따라서 name, url의 value가 가장 마지막 obj3의 값으로 출력된다.

728x90

저작자표시 비영리 변경금지 (새창열림)

'이론 > 자바 풀스택 국비수업' 카테고리의 다른 글

0712 Spring Boot 2 (0)	2022.07.22
0706 SpringBoot 1 (0)	2022.07.18
220519 jQuery 4 (0)	2022.07.13
220519 jQuery 3 (0)	2022.07.07
220518 jQuery2 (0)	2022.07.06

1. 요소 대체하기

선택한 요소를 지정된 요소로 치환하는 기능

replaceAll()과 replaceWith() 모두 동일한 기능을 하지만, 소스와 타깃 위치가 반대이다.

1-1. replaceAll()

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<style>
	p{
		background-color : tomato;
		margin: 6px 0;
	}
</style>
</head>
<body>
	<p>Hello</p>
	<p>javaScript</p>
	<p>world</p>
	
	<script>
 		$("<b>jQuery</b>").replaceAll("p");
	</script>
</body>
</html>

[출력 결과]

1-2. replaceWith()

$("p").replaceWith("<b>JSP</b>");

▶ replaceAll()과 소스와 타겟 위치가 반대

[출력 결과]

replaceAll()과 마찬가지로 p태그에 걸려있던 스타일이 없어진다.

2. 클래스 속성 변경

addClass()	지정한 요소에 클래스를 추가
removeClass()	지정한 요소에 클래스를 제거
hasClass()	지정한 요소에 클래스 유무 확인(boolean타입 반환)
toggleClass()	지정한 요소에 클래스를 추가/제거

[예제 코드 - addClass(), removeClass(), hasClass()]

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<style type="text/css">
	p{
		margin: 4px;
		font-size: 16px;
		font-weight: bolder;
		cursor: pointer;
	}
	.blue{
		color: blue;
	}
	.highlight{
		background-color: yellow;
	}
</style>
</head>
<body>
	 <p class="blue">클래스 속성 변경</p>
	 <p class="blue highlight">highlight</p>
	 <p class="blue">on these</p>
	 <p class="blue">class</p>
	 
	 <script type="text/javascript">
	 	$("p").click(function(){
			$(this).addClass("highlight");	 		
	 	});
	 	$("p").click(function(){
	 		if($(this).hasClass("highlight")){
				$(this).removeClass("blue");	 		
	 		}
	 	});
	 </script>
</body>
</html>

[출력 결과]

클릭 시 하이라이트 클래스가 추가됨. 하이라이트 클래스가 있다면(hasClass) 파란색 글씨가 제거됨

[예제 코드 - toggleClass()]

$("p").click(function(){
	$(this).toggleClass("highlight");	 		
});

토글이란, 하나의 설정 값으로부터 다른 값으로 전환하는 것이다.

두 가지 상태밖에는 없는 상황에서, 스위치를 한 번 누르면 한 값이 되고, 다시 한 번 누르면 다른 값으로 변하는 것을 의미한다.

[출력 결과]

하이라이트 클래스가 있다면 제거하고 없다면 추가한다. 클릭 시 마다 상태가 변환된다.

3. 속성제어

attr()	입력한 값과 일치하는 속성 값을 가져오거나 추가할 때 사용한다. attr(attribute)는 prop(property)와 유사하나 HTML 입장에서의 속성이란 것을 유의해야 한다. Javascript 속성을 검색하려고 한다면 prop()을 사용해야 한다.
prop()	입력한 값과 일치하는 속성 값을 가져오거나 추가할 때 사용한다. prop(property)는 attr(attribute)와는 유사하나 Javascript 입장에서의 속성이란 것을 유의해야 한다. HTML 속성을 검색하려고 한다면 attr()을 사용해야 한다.
removeAttr()	attr() 메서드로 설정한 값이나 HTML에서 추가한 속성 값을 제거할 수 있다.
removeProp()	prop() 메서드로 설정한 값이나 javascript 속성 값을 제거할 수 있다.
val()	val() 메서드는 속성(value) 값을 가져오거나 변경한다.

[예제 코드]

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
	 attr() 테스트 <input type="text" id="attr" value="some text">
	 <p></p>
	 prop() 테스트 <input type="text" id="prop">
     
	<script>
	// attr()
	 	$(document).ready(function(){
	 		let value = $("#attr").attr("value");
			$("p").text("attr() : " + value);
	 	});	
		// >>> p태그 안에 attr() : some text 출력됨
	 	
	 // removeAttr()
	 	$(document).ready(function(){
	 		$("#attr").removeAttr("value");
	 	});	
		// >>> p태그 안 text 제거됨
	 	
	 // prop()
	 	$(document).ready(function(){
	 		$("#prop").prop("value", "some text");
	 	});	
		// >>> id="prop"인 input칸 안에 some text라는 value가 할당된다.
	 	
	 // removeProp()
	 	$("#prop").click(function(){
	 		$("#prop").removeProp("value");
	 	});	
		// >>> 클릭 시 id="prop"인 input칸 안의 value가 제거된다.
		// 기존에 이미 존재하고 있는 속성은 제거하지 못한다.
	 	
	// val()
	 	$("#attr").keyup(function(){
	 		let value = $(this).val();
			$("p").text(value);
	 	});
        	// >>> 키보드 이벤트가 발생하면, 해당 value를 val()이 가져와 p태그 자리에 출력한다.
	 </script>
</body>
</html>

4. 이벤트 관련 메소드

.focus()	자바스크립트의 "focus" 이벤트와 이벤트 핸들러를 연결하거나, 해당 요소에 "focus" 이벤트를 발생시킴
.blur()	자바스크립트의 "blur" 이벤트와 이벤트 핸들러를 연결하거나, 해당 요소에 "blur" 이벤트를 발생시킴
.change()	자바스크립트의 "change" 이벤트와 이벤트 핸들러를 연결하거나, 해당 요소에 "change" 이벤트를 발생시킴
.select()	자바스크립트의 "select" 이벤트와 이벤트 핸들러를 연결하거나, 해당 요소에 "select" 이벤트를 발생시킴

[예제 코드]

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
	<p>
		<input type="text">
		<span></span>
	</p>

	<script>
		$("input").focus(function(){	// 커서가 놓일 때
			$(this).next("span").html("focus");
		}).blur(function(){	// 커서가 빠져나올 때
			$(this).next("span").html("blur");
		}).change(function(event){	// 변화가 생긴 뒤 커서가 밖으로 빠져나오면 인식된다.
			alert("change!! : " + $(event.target).val());	
		}).select(function(){	// 드래그 하면 인식된다.
			$(this).next('span').html("select");
		});
	</script>
</body>
</html>

[출력 결과]

5. 애니메이션

구분	종류	설명
숨김	.fadeOut()	요소가 점점 투명해지면서 사라짐
	.hide()	요소를 숨김
	.slideUp()	요소가 위로 접히며 숨겨짐
노출	.fadeIn()	숨겨진 요소가 점점 선명해짐
	.show()	숨겨진 요소가 노출됨
	.slideDown()	숨겨진 요소가 아래로 펼쳐짐

[예제 코드]

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<style>
    span{
        color: tomato;
        cursor: pointer;
    }
    div{
        margin: 3px;
        width: 80px;
        height: 80px;
        background: powderblue;
    }
</style>
</head>
<body>
    <input type="button" id="fadeout" value="fade out"> 
    <input type="button" id="fadein" value="fade in"> 
    <input type="button" id="hide" value="hide"> 
    <input type="button" id="show" value="show"> 
    <input type="button" id="slidedown" value="slide down"> 
    <input type="button" id="slideup" value="slide up"> 
    <input type="button" id="mix" value="mix"> 
    <div id="target">
		target
	</div>
    
<script>
    $('input[type="button"]').click(function(e){
    	let targetEvent = $(e.target);
    	switch (targetEvent.attr('id')){
    	case 'fadeout':
            $('#target').fadeOut('slow');
            break;
   		case 'fadein':
            $('#target').fadeIn('slow');
            break;
    	case 'hide':
            $('#target').hide('slow');
            break;
   		case 'show':
            $('#target').show('slow');
            break;
    	case 'slidedown':
            $('#target').hide().slideDown('slow');
            break;
    	case 'slideup':
            $('#target').slideUp('slow');
            break;
    	case 'mix':
            $('#target').fadeOut('slow').fadeIn('slow').delay().slideUp().slideDown('slow', function(){
            	alert("end");
        	});
        	break;
	}
    });
</script>
</body>
</html>

▶ mix case처럼 여러 개의 효과를 섞어 사용할 수도 있다.

[출력 결과]

728x90

저작자표시 비영리 변경금지 (새창열림)

'이론 > 자바 풀스택 국비수업' 카테고리의 다른 글

0706 SpringBoot 1 (0)	2022.07.18
220523 jQuery 5 (0)	2022.07.17
220519 jQuery 3 (0)	2022.07.07
220518 jQuery2 (0)	2022.07.06
220518 jQuery 1 (0)	2022.07.06

1. 요소의 삽입

1-1. 자식으로 삽입

다음 메소드를 사용하면 기존 요소의 내부에 새로운 요소나 콘텐츠를 추가할 수 있다.

.append()	선택된 요소의 마지막에 새로운 요소나 콘텐츠를 추가한다.
.prepend()	선택된 요소의 첫번째에 새로운 요소나 콘텐츠를 추가한다.
.appendTo()	선택된 요소를 해당 요소의 마지막에 추가한다.
.prependTo()	선택된 요소를 해당 요소의 첫번째에 추가한다.
.html()	해당 요소의 HTML 콘텐츠를 반환하거나 설정한다.
.text()	해당 요소의 텍스트 콘텐츠를 반환하거나 설정한다.

[예제 코드]

<p id="user_p">
	jQuery는 
</p>
<script>
	// js
    document.getElementById("user_p").innerHTML 
        = documnet.getElementById("user_p").textContent + "<strong>재미있다!</strong>"
    // jQuery
    $("p").append("<strong>재미있다!</strong>");		// jQuery는 재미있다!
    $("<strong>재미있다!</strong>").appendTo("p");	// jQuery는 재미있다!
    $("p").prepend("<strong>재미있다! </strong>");	// 재미있다! jQuery는
    $("<strong>재미있다! </strong>").prependTo("p");	// 재미있다! jQuery는
    $("p").html("<strong>재미있다!</strong>");		// 재미있다!
    $("p").text("<strong>재미있다!</strong>");		// 재미있다!
</script>

1-2. 형제로 삽입

다음 메소드를 사용하면 기존 요소의 앞이나 뒤에 새로운 요소나 콘텐츠를 추가할 수 있다.

.before()	선택한 요소의 바로 앞쪽에 새로운 요소나 콘텐츠를 추가한다.
.after()	선택한 요소의 바로 뒤쪽에 새로운 요소나 콘텐츠를 추가한다.
.insertBefore()	선택한 요소를 해당 요소의 앞쪽에 추가한다.
.insertAfter()	선택한 요소를 해당 요소의 뒤쪽에 추가한다.

[예제 코드]

<p>
    jQuery는 : 
 </p>
 <script>
    $("p").before("<strong>재미있다.</strong>");		// 재미있다. jQuery는
    $("p").after("<strong>재미있다.</strong>");		// jQuery는 재미있다.
    $("<strong>재미있다.</strong>").insertBefore("p");	// 재미있다. jQuery는
    $("<strong>재미있다.</strong>").insertAfter("p");	// jQuery는 재미있다.
 </script>

1-3. 부모로 감싸기

다음 메소드를 사용하면 기존 요소를 포함하는 새로운 요소나 콘텐츠를 추가할 수 있다.

.wrap()	선택한 요소를 감싸는 새로운 요소를 추가한다.
.wrapAll()	선택한 모든 요소를 모두 한 번에 감싸는 새로운 요소를 추가한다.
.wrapInner()	선택한 요소 '안'을 감싸는 새로운 요소를 추가한다.

[예제 코드]

 <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<style>
	div{
		border: 2px blue solid;
		margin: 2px;
		padding 2px;
	}
	p{
		background-color: tomato;
		margin: 2px;
		padding: 2px;
	}
	strong{
		color: red;
	}
</style>
</head>
<body>
	 <span>Span Text</span>
	 <strong>Strong Text</strong>
	 <span>Another Span Text</span>
     
	 <script type="text/javascript">
            $('span').wrap('<div><div><p><em><b>S</b></em></p></div></div>')
            $('span').wrapAll('<div><div><p><em><b>S</b></em></p></div></div>')
            $('span').wrapInner('<div><div><p><em><b>S</b></em></p></div></div>')
	 </script>
</body>
</html>

▶ <em> 태그 : 텍스트 요소에 강세를 줄 때 사용

▶ <b> 태그 : 굵은 글씨

[출력 결과 - wrap]

[출력 결과 - wrapAll]

[출력 결과 - wrapInner]

2. 요소의 삭제

다음 메소드를 사용하면 선택한 요소나 콘텐츠를 삭제할 수 있다.

.remove()	선택한 요소를 DOM 트리에서 삭제한다. 삭제된 요소와 연관된 jQuery 데이터나 이벤트도 같이 삭제된다.
.detach()	선택된 요소를 DOM 트리에서 삭제한다. 삭제된 요소와 연관된 jQuery 데이터나 이벤트는 유지된다. .detach() 메소드가 반환하는 jQuery 객체를 .append()나 .prepend()와 같은 메소드에 인수로 전달하면 삭제한 요소를 다시 복구할 수도 있다.
.empty()	선택한 요소의 자식 요소를 모두 삭제한다. 이때 .remove()나 .detach() 메소드와는 달리 선택된 요소 그 자체는 삭제되지 않는다.
.unwrap()	선택한 요소의 부모 요소를 삭제한다.

[예제 코드 1 - .remove()]

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<style type="text/css">
	p{
		background-color : powderblue;
		margein : 6px 0;
	}
</style>
</head>
<body>
	 <p>Hello</p>
	 how are you?
	 <button>실행</button>
	 <script type="text/javascript">
	 	$("button").click(function(){
	 		$("p").remove()
	 	});
	 </script>
</body>
</html>

[출력 결과]

[예제 코드 2 - detach()]

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<style type="text/css">
	p{
		background-color : powderblue;
		margein : 6px 0;
	}
</style>
</head>
<body>
	 <p>Hello</p>
	 <div>how are you?</div>
	 <button id="execution">실행</button>
	 <button id="redo">재실행</button>
	 
	 <script type="text/javascript">
	 	let data = null;
	 	$("#execution").on("click", function(){
	 		data = $("p").detach()
		 	console.log("삭제");
	 	});
	 	
	 	$("#redo").on("click", function(){
	 		$("div").prepend(data);
		 	console.log("재실행");
	 	});
	 </script>
</body>
</html>

[출력 결과]

[예제 코드 3 - .empty(), .unlabWrap()]

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<style type="text/css">
	div{
		background-color : powderblue;
		margein : 6px 0;
	}
</style>
</head>
<body>
	<div id="container">
		<p>Hello</p>
		<p>How are you</p>
	</div>
	<button>실행</button>
	
	<script type="text/javascript">
		$("button").on("click", function(){
 			$("#container").empty();
 		 	console.log("삭제");
 	 	});
		$("button").on("click", function(){
			$("p").unwrap();
		 	console.log("삭제");
	 	});
	</script>
</body>
</html>

[출력 결과]

728x90

저작자표시 비영리 변경금지 (새창열림)

'이론 > 자바 풀스택 국비수업' 카테고리의 다른 글

220523 jQuery 5 (0)	2022.07.17
220519 jQuery 4 (0)	2022.07.13
220518 jQuery2 (0)	2022.07.06
220518 jQuery 1 (0)	2022.07.06
220517 Javascript 11 (0)	2022.06.23

1. jQuery Event

특정 요소에서 발생하는 이벤트를 처리하기 위해서는 이벤트 핸들러(Event Handler) 함수를 작성해야만 한다.

이렇게 작성된 이벤트 핸들러를 특정 요소에 연결하는 것을 이벤트 바인딩(Event Binding)이라고 한다.

jQuery는 이 이벤트 바인딩을 위한 다양한 방법을 제공한다.

1-1. .on() 메소드

선택한 요소에 어떤 타입의 이벤트라도 연결할 수 있다.
하나의 이벤트 핸들러에 여러 개의 이벤트를 동시에 연결할 수 있다.
선택한 요소에 여러 개의 이벤트 핸들러와 여러 개의 이벤트를 같이 연결할 수 있다.
사용자 지정 이벤트(Custom Event)를 위해 이벤트 핸들러로 데이터를 넘길 수 있다.
차후에 다루게 될 요소를 이벤트에 바인딩 할 수 있다.

[예제 코드]

<!-- 기본형 -->
<h1>click event</h1>
<p>여기를 클릭해 주세요</p>
<script>
$('p').on("click", function(){
    alert("문장이 클릭되었습니다.");
});
</script>

<!-- 이벤트 핸들러 하나에 이벤트를 여러개 설정 -->
<h1>마우스 이벤트</h1>
<p>이 문장 위로 마우스를 움직여 보세요</p>
<div></div>
<script>
    $('p').on('mouseenter mouseleave', function(){
        $('div').append('마우스 커서가 문장 위로 들어오거나 빠져나갔습니다.<br>');
    });
</script>

<!-- 하나의 요소에 여러 개의 이벤트 핸들러를 사용하여 여러 개의 이벤트를 같이 바인딩 -->
<h1>마우스 이벤트</h1>
<p>이 문장 위로 마우스를 움직여 보세요</p>
<div></div>
<script>
    $('p').on({
        click:function(){
            $('div').append('마우스가 문장을 클릭했습니다.<br>');
        },
        mouseenter:function(){
            $('div').append("마우스가 문장 위로 돌아왔습니다.<br>");
        },
        mouseleave:function(){
            $('div').append("마우스가 문장을 빠져 나갔습니다.<br>");
        }
    });
</script>

[출력 결과]

1-2. .off() 메소드

.off() 메소드는 더 이상 사용하지 않는 이벤트와의 바인딩을 제거한다.

[예제 코드]

<h1>off()이벤트</h1>
<button id="btn">버튼 클릭 가능</button>
<button id="btnBind">버튼 클릭을 가능하게 한다.</button>
<button id="btnUnbind">버튼 클릭을 불가능하게 한다.</button>
<div></div>
<script>
   function action(){
       $('div').append("버튼 이벤트 발생!!<br>");
   }

   $("#btn").on("click",function(){
       action();
   });

   $("#btnUnbind").on("click", function(){
// 	 		$("#btn").off("click");
// 	 		$("#btn").text("버튼 클릭 불가능");

       //chain기법
       $("#btn").off("click").text("버튼 클릭 불가능");
   });

   $('#btnBind').on("click", function(){
       $("#btn").on("click",function(){
           action();
       }).text("버튼 클릭 가능");
   });
</script>

▶ Chain 기법(체인 기법 또는 체이닝 기법) : 선택한 대상에 대해서 연속적으로 제어하는 것

▶ 코드가 간결해진다는 장점이 있지만, 너무 복잡한 chain은 코드의 가독성을 떨어뜨릴 수 있다.

[출력 결과]

1-3. .one() 메소드

.one() 메소드는 바인딩된 이벤트 핸들러가 한 번만 실행되고 나서 더는 실행되지 않는다.

.on() 메소드와 같은 인수를 전달받는다. 따라서 여러 개의 이벤트 핸들러와 여러 개의 이벤트를 가질 수 있는 등, .on() 메소드와 같은 특징을 갖는다.

[예제 코드]

<h1>one()</h1>
<p>아래 버튼은 한 번만 실행됩니다.</p>
<button>버튼을 클릭해 주세요</button>
<div></div>
<script type="text/javascript">
$("button").one("click", function(){
    $("div").append("이제 클릭이 되지 않습니다.<br>");
})
</script>

[출력 결과]

1-4. .click(), .dbclick()

[예제 코드]

<h1>jQuery click(), dblclick()</h1>
<button>버튼</button>을 클릭 or 더블클릭 하세요
<p id="text"></p>
<script>
    $("button").click(function(){
        $("#text").text("클릭이 되었습니다.");
    });
    $("button").dblclick(function(){
        $("#text").text("더블 클릭이 되었습니다.");
    });
</script>

[출력 결과]

1-5. keypress(), keydown()

Shift, Esc, Delete 키와 같이 화면에 출력되지 않는 키들은, "keydown" 이벤트는 발생시키지만, "keypress" 이벤트는 발생시키지 않는다.

[예제 코드]

<input type="text"> 입력 란에 키보드로 내용을 입력하세요.
<h1>jQuery .keypress()</h1>
<p id="text"></p>
<h1>jQuery .keydown()</h1>
<p id="text2"></p>
<script>
    let i = 0;
    $("input").keypress(function(){
        $("#text").text((++i) + "번 키보드가 눌렸습니다.");
    });
    let j = 0;
    $("input").keydown(function(){
        $("#text2").text((++j) + "번 키보드가 눌렸습니다.");
    });
</script>

[출력 결과]

1-6. effect 효과

.show() : 선택한 요소를 나타나게 한다.
.hide() : 선택한 요소를 사라지게 한다.

[예제 코드]

<h1>hide(), show() 메소드</h1>
<p>
<button id="btnHide">문장 숨기기</button>
<button id="btnShow">문장 표시하기</button>
</p>
<div>안녕하세요, jQuery입니다.</div>
<script>
    $("#btnHide").on("click", function(){
        $("div").hide(1000);
    });
    $("#btnShow").on("click", function(){
        $("div").show();
    });
</script>

▶ .hide() 메소드의 괄호 안에는 slow, fast, 숫자를 넣을 수 있다. 숫자의 단위는 1000분의 1초

[출력 결과]

728x90

저작자표시 비영리 변경금지 (새창열림)

'이론 > 자바 풀스택 국비수업' 카테고리의 다른 글

220519 jQuery 4 (0)	2022.07.13
220519 jQuery 3 (0)	2022.07.07
220518 jQuery 1 (0)	2022.07.06
220517 Javascript 11 (0)	2022.06.23
220513~16 Javascript 10 (0)	2022.06.23

달거북씨의 코딩생활

이론

0706 SpringBoot 1

1. 이론

1-1. Framework

1-2. 라이브러리

1-3. 프레임워크 vs 라이브러리

1-4. Spring이란?

1-5. Spring Boot

2. 환경설정

2-1. 프로젝트 생성

2-2. STS에 프로젝트 불러오기

2-3. application.properties

2-4. build.gradle

3. Welcome Page

4. DispatcherServlet

4-1. HTTP 요청 및 응답 흐름

5. 예제 코드

'이론 > 자바 풀스택 국비수업' 카테고리의 다른 글

220523 jQuery 5

1. each()

1-1. 객체 요소 출력하기

1-2. 배열 요소 출력하기

1-3. 선택자의 객체 가져오기

1-4. 문제 풀어보기

2. extend()

2-1. value가 중복될 경우

'이론 > 자바 풀스택 국비수업' 카테고리의 다른 글

220519 jQuery 4

1. 요소 대체하기

1-1. replaceAll()

1-2. replaceWith()

2. 클래스 속성 변경

3. 속성제어

4. 이벤트 관련 메소드

5. 애니메이션

'이론 > 자바 풀스택 국비수업' 카테고리의 다른 글

220519 jQuery 3

1. 요소의 삽입

1-1. 자식으로 삽입

1-2. 형제로 삽입

1-3. 부모로 감싸기

2. 요소의 삭제

'이론 > 자바 풀스택 국비수업' 카테고리의 다른 글

220518 jQuery2

1. jQuery Event

1-1. .on() 메소드

1-2. .off() 메소드

1-3. .one() 메소드

1-4. .click(), .dbclick()

1-5. keypress(), keydown()

1-6. effect 효과

'이론 > 자바 풀스택 국비수업' 카테고리의 다른 글

+ Recent posts

티스토리툴바