■쿠키 (Cookie) 

▶. 쿠키는 [웹 브라우저가 보관하고 있는 데이터]로서 [웹 서버에 요청]을 보낼 때 함께 전송된다.

세션이 아닌 쿠키를 사용하는 이유:세션은 서버에 저장되고, 서버자원을 사용하기 때문에 
사용자가 많을 경우 소모되는 자원이 상당하다. 이러한 자원관리 차원에서 쿠키와 세션을 
적절한 요소 및 기능에 병행 사용하여,서버 자원의 낭비를 방지하며 웹사이트의 속도를 
높일 수 있다.

▶.쿠키의 동작 순서★★★★★★★★★★

클라이언트가 페이지를 요청한다. (사용자가 웹사이트 접근)
웹 서버는 쿠키를 생성한다.
생성한 쿠키에 정보를 담아 HTTP 화면을 돌려줄 때,
같이 클라이언트에게 돌려준다.
넘겨 받은 쿠키는 클라이언트가 가지고 있다가(로컬 PC에 저장)
다시 서버에 요청할 때 요청과 함께 쿠키를 전송한다.
동일 사이트 재방문시 클라이언트의 PC에 해당 쿠키가 있는 경우,
요청 페이지와 함께 쿠키를 전송한다.

1) 쿠키 생성 : 웹서버 ==> 브라우저(쿠키 저장소) : response.addCookie(new Cookie(name,value)); 
2) 쿠키 저장 : 브라우저의 [쿠키 저장소]에 저장처리 
3) 쿠키 전송 : [브라우저]==> [웹서버] (요청객체를 통해서전달) : request.getCookies();


▶.사용 예시

방문했던 사이트에 다시 방문 하였을 때 [아이디와 비밀번호 자동 입력]
[팝업창을 통해 "오늘 이 창을 다시 보지 않기" 체크]
[장바구니]

▶. 특징 (세션과비교) 
저장위치 : 클라이언트(접속자 pc) 
저장형식: text 
만료시점 : 쿠키 저장시 설정 (브라우저가 종료되어도 만료시점이 지나지 않으면 자동삭제 안됌)
사용하는 자원: 클라이언트 리소스 
용량제한 : 총 300개/하나의 도메인당 20개/ 하나의 쿠키당 4kb
속도: 세션보다 빠름
보안: 세션보다 좋지않음 

▶. 쿠키의 구성
1) 구성요소
- ★[이름]: 각각의 쿠키를 구별하는 데 사용되는 이름
- ★[값 ]: 쿠키의 이름과 관련된 값
- ★[유효시간] : 쿠키의 유지 시간
- ★[도메인] : 쿠키를 전송할 도메인
- ★[경로] : 쿠키를 전송할 요청 경로

2) 쿠키 이름의 제약(특수문자와 한글 처리)
- 쿠키의 이름은 [아스키 코드의 알파벳과 숫자만을 포함]할 수 있다.
- [콤마, 세미콜롬, 공백 등의 문자는 포함할 수 없다].
- [$로 시작]할 수 없다.
==> encoding 처리를 하여야 한다.

3) 쿠키의 encoding과 decoding처리..
한글과 같은 문자을 처리할 때
저장시 encoding으로 저장하고, 
불러올 시 decoding으로 불러와야 된다.
Encoding 처리 : URLEncoder.encoder("한글데이터", "utf-8");
Decoding 처리 : URLDecoder.decoder("한글데이터", "utf-8");


▶.쿠키값의 삭제
1) 쿠키값은 일단 [서버와 클라이언트가 끊어지면] 사라진다.
서버가★ 재기동 또는 클라이언트의 ★브라우저를 다 닫으면 서버와 연결이 끊어진다.
2) 클라이언트 프로그램으로 삭제할 수 있지만, jsp는 서버프로그램으로 삭제 하여야 하므로
해당 쿠키를 다시 client로 보내기 전에 ★유효시간을 0로 설정하여 response객체로 
전달하여 삭제 브라우저의 저장 위치에서 삭제되게 한다.
ex) ck.setMaxAge(0);
response.addCookie(ck);

 

출처: 쌍용교육센터 교육자료 ,
출처: https://hahahoho5915.tistory.com/32 [넌 잘하고 있어]

'2. 웹' 카테고리의 다른 글

[SQL] 기본 문제풀이 (IS NULL,IS NOT NULL)  (0) 2021.08.23
[JSP]세션 시간 변경하기(Session Timeout)  (0) 2021.08.21
[JQUERY] jquery이용하여 버튼 클릭 시 문서 바꾸기  (0) 2021.08.18
[JSP]DB연결하여 성적리스트 뽑기  (0) 2021.08.16
[jquery] Jquery를 왜 사용하는가?  (0) 2021.08.14

 

출처: https://youngjinmo.github.io/2020/04/change-value-by-javascript/

 

JS로 텍스트 값을 바꾸는 2가지 방법

오늘 면접을 한 곳 보고왔는데, 이 때 받은 손코딩 문제중에 하나를 기억하고자 남기려고 한다. 사실 코딩 테스트라고 하기엔 좀 쉬운 문제였는데, 긴장을 해서인지 이것조차 못풀고온게 찝찝해

youngjinmo.github.io

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script type="text/javascript">
	// document : DOM객체들이 포함한 문서객체 (body에 있는 객체들)
	// .ready() : 준비가 되면 즉, 로딩이 되면
	// function(){} : 호출할 익명함수..
	$(document).ready( function(){
		// $("선택자").text("출력할 문자열");
		$('h2').text("jquery 시작");
			
	});
	
	$(document).ready( function(){
		// $("선택자").text("출력할 문자열");
		$("h3").text("jquery 시작2");
			
	});
	
	
	$(document).ready( function(){
	$("#jqueryBtn").click(function(){
		  $(".quiz-text").text("Javascript");
		  $(".quiz-text").css('color', 'blue');
		});
	});
	
	$(document).ready( function(){
	$("#change00").click(function() {
		$('.change01').text("바뀌기후1");
		$('.change02').text("바끼기후2");
	});
	});
	
	$(document).ready( function(){
		$("#change01").click(function() {
			$('.change01').text("바뀌기전1");
			$('.change02').text("바끼기전2");
		});
		});
	
