반응형

목차

1. 개요

2. 생성

3. 조회

4. 수정

5. 삭제

1. 개요

 Javascript의 가장 기본이 되는 개념인 객체의 생성, 조회, 수정, 삭제 방법에 대해 알아본다.

2. 생성

1
var foo = { name : 'ssk' };

중괄호 '{ }' 안에 key : value 형식으로 프로퍼티를 저장한다.

프로퍼티란 객체에 속한 데이터를 뜻한다.

 

※ key point

 foo라는 변수가 {name : 'ssk'} 라는 객체 자체에 대한 데이터를 가지고 있는 것이 아닌 객체의 주소를 가지고 있다.

var foo 는 해당 객체의 주소를 저장하고 있다.

 

  예를 들어, var foo2 = foo 라고 초기화시키면 foo2 또한 foo와 동일한 객체를 가리키게 된다.

3. 조회

 객체를 조회하는 방법은 크게 두 가지이다.

 1) 참조 연산자 (.) 사용

 2) 대괄호 ([]) 사용

1
2
3
console.log(foo.name); // 'ssk'
console.log(foo['name']); // 'ssk'
console.log(foo[name]); //undefined

  foo.name은 foo객체의 주소를 참조하고 그 안에 있는 name 값을 조회한다라는 의미이다. 'ssk'가 출련된다.

 

 foo['name']도 직관적으로 해석하면 foo객체의 key가 name인 value값을 조회한다인데, foo['name']과 foo[name]이 자꾸 헷갈려서 메커니즘을 찾아 이해해보았다.

 

 먼저 대괄호란 녀석은 배열에서 값을 참조할 때 쓰는 형식이다.

 javascript에서는 number, boolean, undefined, string, null이라는 기본 타입을 제외하고 모두 객체 타입이다. foo['name']은  객체 타입인 배열과 형식이 같은 것을 알 수 있다. (물론! 차이는 존재한다.)

쉽게 생각하면 foo['name']은 처럼 'name'이라는 key값(index)를 참조한다고 생각하면 이해가 쉽다. 객체의 key값은 String 값이기 때문에 작은 따옴표(')와 함께 입력해 준 것이다. 작은 따옴표가 없으면 name이라는 값은 String이 아닌 하나의 변수로 인식되고, name 변수 안에 있는 값을 참조하게 된다. name 변수는 호출이 된 최상위 객체인 window에 존재하지 않기 때문에 당연히 undefined가 출력된다.

 추가적으로 javascript는 대괄호 안에 데이터가 문자열이 아닐 경우 자동적으로 toString() 메소드를 적용시킨다. toString() 메소드는 어떠한 데이터를 문자열로 변환해주며, 변수.toString() 형식으로 사용할 경우 해당 변수에 들어있는 데이터를 문자열로 변환해주는 역할을 한다.

 즉, 대괄호 안에 있는 name이라는 데이터를 문자열이 아닌 변수로 인식하게 되면 name이라는 변수는 호출된 객체 영역 내에서 정의되지 않았기 때문에 문자열로 변환한들 당연히 값은 존재하지 않는다.

 

1
2
3
4
5
var name = 'name';
 
console.log(foo.name); // 'ssk'
console.log(foo['name']); // 'ssk'
console.log(foo[name]); // 'ssk'

 때문에 변수에 객체의 key값을 넣어 조회할때 위의 방식을 사용한다.

 간단히 name이라는 변수에 'name'이라는 key값을 넣었지만 key값이 많을 경우 반복문과 결합하여 사용할 수 있다.

 

foo['name']과 foo[name]의 차이를 정확히 알았으니 더이상 헷갈리는 일은 없겠지.

4. 수정, 추가

1
2
foo['name'] = 'hky';
console.log(foo['name']) //hky

foo.name = 'hky' 라고 해도 동일하다. 

1
2
foo['age'] = 25;
console.log(foo['age']) //25

추가도 수정과 동일한 방식이다.

5. 삭제

1
2
delete foo['age'];
console.log(foo['age']); //undefined

 삭제하고자 하는 객체의 키 값을 입력하며, 객체의 프로퍼티를 삭제할 때 사용한다.

 객체 자체를 삭제할 순 없다.

반응형

'프론트엔드 > Javascript' 카테고리의 다른 글

[Javascript] 정규 표현식(Regular expression), 정규식 패턴, 사용법, 날짜 차이 구하기 예제  (0) 2019.08.09
[JavaScript] 상속, Prototype, 함수 및 생성자 (3)  (0) 2019.07.24
[JavaScript] 상속, Prototype, 함수 및 생성자 (2)  (0) 2019.07.19
[JavaScript] 상속, Prototype, 함수 및 생성자 (1)  (0) 2019.07.18
[Javascript] 모듈의 정의, 장점 및 예제  (0) 2019.07.01
반응형

목차

1. 정규 표현식이란

2. 정규식 패턴

3. 정규식 메소드

4. 예제

1. 정규 표현식이란

 정규 표현식이란 특정한 규칙을 가진 문자열의 집합을 표현하는 데 사용하는 형식 언어이다.

 형식 언어를 사용하여 특정한 규칙을 가진 문자열의 패턴을 파악한다면 텍스트 편집, 포맷팅, 검색, 치환 등의 문자열 작업이 가능하게 된다. 기본적으로 패턴은 두 개의 '/(슬래시)' 사이에 작성한다. 

 

 예를 들어 '20190809'라는 문자열에서 패턴을 파악하여 '2019''08''09' 형태로 나누고, 그 사이에'-' 문자열을 삽입하여 '2019-08-09' 형태로 만들 수 있고, 저렇게 만든 날짜형 데이터에서 사용 가능한 메소드인 getDay(), getFullYear() 등을 사용할 수 있게 된다. 표현을 위한 포맷팅뿐 아니라 메소드의 사용까지도 가능하게 해주는 좋은 녀석이다.

2. 정규식 패턴

 그렇다면 이 패턴은 어떻게 만들까? 패턴을 만드는 방법은 크게 두 가지이다.

 첫째, 단순 패턴 사용

 둘째, 특수 문자 사용

 

 2.1 단순 패턴 사용

  단순 패턴은 단순히 문자열을 대응시킬 때 사용한다. 예를 들어 /hi/라는 패턴은 문자열에서 hi라는 문자열이 그대로 나타나야 대응된다. "hi, hellow"에서 hi라는 문자열이 대응된다.

 연습이 필요하다고 생각한다면 정규식을 테스트할 수 있는 사이트(https://regexr.com)를 들어가 보길 권한다. 참고로 끝에 있는 'g'는 패턴 속성으로 대상 문자열의 처음부터 끝까지 해당 패턴을 적용시키는 것이다. 이 속성이 없다면 'hi hi hi' 문자열의 대응 부분은 처음의 'hi' 하나뿐이다.

regexr.com

 

 2.2 특수 문자 사용

  단순 패턴을 사용하여 대응하기 힘든 것을 대응시키고자 할 경우 패턴에 특수 문자를 사용한다. 예를 들어, /^hi/ 패턴은 문자열의 시작이 'hi' 문자로 시작되는 것에 대응한다. 만약 'hi, hellow' 문자열에 이 패턴을 적용시킨다면 'hi'가 대응되며, 'oh, hi'라는 문자열에 적용시킨다면 대응되는 문자는 아무것도 없다.

 

특수문자의 종류와 기능이다.

특수 문자 기능 예시
^ 입력의 시작 부분과 대응된다. /^시작/ → 시작했다 시작
$ 입력의 끝 부분과 대응된다.  /끝$/ → 끝났다 끝
* 표현식이 0회 이상 연속으로 반복되는 부분과 대응된다.

/ab*c/ → cbbabbbbcdebc, acbd
+ 표현식이 1회 이상 연속으로 반복되는 부분과 대응된다. /ab+c/ → cbbabbbbcdebc, acbd
? 표현식이 0 또는 1회 등장하는 부분과 대응된다. {0,1} 과 같다. 있어도 ok, 없어도 ok 이라고 생각하면 편하다 /010?/ → 01, 010, 011
. 개행 문자를 제외한 모든 단일 문자와 대응된다. /hi./ → hi, hi1, hi2, hi12, hi 
(x) 패턴의 부분을 나누는 것. 포맷팅에 유용하게 쓰인다.

/(a)(b)/ → ab

replace(/(a)(b)/,'$1-$2') → a-b
x|y | 는 or 와 동일한 기능을 하며, 하나라도 있을 시 대응된다. /fuck|suck|dick/ → fuckyou, suckyou
{n} 표현식이 n번 나타나는 부분에 대응된다. /(hi){2}/ → hi, hihi, hi hi
{n,m} 표현식이 n번~m번 나오는 부분과 대응된다. /(hi){2,3}/ → hi,hihi,hihihi,hihihihi
[abc] 대괄호 안의 문자가 하나라도 있을시 대응된다. /[abc]/g → a,ab,abc

https://developer.mozilla.org/ko/docs/Web/JavaScript/Guide/%EC%A0%95%EA%B7%9C%EC%8B%9D

 

정규 표현식

정규 표현식은 문자열에 나타는 특정 문자 조합과 대응시키기 위해 사용되는 패턴입니다. 자바스크립트에서, 정규 표현식 또한 객체입니다.  이 패턴들은 RegExp의 exec 메소드와 test 메소드  ,그리고 String의  match메소드 , replace메소드 , search메소드 ,  split 메소드와 함께 쓰입니다 . 이 장에서는 자바스크립트의 정규식에 대하여 설명합니다.

developer.mozilla.org

더 많은 특수 문자에 대해 알아보고 싶다면 위의 링크로 들어가 보길 권한다.

3. 정규식 메소드

 정규식을 만들어 적용시키기 위해서는 정규식 메소드를 사용해야 한다.

 메소드 또한 위의 링크에서 잘 정리되어있기 때문에 많이 사용되는 메소드만 정리하겠다.

메소드 명 사용 방법 기능
exec pattern.exec(String) 패턴을 String에 적용하여 실행시킨다.
test pattern.test(String) 패턴을 String에 적용시킨 결과가 존재하는지 true와 false로 출력시킨다
replace String.replace(pattern,'type') 패턴을 String에 적용시키고 type으로 치환한다.

특정 문자를 제거하고 싶다면 String.replace(/\-/g, '')

 

반대로 String에 구역을 나눠 해당 구역 간격으로 '-' 문자를 넣어주고 싶다면 

 

번호에 '-' 기호 삽입

참고로 replace의 두 번째 인자인 $1, $2, $3는 정규식에서 대응되는 각각의 부분이다.

4. 예제

 입력받은 두 날짜의 시간 차이 계산하기

 

 4.1) 소스코드

  4.1.1) html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <title>Page Title</title>
    <script type="text/javascript" src="3js.js"></script>
