디케이

[JavaScript] Ajax 기본 설명 동작

디케이형 — Wed, 10 Mar 2021 10:42:16 +0900

AJAX (Asynchronous Javascript And XML)

AJAX란, JavaScript의 라이브러리중 하나이며 Asynchronous Javascript And Xml(비동기식 자바스크립트와 xml)의 약자이다. 브라우저가 가지고있는 XMLHttpRequest 객체를 이용해서 전체 페이지를 새로 고치지 않고도 페이지의 일부만을 위한 데이터를 로드하는 기법 이며 JavaScript를 사용한 비동기 통신, 클라이언트와 서버간에 XML 데이터를 주고받는 기술이다.

즉, 쉽게 말하자면 자바스크립트를 통해서 서버에 데이터를 요청하는 것이다.

비동기 방식이란?

비동기 방식은 웹페이지를 리로드하지 않고 데이터를 불러오는 방식이며 Ajax를 통해서 서버에 요청을 한 후 멈추어 있는 것이 아니라 그 프로그램은 계속 돌아간다는 의미를 내포하고 있다.

비동기 방식의 장점

페이지 리로드의 경우 전체 리소스를 다시 불러와야하는데 이미지, 스크립트 , 기타 코드등을 모두 재요청할 경우 불필요한 리소스 낭비가 발생하게 되지만 비동기식 방식을 이용할 경우 필요한 부분만 불러와 사용할 수 있으므로 매우 큰 장점이 있다.

AJAX를 사용 가능하게 만드는 것들

AJAX라는 기술은 여러가지 기술이 혼합적으로 사용되어 이루어진다. 대표적인 예로는 아래와 같은 것들이 있다.

HTML
DOM
JavaScript
XMLHttpRequest
Etc

AJAX로 할 수 있는 것

AJAX라는 네트워크 기술을 이용하여 클라이언트에서 서버로 데이터를 요청하고 그에 대한 결과를 돌려받을 수 있다.

클라이언트란?

서버에서 정보를 가져와서 사용자에게 보여줄 수 있고 사용자와 상호작용할 수 있는 소프트웨어를 일컫는다.
Ex) 웹브라우저, 핸드폰 어플리케이션 등...

서버란?

네트워크 상에서 접근할 수 있는 프로그램으로서 어떤 자료들에 대한 관리나 접근을 제어해주는 프로그램을 말한다. 서버는 일반적으로 사용자가 직접적으로 사용하지 않는다.

AJAX를 사용하는 이유

단순하게 WEB화면에서 무언가 부르거나 데이터를 조회하고 싶을 경우, 페이지 전체를 새로고침하지 않기 위해 사용한다고 볼 수 있다.

기본적으로 HTTP 프로토콜은 클라이언트쪽에서 Request를 보내고 서버쪽에서 Response를 받으면 이어졌던 연결이 끊기게 되어있다. 그래서 화면의 내용을 갱신하기 위해서는 다시 request를 하고 response를 하며 페이지 전체를 갱신하게 된다. 하지만 이렇게 할 경우, 엄청난 자원낭비와 시간낭비를 초래하고 말 것이다.

AJAX는 HTML 페이지 전체가 아닌 일부분만 갱신할 수 있도록 XMLHttpRequest객체를 통해 서버에 request한다. 이 경우, JSON이나 XML형태로 필요한 데이터만 받아 갱신하기 때문에 그만큼의 자원과 시간을 아낄 수 있다.

AJAX의 장단점

1. AJAX의 장점

웹페이지의 속도향상
서버의 처리가 완료될 때까지 기다리지 않고 처리가 가능하다.
서버에서 Data만 전송하면 되므로 전체적인 코딩의 양이 줄어든다.
기존 웹에서는 불가능했던 다양한 UI를 가능하게 해준다. ( Flickr의 경우, 사진의 제목이나 태그를 페이지의 리로드 없이 수정할 수 있다.)

2. AJAX의 단점

히스토리 관리가 되지 않는다.
페이지 이동없는 통신으로 인한 보안상의 문제가 있다.
연속으로 데이터를 요청하면 서버 부하가 증가할 수 있다.
XMLHttpRequest를 통해 통신하는 경우, 사용자에게 아무런 진행 정보가 주어지지 않는다. (요청이 완료되지 않았는데 사용자가 페이지를 떠나거나 오작동할 우려가 발생하게 된다.)
AJAX를 쓸 수 없는 브라우저에 대한 문제 이슈가 있다.
HTTP 클라이언트의 기능이 한정되어 있다.
지원하는 Charset이 한정되어 있다.
Script로 작성되므로 디버깅이 용이하지 않다.
동일-출처 정책으로 인하여 다른 도메인과는 통신이 불가능하다. (Cross-Domain문제)

AJAX의 진행과정

XMLHttpRequest Object를 만든다.
- request를 보낼 준비를 브라우저에게 시키는 과정
- 이것을 위해서 필요한 method를 갖춘 object가 필요함
callback 함수를 만든다.
- 서버에서 response가 왔을 때 실행시키는 함수
- HTML 페이지를 업데이트 함
Open a request
- 서버에서 response가 왔을 때 실행시키는 함수
- HTML 페이지를 업데이트 함
send the request

AJAX가 쓰이는 방법

XMLHttpRequest 객체를 얻은 뒤, url을 통해 요청하고 응답을 받으면 응답 결과에 맞는 함수를 실행하는 구조로 되어 있다. Ajax가 효율적이라고는 해도 이렇게 하게 될 경우, 코드가 길어지기 때문에 jQuery에서 그 문제를 해결해주고 있다.

예시로 보는 AJAX - 1

// This function gets invoked when server sends the response
function reqListener (e) {
    console.log(e.currentTarget.response);
}

var oReq = new XMLHttpRequest();
var serverAddress = "https://hacker-news.firebaseio.com/v0/topstories.json";

oReq.addEventListener("load", reqListener);
oReq.open("GET", serverAddress);
oReq.send();

위의 예제는 자바스크립트를 이용하여 특정 서버에 요청을 보내고 그에 대한 자료를 성공적으로 받아올 수 있음을 확인해볼 수 있다. 위 예제에서는 XMLHttpRequest를 이용하여 요청을 보냈지만 일반적으로는 아래와 같이 jQuery나 기타 AJAX 기능이 내장되어 있는 라이브러리를 이용하여 AJAX 요청을 처리한다.

var serverAddress = 'https://hacker-news.firebaseio.com/v0/topstories.json';

// jQuery의 .get 메소드 사용
$.ajax({
    url: ,
    type: 'GET',
    success: function onData (data) {
        console.log(data);
    },
    error: function onError (error) {
        console.error(error);
    }
});