</script>
</head>
<body>
	<h2></h2>
	<h3></h3>
	<button type = "button" id= "change00">change</button> <button type = "button" id= "change01">return</button> 
	<h4 class = "change01">바뀌기전1</h4>
	<h4 class = "change02">바뀌기전2</h4>
	
    <p>
      당신이 공부하는 언어는 <span class="quiz-text">Java</span>입니까?
    </p>
    <button id="jqueryBtn" type="button" id="changeByjQuery()">Run by jQuery</button>
  
  </body>
</html>

버튼클릭 전 
버튼 클릭 후 

 

'2. 웹' 카테고리의 다른 글

[JSP]세션 시간 변경하기(Session Timeout)  (0) 2021.08.21
[JSP] Cookie의 생성 및 저장, 삭제, 이동경로 알아보기 (이론만)  (0) 2021.08.19
[JSP]DB연결하여 성적리스트 뽑기  (0) 2021.08.16
[jquery] Jquery를 왜 사용하는가?  (0) 2021.08.14
[Jquery] 선택자와 Filter 사용법  (0) 2021.08.14

 

오늘은 다소 직관적인 방법으로 정리해봤다.
ppt로 정리하면서 메서드, 데이터, 화면의 흐름을 읽는게 
공부하는데 훨씬 도움이 많이된다.



<DB연결하여 화면구현하기!>

1. Student SQL테이블 생성 

2. 변수명을 맞추어 VO class 생성 

3. DAO 클래스 생성 (java)  ****** DAO클래스에는 속성, 메서드, 생성자가있다.

4. jsp화면에서 DAO를 객체로 만들어 접근자 생성 

5. 접근자를 통해 데이터를 가져와 for each 구문활용하여 데이터할당 

질문하며 깨닫게 된
주요포인트 (개인적 발전을 위한)

 

1. 왜 dao.getStudent(); 라는 식으로 메서드 자체를 사용하여 데이터를 끌어오는가? 라는 질문 

==> jsp 화면에서 ArrayList타입으로 <Student>변수를 담아준 후 , 이름은 emplist로 설정해준 후, 

dao.getStudent()메서드의 결과값을 넣어주고 dao.getStudent() 라는 직접인용말고 emplist를 그자리에 대입해주었더니

같은 결과값이 나왔다. 이것은 사용하는사람의 편의에 따라 다른것

(어떤 것이 효율적인지는 개인의 판단일 것 같아요)

2. tot = 0; 은 왜 for구문 위에 사용하는가?

for()구문 내에 사용하면, for 구문 내에서만 유효하므로, 다시 for구문이 시작될때 새로생성되는 tr에서는 초기값으로 변한다. 그렇기 때문에 한번 회전한 후에 평균점수가 [누적처리] 되게 하기위해서  for구문 바깥에 작성한다. 

3. emplist.size()를 사용하여 tot를 나눠주는이유 

ArrayList에서 size()메서드의 의미는 배열의 갯수를 말한다. 그러므로 배열의 갯수는 학생의 수를 의미한다. 

tot : 학생들의 평균값이 누적으로 담긴 값 

emplist.size(): 학생 수 

이므로 전체 평균점수가 나오겠죠. 

3. for each 구문

왜인지, for each구문은 아직도 헷갈리는데,

for( 타입명  접근자.객체명) {

접근자.get***() 

} 

방식으로 데이터를 할당 및 호출해주어야 함

'2. 웹' 카테고리의 다른 글

[JSP] Cookie의 생성 및 저장, 삭제, 이동경로 알아보기 (이론만)  (0) 2021.08.19
[JQUERY] jquery이용하여 버튼 클릭 시 문서 바꾸기  (0) 2021.08.18
[jquery] Jquery를 왜 사용하는가?  (0) 2021.08.14
[Jquery] 선택자와 Filter 사용법  (0) 2021.08.14
홀로코스트와 현대성_지그만트 바우만  (0) 2018.11.25
1. jquery 는 왜 사용할까?

웹사이트를 만들 때, 각각의 웹 페이지들은 HTML, CSS, 자바스크립트 등을 이용해서 만들어집니다. HTML은 정적인(static) 웹 페이지를 만들 때 사용됩니다. CSS는 여기에 디자인을 더해주고, 자바스크립트는 어떤 변화를 다이내믹하게 반영하는 등 웹 페이지에 역동적인 효과를 낼 수 있게 해줍니다. 라이브러리(Library)라는 것은 웹 페이지를 보다 쉽게 만들 수 있는 여러 가지 기능들을 모아놓은 것입니다. 이 글에서는 이를 모두 통틀어서, 자바스크립트 라이브러리라고 부르겠습니다.

제이쿼리는 작고 빠른 자바스크립트 라이브러리입니다. 제이쿼리에는 아주 많은 기능들이 있는데요. 이는 HTML 문서의 탐색과 조작, 애니메이션, 이벤트 처리 그리고 에이잭스(Ajax)활용을 쉽게 만들어줍니다. 그리고 여러 다양한 브라우저에서도 동작하며, 사용하기 쉬운 API를 가지고 있죠. 제이쿼리는 그 뛰어난 기능으로 인해 자바 스크립트를 작성하는 방식을 아주 간단하게 바꾸어 놓았습니다. 자바스크립트를 사용해서 얻을 수 있는 결과를, 제이쿼리를 사용해서 똑같이 만들어 낼 수 있다는 뜻인데요. 그것도 훨씬 더 간단하면서도 복잡하지 않은 방식을 사용합니다.

​

제이쿼리(JQUERY)는 어떻게 쉽게 동작할까?

제이쿼리는 ‘더 적은 노력으로 더 많이’라는 아주 멋진 모토와 함께 만들어졌습니다. 제이쿼리의 모든 기능들은 코드를 간단하게 만드는 것에 중심이 맞춰져 있기 때문에 문서를 더욱 쉽게 탐색할 수 있게 해주는데요. 구체적으로 말하자면 사용자와 HTML 코드 사이에 있는 모든 것들을 처리해 주기 때문에 HTML 코드를 굳이 복잡하게 만들지 않고도, 사용자의 클릭과 같은 다양한 이벤트를 포착할 수 있는 매우 효과적인 방법을 제공해 주는 것입니다. 제이쿼리는 문서 객체 모델(DOM) 조작과 이벤트 처리, 그리고 기본적인 모든 작업들을 단순하게 만들어줍니다.