</head>
<body>
    <input type="text" id = "date1">
    <input type="text" id = "date2">
    <input type="button" id = "dateButton" value="계산">
</body>
</html>

 

  4.1.2) Script

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
window.onload = function(){  
    document.getElementById("dateButton").addEventListener("click",dateCalcul);
    function dateCalcul(){
        var date1 = document.getElementById("date1").value;
        var date2 = document.getElementById("date2").value;
        var pattern = /(^(19|20)\d{2})(0[1-9]|1[0-2])(0[1-9]|[12][0-9]|3[01])$/; 
        if(pattern.test(date1) && pattern.test(date2)){
            var formatDate1 = date1.replace(/(\d{4})(\d{2})(\d{2})/,'$1-$2-$3'); //YYYYMMDD 형태
            var formatDate2 = date2.replace(/(\d{4})(\d{2})(\d{2})/,'$1-$2-$3');
            var checkDate1 = new Date(formatDate1).getDate(); //1,2,3,4 형태, 메소드 적용 데이터
            var checkDate2 = new Date(formatDate2).getDate();
            checkDate1 = zeroFormat(checkDate1); //D 형태일때 0 추가 = DD형태
            checkDate2 = zeroFormat(checkDate2);
            var formatDate1Date = formatDate1.split('-')[2]; //DD 추출, 순수 입력 데이터
            var formatDate2Date = formatDate2.split('-')[2];
            
            if(formatDate1Date != checkDate1 || formatDate2Date != checkDate2){ //DD 형태 비교
                alert("입력한 날짜는 존재하지 않습니다");
                return;
            }
            var convertDate1 = new Date(formatDate1).getTime();
            var convertDate2 = new Date(formatDate2).getTime();
            var absDate = Math.abs(convertDate1-convertDate2);
            var result = absDate/(24*60*60*1000);
            alert(formatDate1+" 과 "+formatDate2+" 의 사이 날짜는 "+result+"일 입니다.");          
        }else{
            alert("19~20년도 사이의 정확한 날짜를 입력해주세요");
        }
    }
}
function zeroFormat(input){
    if(input<10){
        input = "0"+input;
    }
    return input;
}
 

 2번 라인 - dateButton Click 이벤트 추가 및 함수 실행

 

 4~5번 라인 - 날짜 데이터인 date1, date2의 value 값을 가져옴

 

 6번 라인 - 정규식 패턴 생성(사용자가 YYYYMMDD 형태로 입력했는지 검사)

 (^(19:20)\d{2}) - 제일 앞이 19 아니면 20, 그 뒤 숫자 2개 : 1900~2099

 (0[1-9]|1[0-2]) - '0 다음 1부터 9 사이 값' 또는 '1 다음 0부터 2 사이 값 : 01~12

 (0[1-9]|[12][0-9]|3[01])$ - '0 다음 1부터 9 사이' 또는 '1 또는 2 다음 0부터 9 사이' 또는 '3 다음 0 또는 1' : 01~31

 $ - 끝 (YYYYMMDDD와 같이 형식을 오버했을 때 검출함)

 

 7번 라인 - 입력한 두 텍스트 박스의 value에 패턴을 적용시키고 대응 여부를 확인(true or false)

 

 8~9번 라인 - Date 객체를 생성하기 위한 데이터 형식인 (YYYY-MM-DD)를 맞춰주기 위한 포매팅

 

 10-11번 라인 - 객체의 메소드를 적용하여 날짜를 가져옴

 

 12-13번 라인 - 날짜가 1일, 2일 과 같이 한 자리 수일 때 형식이 DD가 아닌 D가 됨. 즉 비교가 안되므로 DD형태로 변경해주기 위한 메소드인 zeroFormat() 호출

 

 ※ DD 형태로 변형해야 하는 이유

   사용자의 입력 날짜가 윤월일 인지 판별하기 위함 (2월 30일처럼 없을 수도 있는 날짜 판별)

   Date 객체의 getDate() 메서드는 입력한 날짜의 '일자'를 받아옴. 그런데 만약 2018년 2월 30일의 일자를 받아오면

   3일이 나오게 됨. 즉, 없는 일자만큼 카운트를 계산하여 가까운 있는 날짜에 더해줌. 2월 31일의 가장 가까운 날짜는

   3월 1일이며, 2월 28일에서 초과된 2일만큼 증가시키면 3월 3일이 나옴. = 계산 오류 발생.

   이러한 오류를 막기 위해 DD 형태로 변형하여 사용자가 입력한 날짜의 일자와 메소드를 적용시킨 일자를 비교하여

   일치할 경우 존재하는 날짜로 판별하고, 불일치할 경우 존재하지 않은 날짜로 판별하기 위함 

 

 14-15번 라인 - split 메소드를 사용하여 '-' 기준으로 나눈 배열의 3번째인 일자가 저장된 값을 읽어옴.

 

 17번 라인 - 사용자가 입력한 일자와 메소드를 적용시킨 일자를 비교

 

 21번 라인 - 입력 날짜에 문제가 없으면 해당 시간의 날짜를 시간으로 변환(milis)

 

 23번 라인 - 밀리 초로 변환된 두 날짜의 시간을 빼고 그 데이터를 절댓값으로 변환

 

 24번 라인 - 밀리초를 날짜로 변환하기 위해 각각의 단위를 곱 연산 후(1000*60*60*24 = 1일) 앞의 계산 결과와 나눔

 