예시로 보는 AJAX - 2

var xhr= new XMLHttpRequest();

xhr. onreadystatechange = function(){
	if(xhr.readyState===4){
    	document.getElementById(‘ajax’).innerHTML= xhr.responseText;
    }
}

xhr.open(‘GET’,”sidebar.html”);  // html메소드와 URL을 보낸다. (open함수는 준비를 시키는것이지 보내는 것은 아니다.)
xhr.send();

위의 예제는 AJAX가 XHR객체를 형성하고 이 객체의 콜백을 만들고 HTML메소드와 URL을 결정한 뒤, XHR객체의 메소드로 정보를 보내는 방식이다.

var xhr= new XMLHttpRequest(); : browser response를 얻었을 때 작동하는 함수 (callback 함수)
xhr.onreadystatecjange : AJAX Request에 어떠한 변화라도 있으면 작동한다. (callback 함수를 포함하고 있다고 생각하면 된다.)
xhr.readyState : response가 돌아왔는지 아닌지를 추적하는 property

참고사이트

이클립스 JSP, html 이용시 초기 셋팅

디케이형 — Sun, 28 Feb 2021 15:15:01 +0900

이클립스 JSP, html 이용시 초기 셋팅

window >> preference 실행
html 검색
HTML Files >> Editor 선택
Inline Elements 에서 아래 항목 삭제
- a, b, br, i, img, input, label, li, s, select, span, strong, td, th, title

[html] onclick시 location.href와 location.replace 차이

디케이형 — Sun, 28 Feb 2021 14:30:33 +0900

K.html, a.html, b.html
3개에 페이지가 있다고 가정할때
페이지 이동 방법은 크게 3가지가 있습니다.

//1번째 방법
<button onclick="location.href" = 'b.html';">B로 이동</button>
//2번째 방법
<button onclick="location.replace('b.html');">B로 이동</button>
//3번째 방법
<a href="b.html">B로 이동</a>

위 3가지 방법에 차이는 backspace(뒤로가기)를 눌렀을때 발생합니다.
k >> a >> b로 이동하는 코드를 구성했다고 했을때
1, 3번 방법은 뒤로가기를 눌렀을때 a로 가는 반면
2번 방법은 k 로 돌아 갑니다.

이를 활용해 결재 나 글쓰기 같은 쿼리를 전달해야 할때는 2번 replace를 쓰며
쿼리가 중복 발송이 되는 에러를 미연에 방지 할 수 있는 이점이 있습니다.

[html] form 작성 시 get과 post 차이점

디케이형 — Sun, 28 Feb 2021 11:22:01 +0900

GET

<form action="http://locallhost:8021/usr/home/main" method="GET">
  <input type="hidden" name="age" value="11">
  <input type="submit" value="전송">
</form>

위와 같은 폼에서 전송으로 get처리 하면 아래와 같은 url생성
http://localhost:8021/usr/home/main?age=11

기본적인 HTTP Request(요청서)
--- Header ---
주소: http://localhost:8021/usr/home/main
쿼리 파라미터: age=11
--- Body ---

POST

<form action="http://locallhost:8021/usr/home/main" method="POST">
  <input type="hidden" name="age" value="11">
  <input type="submit" value="전송">
</form>

위와 같은 폼에서 전송으로 post처리 하면 아래와 같은 url생성
http://localhost:8021/usr/home/main?age=11

기본적인 HTTP Request(요청서)
--- Header ---
주소: http://localhost:8021/usr/home/main
쿼리 파라미터:
--- Body ---
age=11

정리

get은 부가정보 쿼리파라미터가 Header에 생성 post는 Body에 생성

[java] 인터셉터 구조

디케이형 — Sat, 27 Feb 2021 22:04:46 +0900

현재 스프링부트를 사용해 서비스를 구현 중 개발 기록을 정리 하기위해

인터셉터에 대해 정리 해보려고 합니다.

1. beforeActionInterceptor
  - 정보강화
  - 없는 정보를 만들지는 않지만 세션 정보를 꺼내서 기존에 있는 정보를 정리 해둔다
  - 가장 먼저 동작

@Component("beforeActionInterceptor") // 컴포넌트 이름 설정
public class BeforeActionInterceptor implements HandlerInterceptor {
    @Autowired
    private MemberService memberService;

    @Override
    public boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler) throws Exception {

	HttpSession session = request.getSession();

	// 로그인 여부에 관련된 정보를 request에 담는다.
	boolean isLogined = false;
	boolean isAdmin = false;
	int loginedMemberId = 0;
	Member loginedMember = null;

	if (session.getAttribute("loginedMemberId") != null) {
	    loginedMemberId = (int) session.getAttribute("loginedMemberId");
	    isLogined = true;
	    loginedMember = memberService.getMember(loginedMemberId);
	    isAdmin = memberService.isAdmin(loginedMemberId);
	}

	request.setAttribute("loginedMemberId", loginedMemberId);
	request.setAttribute("isLogined", isLogined);
	request.setAttribute("isAdmin", isAdmin);
	request.setAttribute("loginedMember", loginedMember);

	return HandlerInterceptor.super.preHandle(request, response, handler);
    }
}

2. needAdminInterceptor
  - 관리자 관련 항목으로 일반사용자 접속을 걸러준다
  - ajax 문법을 사용했다면 json으로 응답
  - ajax가 아니라면 javascript로 응답
  - 로그인까지는 예외 적용

@Component("needAdminInterceptor") // 컴포넌트 이름 설정
public class NeedAdminInterceptor implements HandlerInterceptor {
	@Override
	public boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler)
			throws Exception {

		// 이 인터셉터 실행 전에 beforeActionInterceptor 가 실행되고 거기서 isLogined 라는 속성 생성
		// 그래서 여기서 단순히 request.getAttribute("isLogined"); 이것만으로 로그인 여부 알 수 있음
		boolean isAdmin = (boolean) request.getAttribute("isAdmin");

		// 이 인터셉터 실행 전에 beforeActionInterceptor 가 실행되고 거기서 isAjax 라는 속성 생성
		// 그래서 여기서 단순히 request.getAttribute("isAjax"); 이것만으로 해당 요청이 ajax인지 구분 가능
		boolean isAjax = true;

		if (isAdmin == false) {
			if (isAjax == false) {
				response.setContentType("text/html; charset=UTF-8");
				response.getWriter().append("<script>");
				response.getWriter().append("alert('관리자만 이용해주세요.');");
				response.getWriter().append("location.replace('/usr/member/login?redirectUri="
						+ request.getAttribute("encodedAfterLoginUri") + "');");
				response.getWriter().append("</script>");
				// 리턴 false;를 이후에 실행될 인터셉터와 액션이 실행되지 않음
			} else {
				response.setContentType("application/json; charset=UTF-8");
				response.getWriter().append("{\"resultCode\":\"F-A\",\"msg\":\"관리자만 이용해주세요.\"}");
			}

			return false;
		}

		return HandlerInterceptor.super.preHandle(request, response, handler);
	}
}