​

​

제이쿼리(JQUERY)로 할 수 있는 모든 것!

제이쿼리를 사용하면 애니메이션을 만들 수 있고, 에이잭스(Ajax) 기반의 애플리케이션을 개발할 수도 있습니다. 그리고 개발자들로 하여금 자바스크립트 라이브러리 위에 플러그인을 만들 수 있게 해주는데요. 라이브러리는 시스템 레벨에서의 상호작용에서부터, 애니메이션, 고급 효과 그리고 고차원의 테마 위젯까지 만들 수 있는 기능들을 API 형태로 만들어 둔 것입니다. 제이쿼리 라이브러리를 모듈 방식으로 활용하면 강력한 동적 웹 페이지와 웹 애플리케이션을 만들 수 있습니다.

​

​

제이쿼리(JQUERY), 왜 사용해야 할까?

1. 웹 개발자들은 상호작용하는 웹 페이지를 만들기 위해서 DOM을 조작하는데, 에이 쿼리는 이러한 DOM 조작을 아주 쉽게 만들어줍니다. DOM은 HTML 요소들이 트리 구조(tree structure)로 정리되어 있는 것입니다.
2. 제이쿼리는 무료이며 오픈 소스 라이브러리입니다. 여기에 기여하는 커뮤니티는 그 어떤 자바스크립트 라이브러리보다도 훨씬 다양하며 규모도 큽니다.
3. 프로젝트에 쉽게 포함시킬 수 있는 무료 플러그인들만 해도 1000개가 넘습니다.
4. 다양한 브라우저를 지원합니다. 그러니까, 일반적으로 사용되는 거의 모든 브라우저를 지원한다고 보시면 됩니다.

​

제이쿼리(JQUERY)의 전망은?

제이쿼리가 가진 문제점 중 하나는 실행 명령을 처리하는 데 오랜 시간이 걸린다는 점인데요. 이런 경우에는 웹사이트가 느려지게 됩니다. 하지만 제이쿼리는 여전히 가장 많이 사용되는 자바스크립트 라이브러리들 중 하나입니다. 통계에 의하면, 자바스크립트를 사용하는 모든 웹사이트의 약 97%에서 사용하고 있다고 합니다. 다른 많은 라이브러리가 있음에도 불구하고, 제이쿼리를 꺾을만한 대안은 나오기 힘들 것으로 보입니다.

출처 :  Wishket제이쿼리(jQuery)에 대한 모든 것, 한 번에 쉽게 알아보기. - Wishket

 

그런데, jquery를 검색하다보면 
한편, jquery가 필요없어진다는 말도 나오고 있는데? 
그래서 검색하다가 잘 정리된 글을 발견! 
출처 : 김원섭 | 에스코어㈜ 소프트웨어사업부 에 따르면 

웹페이지는 브라우저상에서 돔(DOM, Document Object Model)이라는 표준 형식으로 파싱(Parsing)되어 표현됩니다. 따라서 사용자 조작에 맞춰 동적으로 변화하는 대화형 웹(Interactive Web)을 구현하기 위해서는 돔 조작이 필수적입니다. 그런데 대부분의 브라우저에서 돔 조작이 발생할 때마다 배치나 화면 표시에 많은 연산을 발생시키다 보니 조작이 빈번해질수록 브라우저 성능이 낮아지는 문제가 있었고 이는 개발자의 창의력을 저해하는 요소로 작용하였습니다. 이러한 이슈를 해결하기 위해 자바스크립트 라이브러리의 하나인 리액트(React)는 가상 돔을 채용하여 대중화시켰습니다. 리액트를 활용하면 메모리에 가상 돔을 구성하여 실제 돔과의 차이점을 비교하고 변경된 부분을 실제 돔에 적용할 수 있습니다. 이러한 방식은 성능이 뛰어나고 화려한 웹페이지를 비교적 손쉽게 제작할 수 있도록 해 개발자들에게 크게 환영받았습니다. 이후 등장한 뷰(Vue.js) 등의 프레임워크와 라이브러리도 가상 돔을 적극 채용하고 있습니다.
 