4.2) 실행결과

실행결과 1
실행결과 2
실행결과 3

반응형

'프론트엔드 > Javascript' 카테고리의 다른 글

[Javascript] 객체 생성 , 조회, 수정, 추가, 삭제  (0) 2019.08.11
[JavaScript] 상속, Prototype, 함수 및 생성자 (3)  (0) 2019.07.24
[JavaScript] 상속, Prototype, 함수 및 생성자 (2)  (0) 2019.07.19
[JavaScript] 상속, Prototype, 함수 및 생성자 (1)  (0) 2019.07.18
[Javascript] 모듈의 정의, 장점 및 예제  (0) 2019.07.01
반응형
반응형

목차

1. 개요

2. logging이란

3. log4j란

4. log4j 설치 및 설정

5. 예제

1. 개요

 서버는 클라이언트와 정보를 주고받는다. 다양한 이유로 그 과정에서 발생하는 여러 사건이나 정보들을 기록으로 남기는데 이 기록을 log라고 한다. 그리고 log를 남기는 행위를 '로깅'이라고 하는데, 모든 서버에 기본적으로 들어가는 개념이기 때문에 오늘은 이 logging에 대해 공부하는 시간을 가져보도록 하자. 구동 환경은 이클립스와 tomcat 7.0이다.

2. logging이란

 로깅이란 시스템 동작 시 시스템 상태/작동 정보를 시간의 경과에 따라 기록하는 것이다. 그 기록을 '로그'라고 한다.

 한마디로 '로깅 = 로그 기록'이다.

 로깅은 많은 부분에서 사용되는데, 사용자의 패턴이나 시스템 동작 분석에 사용되거나 해킹 사고가 발생할 경우 비정상 동작의 기록을 통해 추적하는 데 사용한다. 백엔드 개발자들의 경우 개발 과정에 있어 디버깅에 활용할 수도 있다. 이 외에도 다방면으로 쓰인다.

 그렇다면 Spring과 같은 Java환경에서 로깅을 하려면 어떻게 해야 할까? 시스템 동작에 대한 기록을 남기는 것이기 때문에 흔히 알고 있는 system.out.println()과 같은 메소드를 사용할 수 있겠다. 하지만 이는 메모리면에서 비효율적인 데다 클라이언트의 접속량이 많아질수록 안정적으로 실행되지 못하는 등 여러 문제를 안고 있다. (문제에 대해 궁금하다면 직접 구글링을 추천)

 이 문제에 대한 솔루션이자 Java 환경의 logging 시스템이 바로 log4j이다. log4j에 대해 본격적으로 알아보도록 하자.

3. log4j란 

 Java 환경의 로깅 시스템을 제공하는 라이브러리.

 Logger, Appender, Layout 등 다양한 컴포넌트가 사용되며, 로그 레벨을 분류하여 로그 정보를 출력시킬 수 있다.

 

 3.1) 컴포넌트

컴포넌트 설명
Logger 로그의 주체, 로그 파일을 작성하는 클래스
Appender 로그를 출력하는 위치
Layout Appender의 출력포맷(일자, 시간 등)을 설정하여 로그 내용으로 지정하는 속성. 

  Layout의 종류는 여러 가지가 있지만 일반적으로 디버깅에 가장 적합한 PattenLayout을 사용한다.

  PattenLayout이란 출력 포맷을 정해진 일련의 패턴을 사용하여 설정하는 것인데 패턴 정보는 아래와 같다.