3. needLoginInterceptor
- 일반 사용자에 대한 모든 접속 정보를 한번 걸러준다

@Component("needLoginInterceptor") // 컴포넌트 이름 설정
public class NeedLoginInterceptor implements HandlerInterceptor {
	@Override
	public boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler)
			throws Exception {

		// 이 인터셉터 실행 전에 beforeActionInterceptor 가 실행되고 거기서 isLogined 라는 속성 생성
		// 그래서 여기서 단순히 request.getAttribute("isLogined"); 이것만으로 로그인 여부 알 수 있음
		boolean isLogined = (boolean) request.getAttribute("isLogined");

		// 이 인터셉터 실행 전에 beforeActionInterceptor 가 실행되고 거기서 isAjax 라는 속성 생성
		// 그래서 여기서 단순히 request.getAttribute("isAjax"); 이것만으로 해당 요청이 ajax인지 구분 가능
		boolean isAjax = true;

		if (isLogined == false) {
			if (isAjax == false) {
				response.setContentType("text/html; charset=UTF-8");
				response.getWriter().append("<script>");
				response.getWriter().append("alert('로그인 후 이용해주세요.');");
				response.getWriter().append("location.replace('/usr/member/login?redirectUri="
						+ request.getAttribute("encodedAfterLoginUri") + "');");
				response.getWriter().append("</script>");
				// 리턴 false;를 이후에 실행될 인터셉터와 액션이 실행되지 않음
			} else {
				response.setContentType("application/json; charset=UTF-8");
				response.getWriter().append("{\"resultCode\":\"F-A\",\"msg\":\"로그인 후 이용해주세요.\"}");
			}

			return false;
		}

		return HandlerInterceptor.super.preHandle(request, response, handler);
	}
}

4. needLogoutInterceptor
- 일반 사용자에 대한 모든 접속 정보를 한번 걸러준다

@Component("needLogoutInterceptor") // 컴포넌트 이름 설정
public class NeedLogoutInterceptor implements HandlerInterceptor {
	@Override
	public boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler)
			throws Exception {
		// 이 인터셉터 실행 전에 beforeActionInterceptor 가 실행되고 거기서 isLogined 라는 속성 생성
		// 그래서 여기서 단순히 request.getAttribute("isLogined"); 이것만으로 로그인 여부 알 수 있음
		boolean isLogined = (boolean) request.getAttribute("isLogined");

		boolean isAjax = true;

		if (isLogined) {
			if (isAjax == false) {
				response.setContentType("text/html; charset=UTF-8");
				response.getWriter().append("<script>");
				response.getWriter().append("location.replace('/usr/home/main');");
				response.getWriter().append("</script>");
			} else {
				response.setContentType("application/json; charset=UTF-8");
				response.getWriter().append("{\"resultCode\":\"F-A\",\"msg\":\"로그아웃 상태에서 이용해주세요.\"}");
			}
			// 리턴 false;를 이후에 실행될 인터셉터와 액션이 실행되지 않음
			return false;
		}

		return HandlerInterceptor.super.preHandle(request, response, handler);
	}
}

@Configuration
public class WebMvcConfig implements WebMvcConfigurer {
    // beforeActionInterceptor 인터셉터 불러오기
    @Autowired
    @Qualifier("beforeActionInterceptor")
    HandlerInterceptor beforeActionInterceptor;

    // needAdmLoginInterceptor 인터셉터 불러오기
    @Autowired
    @Qualifier("needAdminInterceptor")
    HandlerInterceptor needAdminInterceptor;
    
    // needLoginInterceptor 인터셉터 불러오기
    @Autowired
    @Qualifier("needLoginInterceptor")
    HandlerInterceptor needLoginInterceptor;

    // needLogoutInterceptor 인터셉터 불러오기
    @Autowired
    @Qualifier("needLogoutInterceptor")
    HandlerInterceptor needLogoutInterceptor;

    // 이 함수는 인터셉터를 적용하는 역할을 합니다.
    @Override
    public void addInterceptors(InterceptorRegistry registry) {
	// beforeActionInterceptor 인터셉터가 모든 액션 실행전에 실행되도록 처리
	registry.addInterceptor(beforeActionInterceptor)
		.addPathPatterns("/**")
		.excludePathPatterns("/resource/**");

	// 어드민 필요
	registry.addInterceptor(needAdminInterceptor)
		.addPathPatterns("/adm/**")
		.excludePathPatterns("/adm/member/login")
		.excludePathPatterns("/adm/member/doLogin");
	
	// 로그인 필요
	registry.addInterceptor(needLoginInterceptor)
        	.addPathPatterns("/**")
        	.excludePathPatterns("/")
        	.excludePathPatterns("/adm/**")
        	.excludePathPatterns("/resource/**")
        	.excludePathPatterns("/usr/home/main")
        	.excludePathPatterns("/usr/member/login")
        	.excludePathPatterns("/usr/member/doLogin")
        	.excludePathPatterns("/usr/member/join")
        	.excludePathPatterns("/usr/member/doJoin")
        	.excludePathPatterns("/usr/article/list")
        	.excludePathPatterns("/usr/article/detail")
        	.excludePathPatterns("/usr/reply/list")
        	.excludePathPatterns("/usr/member/findLoginId")
        	.excludePathPatterns("/usr/member/doFindLoginId")
        	.excludePathPatterns("/usr/member/findLoginPw")
        	.excludePathPatterns("/usr/member/doFindLoginPw")
        	.excludePathPatterns("/usr/file/test*")
        	.excludePathPatterns("/usr/file/doTest*")
        	.excludePathPatterns("/test/**")
        	.excludePathPatterns("/error");

	// 로그인 상태에서 접속할 수 없는 URI 전부 기술
	registry.addInterceptor(needLogoutInterceptor)
		.addPathPatterns("/adm/member/login")
    	    	.addPathPatterns("/adm/member/doLogin")
    		.addPathPatterns("/usr/member/login")
    		.addPathPatterns("/usr/member/doLogin")
    		.addPathPatterns("/usr/member/join")
    		.addPathPatterns("/usr/member/doJoin");
    }
}

아직 개발 초기 단계라 비교적 소스코드가 간결할때 기록 하기에 이해하기 어렵지 않을거라 생각합니다.

혹시라도 잘못된 문법이나 궁금한게 있다면 댓글로 남겨주세요 ~~