가상 돔을 사용하는 라이브러리가 많아질수록 돔을 직접 조작하는 제이쿼리의 필요성이 줄어듭니다. 스테이트 오브 자바스크립트(https://2019.stateofjs.com/ko)에서 공개한 2019년 웹 프론트엔드 프레임워크 선호도 조사 결과에 따르면 개발자들은 제이쿼리보다 리액트·뷰와 같은 가상 돔 기반의 라이브러리에 매우 긍정적인 반응을 보이는 것으로 나타났습니다.

 


-제이쿼리의 대응 전략

이 같은 웹 프론트엔드 환경의 변화에 따라 제이쿼리는 은퇴를 준비하고 있을까요? 결론부터 말하면 "아니오"입니다. 제이쿼리가 속해있는 OpenJS재단(https://openjsf.org)은 제이쿼리를 노드JS(Node.js) 등과 함께 "영향력 있는 프로젝트(Impact Projects)"로 분류하였습니다. 즉, 제이쿼리는 이미 성장 목표에 도달했으며 개발, 유지보수 및 장기 지원의 지속적인 주기를 보장하는 성숙한 프로젝트로 관리하겠다는 것입니다. 재단의 이 같은 정책 방향과 제이쿼리 차기 버전(4.x)의 마일스톤을 바탕으로 유추해보건대 제이쿼리는 급격한 변화를 시도하지 않고 일반적인 자바스크립트 환경에서 자신의 영향력을 공고히 해나가는데 주력할 것으로 예상됩니다. 이러한 대응 전략을 엿볼 수 있는 제이쿼리 차기 버전(4.x)의 주요 마일스톤은 다음과 같습니다.
 
경량화
 
자바스크립트는 컴파일(Compile)을 하지 않고 바로 실행시킬 수 있는 스크립트 언어로 파일 크기가 커질수록 전송·파싱·실행에 지연이 발생하여 페이지 초기화 성능을 떨어뜨리기 때문에 자바스크립트 라이브러리들은 용량을 줄이기 위해 노력합니다. 제이쿼리는 경량의 라이브러리로 정평이 나 있습니다. 최신 버전인 v3.5.1의 압축된(Minified) 버전은 용량이 89KB 정도이며 에이잭스(Ajax)와 애니메이션 기능이 제외된 슬림(Slim) 버전의 경우 72KB에 불과합니다.(심지어 Gzip 압축 전송 시 30KB로 줄어듭니다) 하지만 제이쿼리는 여기에 만족하지 않고 차기 버전에서 다시 한 번 경량화를 시도하고 있으며 세부 내용은 다음과 같습니다.
 
인터넷 익스플로러11 미만 버전의 지원 중단
마이크로소프트는 윈도우 서버 및 임베디드 버전을 포함하여 2020년 1월부터 인터넷 익스플로러10 이하 버전에 대한 기술지원을 완전히 종료했습니다. 이로써 인터넷 익스플로러는 현재 11 버전만 기술지원이 이루어지고 있습니다. 제이쿼리 역시 국가별 점유율을 고려하여 인터넷 익스플로러11을 제외한 다른 버전의 지원을 중단할 예정입니다. 따라서 제이쿼리 차기 버전부터는 인터넷 익스플로러10 이하용 호환 코드들이 모두 제거되며 기존에 제공되던 API 중 일부가 "Deprecated(사용을 권장하지 않음)" 처리되거나 삭제됩니다.
 
시즐(Sizzle)의 내재화
제이쿼리가 지금의 위치에 도달하는 데는 CSS 선택자 엔진(Selector Engine)인 시즐(Sizzle)의 역할이 컸습니다. 인터넷 익스플로러8 버전이 등장하기 전까지 개발자들은 엘리먼트(Element)를 찾는데 getElementById와 같은 길고 복잡한 API를 사용할 수 밖에 없었기 때문에 복잡한 돔 구조에서 엘리먼트 몇 개만 찾으려고 해도 코드가 난잡해지기 일쑤였습니다. 하지만 시즐의 경우 CSS 작성 시 흔히 사용하는 선택자(Selector)와 시즐만의 확장 선택자를 이용하여 아무리 복잡한 돔 구조라도 짧은 코드로 손쉽게 엘리먼트를 찾아낼 수 있었습니다. 제이쿼리는 1.3버전부터 시즐을 포함하여 배포하였으며 이는 사람들이 제이쿼리를 호평하는 중요한 이유가 되었습니다. 하지만 동일한 역할을 하는 querySelector API가 인터넷 익스플로러8 이후의 모든 브라우저에서 지원되기 시작하였고 CSS 표준에서 선택자에 대한 지원도 강화되면서 표준 선택자만으로도 엘리먼트 선택이 가능해져 시즐의 필요성이 점차 줄어들었습니다. 결국 OpenJS재단은 시즐의 수명이 다한 것으로 판단해 “명예 프로젝트(Emeritus Projects)”로 분류하였습니다. 이에 따라 제이쿼리는 시즐을 내재화하였으며 점진적으로 시즐만의 확장 기능을 제거하고 필수 기능만 지원하는 형태로 수정할 계획입니다.
 
브라우저 호환 기능 추가
 
제이쿼리는 특정 브라우저만 제공하는 기능을 타 브라우저에서도 사용할 수 있도록 하는 브라우저간 호환 기능을 제공하고 있습니다. 예를 들면 비동기 작업 수행을 위한 표준 기능인 Promise는 인터넷 익스플로러에서 지원하지 않지만 제이쿼리의 Deferred를 이용하면 이에 상응하는 기능 구현이 가능합니다. 제이쿼리 차기 버전은 현재 크롬만 지원하는 기능인 “신뢰할 수 있는 타입(Trusted type)”을 모든 브라우저에서 사용 가능하도록 할 계획입니다. "돔 기반 교차 사이트 스크립팅(DOM XSS)”은 가장 일반적인 웹 보안 취약성 중 하나인데 “신뢰할 수 있는 타입”은 이러한 취약성을 제거할 수 있도록 작성, 보안 검토 및 유지 관리하는 도구를 제공합니다. 앞으로 제이쿼리를 통한 돔 엘리먼트 조작 시 신뢰하는 HTML인지 확인이 가능해지는 등 보안이 한층 더 강화될 것으로 예상됩니다.
 

출처 : 제이쿼리(jQuery)를 아직도 사용하나요? 제이쿼리의 현재와 미래 : 네이버 포스트 (naver.com)

 

제이쿼리(jQuery)를 아직도 사용하나요? 제이쿼리의 현재와 미래

[BY 삼성SDS] 김원섭 | 에스코어㈜ 소프트웨어사업부 1. 들어가며웹 프론트엔드(Web Frontend) 영역에서 ...

m.post.naver.com

 

 

'2. 웹' 카테고리의 다른 글

[JQUERY] jquery이용하여 버튼 클릭 시 문서 바꾸기  (0) 2021.08.18
[JSP]DB연결하여 성적리스트 뽑기  (0) 2021.08.16
[Jquery] 선택자와 Filter 사용법  (0) 2021.08.14
홀로코스트와 현대성_지그만트 바우만  (0) 2018.11.25
방법서설  (0) 2018.11.24 
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"
    import = "java.util.*"    
    %>
<%
	request.setCharacterEncoding("utf-8");
	String path = request.getContextPath();
%>      
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Jquery Filter</title>
<link rel="stylesheet" href="<%=path%>/a00_com/a00_com.css">
<script src="<%=path%>/a00_com/jquery-3.6.0.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
			$("h3").text("filter 관련 기능 메서드");
			$("#adr_tab01 tr").filter(":even").css("background-color","yellow"
			).end().filter(":odd").css("background-color","orange"
			).end().filter(".ck01").css("font-size","18px");	
			});