패턴 설명
C 클래스명 출력
d 로그 시간 출력
F 파일명 출력. 수행한 메소드와 라인번호가 함께 출력.
L 라인 번호 출력
m 로그로 전달된 메시지 출력
M 로그를 수행한 메소드명 출력
n 개행
p 로그 이벤트명 (DEBUG 등)
r 로그 처리시간(milliseconds)
t 로그 이벤트가 발생된 쓰레드 출력

 위의 패턴을 잘 조합하여 로그에 대한 출력 포맷을 설정한다.

 

 3.2) 로그 레벨

 로그는 기본적으로 6개의 레벨을 갖는다. 아래로 갈수록 낮은 레벨이다.

로그 레벨 설명
fatal 시스템 문제와 같은 아주 심각한 에러가 발생한 상태를 나타냄.
error 요청을 처리하는중 문제가 발생한 상태를 나타냄.
warn 처리 가능한 문제이지만, 향후 시스템 에러의 원인이 될 수 있는 경고성 메시지를 나타냄.
info 로그인, 상태변경과 같은 정보성 메시지를 나타냄.
debug 개발시 디버그 용도로 사용한 메시지를 나타냄.
trace 디버그 레벨이 너무 광범위한것을 해결하기위해서 좀더 상세한 상태를 나타냄

 debug(), warn(), error()와 같이 메소드를 사용해서 로그 정보를 얻을 수 있으며, 로그 레벨 설정을 통해 로그를 통제할 수 있다. 이는 Logger의 Level 메소드를 통해 이루어지며, 지정한 로그 레벨보다 낮은 로깅 이벤트는 무시된다. 이는 뒷부분의 예제를 보면 이해할 수 있을 것이다.

4. log4j 설치 및 설정

 1) http://logging.apache.org/log4j/2.x/download.html 에서 최신버전.zip 파일 다운.

log4j 홈페이지

 2) 압축을 풀면 많은 파일이 있는데 그중 log4j-api-2.x.jar 와 log4j-core-2.x.jar 파일을 복사.

 

 3) 이클립스를 실행시켜 Dynamic Web Project를 생성하고 프로젝트 폴더에 lib 폴더를 생성.

 

 4) lib 폴더에 복사한 두 파일을 붙여넣기.

lib에 파일 붙여넣기

  5) 라이브러리를 추가는 '프로젝트 우클릭 → properties → Java Build Path → Libraries → Add JARs' 클릭

  

  6) lib에 있는 두 파일을 선택 후 Apply 클릭하면 라이브러리 설정이 완료.

프로젝트에 log4j 라이브러리 추가

5. 예제

  1) project → Java Resources → src 경로에 log4j2.xml 파일 생성 후 아래의 소스코드 추가.

     (log4j2.xml은 로깅에 대한 기본 환경 설정 파일)

1
2
3
4
5
6
7
8
9
10
11
12
13
<?xml version="1.0" encoding="UTF-8"?>
<Configuration>
    <Appenders>
        <Console name="STDOUT" target="SYSTEM_OUT">
            <PatternLayout pattern="%d %-5p [%t] %C{2} (%F:%L) - %m%n" />
        </Console>
    </Appenders>
    <Loggers>
        <Root level="debug">
            <AppenderRef ref="STDOUT" />
        </Root>
    </Loggers>
</Configuration>

  4번 라인 - 로그를 출력하는 위치(Appenders)를 Console로 설정. 로깅 이름은 STDOUT으로 설정.

  5번 라인 - patten을 시간, 로그 이벤트명, 쓰레드, 클래스명, 파일명, 라인 번호, 메시지, 개행으로 설정

  9~10번 라인 - STDOUT에 대한 Root level을 debug로 설정(서블릿에서 호출될 로그 중 debug보다 낮은 로그 레벨은 무시)

  

  2) proejct에 servlet 클래스를 생성하고 아래의 코드를 입력. 

  (servlet 생성 및 기본 개념을 모르겠다면 클릭)

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
41
42
43
44
45
46
47
48
package servlet;
 
import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import org.apache.logging.log4j.LogManager;
import org.apache.logging.log4j.Logger;
 
/**
 * Servlet implementation class log
 */
@WebServlet("/log")
public class log extends HttpServlet {
    private static final long serialVersionUID = 1L;
    private Logger logger = LogManager.getLogger(log.class);
    /**
     * @see HttpServlet#HttpServlet()
     */
    public log() {
        super();
        // TODO Auto-generated constructor stub
    }
 
    /**
     * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
     */
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        // TODO Auto-generated method stub
        response.getWriter().append("Served at: ").append(request.getContextPath());
        logger.error("error message");
        logger.warn("warn message");
        logger.info("info message");
        logger.debug("debug message");
        logger.trace("trace message");
    }
 
    /**
     * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
     */
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        // TODO Auto-generated method stub
        doGet(request, response);
    }
 
}
 

  18번 라인 - log 클래스에 대한 Logger객체 생성

  33~37번 라인 - 5가지의 로그 메소드 호출

 

  3) Servlet 파일 Run

실행 결과

  현재 servlet 파일에서 logger를 error, warn, info , debug, trace 총 5개 레벨에 대한 출력을 시도했으나 제일 낮은 레벨인 trace를 제외한 4개만 console로 출력된 상태이다. 이유는 앞서 언급했던 로그 레벨에 따른 통제와 관련이 있다.   log4j2.xml 파일에서 STDOUT 로깅 데이터에 대한 level이 debug로 설정되었기 때문이다. trace를 출력시키고 싶다면 xml 파일 9번째 줄의 debug 대신 trace를 넣어주면 된다.

 

  4) tomcat 서버 에러 발생 시

   tomcat 서버 에러가 발생할 경우 tomcat에 서버에 대해서도 log4j 라이브러리를 추가시켜줘야 한다. log4j를 사용하여 얻은 로그가 기본적으로 WAS(tomcat)에 남기 때문이다.

   추가 방법은 tomcat Server Overview → Open launch configuration → Classpath → UserEntries → Add JARs를 클릭하여 lib 폴더에 있는 두 라이브러리를 클릭하면 된다.

tomcat Overview
log4j 라이브러리 추가

 

시간이 늦은 관계로 log4j을 통한 롤링은 다음에 포스팅하도록 하겠다.

반응형

'백엔드 > Spring' 카테고리의 다른 글

@RunWith, @ContextConfiguration 어노테이션  (0) 2021.01.21
[Spring] web.xml 이란? / 예제  (3) 2020.12.21
[Spring] log4j2 사용법, 로그남기기, 파일 저장  (0) 2019.12.03
[Spring] Servlet 개념, 동작 구조, 예제 및 실습  (1) 2019.08.05
[Spring] 스프링이란? 정의, 구조, 용어  (1) 2019.08.02
반응형

목차

1. 개요

2. Servlet 이란?

3. Servlet 동작 구조

