if(confirm("출력 메시지")) {
//확인을 누르면 할 것
} else {
//취소를 누르면 할 것
}| script 태그 동적 추가 (0) | 2020.12.16 |
|---|---|
| css 동적 로딩방식 (0) | 2020.12.09 |
| JS 로그아웃 후 뒤로가기 (Backspace) 막기 (1) | 2020.11.26 |
| JS 윈도우창 닫기 버튼 클릭 이벤트 감지(beforeunload) (0) | 2020.11.26 |
| JS 글자수 체크(공백포함, 제외) 및 언어 옵션 설정 (0) | 2020.11.25 |
coding-restaurant
코딩 맛집에 방문해주셔서 감사합니다.
로그아웃 후 뒤로가기 클릭 시 그대로 남아있는 캐시를 초기화하는 등에 쓸 수 있겠습니다.
pragma : no-cache는 캐싱을 방지하는 메타태그입니다.
Expires: -1는 캐시된 페이지를 즉시 만료합니다.
<meta http-equiv="Expires" content="Mon, 06 Jan 1990 00:00:01 GMT">
# 위의 명시된 날짜 이후가 되면 페이지가 캐싱되지 않습니다.
(따라서 위와 같은 날짜로 지정할 경우 페이지는 지속적으로 캐싱되지 않습니다.)
<meta http-equiv="Expires" content="-1">
# 캐시된 페이지가 만료되어 삭제되는 시간을 정의합니다. 특별한 경우가 아니면 -1로 설정합니다.
<meta http-equiv="Pragma" content="no-cache">
# 페이지 로드시마다 페이지를 캐싱하지 않습니다. (HTTP 1.0)
<meta http-equiv="Cache-Control" content="no-cache">
# 페이지 로드시마다 페이지를 캐싱하지 않습니다. (HTTP 1.1)
| 뉴모피즘 Neumorphism (1) | 2021.03.02 |
|---|---|
| 특정 그래픽 요소의 이벤트 비활성화 : pointer-events와 off (0) | 2021.02.02 |
| position이 absolute인 요소 중앙 정렬 (0) | 2020.11.20 |
| 가로형 드롭다운 메뉴 만들기 (0) | 2020.11.10 |
| [CSS] 헷갈리는 flex 재정리 + 가로분할 세로분할 예제 (0) | 2020.10.08 |
coding-restaurant
코딩 맛집에 방문해주셔서 감사합니다.
로그아웃 후 조회하던 이전 페이지를 볼 수 없게 하려면 대략 이런 것들을 생각해 볼 수 있습니다.
1) no-cache와 쿠키(세션)을 이용한 방법
- header와 meta 태그에 no-cache 적용
- 각 페이지별 로그인 여부 검증 (쿠키 or 세션) 후 로그인이 아닐 경우 페이지 이동 ( Header 방식 )
2) 로그아웃 부분에 강제 IE 종료 JavaScript를 넣어 브라우져를 닫는 방법
3) 모든 페이지 이동을 JavaScript의 Replication 으로 동작 하게 변경
단 에디팅에서 submit 되는 영역은 Replication이 불가능 하기 때문에
ajax로 폼 전송 후 JavaScript Replication 처리
아래는 로그아웃 후 뒤로가기 (Backspace) 를 막는 방법입니다.
history.pushState(null, null, location.href);
window.onpopstate = function(event) {
history.go(1);
};
// 출처: https://vicki.tistory.com/1487 [불친절한자수씨]
window.history.forward();
function noBack(){
window.history.forward();
} <body onload="noBack();" onpageshow="if(event.persisted) noBack();" onunload="">
위 방법들은 뒤로 가기 한 번만 막고 두 번 뒤로가면 그대로 넘어가기 때문에 의미가 없어서 세션 키 검사를 통해 로그인 후 생성된 유저키 세션이 있으면 유지하거나 뒤로가기가 가능하고 로그아웃이 되어 세션이 없으면 뒤로가기를 막게끔 했습니다. 아래 코드를 로그인 화면을 제외한 다른 화면에 넣었습니다. 일정 시간마다 세션을 체크하는 코드입니다.
function CheckSession() {
if (sessionStorage.getItem("loginKey") == null) {
window.location = "로그인화면주소";
}
}
setInterval(CheckSession(), 100);| css 동적 로딩방식 (0) | 2020.12.09 |
|---|---|
| JS 확인 취소 팝업창 띄우기 (0) | 2020.11.30 |
| JS 윈도우창 닫기 버튼 클릭 이벤트 감지(beforeunload) (0) | 2020.11.26 |
| JS 글자수 체크(공백포함, 제외) 및 언어 옵션 설정 (0) | 2020.11.25 |
| 세션 종료 (로그아웃) 구현 (0) | 2020.11.23 |
coding-restaurant
코딩 맛집에 방문해주셔서 감사합니다.
브라우저 우측 상단의 x 버튼을 눌렀을 때 이벤트를 감지하여 창을 닫기 전 윈도우창 닫기 이벤트를 취소할지를 묻는 팝업창을 띄우는 방법입니다.
사용자가 페이지를 정말로 떠날 것인지 묻는 팝업창을 표시합니다. 팝업창을 표시하려면 이벤트의 preventDefault()를 호출해야합니다.
window.addEventListener('beforeunload', (event) => {
// 표준에 따라 기본 동작 방지
event.preventDefault();
// Chrome에서는 returnValue 설정이 필요함
event.returnValue = '';
});
jquery 버전입니다.
$(window).bind("beforeunload", function (e){
return "창을 닫으실래요?";
});
// 출처: https://suyou.tistory.com/86 [수유산장]
경고창 없이 특정 로직을 처리하고 싶을 때. 서버에 ajax로 호출하여 서버처리를 완료하고 완료되면 창이 닫힙니다.
$.ajax({
url : "처리페이지url",
cache : "false", //캐시사용금지
method : "POST",
data : $("#frm").serialize(),
dataType: "html",
async : false, //동기화설정(비동기화사용안함)
success:function(args){
//$("#result").html(args);
},
error:function(e){
//alert(e.responseText);
}
});
// 출처: https://suyou.tistory.com/86 [수유산장]
| JS 확인 취소 팝업창 띄우기 (0) | 2020.11.30 |
|---|---|
| JS 로그아웃 후 뒤로가기 (Backspace) 막기 (1) | 2020.11.26 |
| JS 글자수 체크(공백포함, 제외) 및 언어 옵션 설정 (0) | 2020.11.25 |
| 세션 종료 (로그아웃) 구현 (0) | 2020.11.23 |
| 맨날 헷갈리는 event.preventDefault (0) | 2020.11.19 |
coding-restaurant
코딩 맛집에 방문해주셔서 감사합니다.
<textarea style="width:600px;" class="DOC_TEXT" name="DOC_TEXT" placeholder="선택하신 서류사항 항목에 대한 내용을 200자 이내로 기재해주세요.">
</textarea>
<br />
<span style="color:#aaa;" id="counter">(0 / 최대 200자)</span>
// textarea 체크
$('.DOC_TEXT').keyup(function (e){
var content = $(this).val(); //입력한 것
$('#counter').html("("+content.length+" / 최대 200자)"); //글자수 카운팅
if (content.length > 200){ //200자 이상일 때
alert("최대 200자까지 입력 가능합니다.");
$(this).val(content.substring(0, 200)); //넘어간 글자 자르기
$('#counter').html("(200 / 최대 200자)");
}
});
특정 문자가 얼마나 반복되는 지 세는 법은 아래와 같습니다. 아래는 정규식을 사용한 예입니다.
var temp = "This is a string.";
var count = (temp.match(/is/g) || []).length;
alert(count);
//https://hashcode.co.kr/questions/1434/%ED%8A%B9%EC%A0%95%EB%AC%B8%EC%9E%90%EA%B0%80-%EC%96%BC%EB%A7%88%EB%82%98-%EB%B0%98%EB%B3%B5%EB%90%98%EB%8A%94%EC%A7%80-%EC%84%B8%EB%8A%94%EB%B2%95
<form>
<input type="text" id="newText" onkeyup="checkLength(this)">
</form>
<div class="LengthCheck">
<div>띄어쓰기 제외 : <span class="extrablank">0</span> 자</div>
</div>// 한글 글자수 체크 함수
function checkLength(str) {
var redex = /\s/ig;
var extrablank = $(str).val().toString().replace(redex, "").length;
$(".extrablank").text(extrablank); //결과물이 보여질 부분
}
아래와 같이 입력하면 입력폼의 기본값은 한글입니다. ime-mode의 옵션은 active(한글), inactive(영문), auto(선택된 mode 적용), disabled(영문만 입력 가능)이 있습니다.
<input type="text" style="ime-mode:active;"> | JS 로그아웃 후 뒤로가기 (Backspace) 막기 (1) | 2020.11.26 |
|---|---|
| JS 윈도우창 닫기 버튼 클릭 이벤트 감지(beforeunload) (0) | 2020.11.26 |
| 세션 종료 (로그아웃) 구현 (0) | 2020.11.23 |
| 맨날 헷갈리는 event.preventDefault (0) | 2020.11.19 |
| JSON 문서 작성 및 JS로 입력, 추출 (0) | 2020.11.19 |
coding-restaurant
코딩 맛집에 방문해주셔서 감사합니다.
→ 사용자의 상태 유지를 위한 정보를 웹 브라우저에 저장해서 웹 서버가 쿠키 정보를 읽어 사용한다. 쿠키는 웹 서버에서 열어볼 수 있다.
→ 사용자의 정보를 유지하기 위해 javax.servlet.http 패키지의 HttpSession 인터페이스를 구현해서 사용한다.
웹 브라우저 당 1개씩 생성되어 웹 컨테이너에 저장된다. 웹 서버는 각 브라우저별 발생한 요청에 대해 특별한 식별자를 부여한다.
session.setAttribute("id", "value");
String id = (String)session.getAttribute("id"); //리턴 타입은 Object
session.removeAttribute("id");
session.invalidate(); //세션의 모든 속성을 삭제
var sessionData = keyName;
sessionStorage.setItem(keyName, keyValue ); // 저장
sessionStorage.getItem(keyName); // keyName에 해당하는 값 return (없으면 null)
sessionStorage.length; // 저장된 데이터의 갯수 리턴
sessionStorage.key(index); // index 번째의 키 이름 return
sessionStorage.removeItem(keyName); // keyName에 해당하는 값 삭제
sessionStorage.clear(); // 모든 데이터 삭제
JS의 경우 sessionStorage.clear(); 로 모두 삭제해주면 됩니다. 위는 sessionStorage에서 지원하는 메서드들입니다. 따라서 location.href 에 홈 화면이나 로그인 화면으로 연결시키고 sessionStorage.clear로 간단하게 세션을 모두 날려버리면 로그아웃이 됩니다.
| JS 윈도우창 닫기 버튼 클릭 이벤트 감지(beforeunload) (0) | 2020.11.26 |
|---|---|
| JS 글자수 체크(공백포함, 제외) 및 언어 옵션 설정 (0) | 2020.11.25 |
| 맨날 헷갈리는 event.preventDefault (0) | 2020.11.19 |
| JSON 문서 작성 및 JS로 입력, 추출 (0) | 2020.11.19 |
| [JS] 쿠키 생성(저장), 불러오기 (0) | 2020.10.30 |
coding-restaurant
코딩 맛집에 방문해주셔서 감사합니다.
position이 absolute인 자식 요소는 부모 요소로부터 거리를 산출합니다.
가까운 relative 요소의 부모만 따른다는 사실이 아닙니다. (이동)
HTML / CSS - 10. position: absolute; 에 대해 알아보자
position: absolute에 대해 알아보자. absolute는 기본적으로 화면의 좌측상단을 기준으로 거리를 계산한다. 만약 부모요소가 있을 시 부모요소의 좌측 상단을 기준으로 거리를 계산해 낸다. 그러나, 이
pager.kr
absolute 내의 absolute는 절대좌표라 정확한 위치에 있지 않습니다.
relative 내의 absolute는 화면 이동 시에도 정확한 위치에 표시됩니다.
static은 그 자체로 top, left, ...나 z-index가 반영되지 않으므로 기준으로 위치를 잡지 못합니다.
float 역시 동작되지 않습니다.
position이 absolute인 요소를 중앙 정렬하려면 top 50%; left: 50%; 만으로 끝나지 않습니다. 따라서 이후 몇 가지를 추가하거나 조정해야 합니다.
transform의 기능 중에서 위치 이동 기능 translate를 함께 사용해서 조정합니다. div 안의 콘텐트 (텍스트 등) 영역이 가변값이어도 자동 중앙 정렬이 되며, transform 속성은 GPU가속이 가능해 속도향상에 도움이 된다고도 합니다. 단점은 ie8 이하 버전에서는 동작하지 않습니다. ie9부터 사용 가능합니다.
transform : translate(-50%, -50%); //absolute 가로, 세로 가운데 정렬
margin-top과 margin-left로 조정합니다. 크로스브라우징 문제에서는 자유롭습니다. 수동으로 margin값을 설정해야하는 단점이 있는데, 아래 방법은 이에서 한 단계 업그레이드 되었습니다.
margin-left: -50px;
margin-right: -50px;
top, left, right, bottom은 0으로, margin은 auto로 설정합니다. 추가 연산은 필요없으나 width, height 값이 고정값이여야 하는 단점이 있습니다.
position:absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
다음 방법은 inline-block을 이용한 중앙정렬입니다.. 콘텐츠 영역이 고정값이 아니라 가변이어도 자동 중앙정렬이 됩니다. (출처) 예시에서 상, 하 간격은 두고 가로축에서만 중앙정렬이 필요할 때로 응용해 보았습니다.
.test {
vertical-align: middle;
overflow: hidden;
position: absolute;
height: 40px;
line-height: 40px;
left: 0;
right: 0;
margin-left: auto;
margin-right: auto;
display: inline-block;
}
table-cell을 이용한 중앙정렬로, 역시 콘텐츠 영역이 가변값이어도 사용 가능합니다.
<div class="layer"> <div class="layer_inner"> <div class="content">Layer Contents</div> </div> </div>.layer {
position: absolute;
display: table;
top: 0;
left: 0;
width: 100%;
height: 100%
}
.layer .layer_inner {
display: table-cell;
text-align: center;
vertical-align: middle
}
.layer .content {
display: inline-block;
background: #f00
}
flex를 이용한 방법으로 IE10 이상 모든 브라우저 가능하며 absolute인 요소 안의 영역이 가변이어도 가능합니다.
display:flex는 display:box, display:flexbox를 거쳐서 나온 최종버전격입니다.
<div class="layer">
<span class="content">Layer Contents</span>
</div>.layer {
position: absolute;
top:0;right:0;bottom:0;left:0;
display: flex;
align-items: center;
justify-content: center;
display: -webkit-flex;
-webkit-align-item: center;
-webkit-justify-content: center;
}
.layer .content {background: #f00}/* Internet Explorer 10 */
display:-ms-flexbox;
/* Firefox */
display:-moz-box;
/* Safari, Chrome, and Opera */
display:-webkit-box;
/* W3C */
display:box;box-pack:start|center|end;
-webkit-box-pack:start|center|end;
-moz-box-pack:start|center|end;
구버전에서는 display:box와 병행해야 사용 가능합니다. 아래는 병행한 예입니다.
.layer {
position: absolute;
top:0;right:0;bottom:0;left:0;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
align-items: center;
justify-content: center;
-webkit-align-items: center;
-webkit-justify-content: center;
-webkit-box-pack: center;
-webkit-box-align: center;
-moz-box-pack: center;
-moz-box-align: center;
-ms-box-pack: center;
-ms-box-align: center;
} | 특정 그래픽 요소의 이벤트 비활성화 : pointer-events와 off (0) | 2021.02.02 |
|---|---|
| html 메타태그로 캐시 초기화(삭제) (1) | 2020.11.26 |
| 가로형 드롭다운 메뉴 만들기 (0) | 2020.11.10 |
| [CSS] 헷갈리는 flex 재정리 + 가로분할 세로분할 예제 (0) | 2020.10.08 |
| [css] z-index와 같이 가야하는 속성, position (0) | 2020.06.24 |
coding-restaurant
코딩 맛집에 방문해주셔서 감사합니다.
이벤트 캡쳐링/버블링과 관련있음
event.preventDefault()는 이벤트의 전파를 막지않고 그 이벤트를 취소한다.
이벤트 취소 가능 여부는 event.cancelable()로 확인한다. 취소가 불가능할 시 preventDefault를 호출해도 소용 없다.
event.cancelable의 리턴값은 true 또는 false. 가능여부는 이벤트 초기화 시 판별된다.
DOM을 통한 이벤트의 전파를 막으려면 event.stopPropagation을 사용한다. 이벤트의 기본적인 동작(캡쳐링과 버블링)이 일어나는 것을 막기위해 보완적으로 사용되는 방법
event.preventDefault()와 event.stopPropagation 모두 이벤트 관련 동작에서 잘 사용되는 게 비슷하다.
둘의 차이점은 preventDefault는 어떠한 동작을 중단시키는 것 (예를 들면 a 태그의 이동 행위 막기) 이며,
stopPropagation은 부모 엘리먼트에게 이벤트가 전파되는 등을 막는 것이다.
#event.preventDefault event.stopPropagation 차이점 #이벤트캡쳐링 #이벤트버블링
| JS 글자수 체크(공백포함, 제외) 및 언어 옵션 설정 (0) | 2020.11.25 |
|---|---|
| 세션 종료 (로그아웃) 구현 (0) | 2020.11.23 |
| JSON 문서 작성 및 JS로 입력, 추출 (0) | 2020.11.19 |
| [JS] 쿠키 생성(저장), 불러오기 (0) | 2020.10.30 |
| 모던 자바스크립트 입문 : 9. 객체 (0) | 2020.10.21 |
coding-restaurant
코딩 맛집에 방문해주셔서 감사합니다.
JSON(제이슨[1], JavaScript Object Notation)은 속성-값 쌍( attribute–value pairs and array data types (or any other serializable value)) 또는 "키-값 쌍"으로 이루어진 데이터 오브젝트를 전달하기 위해 인간이 읽을 수 있는 텍스트를 사용하는 개방형 표준 포맷이다. 비동기 브라우저/서버 통신 (AJAX)을 위해, 넓게는 XML(AJAX가 사용)을 대체하는 주요 데이터 포맷이다. 특히, 인터넷에서 자료를 주고 받을 때 그 자료를 표현하는 방법으로 알려져 있다. 자료의 종류에 큰 제한은 없으며, 특히 컴퓨터 프로그램의 변수값을 표현하는 데 적합하다.
본래는 자바스크립트 언어로부터 파생되어 자바스크립트의 구문 형식을 따르지만 언어 독립형 데이터 포맷이다. 즉, 프로그래밍 언어나 플랫폼에 독립적이므로, 구문 분석 및 JSON 데이터 생성을 위한 코드는 C, C++, C#, 자바, 자바스크립트, 펄, 파이썬 등 수많은 프로그래밍 언어에서 쉽게 이용할 수 있다.
JSON 포맷은 본래 더글라스 크록포드가 규정하였다. RFC 7159와 ECMA-404 그리고 ISO/IEC 21778:2017[2] 표준에 의해 기술되고 있다. KS 부합화 표준은 아직 제정되지 않았으며, TTA 협회 표준명은 TTAE.OT-10.0394이다. ECMA 표준과 ISO/IEC 표준은 문법만 정의할 정도로 최소한으로만 정의되어 있는 반면 RFC는 시맨틱, 보안적 고려 사항을 일부 제공 한다.[3] JSON의 공식 인터넷 미디어 타입은 application/json이며, JSON의 파일 확장자는 .json이다.
[{
"key": "value",
"key": "value",
"key": "value"
},
{
"key": "value",
"key": "value",
"key": "value"
}]
$.getJSON('/textdata/textdata_transportation.json', function (data) {
var test = data[Index].keyname;
console.log(test);
});
앞 뒤에 쉼표가 붙으면 아래와 같이 처리해줍니다.
test.join(""); // 쉼표 삭제
test.join(""); // 쉼표 삭제
//
| 세션 종료 (로그아웃) 구현 (0) | 2020.11.23 |
|---|---|
| 맨날 헷갈리는 event.preventDefault (0) | 2020.11.19 |
| [JS] 쿠키 생성(저장), 불러오기 (0) | 2020.10.30 |
| 모던 자바스크립트 입문 : 9. 객체 (0) | 2020.10.21 |
| [JS/jQuery] click 이벤트 무한반복 / 중복 발생 처리 (0) | 2020.10.20 |
coding-restaurant
코딩 맛집에 방문해주셔서 감사합니다.
상위 메뉴를 클릭하거나 마우스를 갖다댔을 때 하위 메뉴를 가로로 펼쳐보이는 양식의 가로형 드롭다운 메뉴를 JS 없이 html과 CSS로만 구성한 코드입니다. (출처 : unikys.tistory.com/369 )
<nav id="topMenu">
<ul>
<li class="topMenuLi"> <a class="menuLink" href="">A</a>
<ul class="submenu">
<li><a href="" class="submenuLink longLink">1</a></li>
<li><a href="" class="submenuLink longLink">2</a></li>
<li><a href="" class="submenuLink longLink">3</a></li>
</ul>
</li>
<li>|</li>
<li class="topMenuLi"> <a class="menuLink" href="">B</a>
<ul class="submenu">
<li><a href="" class="submenuLink">1</a></li>
<li><a href="" class="submenuLink">2</a></li>
<li><a href="" class="submenuLink">3</a></li>
</ul>
</li>
<li>|</li>
<li class="topMenuLi"> <a class="menuLink" href="">C</li>
</ul>
</nav>#topMenu {
height: 30px;
}
#topMenu ul {
/* 메인 메뉴 안의 ul을 설정함: 상위메뉴의 ul+하위 메뉴의 ul */
list-style-type: none;
margin: 0px;
padding: 0px;
}
#topMenu ul li {
/* 메인 메뉴 안에 ul 태그 안에 있는 li 태그의 스타일 적용(상위/하위메뉴 모두) */
color: white;
background-color: #2d2d2d;
float: left;
line-height: 30px;
vertical-align: middle;
text-align: center;
position: relative;
}
.menuLink,
.submenuLink {
/* 상위 메뉴와 하위 메뉴의 a 태그에 공통으로 설정할 스타일 */
text-decoration: none;
display: block;
width: 150px;
font-size: 12px;
font-weight: bold;
}
.menuLink {
/* 상위 메뉴의 글씨색을 흰색으로 설정 */
color: white;
}
.topMenuLi:hover .menuLink {
/* 상위 메뉴의 li에 마우스오버 되었을 때 스타일 설정 */
color: red;
background-color: #4d4d4d;
}
.longLink {
/* 좀 더 긴 메뉴 스타일 설정 */
width: 190px;
}
.submenuLink {
/* 하위 메뉴의 a 태그 스타일 설정 */
color: #2d2d2d;
background-color: white;
border: solid 1px black;
margin-right: -1px;
/* [변경] 위 칸의 하단 테두리와 아래칸의 상단 테두리가 겹쳐지도록 설덩 */
}
.submenu {
/* 하위 메뉴 스타일 설정 */
position: absolute;
height: 0px;
overflow: hidden;
transition: height .2s;
-webkit-transition: height .2s;
-moz-transition: height .2s;
-o-transition: height .2s;
width: 574px;
/* [변경] 가로 드랍다운 메뉴의 넓이 */
}
.submenu li {
display: inline-block;
/* [변경] 가로로 펼쳐지도록 설정 */
}
.topMenuLi:hover .submenu {
/* 상위 메뉴에 마우스 모버한 경우 그 안의 하위 메뉴 스타일 설정 */
height: 32px;
/* [변경] 높이를 32px로 설정 */
}
.submenuLink:hover {
/* 하위 메뉴의 a 태그의 마우스 오버 스타일 설정 */
color: red;
background-color: #dddddd;
}
div 버전입니다.
<div class="big">
<div>
menu
</div>
<div class="smallcov">
<div class="small"> 2 </div>
<div class="small"> 3 </div>
<div class="small"> 4 </div>
</div>
</div>
div {
background: black;
color: white;
text-align: center;
margin: 0;
padding: 0;
}
.big {
width: 220px;
position: relative;
height: 40px;
}
.smallcov {
vertical-align: middle;
float: left;
line-height: 20px;
overflow: hidden;
position: absolute;
width: 220px;
height: 20px;
flex-direction: row;
}
.small {
line-height: 20px;
width: 50px;
height: 20px;
display: none;
margin-right: -1px;
}
.big:hover .small {
display: inline-block;
}
참고
www.youtube.com/watch?v=8xKDSdHQ35U
| html 메타태그로 캐시 초기화(삭제) (1) | 2020.11.26 |
|---|---|
| position이 absolute인 요소 중앙 정렬 (0) | 2020.11.20 |
| [CSS] 헷갈리는 flex 재정리 + 가로분할 세로분할 예제 (0) | 2020.10.08 |
| [css] z-index와 같이 가야하는 속성, position (0) | 2020.06.24 |
| <nobr> 태그 : 공식 태그는 아님! (0) | 2020.06.11 |
coding-restaurant
코딩 맛집에 방문해주셔서 감사합니다.
쿠키란 키와 값이 들어있는 데이터 조각으로 이름, 값, 파기 날짜, 경로 정보를 가집니다. 서버와 클라이언트에서 모두 저장, 사용 가능하며 일정 기간 데이터를 유지할 수 있습니다. 저장된 쿠키의 확인은 웹브라우저 - 웹 개발 도구 - 저장소에서 확인할 수 있습니다.
document.cookie = "Name=Value(값);Expires=날짜;Domain=도메인;Path=경로;Secure";
데이터를 저장, 읽는 데 사용하는 Name - Value 속성은 꼭 지정해야 합니다. Expires는 쿠키 파기날짜를 지정하는 속성인데 지정되지 않으면 브라우저 종료 시 쿠키가 삭제됩니다.
Domain 속성을 비우면 현재 도메인의 경로로 자동 입력됩니다. 페이지 요청과 일치해야 접근 가능합니다.
Path 속성을 비우면 현재 도메인의 경로로 자동 입력되며 특정 경로(폴더명)을 설정합니다. '/'로 설정하면 도메인 모든 곳은 곳에서 접근이 가능합니다.
Secure 속성을 지정하면 해당 쿠키는 SSL을 사용해서면 요청할 수 있습니다. (출처)
*SSL : 3자가 보증해주는 디지털 인증서. SSL(Secure Socket Layer) 프로토콜은 처음에 Netscape사에서 웹서버와 브라우저(클라이언트) 사이의 보안을 위해 만들었습니다. 클라이언트는 인증서 정보가 신뢰할 수 있는지 검증을 거친 후 다음 절차를 수행하게 됩니다. HTTPS는 SSL 프로토콜 위에서 돌아가는 프로토콜입니다. (출처)
// 변수를 선언
var date = new Date();
date.setDate(date.getDate() + 7);
var willCookie = "";
willCookie += "CookieName=Value;";
willCookie += "expires=" + date.toUTCString();
// 쿠키에 넣는다.
document.cookie = willCookie;
alert(document.cookie);
document 객체의 cookie 속성을 출력하면 됩니다. 여러 쿠키를 한 번에 출력하므로 개별적인 쿠키를 읽으려면 반복문 처리 등의 과정이 필요합니다. 아래는 5개의 쿠키가 생성되는데요.
// 변수를 선언한다.
var date = new Date();
date.setDate(date.getDate() + 7);
// 5번을 반복한다.
for(var i = 0; i < 5; i++) {
var willCookie = "";
willCookie += "Name" + i + "=Value";
willCookie += "Expires=" + date.toUTCString();
// 쿠키를 집어넣는다.
document.cookie = willCookie;
}
// 출력한다.
alert(document.cookie);
이제 쿠키의 Value 속성을 추출하여 Name 속성으로 분해해 출력해보겠습니다. 우선 문자열을 세미콜론(;)을 사용해 분해합니다. 분해하면 Name=Value 형태의 문자열로 분해됩니다.
// 변수를 선언한다.
var name = "Name4";
var cookies = document.cookie.split(";");
alert(cookies);
// 쿠키를 추출한다.
for(var i in cookies) {
if(cookies[i].search(name) != -1) {
alert(cookies[i].replace(name + "=", ""));
// ※ 참고 : 특정 브라우저 양끝 공백 문제 발생시 대응
// alert(cookies[i].replace(name + "=", "").replace(/^\S\S*/, "").replace(/^\S\S*$/, ""));
}
}
// 변수를 선언한다.
var date = new Date();
date.setDate(date.getDate() - 1);
var willCookie = "";
willCookie += "CookieName=Value;";
willCookie += "Expires=" + date.toUTCString();
// 쿠키를 집어넣는다.
document.cookie = willCookie;
// 출력한다.
alert(document.cookie);
제거는 Expires 속성을 현재 이전 날짜로 설정하면 됩니다. (출처)
사용자가 입력한 내용을 저장해두었다가, 현재 뿐만 아니라 다음에도 그 내용을 보여준다
새로고침을 해도 입력한 내용은 저장한 쿠키에 의해 보여진다.
A 쿠키를 읽어온다
B 입력값이나 표시할 값을 시각적으로 표시한다
//
| 맨날 헷갈리는 event.preventDefault (0) | 2020.11.19 |
|---|---|
| JSON 문서 작성 및 JS로 입력, 추출 (0) | 2020.11.19 |
| 모던 자바스크립트 입문 : 9. 객체 (0) | 2020.10.21 |
| [JS/jQuery] click 이벤트 무한반복 / 중복 발생 처리 (0) | 2020.10.20 |
| JS eval() : 문자열을 코드로 (0) | 2020.09.24 |
coding-restaurant
코딩 맛집에 방문해주셔서 감사합니다.
미리 자바 개발 환경은 구축되어있다는 관점에서 이야기하겠습니다. 먼저 간단하게 전자정부 프레임워크란 정부, 공공기관, 공기업 등의 웹사이트에 자주 쓰이는 공통 기능들을 Java Spring 프레임워크와 유명 라이브러리로 미리 만들어놓은 공통 컴포넌트와 개발환경, 실행환경, 운영환경, 관리환경 등으로 구성됩니다.
다운로드는 아래에서 다운로드 → 개발환경 → 버전다운로드 → 개발자용 개발환경을 다운로드해 줍니다.
eGovFrame Portal 온라인 지원 포탈
묻고 답하기 더보기 자주하는 질문 더보기 공지사항 더보기
www.egovframe.go.kr
다운받은 파일의 압축을 풀은 후, Ecplise 폴더로 들어가 이클립스를 실행해줍니다. 각 버전 넘버가 적힌 eGovFrame 로고가 뜨면서 프로그램이 실행됩니다. workspace를 설정해주고 (workspace를 C에 설정했을 경우 마우스 우클릭>관리자 권한으로 실행)새로 실행했을 경우 Eclipse>Window>Perspective>Open Perspective>Other로 들어가 팝업에서 eGovFrame 를 선택합니다.
이클립스 실행 → Dynamic Web Project 생성(혹은 eGovFrame Web Project) 합니다. ProjectName을 임의로 설정하고 Maven Setting이 필요할 경우 Id를 설정합니다. Generate Example을 클릭하면 예제 소스 생성도 가능합니다. (출처)
잘 진행되었나 Package Explorer를 확인합니다. WebContent > WEB-INF 폴더 하단에 검사할 파일들을 담을 폴더 생성(JS) → 검사할 JS파일들 복사 붙여넣기 → JS 폴더 우클릭 후 PMD > Check Code를 클릭하여 실행합니다.
위와 같은 과정을 따르면 JS 파일들이 규격에 맞는지 검사되고, 색색깔의 삼각형(▶) 모양의 오류들이 나타납니다. 아직 빨간색, 초록색만 봤는데 빨간색은 위험, 초록색은 중간 위험...이런 것 같은데 다 고쳐주고 있습니다.
오류 각각을 누르면, 고쳐야 할 부분으로 자동 이동됩니다. 그 이유, 개선하면 좋을 방향들을 Show Detail 을 눌러 그 내용을 참고하여 고쳐나가면 됩니다. 웹사이트로 연결되는 친절한 가이드도 있습니다.
위 캡쳐는 제가 개발한 코드가 아니라 jquery 기본 라이브러리지만, 이미지가 필요해서 캡쳐해봤습니다.
검사를 돌리고 나왔던 자주 겹쳤던 오류들로 전역 변수 오류(window.를 앞에 삽입하거나 지역변수로 변경하거나), es6 ecma 규격으로 변경(==보다 ===권장), if 문의 중괄호 확인(if(){}), if-else문에서 if에 return이 있다면 불필요한 else문 없애고 밖으로 빼기 등이 있었습니다.
| SVN (SubVersion) 이란? TortoiseSVN 설치 및 사용 (0) | 2020.12.15 |
|---|---|
| 호스팅 후 워드프레스 admin 비밀번호 재설정 (0) | 2020.07.16 |
| JavaScript 30 프로젝트 (2) JS and CSS Clock (0) | 2020.06.03 |
| JavaScript 30 으로 30일간 매일 하나씩 만들어보기 (0) | 2020.01.01 |
| 워드프레스로 제작했던 웹사이트 (0) | 2019.10.22 |
coding-restaurant
코딩 맛집에 방문해주셔서 감사합니다.