</script>
</head>
<body>
	<h3 align="center"></h3>
	<form id="frm01">
	<table id = "adr_tab01">
	<tr>
		<td>번호</td>	<td>이름</td>	<td>전화번호</td><td>주소</td><td>우편번호</td>
	</tr>
		<tr class ="ck01"><td>1</td><td>임요한</td><td>010-2020-1010</td><td>경기도 성남시 중원구</td><td>51304</td></tr>
		<tr class ="ck01"><td>2</td><td>이요한</td><td>010-2020-2010</td><td>경기도 성남시 분당구</td><td>51304</td></tr>
		<tr><td>3</td><td>백지영</td><td>010-2020-3010</td><td>경기도 성남시 중원구</td><td>51304</td></tr>
		<tr><td>4</td><td>성윤정</td><td>010-2020-4010</td><td>경기도 성남시 수정구</td><td>51304</td></tr>
		<tr class ="ck02"><td>5</td><td>홍길동</td><td>010-2020-5010</td><td>경기도 성남시 중원구</td><td>51304</td></tr>
	
	</table>
	</form>
	
</body>
</html>

자~ 푹 쉬고 왔어욧!

이번시간에는 JQuery 활용을 위한 몸풀기 단계, Filter 사용법 알아봅시다. 

 

 

Filter란 왜 사용하는 것일까? 

화면에 사용자가 원하는 데이터를 뽑아 준다할지라도, 우리는 "그 중에" "더 중요한 데이터를 강조"하기 위해서

강조표현을 해주어야 하는 경우가 많습니다. 그럴때 사용하는 것이 이 filter선택자 입니다. 

조금 더 상세하게 데이터를 "선택"할 수 있도록 도와주는 역할을 하는 것인데, 부모선택자 뿐만 아니라 하위에 있는 

데이터를 선택할 수 있도록 "Filtering" 이 필요하기 때문입니다. 

 

Filtering, 어떻게 사용할까?

 

쉽게말해 교실에서 서있는 아이들 중에, 키작은 친구 > 성이 김 인친구 > 고양시에 사는 친구순으로 더 세부적으로 

선택할 수 있도록 역할하는 기능이 filter 입니다. 위의 형식을 따져본다면 filter 기능 메서드는 이렇게 활용됩니다. 

 

1. 선택할 id / 태그 / class 를 선택하여 $() <- 괄호안에 넣어준다. 

기본 filter("선택자형식")

2. 선택자에 따른 기능메서드를 연달아 작성할 수 있다.

$("요소선택자").기능메서드1().기능메서드2().기능메서드3()

이때 중요한 개념은 

1. 기능메서드의 chainning 

: jQuery의 메소드들은 반환값으로 자기 자신을 반환해야 한다는 규칙을 가지고 있는데, 이를 이용하면 한번 선택한 대상에 대해서 연속적인 제어를 할 수 있다. 쉽게말해  키작은 친구 > 성이 김 인친구 > 고양시에 사는 친구순 으로 연속적으로 제어가 가능하다는 말이다. 

2. chaing 끊어내기 - end () 메서드

:만약 이 연속적인 제어를 끊어내고 싶다면, 다시말해  키작은 친구 > 성이 김 인친구 > 고양시에 사는 친구순이 아니라 

키작은 친구에 기능메서드 하나, 

성이 김인 친구에 기능메서드 하나, 

식으로 연속제어를 끊어주고 싶다면 end() 메서드를 사용하면 된다. 아래와 같이 #adr_tab01 열에서 홀수(:even) 값 중 css로 노란 배경색상을 입혀준 후,

선택했던 홀수 값을 제외하고 "새로" 선택하여 속성을 입히고 싶다면 .end() 메서드로 연속제어를 끊어내면 된다.

연속제어 끊어 내기 (.end() 메서드의 사용)

 

아래사진은 위 코드의 결과값이다. 

'2. 웹' 카테고리의 다른 글

[JSP]DB연결하여 성적리스트 뽑기  (0) 2021.08.16
[jquery] Jquery를 왜 사용하는가?  (0) 2021.08.14
홀로코스트와 현대성_지그만트 바우만  (0) 2018.11.25
방법서설  (0) 2018.11.24
과학과 성경의 대화 _버나드 램  (0) 2018.10.27

'왜' 써야하는지, '왜' 이런 형식으로 쓰이는지 

개발을 하면서 피해야 할 것 중 하나는 모든 것을 "다 이해하고 넘어가려고 하지마라" 는 조언이 대다수였지만,

오류를 해결하거나 문제를 맞닥트릴 경우, 조금 더 생산적으로 해결해나가기 위해서는 반드시 이해해야하는 부분이 있다. 그 중 기초가 형식이라고 생각한다. 눈으로 익히고 감으로 익히는 것 만이 방법은 아닐 것이므로 오늘에서야 조금씩 뜯어볼 여유가 생긴다. 

 

1. 시작하는 형식

 

페이지 형식에 대해 알아보자!

 

1. <%@ page> 의 형식은 무엇이고, 

contetType = "text/html; charset= UTF-8" 

pagnEncoding ="UTF-8" 

import = "java.util.*" 은 무엇인가.

 

​page 디렉티브 (지시자)

<%page%>는 jsp페이지에 들어갈 정보를 입력하기 위해서 사용되며, 이 디렉티브를 사용하면 jsp페이지가 

"어떤 문서를 생성하고"

"어떤  자바클래스를 사용하고""세션에 참여하는지""출력 버퍼의 존재여부" 등jsp가 실행됨에 있어 형식과 내용을 제한할 수있다. 

 

1. contentType

먼저 contentType은 page디렉티브의 contentType속성은 JSP페이지가 생성할 문서의 타입을 지정한다. "text/html","text/xml","text/plain" 보통의 경우 이 세가지로 많이쓰이며, "text/html" 가 기본으로 쓰인다.

2. import

import 는 말그대로 '호출'한다는 의미로, java class를 호출할때 사용된다. JSP의 페이지는 자바를 기반으로 하고있으며 자바언어가 제공하는 클래스들을 사용할수 있다. 이때 JSP페이지에서 자바의 클래스를 사용하기 위해서는 실제 자바가 있는 위치의 경로를 지정해줄 수 있으며, [.*]를 표시해준다면 패키지 내 전체를 호출하는 효과를 가진다. 

덧붙여서는 java.util 의 속성을 지닌 다양한 클래스를 불러올 수 있다. (DATE 등)

 