4. 예제 및 실습

5. 실행화면

1. 개요

 저번 게시물에서 Spring MVC 모델에 대해 공부하던 중 Dispacher Servlet이란 개념이 애매모호한것 같아 이를 구조적으로 이해하기위해 선행 학습 개념인 Servlet에 대한 공부를 진행하였다.

 eclipse EE와 tomcat을 연동하여 WAS 구조를 만들고, Servlet을 이용하여 Client - Web Server - Web Container간 통신 구현 및 구조를 이해해보도록 하자.

2. Servlet 이란?

 Servlet이란 JAVA를 이용하여 동적 페이지를 생성하는 서버측 프로그램이다.

 CGI(Common Gateway Interface)라고도 하는데 CGI란 사용자의 입력을 받아 동적 페이지를 만드는 것이다.

 사용자의 입력에 따라 결과가 달라지는 것, 예를들어 쇼핑몰 로그인 후 나오는 자신의 닉네임같은 것이다.

 즉, JAVA로 구현된 CGI라고 생각하면 된다.

 

 개념은 알았으니 Servlet 동작 구조에 대해 살펴보도록 하자. 

3. Servlet 동작 구조

Servlet 동작 구조

 1) 클라이언트의 요청이 있으면 Web Server에게 요청이 전달된다.

 

 2) Web Server는 정적인 데이터(HTML, 이미지, css 등)만을 처리하고, 동적 데이터(Servlet, DB, 로직 등)는 Web Container에게 전달한다.

* Web Container : Servlet 클래스 또는 JSP 파일을 실행하기 위한 실행 환경을 제공하는 컨테이너

 

 3) Web Container는 web.xml파일을 참조하여 해당 Servlet에 대한 쓰레드를 생성한다. 그리고 httpServletRequest와  httpServletResponse 객체를 생성하여 이 쓰레드에게 전달한다.

 쓰레드를 생성하는 이유는 클라이언트에게 효율적으로 웹 페이지를 제공하고, 서버의 부하를 막기 위함이다.

 이로써 통신 객체를 가진 쓰레드가 만들어진다.

* 쓰레드 : 여러가지 작업을 동시에 수행할 수 있도록 복제(나눈)한 것

 

 4) Container가 Servlet을 호출한다. 

 

 5) 호출된 Servlet의 작업을 담당하는 쓰레드(3에서 생성된 쓰레드)는 로직이 정의된 doPost() 및 doGet() 메소드를 호출한다. 이 두 메소드는 Servlet class에 정의되어있다.

 

 6) 호출한 메소드의 로직을 컴파일한 후 생성된 동적 페이지를 (3)번 에서 생성했던 httpServletResponse객체에 담아 Web Container에게 넘겨준다.

 

 7) Web Container는 전달받은 response 객체를 HTTPResponse 형태로 바꿔 웹 서버로 전송함과 동시에 생성했던 쓰레드와 httpServletRequest, httpServletResponse 객체를 종료 및 소멸시킨다.

 (HTTPResponse는 Web Server에서 Client 로의 응답 객체이다.)

 

 8) Web Server는 전송받은 HTTPResponse 객체를 HTTP 통신을 통해 클라이언트에게 전송하여 화면을 출력시킨다.

4. 예제 및 실습 (eclipes EE, tomcat 7.0)

 4.1) Dynamic Web Project 생성(web.xml 체크)

New - Dynamic Web Project
web.xml Check

 4.2) Servlet 생성

  - Package, class 이름을 입력.

  - class이름의 첫글자는 대문자로 입력.

create Servlet

 

 4.3) Servlet 코드 입력(test1.java)

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
41
package one;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
/**
 * Servlet implementation class Two
 */
@WebServlet("/Two")
public class Two extends HttpServlet {
    private static final long serialVersionUID = 1L;
       
    /**
     * @see HttpServlet#HttpServlet()
     */
    public Two() {
        super();
        // TODO Auto-generated constructor stub
    }
    /**
     * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
     */
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        // TODO Auto-generated method stub
        response.getWriter().append("Served at: ").append(request.getContextPath());
        PrintWriter out = response.getWriter();
        out.println("<html>"+"<body>"+"<h2>Hello World</h2>"+"</body>"+"</html>");
        
    }
    /**
     * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
     */
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        // TODO Auto-generated method stub
        doGet(request, response);
    }
}
 
 
 

 

4.4) web.xml 코드 입력

 <servlet-name> 태그에는 프로젝트의 이름을, servlet-class에는 클래스의 주소(Package.class형식)를 입력.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<?xml version="1.0" encoding="UTF-8"?>
  <display-name>test1</display-name>
  <welcome-file-list>
    <welcome-file>index.html</welcome-file>
    <welcome-file>index.htm</welcome-file>
    <welcome-file>index.jsp</welcome-file>
    <welcome-file>default.html</welcome-file>
    <welcome-file>default.htm</welcome-file>
    <welcome-file>default.jsp</welcome-file>
  </welcome-file-list>
  
  <servlet>
      <servlet-name>test1</servlet-name>
      <servlet-class>one.Two</servlet-class>
  </servlet>
</web-app>
 

5. 실행화면

Servlet에 들어있던 HTML 코드

 URL의 끝이 test1이 아니라 Servlet 명인 Two를 추가적으로 입력해야한다.

 URL 설정은 해당 Servlet 파일 또는 web.xml 파일 내에서 가능하다.

 

 페이지에 Servlet에서 정의한 로직이 출력되면 성공한 것이며, 이렇게 eclipse, tomcat을 사용한 Servlet 실습을 마치도록 하겠다.

반응형

'백엔드 > Spring' 카테고리의 다른 글

@RunWith, @ContextConfiguration 어노테이션  (0) 2021.01.21
[Spring] web.xml 이란? / 예제  (3) 2020.12.21
[Spring] log4j2 사용법, 로그남기기, 파일 저장  (0) 2019.12.03
[Spring] logging의 개념, Log4j 설치 및 설정, 예제  (0) 2019.08.07
[Spring] 스프링이란? 정의, 구조, 용어  (1) 2019.08.02
반응형

목차

1. 개요

2. 스프링이란?

3. POJO란?

4. MVC 패턴이란?

5. MVC 패턴 구조

 

1. 개요

 대부분 웹 개발자들은 JAVA를 사용한다. 많은 기능과 메소드를 제공할 뿐 아니라 분업에 최적회된 OOP 구조이기 때문이다. 하지만 그만큼 복잡하고 어렵고 무겁다. 이러한 무겁고 어려운 웹 개발을 보다 쉽게 하기 위해 등장한 프레임워크가 바로 스프링이다.