[Java] 추상클래스와 인터페이스 차이

디케이형 — Sat, 27 Feb 2021 11:54:56 +0900

추상클래스 인터페이스 왜... 사용할까?

우리는 추상클래스와 인터페이스에 대해서 알고 있냐고 누가 물어본다면 알고 있다고 대답을 하고있습니다. 그런데 이론적인 내용 말고 정작 "왜 사용하나요?", "차이점이 뭔가요?", "추상클래스를 사용할지 인터페이스를 사용할지 어떻게 정하나요?" 이런 실무적인 질문이 들어오면 시원하게 대답하기가 생각보다 힘들겁니다. 힘드셨기 때문에 지금 이 글을 읽고 계실거라고 생각합니다. 저도 마찬가지였고 단순히 추상클래스와 인터페이스가 무엇인지 보다 왜 사용하는지가 궁금하셨다면 아래 제 생각들을 천천히 읽어주시면 도움이 될 수 있을것이라 생각합니다.

일단 기본적으로 추상클래스와 인터페이스가 무엇인지 알아봅시다.

추상클래스란?

추상클래스는 일반 클래스와 별 다를 것이 없습니다. 단지, 추상 메서드를 선언하여 상속을 통해서 자손 클래스에서 완성하도록 유도하는 클래스입니다. 그래서 미완성 설계도라고도 표현합니다. 상속을 위한 클래스이기 때문에 따로 객체를 생성할 수 없습니다.

class 앞에 "abstract" 예약어를 사용하여 상속을 통해서 구현해야한다는 것을 알려주고 선언부만 작성하는 추상메서드를 선언할 수 있습니다.

1
2
3
4

abstract class 클래스이름 {
    ...
    public abstract void 메서드이름();
}

인터페이스란?

추상클래스가 미완성 설계도라면 인터페이스는 기본 설계도라고 할 수 있습니다. 인터페이스도 추상클래스처럼 다른 클래스를 작성하는데 도움을 주는 목적으로 작성하고 클래스와 다르게 다중상속(구현)이 가능합니다.

1
2
3
4

interface 인터페이스이름 {
    public static final 상수이름 = 값;
    public abstract void 메서드이름();
}

추상클래스 VS 인터페이스 차이점

추상클래스와 인터페이스의 공통점은 추상메서드를 사용할 수 있다는 것입니다. 그럼 왜 굳이 2가지로 나눠서 사용할까요? 추상클래스와 인터페이스의 기능들을 살펴보면 추상클래스가 인터페이스의 역할을 다 할 수 있는데 왜 굳이 인터페이스라는게 있는 걸까요?

이론적인 차이점을 다 제외하고 두개로 나눠서 사용하는 가장 큰 차이점은 사용용도라고 생각합니다.

1. 사용의도 차이점

추상클래스는 IS - A "~이다".

인터페이스는 HAS - A "~을 할 수 있는".

이렇게 구분하는 이유는 다중상속의 가능 여부에 따라 용도를 정한 것 같습니다. 자바의 특성상 한개의 클래스만 상속이 가능하여 해당 클래스의 구분을 추상클래스 상속을 통해 해결하고, 할 수 있는 기능들을 인터페이스로 구현합니다.

이렇게 글로 표현하여 이해가 어려울 수 있습니다. 아래 예제를 통해 더 자세하게 설명하겠습니다.

2. 공통된 기능 사용 여부

만약 모든 클래스가 인터페이스를 사용해서 기본 틀을 구성한다면... 공통으로 필요한 기능들도 모든 클래스에서 오버라이딩 하여 재정의 해야하는 번거로움이 있습니다. 이렇게 공통된 기능이 필요하다면 추상클래스를 이용해서 일반 메서드를 작성하여 자식 클래스에서 사용할 수 있도록 하면 된다. 어!? 그러면 그냥 추상클래스만 사용하면 되는 거 아닌가요? 위에서 얘기 했듯이 자바는 하나의 클래스만 상속이 가능합니다. 만약 각각 다른 추상클래스를 상속하는데 공통된 기능이 필요하다면? 해당 기능을 인터페이스로 작성해서 구현하는게 편하겠죠?

아무래도 글로만 설명하는데는 한계가 있는 것 같습니다. 아래 예제를 통해 어떻게 언제 무엇을 사용해야할지 알아 보도록 합시다.

추상클래스 인터페이스 예제 (생명체)

위와 같은 관계를 갖는 예제를 만들어 보겠습니다. 인간과 동물은 생명체를 상속하고 각 생명체들은 구분에 따라 인간과 동물을 상속합니다. 그리고 각각 할 수 있는 기능들을 인터페이스로 구현했습니다.

Creature 추상클래스

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
31
32
33
34
35
36
37
38
39
40

public abstract class Creature {
    private int x;
    private int y;
    private int age;
    
    public Creature(int x, int y, int age) {
        this.age = age;
        this.x = x;
        this.y = y;
    }
    
    public void age() {
        age++;
    }
    
    public void move(int xDistance) {
        x += xDistance;
    }
    
    public int getX() {
        return x;
    }
    public void setX(int x) {
        this.x = x;
    }
    public int getY() {
        return y;
    }
    public void setY(int y) {
        this.y = y;
    }
    
    public abstract void attack();
    public abstract void printInfo();
    
    @Override
    public String toString() {
        return "x : " + x + ", y : " + y + ", age : " + age;
    }
}
 

기본적으로 생명체가 갖는 요소로 위치 x, y그리고 age 나이가 필요하다고 생각하여 선언했고 생성자가 만들어 질때 이 3가지 요소는 받아서 넣을 수 있도록 했습니다. toString 메서드는 나중에 출력은 간편하게 하기 위해서 오버라이딩하여 사용했습니다.

1
2
3
4
5
6
7

public void age() {
    age++;
}
 
public void move(int xDistance) {
    x += xDistance;
}
 

생명체라면 나이를 먹고 x좌표상으로 이동 할 수 있는 부분이 공통 적인 기능이기 때문에 하위 클래스에서 상속할 수 있도록 일반 메서드로 구현했습니다.

1
2

public abstract void attack();
public abstract void printInfo();

추상메서드로는 공격하는 기능과 정보를 출력하는 기능을 선언했습니다. 모든 생명체에 필요한 기능이지만 각각 생명체에 따라 다른 기능으로 구현을 해야하기 때문에 위 두 메서드는 추상메서드로 선언하여 하위클래스에서 처리하도록 한 것입니다.

Animal 추상클래스

1
2
3
4
5
6
7
8
9
10
11

public abstract class Animal extends Creature{
    
    public Animal(int x, int y, int age) {
        super(x, y, age);
    }
    