3.pageEncoding ( 이 부분은 이해가 잘 안가서 쉬운 설명이 어렵다. 아시는 분 계시다면 댓글 부탁드려요)

 

                                        다음은 request캐릭터 인코딩 메소드 형식에 대해 알아보자!

reqeust.setCharacterEncoding("UTF-8");
response.setCharacterEncoding("UTF-8");
response.setContentType("text/html;charset=utf-8");

1. reqeust.setCharacterEncoding("UTF-8");//전송시 사용 
: 한글을 입력하여 값을 전송할때는 한글일 경우 깨지지 않도록 처리하기위해 전달하는 방식 (get과 post방식을 모두 사용하며). 폼을 전송시 사용한다고 하면 이해가 빠르겠다.

2.response.setCharacterEncoding("UTF-8"); //출력시 사용 
'서블릿'화면에서 데이터 출력을 하기 위해서 out.println을 사용하는데 위의 코드 없이 out.print("");
로 출력한다면, ?? 이렇게 출력된다. 이것을 해결하기 위한방법이 위와같은 방법이다.

3. response.setContentType("text/html;charset=utf-8"); 
브라우저마다 문자코드를 해석하는 defult 기본값이 다르다. 그러므로 utf-8을 사용할 것이니 이걸로 사용해줘
라는 메세지를 브라우저로 전달하는 문잔ㅇ이 바로 위의 문장이다. 

 

 

경로메소드를 알아보자

request.getContextPath()는 프로젝트의 Context path명을 반환한다.

요청 : http://localhost:8080/example/test.jsp 

리턴값 : /example




request.getRequestURI()는 웹전체 경로(프로젝트명+ 파일 경로)까지 반환한다.

요청 : http://localhost:8080/example/test.jsp

리턴값 : /example/test.jsp 

 

 

출처: 

https://cbw1030.tistory.com/62

7. page 디렉티브(속성,contentType, charset, import,pageEncoding) : 네이버 블로그 (naver.com)

 

​

뭐하나 쉬운 것이 없다아

현대성과 홀로코스트 

 

1. “홀로코스트는 우연이 아니다.” 「홀로코스트와 현대성」이라는 저작을 통해 이 묵직한 이야기를 던진 지그만트 바우만은 사회과학 주변부에 있던 홀로코스트를 실천중심영역으로 끌어오길 원했다. 우리는 홀로코스트를 사실은 정상적으로 간주하고 있을지도 모른다. 인과적 신화에 젖어서 홀로코스트를 자연스러운 역사적 경향으로 환원하고 있지는 않은가? 만약 이런 태도를 가지고 있다면 우리는 홀로코스트가 가진 의미를 훼손하고 있는 것과 다름없다. 우리는 현대성이 과연 어떻게 극단적인 대량학살에 작용했는지, 어떻게 인간의 보편 도덕성을 능가할 만큼 현대성이 대량학살 과정에 작용했는가를 탐구할 것이다. 5장에서는 그 대상을 “피해자를 중심으로 설정하여 살펴본다. 현대성이 어떻게 피해자들을 스스로 희생시키도록 작용했는지 살펴본다. 그렇다면 홀로코스트가 자연스러운 역사적 경향으로 환원되지 않는 것을 어떻게 알 수 있을까?

 

2. 제노사이드와 홀로코스트를 비교해보면 홀로코스트가 일반적 특성으로 귀속되지 않는다는 것을 알 수 있다. 바로 “현대성” 때문이다. 일반적으로 제노사이드의 경우, 폭력의 대상은 소수 엘리트 집단이었다. 반면 흥미롭게도 홀로코스트는 유대인 엘리트에게 폭력이 아닌 권위를 부여했다. 살해당하는 자가 살해하는 자였다. 그 예는 ‘유대인평의회’다. 유대인 집단이었으나 유대인을 살해했다. 나치는 유대인 엘리트의 지도력을 유대인평의회 역할로 승화시켜 권위를 향상시켜주었다. 이렇게 정상적인 것처럼 보이는 관료적인 형식의 권력 구조에 지도자를 유대인 엘리트로 격상시킨 것은 무엇을 의미할까. 이는 유대인 제거를 위한 구조를 유대인이 “합리적으로 받아들일 수 있도록 하는 장치였다. 관료형식권력구조에 ‘유대인 엘리트’를 세우므로써 억압구조를 정당화시킨 것이다.

 

3. 유대인이 이 구조를 합리적으로 여기게 하는 것만으로 나치의 목적이 앞으로 나아가기엔 불충분했다. 유대인이 연대하여 저항하거나, 독일인의 도움을 받는다면 비용이 많이 들것이므로 효율적 운영을 위해 먼저 나치는 유대인을 독일인과 격리시켜 이웃과의 연대성을 파괴기로 선택한다. 당시 위생에 대한 현대 문명의 감수성을 이용하여 위생과 보건에 대한 공포심을 유발했는데, 이는 반감과 혐오를 불러일으키기 쉬운 조건이었다. 그렇게 독일인과 유대인은 현대 문명이 가지는 매체를 통한 공포심으로 분리되어 갔다. 유대인들의 출구 없는 외로움엔 지식인들의 침묵도 한 몫 했던 것으로 보인다. 그런데 그들의 침묵 역시 현대성과 관련이 있다. 독일의 대학은 가치중립적 활동으로서의 학문을 이상적으로 보았고, 도덕적 중립성이라는 원칙과 합리성의 추구에 충실했기 때문에 그들의 격리와 외로움은 완벽해졌다. 놀라운 것은 유대인의 합리성도 기여를 했다는 것이다. 연대할 이웃 없는 이들에게 결국 존재하는 건 유일한 행위자, 나치뿐이었다. 결국 가장 합리적인 것은 나치의 반응을 예측하고 이에 맞추어 행동하는 방법밖에 없었다.

 

 