2. 스프링이란?

 Java EE의 복잡하고 어려운 사용을 단순화시킨 프레임워크이다. POJO 기반이며, MVC 패턴을 사용한다.

3. POJO란?

 POJO란 Plain Old Java Object의 약자로 그대로 해석하면 (보거나 이해하기)분명한 오래된 자바 객체라는 뜻이다.

 프로그래밍적 용어로 해석하면 복잡하고 어려운 Java라는 녀석을 이해하기 쉽고 가볍게 가공한 것이다.

 Java EE와 같은 기존의 "무거운" 객체를 만들게 된 것에 반발해서 사용되게 된 용어라고 한다.

4. MVC 패턴이란?

 MVC 패턴은 Model, View, Controller의 약자로 각각은 다음의 의미를 갖는다.

약자 원형 의미
M Model 데이터 및 데이터베이스와 관련된 비지니스 로직을 처리하거나 이를 조회, 조작하는 부분 
V View 유저 인터페이스를 정의하는 부분
C Controller 분업된 비지니스 로직 및 DB접근을 효율적으로 관리하고, View와 Model의 연결단 부분

Controller의 '연결단' 이라는 표현이 조금 모호할 수 있으나 MVC패턴의 구조를 보면 이해할 수 있을 것이다.

5. MVC 패턴 구조

 1) Client에서 URL(데이터)을 요청한다.

 

 2) Dispatcher Servlet은 적절한 Controller에게 요청을 전달해야 한다. 이는 Handler Mapping을 이용하여 처리한다.

 

 3) Controller는 board, user, menu 등 하나의 큰 작업단위이다. 그 작업단위를 세분화 시킨 것이 Service인데 앞서 말한것 처럼 Handler Mapping을 이용하여 전달받은 내용을 적절한 Service에게 전달한다.

 

 4) Service는 비지니스 로직을 실행하며 DB에 대한 접근이 필요할 시 DAO라는 ConnectionPool 객체를 호출한다.

 

 5) VO(Value Object)는 DTO(Data Transfer Object)라고도 하며 SQL 쿼리문 담아 DB를 조회, 조작할수 있다.

 

 6) DB 접근을 마치면 결과가 출력되는데 이를 View(.jsp)와 결합한 형태로 Controller에게 다시 전달한다.

 

 7) Dispatcher Servlet에게 위의 정보가 다시 전달되며 이는 View에 접근하여 완성된 View의 정보를 사용자에게 response한다. 단, 회원가입 및 정보 수정 같이 보안상 보여줄 필요가 없는 부분은 다른 View로 대체 가능하다.

 

그렇다면 앞서 말한 연결단은 Model과 View를 연결시키는 의미를 말하며 아래와 같이 정리가 가능하다

 

Controller = 'Model과정을 거친 데이터'+'View'

반응형

'백엔드 > Spring' 카테고리의 다른 글

@RunWith, @ContextConfiguration 어노테이션  (0) 2021.01.21
[Spring] web.xml 이란? / 예제  (3) 2020.12.21
[Spring] log4j2 사용법, 로그남기기, 파일 저장  (0) 2019.12.03
[Spring] logging의 개념, Log4j 설치 및 설정, 예제  (0) 2019.08.07
[Spring] Servlet 개념, 동작 구조, 예제 및 실습  (1) 2019.08.05
반응형

목차

1. 개요

2. important

3. 예제 및 실행 화면

1. 개요

 css의 속성 중 !important가 있다. 단어의 뜻처럼 굉장히 중요해보이기에 포스팅을 한다.

2. !important

 !important는 말 뜻 그대로 '중요한 속성' 을 의미하고, 해당 속성이 변경되지 않도록 하는 역할을 한다.

 만약 변경하고 싶다면 똑같이 속성에 !important 속성을 삽입해주면 된다.

 

3. 예제 및 실행 화면

3.1) 예제 1

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title>?</title>
        <style>
            p{
                background-color : red !important;
                float : left;                    
            }
 
            p{
                background-color : blue;
                float : left
            }
        </style>
    </head>
    <body>
        <p>!important</p>
    </body>
</html>
 

 7번 라인과 12번 라인에 <p> 태그의 css를 정의하였다.

 !important 속성이 없다면 <p> 태그의 내용은 12번

 라인에 의해 파란색이 되어야 하지만

 !important 속성에 의해 수정이 되지 않는 것을 확인할 수 있다.

 

실행 화면 1

 

3.2) 예제 2

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
<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title>?</title>
        <style>
            p{
                background-color : red !important;
                float : left;                    
            }
 
            p{
                background-color : blue;
                float : left
            }
 
            p{
                background-color : green !important;
                float : left
            }
        </style>
    </head>
    <body>
        <p>!important</p>
    </body>
</html>

17번 라인에 !important 속성을 삽입하였더니 <p> 태그의 내용의 배경색이 바뀐것을 확인할 수 있다.

실행 화면 2

 

반응형

'프론트엔드 > CSS' 카테고리의 다른 글

[CSS] Table 셀 테두리 사이 간격 없애기 / border-collapse : collapse;  (0) 2021.06.10
CSS의 등장배경  (0) 2019.06.19
반응형

목차

1. 개요

2. 예제

3. 실행 화면

1. 개요

 기본적인 css문법과 JQuery 문법의 간단한 사용법을 복습하기 위해 li태그 클릭 시 글자색과 배경색이 바뀌도록 하는 예제를 작성해보았다.

2. 예제

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
<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8'>
    <title>?</title>
    <style>
        ul{
            float:left;
            list-style: none;
        }
        .change_back{
            background-color: red;
            color:white;
        }
    </style>
</head>
<body>
    <ul class = 'lang_list'>
        <li>HTML</li>
        <li>CSS</li>
        <li>bootstrap</li>
        <li>Javascript</li>
        <li>JQuery</li>
    </ul>
    <script>
        $('ul.lang_list li').click(function(){
            $(this).addClass('change_back');
        });
    </script>
</body>
</html>

 css를 적용시키려면 <style>태그를 사용해야 한다.

 css를 적용시키려는 대상에 따라 그 문법이 약간 달라진다.

 