    @Override
    public void attack() {
        System.out.println("몸을 사용하여 공격!!");
    }
}
 

동물 클래서는 생명체이기 때문에 Creature 추상클래스를 상속했습니다. 동물은 몸을 사용하여 공경하기 때문에 추상메서드 중에 attack메서드를 오버라이딩 하였습니다. 지금까지 추상클래스에 대한 이해를 다 하셨다면 코드상 이상한 부분이 집힐겁니다. 바로 printInfo 메서드도 추상메서드인데 왜 동물 클래스에는 없는 걸까요?? 이 이유는 하나 더 내린 것입니다. 생명체 클래스도 동물 클래스도 추상클래스입니다. 즉 상위 클래스에서 선언한 추상메서드를 앞으로 동물 클래스를 상속할 클래스에게 위임한 것입니다. 동물 클래스도 추상클래스이기 때문에 위처럼 사용이 가능합니다. 추상클래스는 상속을 위한 클래스이니까!!

Human 추상클래스

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

public abstract class Human extends Creature implements Talkable{
    public Human(int x, int y, int age) {
        super(x, y, age);
    }
    
    @Override
    public void attack() {
        System.out.println("도구를 사용!!");
    }
    
    @Override
    public void talk() {
        System.out.println("사람은 말을 할 수 있다.");
    }
}
 

인간 클래스도 마찬가지로 attack 추상메서드는 구현해주고, printInfo 추상메서드는 아래로 위임한 것입니다. 인간 클래스는 동물 클래스와 다르게 Talkable 인터페이스를 구현했습니다. 예상할 수 있듯이 Talkable 인터페이스에서는 talk메서드가 추상메서드로 있겠죠? 추상클래스도 인터페이스를 구현할 수 있는 것을 보면 정말 일반클래스와 크게 차이가 없다는 것을 알 수 있습니다.

Talkable 인터페이스

1
2
3

public interface Talkable {
    abstract void talk();
}

Talkable 인터페이스에서는 크게 다룰 것 없이 추상메서드를 하나만 선언 했습니다. 제가 작성하는 인터페이스들의 명명 규칙을 보시면 아시겠지만 ~able로 끝나는 인터페이스들이 많습니다. 모든 인터페이스가 다 그런 것은 아니지만 "~를 할 수 있는" 클래스라는 것은 명시해주기 위해 사용됩니다. ex) Parsable, Comparable...

Flyable 인터페이스

1
2
3
4

public interface Flyable {
    void fly(int yDistance);
    void flyMove(int xDistance, int yDistance);
}
 

다음은 새 종류의 동물 클래스에 구현시킬 Flyable 인터페이스입니다. 다른 동물들과는 다르게 y행으로 위로 올라갈 수 있도록 하는 메서드들을 선언했습니다.

Pigeon 일반클래스

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

public class Pigeon extends Animal implements Flyable{
    public Pigeon(int x, int y, int age) {
        super(x, y, age);
    }
    
    @Override
    public void fly(int yDistance) {
        setY(getY() + yDistance);
    }
    
    @Override
    public void flyMove(int xDistance, int yDistance) {
        setY(getY() + yDistance);
        setX(getX() + xDistance);
    }
    
    @Override
    public void printInfo() {
        System.out.println("Pigeon -> " + toString());
    }
}
 

비둘기 클래스는 일반 클래스입니다. 동물 클래스를 상속하고 날수 있는 동물이기에 Flyable 인터페이스를 구현해주고 해당 메서드들을 구현 해 주었습니다. printInfo 메서드를 보시면 이전에 Creature클래서의 추상메서드를 오버라이딩 해주었죠?

Swimable 인터페이스

1
2
3

public interface Swimable {
    void swimDown(int yDistance);
}

Swimable 인터페이스입니다. 이 인터페이스는 차이점에서 2. 공통된 기능 사용여부와 관련된 인터페이스입니다. 저는 앞으로 거북이와 케빈이라는 클래스를 작성할겁니다. 거북이는 동물이고 케빈은 사람입니다. 그런데 두 생명체 모두 수영을 할 수 있습니다. 이런경우 생명체 클래스에다가 swinDown 추상메서드를 만들어 주어야하나? 아니면 각각 동물과 사람 클래스에 추상메서드를 만들어 주어야하나? 음... 하지만 동물이나 사람중에서 수영을 못하는 사람이 있을 수도 있다!? 바로 이런 경우에 인터페이스로 다로 선언을 해줘서 각각 수영을 할 수 있는 클래스에 구현시켜줘서 만들어 주면 가독성도 좋고 유지보수하는 측면에서도 뛰어나겠죠??

Turtle 일반클래스

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

public class Turtle extends Animal implements Swimable{
    public Turtle(int x, int y, int age) {
        super(x, y, age);
    }
    
    @Override
    public void swimDown(int yDistance) {
        setY(getY() - yDistance);
    }
    
    @Override
    public void printInfo() {
        System.out.println("Turtle -> " + toString());
    }
}
 

거북이 클래스에서 아래로 수영할 수 있는 기능을 재정의 해주고

Kevin 일반클래스

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

public class Kevin extends Human implements Programmer, Swimable{
    public Kevin(int x, int y, int age) {
        super(x, y, age);
    }
    
    @Override
    public void coding() {
        System.out.println("Hello World!");
    }
    
    @Override
    public void swimDown(int yDistance) {
        setY(getY() - yDistance);
        if(getY() < -10) {
            System.out.println("너무 깊이 들어가면 죽을수도 있어!!");
        }
    }
    
    @Override
    public void printInfo() {
        System.out.println("Kevin -> " + toString());
    }
}
 

Kevin클래스에서도 오버라이딩하여 재정의 해줄 수 있다. 케빈 같은 경우는 y값이 -10이하로 내려가면 죽을 수도 있다는 것을 알려주는 또 다른 기능으로 재정의 했습니다. 바로 이런 부분에서는 추상클래스 말고 인터페이스를 사용하는 것이 좋겠죠??

그리고 또다른 인터페이스의 장점! 바로 다중구현! Kevin은 수영도 할 수 있고 코딩도 할 수 있습니다. 그래서 Programmer와 Swimable 인터페이스를 모두 구현하고 필요한 메서드를 재정의해서 사용하면 됩니다.

Programmer 인터페이스

1
2
3

public interface Programmer {
    void coding();
}

Main 실행클래스

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
31
32
33
34
35
36

