JavaScript/JS TIL 8

[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/JS TIL 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/JS TIL 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/JS TIL 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/JS TIL 2021.10.19

모달창 안에 카카오 맵 불러오기 (동적 웹페이지 로딩)

모달창안에 다른 html파일로 구현해 둔, 카카오 맵 api를 이용한 페이지를 불러오려고 했다. 1. 첫시도 ( 동적 스크립트 에러) - jquery.load() 접근 방법 모달 창 안의 안에 map id로 접근해 jquery.load(url)함수로 flask url로 랜더링 시켜줄려고 했다. 모달 창은 웹페이지가 로딩될 때 미리 생성되고 보였다, 안 보였다가 하는 거라고 하길래 doucment.ready를 이용해 주었다. $(document).ready(function () { let id = {{ id }}; //get url 에 id값 전달 -> locate map rendering {#$('#map-body').load('/map?id='+id)#} }); 결과 error code : Failed..

JavaScript/JS TIL 2021.09.28

[Django] 외부 Javascript 에서 장고 탬플릿 변수, 탬플릿 url 사용하기

django 는 탬플릿 변수와 url 태그를 html 파일에서 사용하는데 만약 html과 js파일이 분리되어있다면, 자바스크립트에서 탬플릿 변수를 사용할 수 없다. (django 태그를 먼저 처리하고, 그 후 스크립트 파일을 불러오기 때문이다.) 외부 자바스크립트에서 탬플릿 변수를 사용하기 위해서는 아래의 방법을 이용하여야 한다. 자바스크립트에 Django의 url 태그 사용 방법 외부 js 파일에서 장고 탬플릿 변수 or 탬플릿 태그를 사용하기 위해서는 자바스크립트 변수를 할당하는 방법이 있다. 무슨 말이냐면, 1. 먼저 스크립트를 불러오기 전에 html 부분에 자바스크립트 변수를 할당하여 변수에 탬플릿 변수, 혹은 url 태그를 할당해 준다. 2. 그 후 스크립트를 불러오고 3. 외부 js 파일안에서..

JavaScript/JS TIL 2021.08.30

CSS, JS 수정된 파일이 브라우저에 적용이 안될 때

자바스크립트나 css 파일이 수정 후 적용이 안되는 이유는, 브라우저에서 캐시메모리가 저장되어있어서 수정되기 전의 캐시 메모리를 사용하기 때문이다. 2가지 방법이 있다. 1. js,css 링크에 버전관리를 추가 간단하게 js,css 파일을 불러오는 링크 후면 부에 ?ver=1 이런 식 으로 버전관리를 함으로써 브라우저가 새로운 js파일로 인식하게 한다. static 파일 링크를 가져왔다면 똑같이 그 뒤에 작성하면 된다. ver 뒤에 숫자는 아무거나 상관없다. 2. Ctrl + F5 새로고침할 때 캐시까지 새로고침하는 방법이다 이게 제일 간편한 것 같다.

JavaScript/JS TIL 2021.08.17
반응형