JavaScript 27

[Jquery] document.cookie 내 쿠키 key value 값 분리해서 확인하기

콘솔에서 document.cookie로 브라우저에 쿠키값을 모두 확인할 수 있는데, 이 "key=value"로 이루어진 문자열 속에서 내가 원하는 쿠키값을 가져오기 위해서는 어떻게 해야할까????? 요롷게 하면 된다. let my_token = getCookie('mytoken'); function getCookie(key) { let result = null; let cookie = document.cookie.split(';'); cookie.some(function (item) { // 공백을 제거 item = item.replace(' ', ''); let dic = item.split('='); if (key === dic[0]) { result = dic[1]; return true; // b..

JavaScript 2021.10.19

[Rejex] 정규 표현식 ( 정규식 - Regular expression)

정규 표현식 - regex 어떤 규칙(패턴)을 정의해놓으면, 이 패턴에 맞는지 아닌지를 판단 return true or false ex) function is_nickname(asValue) { var regExp = /^(?=.*[a-zA-Z])[-a-zA-Z0-9_.]{2,10}$/; return regExp.test(asValue); } function is_password(asValue) { var regExp = /^(?=.*\d)(?=.*[a-zA-Z])[0-9a-zA-Z!@#$%^&*]{8,20}$/; return regExp.test(asValue); } -> 자세한 저리는 여기! https://thalals.tistory.com/329

JavaScript 2021.10.19

[javascript] 웹 페이지 꽃가루 효과 - 반짝반짝 축하 효과

티스토리 블로그에서 꽃가루 터지는 효과를 따온건데, 먼저 티스토리 api를 링크시키고 아래의 html 코드와 javascript 코드를 이용한다. 아래의 코드는 가장 기본적인 형태로 바꾼 코드이다, html 에서 두 버튼이 꽃가루의 시작과 멈춤을 제어한다. javascript reaction함수로 시작버튼을 클릭하고 5초뒤에 멈추는 코드이다. 짜잔~~! html Stop Confetti Drop Confetti javascript $.ajax({ type: "POST", url: "/sign_up/save", data: {}, success: function (response) { if (response['result'] == 'success') { reAction(); //꽃가루 }); function..

JavaScript 2021.10.19

[JS] javascript(자바스크립트) - 배열 내부 원소 값(문자열) 체크하기 [every(), some() ]

자바스크립트에서 배열 내의 요소를 확인할 때 every() 함수와 some() 함수 2가지를 제공합니다. 두 Array Method는 배열의 요소들이 주어진 조건을 만족하는지 여부에 대한 검증을 수행합니다. 1) every,some - 특정 조건을 만족하는지 배열 내부의 원소를 순회하면서 검사한다. 2) 조건에 만족하면 True, 아니면 False를 리턴한다. 1. Array.prototype.every() - 전체가 만족해야 됨 모든 case가 true일때 true를 반환합니다. 순회를 하다 조건에 만족하지 않는 요소가 하나라도 발견되면, 그 즉시 순회를 멈춥니다. 예제1) var objArr = [{name: '철수', age: 10}, {name: '영희', age: 10}, {name: '바둑이'..

JavaScript 2021.10.19

[Jquery] Flask 쿠키 삭제 removeCookie - jwt 로그아웃 [Jquery Plugin]

JWT - Json Web Token은 자체적인 로그아웃 기능(토큰의 회수)가 없기 때문에 로그아웃 기능을 구현하기 위해서는 JWT토큰의 유효시간을 짧게 바꿔줘야했다. 하지만 jwt토큰의 유효시간을 줄여줄려면, 서버에서 처리해 준 후 다시 클라이언트에 response를 보내줘야하고 방법이 복잡하다고 느꼈기 때문에, jwt로 발급해준 서버 쿠키의 토큰을 삭제하면 로그아웃이 되지 않을까 생각했고 제이쿼리를 이용해서 내 쿠키를 지울 수 있었다. removeCookie 사용법 jquery removeCookie를 이용하여 내 쿠키의 토큰을 지울 수 있는데 document.cookie로 브라우저 콘솔로 확인해 보면 쿠키값은 "키=value"로 이루어진 걸 확인 할 수있다. 따라서 removeCooke('토큰 키'..

JavaScript 2021.10.19

[Jquery] 자바스크립트 이미지 파일 업로드 시 미리보기 제공하기

이번에는 내배켐 프로젝트를 진행하면서, 사용자가 있으면 좋을것 같은 기능이라고 생각한 이미지 파일 미리보기를 기록해 보겠슴다! 1. html 이미지 파일 업로드하기 먼저 html에서 이미지파일을 업로드 하는 방법은 간단합니다. input 태그의 타입을 file로 주고 자바스크립트나 제이쿼리에서 이 태그를 지칭할 id값만 주면 됩니다. html 요런 식으로다가 자바스크립트에서 파일객체에 접근할 수 있습니다. javascript - jquery function user_update() { let name = $('#name').val() let description = $('#description').val() let file = $('#file')[0].files[0] let form_data = new ..

JavaScript 2021.10.19

[JS] 팝업창 닫을 때 이벤트 잡기 ( onbeforeunload - 페이지를 벗어날 때)

팝업창 닫을 때, 현재 페이지 새로고침을 하기위해, onbeforeunload 이벤트를 사용했다. onveforeunload 이벤트란, 사용자의 페이지에서 벗어날 때, 즉 뒤로가기나 팝업창을 닫을 때 일어나는 이벤트인 것 같다. function create_baby_profile() { var popup = window.open('/profile/create', '네이버팝업', 'width=700px,height=700px,scrollbars=yes'); popup.onbeforeunload=function (){ window.location.reload(); } } *참고 https://jaimemin.tistory.com/1539 https://doolyit.tistory.com/205

JavaScript 2021.10.18

[jquery] toggleCalss - html 클래스 값 제어

제이쿼리 tobbleClass()로 선택한 요소에 클래스 값을 넣었다 뺄 수 가있습니다. 예를 들어 $( 'p' ).toggleClass( 'xyz' ); 는, p 요소에 xyz 클래스가 없으면 추가하고, 있으면 제거합니다. ex) 사용법 bulma CSS 에서 is-hidden이란 클래스는 요소를 안보이게하는 클래스 function toggle_sign_up() { $("#sign-up-box").toggleClass("is-hidden") $("#div-sign-in-or-up").toggleClass("is-hidden") $("#btn-check-dup").toggleClass("is-hidden") $("#help-id").toggleClass("is-hidden") $("#help-passwo..

JavaScript 2021.10.08