public class Main {
    public static void main(String[] args) {
        Pigeon p = new Pigeon(5,10,14);
        p.printInfo();
        p.age();
        p.move(100);
        p.printInfo();
        p.fly(5);
        p.printInfo();
        p.flyMove(10, 20);
        p.printInfo();
        p.attack();
        System.out.println();
        
        Kevin kev = new Kevin(0, 0, 35);
        kev.printInfo();
        kev.age();
        kev.move(10);
        kev.printInfo();
        kev.attack();
        kev.coding();
        kev.swimDown(20);
        kev.printInfo();
        kev.talk();
        System.out.println();
        
        Turtle tur = new Turtle(100, -10, 95);
        tur.printInfo();
        tur.age();
        tur.move(-100);
        tur.printInfo();
        tur.attack();
        tur.swimDown(1000);
        tur.printInfo();
    }
}
 

설계한 대로 코드를 작성했으니... 이제 확인 해봐야겠죠?

실행결과

위 예시처럼 직접 사용해서 다른 예시를 만들어 주면 인터페이스와 추상클래스의 차이점과 상황별 어떤 것을 사용해야할지 감이 올것 같아요. 저도 나름대로 공부하고 실습을 통해 추상클래스와 인터페이스에 대한 정리를 해봤는데 맞고 틀린 부분들도 분명 존재할 것이라고 생가각합니다. 정정 및 위 내용에 추가하고 싶은 것이 있다면 댓글 꼭 남겨주세요!!

정리

추상클래스 사용 시기 : 상속 관계를 쭉 타고 올라갔을때 같은 조상클래스를 상속하는데 기능까지 완변히 똑같은 기능이 필요한 경우

(ex. attack, printInfo)

인터페이스 사용 시기 : 상속 관계를 쭉 타고 올라갔을때 다른 조상클래스를 상속하는데 같은 기능이 필요할 경우 인터페이스 사용

(ex. Swimable)

[jQuery] 자바스크립트 form 태그 submit

디케이형 — Tue, 23 Feb 2021 21:52:12 +0900

입력 양식은 전체 영역을 정의하기 위한 <form> 태그 안에

입력 항목의 그룹을 위한 <fieldset> 태그가 포함된 형태로 정의됩니다.

또한 <fieldset> 태그 안에는 그룹의 제목 지정을 위해 <legend> 태그가 사용될 수 있습니다.

기본적으로 <fieldset> 태그와 <legend> 태그는 생략이 가능합니다.

<body>
      <!-- 입력 내용을 감싸기 위한 부분 -->
    <form>
      <!-- 입력 항목의 그룹 -->
        <fieldset>
              <!-- 그룹의 제목 -->
            <legend>제목입니다.</legend>

        </fieldset>
    </form>
</body>

데이터 전송(submit) 하기 (1)

버튼 표시하기

<input type="submit|button|reset|image" value="버튼 표시 텍스트" [src="이미지경로"] />

input 태그의 type 속성은 submit, button, reset, image 중 하나를 선택하면 됩니다.

submit과 image 속성은 둘 다 입력한 내용들을 웹프로그램에게 전송하는 기능을 합니다.

image 속성의 경우 버튼에 이미지를 표시합니다. (value 속성 대신 src 속성이 사용됩니다.)

* HTML5에서부터는 fromaction(action 주소)을 설정하는게 가능합니다.

button은 아무런 동작이 없으며 일반적으로 Javascript와 연결하여 특정 동작을 구현하기 위해 사용합니다!

(데이터 전송을 바로 하지 않고, 'Javascript와 연결하여 특정 동작 후 전송을 하겠다'한다면 지정하면 됩니다.)

reset은 사용자가 입력한 모든 내용을 삭제합니다.

데이터 전송(submit) 하기 (2)

<form method="post|get" action="웹 프로그램 URL" [enctype="multipart/form-data"]>

	... 전송값 입력 내용들 ...
    
</form>

<form> 요소 내의 submit 버튼이 눌러지거나 Javascript와 연결되어있는 button을 통해서 submit이 수행된다면

현재 <form> 안에 사용가가 입력한 모든 내용들이 action 속성에서 명시하는 웹 프로그램 페이지로 전송됩니다.

enctype 속성은 입력 양식 안에 파일 첨부 기능이 포함되어 있는 경우 반드시 지정해야 한다.

method 속성은 전송방식을 의미한다.

- get : 입력된 모든 내용이 URL에 포함되어 전송된다.

- post : 입력된 내용이 URL에 노출되지 않는다.

get과 post에 대한 내용은 다른 글들에서도 쉽게 찾을 수 있을 것입니다!

시간이 된다면 정리를 해보겠지만 아니라면 다른 곳들을 통해 참조해주세요!

위에서는 <input> 태그의 type 속성으로 4가지를 소개했었지만,

HTML5부터는 입력값의 형태에 따라 <input> 태그의 type 속성에 부여할 수 있는 종류가 추가되어 다양해졌습니다.

type값에 따라 모바일 환경에서의 기본 키보드 형태가 변경됩니다!

url : 웹 페이지의 URL을 입력할 수 있다.

tel : 전화번호를 입력할 수 있다.

number : 숫자값을 입력할 수 있다. min, max, step 속성을 추가적으로 사용하여 최소값, 최대값, 입력 단계들을 설정할 수 있습니다.

range : 슬라이드 바 형태로 수치값을 선택할 수 있다. min, max, step 속성을 추가적으로 사용하여 최소값, 최대값, 입력 단계들을 설정할 수 있습니다.

date : 날짜 형식의 값을 입력한다.

time : 시간 형식의 값을 입력한다.

email : 이메일을 입력할 수 있다.

search : 검색어를 입력하는 용도로 사용한다.

전화번호 뿐 아닌 숫자를 받는 경우(인증번호, 주민번호)를 위하여 type 속성의 값으로 tel을 주는 경우도 있습니다!

<button> 태그 (HTML5)

<input type="submit|image|reset|button"/>을 대체하기 위한 새로운 태그

오직 form 태그에만 지정할 수 있던 method, action 속성을 개별적으로!!! 지정할 수 있습니다.

즉 기존에는 <form> 하나 당 (버튼의 수에 상관없이) 한개의 웹 프로그램만 연동 가능했지만, 이제는 개별 버튼별로 연동을 지정하여 하나의 폼 태그안에서 여러개의 Submit 전송이 가능하다는 이야기입니다.

그렇다면 <button> 태그의 속성에 대해 알아보도록 하겠습니다.

<button type = "submit|button|reset"
	formaction = "url"
	formmethod = "get|post"
	formtarget = "_blank|_self|_parent|_top" />

type : 버튼의 종류를 지정한다.

formaction : 데이터를 전송할 파일을 지정한다.

formmethod : 전송 방식을 지정한다.

formtarget : form의 target속성을 덮어쓴다.