1) 대상이 태그(< >)일 경우

 태그명{

      속성 : 속성값;

 }

 

 2) 대상이 클래스일 경우

 .클래스명{

     속성 : 속성값;

 }

 

 3) 대상이 태그의 클래스일 경우

 태그명.클래스명{

     속성 : 속성값;

 }

 

 4) 태그의 클래스의 태그일 경우

 태그명.클래스명 태그명{

     속성 : 속성값;

 }

 

 클래스는 하나의 객체이기 때문에 .을 붙이는 것이라고 생각하면 편하다.

 

 7번 라인은 ul에 대한 css를, 11번 라인은 change_back 클래스에 대한 css를 정의하였다.

 

 19번 라인에 ul의 class를 lang_list로 정의하였고

 

 27번 라인에 ul 태그 중 lang_list라는 클래스를 찾고 해당클래스의 li 태그를 클릭하면, 클릭한 li 태그에 대한 클래스를 change_back으로 정의하였다.

 

 11번 라인에 change_back은 배경을 빨간색, 색을 흰색으로 만드는 것으로 정의하였기 때문에 그에 맞게 색이 변하게 된다.

 

 그 외 사용한 속성은 아래와 같다

속성 설명
float : left 공백을 제거하고 좌측정렬
list-style : none <li> 태그의 기호를 제거
background-color 배경색
color 글자색

 

3. 실행 화면

click event

 

반응형

'프론트엔드 > Jquery' 카테고리의 다른 글

[JQuery] $('document').ready(function(){}) 을 쓰는 이유  (2) 2019.07.22
[JQuery] click 이벤트 사용하기  (0) 2019.07.22
[JQuery] JQuery의 정의, 사용법, CDN, 문법, 예제  (0) 2019.07.19
반응형

목차

1. 개요

2. __proto__

3. 정리

1. 개요

prototype에 대한 내용이 생각보다 많아 내용을 정리해나가며 공부를 하고 있다.

지금까지의 내용을 다시 정리하면

 

 1) 함수가 정의되면 prototype을 참조 가능한 prototype 프로퍼티, __proto__ 메서드가 생성된다.

 2) prototype은 constructor(생성자)를 참조 가능하다.

 3) 함수의 생성자로 생성되는 객체들이 prototype 객체를 상속받는다.

 4) prototype의 내용을 변경하면 생성자로 생성된 객체는 변경된 내용을 상속받게 된다. (당연한 얘기)

 5) prototype 객체를 참조하는 것은 생성한 객체의 __proto__ 메서드이다.

 

function - __proto__ - prototype 간의 관계


 

 그렇다면 __proto__에 대해 알아보도록 하자.

2. __proto__

 __proto__란 prototype link라고 불리며 객체가 생성될 때 조상이었던 함수의 prototype 객체를 가리킨다.

 

간단한 실험을 통해 알아보자

 

 1) function a(){} - 함수를 생성한다.

 2) a.prototype.a_val = 1; - 해당 함수의 prototype 객체에 a_val = 1이라는 값을 추가한다.

 3) b = new a(); - 생성자를 통해 b라는 객체를 생성한다.

 4) b.__proto__를 확인한다!

 5) __proto__에는 조상 함수의 prototype 객체인 a.prototype을 나타낸다.

 6) 이러한 관계를 b가 a를 상속받았다고 한다. 왜냐고? b.a_val를 출력하면 1이 나오니까!

b.__proto__ 객체

 

b를 출력하면 알 수 있겠지만 b객체 자체는 a_val를 가지고 있지 않는다.

__proto__ 객체밖에 없다. 바로 이 객체가 a_val 속성을 찾을 때까지 조상 prototype을 참조해나간다!

b 객체

최상위인 Object의 prototype 객체까지 찾지 못했을 경우 undefined를 리턴한다.

이렇게 __proto__ 속성을 통해 상위 프로토타입과 연결되어있는 형태를 prototype Chain이라고 한다.

3. 정리

 1) 함수가 정의되면 메모리에 함수와 생성자를 생성할 수 있는 prototype 객체가 생성된다.

 

 

 2) 함수에는 prototype 객체를 참조 가능한 prototype 프로퍼티와 __proto__ 객체가 생성된다. 

 

 3) 1)에서 생성된 prototype 객체 안에는 constructor 프로퍼티가 있고 이는 자신을 생성한 생성자 함수를 가리킨다.

 

 4) 함수의 생성자(new)로 생성되는 객체들은 __proto__ 객체를 상속받는다.

 

 5) __proto__ 객체는 자신의 조상 prototype 객체를 가리킨다.

 

 6) 상속된다.

 

 이 정리가 이해가 가지 않는다면 __proto__ 실험 과정과 맨 위의 그림을 번갈아가며 과정을 따라가다 보면 prototype, 즉 상속의 원리와 과정을 이해할 수 있을 것이다. 

 

 이로써 prototype을 마무리하도록 하겠다.

반응형

'프론트엔드 > Javascript' 카테고리의 다른 글

[Javascript] 객체 생성 , 조회, 수정, 추가, 삭제  (0) 2019.08.11
[Javascript] 정규 표현식(Regular expression), 정규식 패턴, 사용법, 날짜 차이 구하기 예제  (0) 2019.08.09
[JavaScript] 상속, Prototype, 함수 및 생성자 (2)  (0) 2019.07.19
[JavaScript] 상속, Prototype, 함수 및 생성자 (1)  (0) 2019.07.18
[Javascript] 모듈의 정의, 장점 및 예제  (0) 2019.07.01
반응형

목차

1. $('document').ready(function){} 란?

2. 예제 및 실행화면

 

1. $('document').ready(function){} 란?

 결론부터 말씀드리자면 'html문서의 로딩이 다 끝나면' 을 의미합니다.

 

 문장을 해석해보면 'document'라는 객체의 준비가 끝나면 즉, 로드가 완료되면 함수를 실행한다' 입니다.

 여기서 document는 하나의 html 파일을 나타내는 트리의 루트 노드 객체라고 생각하시면 편할 것 같습니다.

 

HTML DOM Tree (출처 - W3C)

 

 그렇다면 이 코드는 왜 있는것일까요? 예제를 통해 알아보면 이해가 쉽습니다.

 

2. 예제 및 실행화면

 2.1) 예제 1

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8'>
    <title>$('document').ready(function(){})</title>
</head>
<body>
    <script>
        $('p').click(function(){
            $(this).hide();
        })    
    </script>
    <p>
        $('document').ready(function(){})을 쓰는 이유를 알고싶다면 클릭하세요!
    </p>
</body>
</html>

위의 예제는 p 태그를 클릭할 시 this 즉, 해당 p 태그를 hide 시키는 것입니다.

 

 2.2) 실행화면 1

 실행화면_1

실행 결과, 클릭을 해도 <p>태그의 내용이 사라지질 않습니다.

이유는 컴파일과 관련이 있습니다.

컴파일은 일반적으로 위에서 아래방향으로 이루어지는데, <p>태그가 나오기 전에 script문이 호출되었기 때문에 결과적으로 JQuery문법이 p태그를 찾지 못했고, 쿼리에 대한 함수 또한 적용시키지 못했습니다.

 