4. 그런데 이 분리는 게토 내 유대인의 공동체에도 시작되었다. 어떻게 가능했을까. 사실 유대인들에게 참여를 강요한 이 게임은 죽느냐 사느냐의 문제로서 유일한 가치관은 “살아남기”로 환원됐다. “규율”을 만들어내었다. “면제나 특별대우의 자격을 갖고 있음을 증명”한다면 그들은 보통의 권리를 획득할 수 있었다. 유대인들은 유대인들 사이에서 ‘특수함’을 내세워 생존해야 했다. 그래서 서로를 다르게 여기기 시작했다. 이 권리는 모두가 소화해낼 수 있는 행위였기 때문에 집단적 특권의 이름으로, 생존전략은 개별화되고 분리되어 결국 연대의 힘은 증발되었다. 다시 말해 유대인들은 권리의 희소성을 강요당하면서 공포심에 젖어 서로 특권을 빼앗고 억압자의 환심을 사기 위해 노력했다. 보다 많은 이를 살리고자 했던 열망과 선택이었을 것이다. 그러나 이것은 규칙과 만나 오히려 서로를 구별하여 행동하게 하므로써 나치의 억압의 합리성을 얻게 하였다. 이것은 합리적인 것처럼 보였다.

 

5. 그렇다면, 학살을 선택하는 유대인 협력자들은 선택을 만들어내는 것에 있어서 현대성은 어떤 역할을 하고 있을까? 논리와 합리성의 힘이다. 유대인들은 대량학살에 가담했다. 때때로 다수의 유대인 평의회 사람들은 “죽임을 당할지언정 죽이지 마라”라는 유대인의 전통에 따라 자발적으로 죽음을 택하기로 선택하지만, 대게 지도자들은 살아남아 대부분 많은 사람들을 구하기 위해서는 일부를 희생이 필요하므로 오히려 자신의 손으로 사형선고를 할 필요가 있다고 여겼다. 그리고 그들은 자신이 그러한 일을 결정하기로 선택할 이유를 설명할 필요가 있었다. 그것을 추구한 사람들은 사실 합리적 사고의 기술을 잘 훈련받은 사람이었다. 그것을 행하는 ‘나는 누구인가’라는 보편적 질문이 불쑥 찾아올 때마다 그들은 스스로를 설득하며 합리성을 찾아야했다. 본질적 질문을 안고 사는 이라면 더 논리적이고 합리적이야 했을 것이다. 여기서 놀라운 것은 “논리”와 “합리성”이 학살자들 계획의 일부분이었다는 사실이다. 이것을 논리적으로 설명해내지 않고 포기하는 이들이 없다면 논리적으로 설명이 되는 자들로 대체했다. 그래서 이런 명언도 있다. “누군가를 죽이기 원하면 신은 그를 미치도록 만드는 것이 아니라 그를 합리적으로 만드는 것 같다”

 

6. 모든 설명이 가능해도 끝까지 남는 질문은 “어떻게 인간의 보편적 도덕성”마저 이기고 대학살이 일어날 수 있었는가?”이다. 도덕에 대한 무감각을 양산해낸 것은 도대체 무엇인가? 나치는 비합리적 상황에서도 유대인들이 합리적 행동을 하도록 만들었다. 비합리적 상황에 제도에 복종하게끔 만들고, 독일과 분리시키고, 서로 격리시켰다면 이번엔 유대인 개개인의 마음을 떼어놓는 것이다. 유대인들은 죽을 것인가? 죽일 것인가?라는 두 가지 한정된 질문에만 직면하도록, 다시 말해 더러워진 손을 갖고서만 살 수 있도록 직면하게 만들었다. 합리적 선택은 ‘내가 사는 것’이 최고의 행동기준으로서 합리적이며 사리에 맞는 것이라는 틀이 형성된다. 그렇게 살인의 공범자의 일원으로 만들었다. 이렇게 선별적으로 생존하는 것이 이런 비합리적 상황에서 실행 가능한 목표라고 생각하게끔 환경을 만들고 합리적인 선택이라고 여기게끔 만든 것이다. 이제 ‘자기보존’이라는 최고 가치를 막게 하는 도덕에 대한 무감각은 당연해졌다.

 

7. 유대인평의회의 눈에는 게토라는 장벽이 유대인들을 나머지 주민으로부터 격리하고 괴롭힘과 학살로부터 보호하는 것처럼 보였다. 합리적이라고 생각했던 이들과 달리, 독일 관료기구는 비합리적으로 절멸하려 했다. 사실 게토는 그들을 제거하기 위해 지어졌다고 생각한다면 유대인들은 그들에게 속지 않았을 것이다. 어쨌든 그들은 독일인들에게 노동을 통해 자신들의 수익성을 입증하면 멈출 것이라 여겼다. 하지만 합리적으로 보였던 이 선택은 사실은 권력을 쥐고 있던 독일 세력이 전쟁에 더 가담하여 세력화할 수 있도록 도왔다. 바우만은 우리가 이 이야기처럼 우리가 가진 합리성의 불충분함을 강조한다. 합리성을 행위자의 합리성(심리적 현상)과 행위의 합리성(행위자에 대한 결과로 측정되는) 두 가지로 나눈다면, 이성은 오직 “두 합리성이 공명하고 중첩될 때 좋은 안내자다.” 그런데 홀로코스트의 경우 합리성은 자살무기가 되어 도덕적 금기를 무너뜨리고 대량학살을 생산해내었다. 유대인들의 합리성과 행위에 대한 결과는 행위자인 유대인에게 의존하지 않았기 때문이며 두 합리성은 권력을 쥐고 있던 나치에 의해 조작되었기 때문이다. 

'2. 웹' 카테고리의 다른 글

[jquery] Jquery를 왜 사용하는가?  (0) 2021.08.14
[Jquery] 선택자와 Filter 사용법  (0) 2021.08.14
방법서설  (0) 2018.11.24
과학과 성경의 대화 _버나드 램  (0) 2018.10.27
프로테스탄티즘의 윤리와 자본주의 정신_ 막스베버  (0) 2018.10.27

아볼로스투디움 6기 유혜진 퇴고

2018.11.12.

방법서설/ 르네 데카르트. 문예출판사.



전통과 진리 


1. “이 여행은 순전히 나의 발자국을 보려는 것, 걷는 길에 따라 달라지는 그 깊이, 끌림의 길이, 오래전부터 있어왔던 끝 없는 소멸을 보려는 것” 우리는 종종 이 시와 같이 우리의 존재를 찾아 여행을 떠나기도 한다. 일상을 잊고 어디로 떠나는 듯 보이지만, 실은 더 잘 살아내기 위해 일상을 마주하는 행위라고도 볼 수 있다. 17세기의 철학자 데카르트는 이 여행에 나섰다. 좋은 책과 다양한 생각을 공유할 수 있는 학문의 장을 버리고 과감히 여행길에 오른다. 그는 책이 아닌 세계라고 하는 큰 책 속에서 관객으로서 살아보겠다고 결심한다. 떠나는 그의 뒷 모습이 상상이 된다. 그런데 무엇이 그를 여행길에 오르도록 만든 것일까? 