그럼 button 태그를 배웠으니 본격적으로 한 form안의 데이터를 여러개의 url에 action을 전송하는 방법에 대해 알아보겠습니다.

입력 양식 구성을 위한 form 영역 준비하기

<body>
	<form name="form1">
    	<h1>회원가입</h1>
        	<fieldset>
        		<legend> 부가 정보 </legned>
                
                  <div>
                      <label for="user_mail">이메일: </label>
                      <input type="email" name="user_mail" id="user_mail" required="required" title="student@gmail.com"/>
                  </div>

                  <div>
                      <label for="user_homepage">홈페이지: </label>
                      <input type="url" name="user_homepage" id="user_homepage" />
                  </div>

                  <div>
                      <label for="user_age">나이: </label>
                      <input type="number" name="user_age" id="user_age" min="19" max="100" step="1"/>
                  </div>

                  <div>
                      <label for="user_phone">연락처: </label>
                      <input type="tel" name="user_phone" id="user_phone"/>
                  </div>

                  <div>
                      <label for="point">목표성취도(%): </label>
                      <input type="range" name="point" id="point" value="50" min="0" max="100" />
                  </div>

                  <div>
                      <label for="birthday">생년월일: </label>
                      <input type="date" name="birthday" id="birthday" value="2014-11-30" />
                  </div>

                  <div>
                      <label for="worktime">출근시간: </label>
                      <input type="time" name="worktime" id="worktime" value="09:00" />
                  </div>

                  <div>
                      <label for="friend">추천인 아이디: </label>
                      <input type="search" name="friend" id="friend" />
                  </div>

                  <div>
                      <button type="submit" formaction="action1.html"
                          formmethod="get" formtarget="_blank">14세 이상 회원가입</button>
                      <button type="submit" formaction="action2.html"
                          formmethod="post" formtarget="_self">14세 미만 회원가입</button>
                  </div>                  
			</fieldset>
	</form>
</body>

위 코드의 마지막 부분들을 보면 <button> 태그의 formaction 속성을 확인할 수 있습니다.

button의 formaction 속성에 다른 url을 줌으로 인해서 다른 액션(action)을 취할 수 있게 합니다.

또한 Javascript(jQuery)를 통해서 버튼이 눌렸을 때(onclick) form에 action속성을 정해주는 방법도 있습니다.

$("form").attr("action", "action1.html");

$("form").action="action2.html";

간단 정리 :

1. jQuery attr 또는 action으로 액션(action) url을 지정해주거나,

2. input 또는 button의 formaction 속성을 통해 액션(action) url을 지정해주면 된다.

[Javascript] 자바스크립트 (error) 오류 정리

디케이형 — Tue, 23 Feb 2021 21:46:41 +0900

JavaScript에서 발생하는 오류(Error)의 종류

일반적으로 프로그래밍 중 발생할 수 있는 오류는 3가지가 있습니다.

1. 구문 오류(Syntax Error)

JavaScript가 요구하는 규칙대로 프로그램을 작성하지 않을 경우 발생합니다. 예를 들면 다음과 같은 코드입니다.

▼ 구문 오류 발생 예제

console.log("안녕하세요"

consoe.log 호출 시 )를 누락하였습니다. 따라서 코드를 실행해보면 SyntaxError: missing ) after argument list라는 오류 문구를 출력합니다.

2. 실행시간 오류(Runtime Error, Exception)

이런 종류의 오류는 프로그램을 실행할 때 발생합니다. 다시 말해 실행(평가)해보기 전까지는 그곳에 오류가 있는지 알 수 없다는 뜻입니다.

다음의 실행시간 오류를 포함한 코드를 보겠습니다.

▼ 실행시간 오류 발생 예제

function sum(a, b) {};
add(2, 2);

이 코드는 실행하면 ReferenceError: add is not defined라는 오류 문구를 출력합니다.

정의하지 않은 add 함수를 호출하는 오류가 포함되어 있습니다. 실제 코드에 함수 add는 없고 sum만 정의되어 있는 것이 눈에 보이지만 인터프리터(Interpreter)는 실행 명령을 받기 전까지는 작성자의 의도를 알 수 없습니다. 현재 이 코드가 아직 작성 중인 것일 수도 있으며, 혹은 다른 scope에 정의가 되어 있을 수도 있기 때문입니다. 구문 오류와 달리 JavaScript의 문법에는 오류가 없습니다.

3. 논리적인 오류

앞서 살펴본 2종류의 오류는 사실 인터프리터에 의해 자동으로 검출이 되므로 수정이 용이합니다. 때문에 2가지 종류의 오류는 사실 신경 쓸 부분이 많지 않습니다. 단지 콘솔에 출력되는 오류 문구를 구글에 검색해본 후 처리해주면 됩니다.

반면 논리적인 오류는 여러분의 프로그래밍에 논리적인 실수가 있을 때 발생합니다. 대부분의 경우 프로그램은 이러한 종류의 오류가 외부로 드러나지 않고 정상적으로 동작하기 때문에 프로그램 내부에 오류의 여부를 확인하기 힘듭니다.

따라서 대부분의 소프트웨어 시험(Software Testing)은 바로 이런 종류의 오류를 검출하고 수정하기 위해서 수행합니다.

예를 들어 다음과 같습니다.

▼ 논리적인 오류 예시

function add(a, b) {console.log(a*b)};
add(2, 2);

위 소스코드를 실행해보면 프로그램이 정상 실행되어 결과도 4로 올바르게 화면에 출력합니다. 하지만 사실은 프로그래머가 계산 시 +가 아닌 *연산자를 사용한 잘못 구현한 함수입니다. (함수의 이름이 잘못되었을 수도 있습니다.)

논리적인 오류는 프로그램이 오류를 발생시키지 않기 때문에 증상을 외부로 드러내야 합니다.

논리적인 오류를 검출하기 위해 JavaScript와 같은 프로그래밍 언어들은 오류(예외)를 강제로 발생시킬 수 있습니다. 증상이 보지 않으면 내부의 오류를 알 수 없기 때문입니다.

Throw

예외를 발생시키기 위해 JavaScript에서는 throw 문을 사용합니다. 용법은 다음과 같습니다.

throw 표현식;

표현식에는 어떠한 값도 들어갈 수 있습니다. 때문에 다음과 같이 사용할 수도 있습니다.

throw "에러@Add";  // 문자열
throw 42;         // 숫자

하지만 일반적으로 Error객체를 사용합니다.

throw new Error(customError);

▼ 에러 객체 예외 발생 예제

function add(a,b) { return a*b; }

function addTest() {
    let ret = add(2,3);
    let exp = 5;
    if (ret != exp) {
        throw new Error('Error @ addFunction');
    }
}

addTest();