그렇다면 script문을 아래로 옮겨보겠습니다.

 2.3) 예제 2

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8'>
    <title>$('document').ready(function(){})</title>
</head>
<body>
    
    <p>
        $('document').ready(function(){})을 쓰는 이유를 알고싶다면 클릭하세요!
    </p>
    <script>
        $('p').click(function(){
            $(this).hide();
        })    
    </script>
</body>
</html>

 script문이 </body> 바로 위에 위치합니다.

 

 2.4) 실행화면 2

실행화면_2

 <p> 태그에 해당하는 부분을 클릭하니 오른쪽 사진과 같이 텍스트가 사라진 것을 볼 수 있습니다.

 

 예제 1과 다르게 script문이 <p> 태그 아래 있기때문에 JQuery 문법이 p라는 태그를 찾을 수 있고 함수를 적용시킬 수 있습니다.

 

 HTML은 기본적으로 위에서 아래로 컴파일이 됩니다.

 컴파일러가 script문을 만날 경우 로드되던 HTML 작업이 중단되고 script문을 처리합니다.

 만약 script문이 길다면 페이지 로드가 중단되는 시간이 길어지고, 사용자가 웹페이지를 기다리는 시간이 길어집니다.

 

예를들어 눈에보이는 정보가 HTML이고 기능을 입히는 것이 script라고 한다면

1) 사용자에게 보이는 HTML 로드 -> script문 로드

2) 사용자에게 안보이는 script문 로드 -> 사용자에게 보이는 HTML 로드

이 둘 중 1번 상황이 웹 정보를 사용자가 먼저 파악할 수 있기 때문에 효율적이라는 것을 알 수 있습니다.

 

 이 외에도 여러가지 이유때문에 script문을 </body>태그 바로 위에 위치시키는 것을 선호한다고 합니다.

 

 하지만 예제 1처럼 script문이 위에 위치하더라고 페이지 로드가 끝난 후 script문을 실행시키도록 하는 코드가 있습니다. 그게 바로 오늘의 주제인 $('document').ready(function){}입니다.

 2.5) 예제 3

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8'>
    <title>$('document').ready(function(){})</title>
</head>
<body>
    <script>
        $('document').ready(function(){
            $('p').click(function(){
                $(this).hide();
            })
        })    
    </script>
    <p>
        $('document').ready(function(){})을 쓰는 이유를 알고싶다면 클릭하세요!
    </p>
</body>
</html>

작성했었던 script문을 $('document').ready(function){} 코드 안에 넣어줬습니다.

이로써 위의 script문은 HTML 코드에 대한 페이지 로드가 끝난 후 실행이 되고, <p> 태그를 찾아 함수를 적용시킬 수 있습니다.

 

2.6) 실행화면 3

실행화면_3

 실행화면_2와 동일한 결과를 출력합니다.

반응형

'프론트엔드 > Jquery' 카테고리의 다른 글

[JQuery] <li> 클릭 이벤트 - css와 JQuery 기본 문법 사용  (0) 2019.07.24
[JQuery] click 이벤트 사용하기  (0) 2019.07.22
[JQuery] JQuery의 정의, 사용법, CDN, 문법, 예제  (0) 2019.07.19
반응형

목차

1. 개요

2. 사전 정보

3. 예제

4. 실행화면

1. 개요

 jQuery의 click 이벤트를 사용하여 어떤 태그를 클릭시 클릭했다는 것을 알 수 있게 색을 입히는 기능을 구현해보았다.

2. 사전 정보

 2.1) css 문법

  - id에 css 적용하기

   #id{ 속성 : 속성값; }

  

  - id의 태그에 css 적용하기

   #id tag{ 속성 : 속성값; }

 

  - id의 클래스에 css 적용하기

   #id .class{ 속성 : 속성값; }

 

 2.2) cursor 속성

  - css 속성 중 하나인 cursor은 지점에 커서를 이동시켰을 경우 나타나는 커서의 모양을 지정하는 속성이다.

속성값 설명
default 기본
crosshair 십자가 표시
pointer 손가락 표시
help 물음표
wait 초시계

 

 2.3) float 속성

  - css 속성 중 하나인 '뜨다' 라는 의미를 가진 float는 '머리만 떠있는 것 같다' 처럼 어떤 내용의 content만 떠있고 나머지 여백은 없애는 속성이다.(약 뇌피셜) 

속성값 설명
left 왼쪽 정렬
right 오른쪽 정렬

 

3. 예제

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
41
42
43
44
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>click event</title>
        
        <style>
            #navigation li{
                list-style: none;
                float:left;
                padding:10px;
                border: 3px bisque inset;
            }
            #navigation{
                cursor:pointer;
            }
            #navigation .selected{
                background-color:red;
                color:white;
            }
            #id
 
            #id .class{
                background-color: red;
            }
        </style>
    </head>
    <body>
            
        <ul id="navigation">
            <li>1번 list</li>
            <li>2번 list</li>
            <li>3번 list</li>
            <li>4번 list</li>
        </ul>
        <script>
                $('#navigation li').click(function(){
                    $('#navigation li').removeClass('selected');
                    $(this).addClass('selected')
                })
        </script>
    </body>
</html>

 6번 라인.

  CDN 방식으로 jquery를 로드한다.

 

 7번 라인.

  navigation의 li 태그

  - list-style:none - 기본값인 ' · ' 을 없애기 위한 속성

  - float:left - 아래로 정렬되어야 할 li 속성이지만 공백을 제거하여 li속성 옆에 바로 li속성이 붙도록 하고 왼쪽정렬 시킴

  - padding:10px - 태그와 텍스트 사이의 여백

  - border - 테두리 설정

 

 15번 라인. 

  - cursor:pointer 커서를 댈 시 손가락 모양

 

 38번 라인.

  $('#navigation li').click(function(){내용} - 아이디가 navigation인 태그의 li 태그를 클릭 시 함수를 실행한다.

  $('#navigation li').removeClass('selected') - 아이디가 navigation인 태그의 li에서 'selected' 클래스를 제거한다.

  $(this).addClass('selected') - 클릭한 태그에 selected라는 클래스를 넣어준다.

4. 실행화면

1번 클릭시
2번 클릭시
3번 클릭시

 

반응형

'프론트엔드 > Jquery' 카테고리의 다른 글

[JQuery] <li> 클릭 이벤트 - css와 JQuery 기본 문법 사용  (0) 2019.07.24
[JQuery] $('document').ready(function(){}) 을 쓰는 이유  (2) 2019.07.22
[JQuery] JQuery의 정의, 사용법, CDN, 문법, 예제  (0) 2019.07.19

+ Recent posts

티스토리툴바