2. 그는 여행을 좋아해서 떠났던 천진난만하기만 했던 방랑가는 아니었던 것 같다. ③ 1636년 출간되어 ‘근대의 아버지’라는 이름을 얻게 한 그의 저서 「방법서설」에, “제 아무리 위대한 영혼의 소유자일지라도 악행을 행할 가능성”이 있다고 적혀있듯, 당시 유럽사회는 중세의 가톨릭 권위가 도전받아 개신교와 갈등으로 떠들썩했고 갈등의 씨앗은 강대국의 욕망과 만나 30년 전쟁이라는 비극을 초래했다. 다시 말해 믿어왔던 진리에 대한 도전의 충격이 중세를 강타한 것이다. 그는 어지러운 상황 속에 홀로 독일로 여행을 떠난다. 그는 벽난로 앞에 앉아 상념의 시간을 갖는 듯 보이지만 사실 그의 머릿속에서는 ‘새로운 진리를 향한 갈망’이 ‘전통’에 도전하며 30년 전쟁만큼이나 치열한 전투가 벌어지고 있었다. 


3. 믿어왔던 전통이 무너지고, 이로 인해 비극이 초래되는 어지러운 환경 탓인지 그에게는 지금껏 배워온 스승의 가르침, 자신의 감각, 배워온 관습, 다수가 동의한 ‘진리’라고 여겼던 것 모두 변하기 쉬운 것이 되어버렸다. 그 모든 것은 불변의 진리의 토대가 되기엔 불충분했다. 결국 그는 수학적 명증성에 대한 기대와 ‘회의’라는 무기를 들고 자신이 있는 세상, 공간, 신체를 구석구석 누비고 회의해보며 끝자락까지 간다. 그는 결국 그 전투에서 승리한다. 그가 모든 것을 회의 했을 때 마지막까지 존재하는 것은 ‘의심하고 있는 사실 자체에서 존재하는 자신이었다. 마침내 데카르트는 ‘의심하는 내가 존재하므로, 나는 존재한다.’라는 명제를 쟁취하게 된다. 그리고 이 명제는 400년 후를 사는 현대인들에게도 유의미하다.


4. ⑤ 데카르트가 살았던 환경과 마찬가지로, 현대인들도 ‘혼란스러운 세상에서 진리란 무엇일까?’ 라는 고민을 하며 산다. 또 중세 가톨릭 권위를 조금은 계승받아온 기독교인들도 마찬가지다. “위대한 영혼의 소유자일지라도 악행을 행할 가능성“이 만연한 일들이 우리사회에 공기처럼 존재하기 때문이다. ④ 오히려 전통과 관습은 우리를 억압하고, 우리가 믿어온 모든 것들에 대해 의심하는 것이 대부분의 우리의 삶을 더 개선시켜주는 듯하다. 가부장이라는 관습과 전통에 대해 데카르트의 ‘전통을 제거해보라’는 제안은 억압과 무지와 권력에서 해방시켜  우리에게 자유를 주는 것 같다. 


5. ①② 데카르트에게는 명증성이 진리를 찾는 유일한 출구인 반면, 기독교인에게는 유일한 출구가 아니다. 기독교인들은 어떻게 진리를 증명하고 있을까? 그리스도인은 인간의 언어와 이성의 한계를 인정한다. 이로부터 비롯되는 명증성으로부터 진리를 확신하지 않는다. 쉽게 설명하자면 모두에게는 각자의 경험과 느낌이 담긴 정신이 있다. 이는 아주 개별적이라 우리는 언어라는 수단을 통해 서로 동일한 부분만 합의하며 공감 할 뿐, 서로의 모든 것이 이해되고 일치될 수는 없다. 이것이 본질적 갈등의 이유다. 완전하게 서로를 이해할 도구가 우리에겐 없다. 그럼에도 해치지 않고 화목하게 지낼 수 있는 이유는 무엇일까 생각해보면 ‘사랑’이 있기 때문이다. 현실세계를 부인하는 데카르트와 다르게 ‘현실세계’ 자체가 이 진리를 증거 한다. 또한 ‘전통을 제거하라’는 그의 말과 반대로 기독교인은 ‘말씀’이라는 전통을 통해 성령을 구하며 얻는 사랑으로 함께 살아간다. 기독교인들은 명증성이 먼저가 아닌 전통을 믿고 따라 살 때 찾아오는 기쁨과 삶으로 진리를 명증해낸다.  

 

7. 세상에 질서를 부여하던 중세 가톨릭이 도전받고, 전쟁이 발발되는 혼란한 사회에서 데카르트에게 ‘무엇이 진리인가?’에 대한 고뇌와 회의가 찾아온 것은 어쩌면 당연한 반응일 것이다. 인간에게 비극이 찾아오고 아무것도 설명되지 않는 세계를 보며 찾아온 실존에 대한 물음은 현대를 살아가는 우리에게도 찾아오는 공기와도 같은 물음이다. 진리를 찾아가는 데카르트의 발걸음이 우리에게 유익이 되지만 모든 것들을 설명해내지 못한다. 그렇다면 기독교인들은 무엇이라 말하고 있을까? 우리 모두는 한 번씩은 각자의 여행길에 올라 ‘진리’란 무엇인지 설명해낼 수 있어야 하지 않을까.


 







'2. 웹' 카테고리의 다른 글

[Jquery] 선택자와 Filter 사용법  (0) 2021.08.14
홀로코스트와 현대성_지그만트 바우만  (0) 2018.11.25
과학과 성경의 대화 _버나드 램  (0) 2018.10.27
프로테스탄티즘의 윤리와 자본주의 정신_ 막스베버  (0) 2018.10.27
담론과 진실_미셸푸코  (0) 2018.10.27

+ Recent posts

티스토리툴바