▼ 에러객체 예외 발생 예제 실행결과

Uncaught Error: Error @ addFunction

Try, Catch, Finally

우리가 throw를 사용해 의도적으로 발생시킨 오류를 포함해 앞서 오류의 예로 들었던 코드에서 발생시키는 예외들의 문구를 보면 다음과 같이 Uncaught라는 문구가 붙어 있습니다. 그리고 공통적으로 프로그램의 구동이 그곳에서 중단되었습니다.

▼ 구문 오류 발생 예제 실행결과

Uncaught SyntaxError: missing ) after argument list

이것은 발생한 예외(오류)를 받아(catch) 처리할 수 있는 핸들러가 존재하지 않기 때문에 기본적으로 존재하는 예외처리 핸들러가 화면에 문구를 출력 후 프로그램을 종료시켰기 때문입니다. 반면에 이를 적절히 처리할 수 있는 핸들러가 있다면 프로그램은 오류가 아닌 정상 종료 또는 계속 실행될 것입니다.

JavaScript에서 제공하는 예외(오류)를 처리하는 방법은 Try, Catch 그리고 Finally 를 사용하는 것입니다.

우선 try 절 내부에 에러를 발생시킬 가능성이 있는 코드를 내부에 삽입합니다. 그 뒤로 오류를 처리할 수 있는 1개 이상의 catch 절이 뒤따르고 옵션으로 finally 절이 나올 수도 있습니다. 다음과 같이 3가지 형태를 띠게 됩니다.

try-catch
try-finally
try-catch-finally

다음과 같이 사용할 수 있습니다.

▼ try - catch 예제

function add(a,b) { return a*b; };

function addTest() {
    let ret = add(2,3);
    let exp = 5;
    if (ret != exp) {
        throw new Error('Error @ addFunction');
    }
};

try {
    addTest();
} catch (e) {
    console.log(e.name);
    console.log(e.message);
};

앞서 기술했던 것과 같이 try 절 내부에 실행할 코드를 넣고, 해당 코드의 실행 결과 오류가 발생하였을 때 이를 받아 처리할 수 있는 코드를 catch 절 내부에 넣습니다. 예제에서는 발생한 error를 화면에 출력하였습니다.

▼ try - catch 예제 실행결과

Error
Error @ addFunction

사실, 실행 결과를 보면 화면에 출력되는 문구도 동일하며 앞선 결과와 크게 다르지 않습니다. 다른 점은 프로그램이 정상 종료되었다는 것입니다. 즉, 앞서 발생한 오류는 _catch_를 통해서 마무리(개발자에게 상황을 알려주고)가 되었고 나머지 코드는 정상 실행되는 것입니다. 때문에 만약 JavaScript 에 추가 더 실행할 코드가 있었다면 그대로 실행이 되었을 것입니다.

마지막으로 finally 절의 경우는 오류의 처리 여부와 관계없이 반드시 실행되는 코드를 넣습니다. 때문에 설령 미처리된 오류로 인하여 프로그램이 종료되는 경우도 finally 내부의 코드를 실행한 후 종료가 됩니다.

결론

우리들은 코드를 작성할 때 예외(오류)가 발생할 것을 기대하지는 않습니다. 때문에 try 구문에서 실행되는 코드가 예외를 발생시키지 않는 것이 제일 좋은 상황이겠지만 그것이 불가능한 경우도 있습니다. 때문에 try … catch 구문을 통하여 개발자에게 알려주어 이를 해결하거나, 예상되거나 해결이 가능한 오류인 경우, 자체적으로 적절히 처리하여 프로그램의 실행에 지장이 없도록 하는 것이 차선책이 될 것입니다.

[jQuery] html 요소 삽입 추가하기 - before, after, prepend, append

디케이형 — Tue, 23 Feb 2021 21:36:23 +0900

html 요소 삽입하기

jQuery를 이용해 요소를 삽입하는 메소드는 before, after, prepend, append 등이 있다.

각각의 메소드마다 요소가 삽입되는 위치가 조금씩 다르니 자신이 원하는 위치에 따라 알맞게 사용해야 한다.

<before()을 이용해 요소 삽입하기>

$(selector).before(content)

// 이때 content에 들어갈 수 있는 값은 HTML elements, jQuery objects, DOM elements이다.

.before()는 selector 이전에 content를 삽입하는 메소드이다.

$("h1").before("<div>Hello</div>");

// <h1></h1> 이전에 <div>Hello</div> 삽입

<after()를 이용해 요소 삽입하기>

$(selector).after(content)

.after()는 selector 이후에 content를 삽입하는 메소드이다.

$("h1").after("<div>Hello</div>");

// <h1></h1> 이후에 <div>Hello</div> 삽입

<prepend()를 이용해 요소 삽입하기>

$(selector).prepend(content)

.prepend()는 selector의 맨 앞 자식 요소로content를 삽입하는 메소드이다.

$("h1").prepend("<div>Hello</div>");

// h1의 열리는 태그 바로 뒤에 <div>Hello</div> 삽입

<append()를 이용해 요소 삽입하기>

$(selector).append(content)

.append()는 selector의 맨 뒤 자식 요소로content를 삽입하는 메소드이다.

$("h1").append("<div>Hello</div>");

// h1의 닫히는 태그 바로 앞에 <div>Hello</div> 삽입

before(), after(), prepend(), append() 사용 예시

예시1) div 요소 추가하기

html 코드

div 요소 추가 전 실행화면

div 요소 추가하는 js 코드

js코드가 적용된 실행화면

before와 after와는 다르게 prepend와 append는 h1요소 내에 포함된 것을 확인할 수 있다.

공부한 것을 정리한 내용입니다. 수정할 부분이 있다면 알려주시면 감사하겠습니다 :)

[jQuery] 메소드 -.is(), .prop(), .html(), .text(), .attr()

디케이형 — Tue, 23 Feb 2021 00:05:46 +0900

.is(:속성) / .prop(속성)

$("선택자").is(:속성) / $("선택자").property(속성)

선택자가 속성을 가지는지 아닌지 확인하여 true, false 값을 내놓음

is()

prop()

.html()

$("선택자").html()

선택자의 코드 및 내용을 표기, 혹은 선택자 안의 내용을 html 괄호 안의 내용으로 교체

.text()

$("선택자").text()

선택자가 가진 내용만 표기, 혹은 선택자 안의 내용을 text괄호 안의 내용으로 교체

.attr(속성) / .attr({속성변동})

$("요소").attr(속성)

속성을 가진 요소 선택

$("선택자").attr({속성변동 함수})

선택자의 속성을 함수값 등에 맞게 변동

출처: https://kingji8life.tistory.com/164 [KingJI Life]