힘차게, 열심히 공대생

티스토리 블로그에서 꽃가루 터지는 효과를 따온건데, 먼저 티스토리 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..

자바스크립트에서 배열 내의 요소를 확인할 때 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: '바둑이'..

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

이번에는 내배켐 프로젝트를 진행하면서, 사용자가 있으면 좋을것 같은 기능이라고 생각한 이미지 파일 미리보기를 기록해 보겠슴다! 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 ..

몽고디비에서 도큐멘트를 생성할 때 자동적으로 priamry key 인 '_id'를 자동적으로 생성한다. 이걸 고유한 값으로 파이몽고에서 사용해줄려고 했지만, '_id'값은 ObjectId 객체이기 때문에 파이썬에서 인식도 되지않고, 이 오브젝트 아이디 객체를 클라이언트에게 고대로 보낼 수가 없어 에러가 났다. (Type error.... ㅠ) 이 objectid를 사용하기 위해서는 2가지 방법을 이용할 수 있다 1. Object to str 첫번째 방법은 간단하게, objectid 객체를 string타입으로 변환하여 사용하는 방법이다. # object to str post["_id"] = str(post["_id"]) post["count_heart"] = db.likes.count_documents({..

몽고디비 컬렉션 필드를 Array, 즉 배열로 만든 후, 배열의 요소로 컬렉션을 가지는 구조이다. 특정 인덱스를 삭제하고 싶어, 인덱스를 구했지만, 따로 그럴 필요없이 $pull 제한자의 조건을 이용해 해결 $pull 제한자의 탐색범위가 생각보다 넓은 것 같다. db.events.update_one({'number': int(event_id_receive)}, {"$pull": {'join': {'username': my_username}}}) 참고 : https://answer-id.com/ko/56164145

팝업창 닫을 때, 현재 페이지 새로고침을 하기위해, 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

MongoDB 실행중 갑자기 알 수 없는 에러가 떳다..ㅠ erro code : network is unreachable. reason: couldn't connect to server localhost:27017, connection attempt failed: socketexception: error connecting to localhost 에러원인이 뭉개져서 제대로 보이지 않아, 이거저거 알아보던 중 모두 지우고 다시 설치하기로 했다..ㅠㅠ 몽고디비를 지우는 방법은, 서비스 중인 몽고디비를 종료하고 해야하지만, 몽고디비에 연결도 되지 않는 상황이기에 그냥 설치했던 몽고디비 폴더를 모조리 지워버렸다. 이제 다시 설치해보자 (윈도우 기준) 1. C드라이브에, 그림과 같이 data 라는 폴더를 만들고,..

HTML5에서 제공하는 레이아웃만을 위한 의미(semantic) 요소는 다음과 같습니다. body 태그안에서 나누어진다고 보면 됩니다. HTML 문서나 섹션(section) 부분에 대한 헤더(header)를 정의함. HTML 문서의 탐색 링크를 정의함. HTML 문서에서 섹션(section) 부분을 정의함. HTML 문서에서 독립적인 하나의 글(article) 부분을 정의함. HTML 문서에서 페이지 부분 이외의 콘텐츠(content)를 정의함. HTML 문서나 섹션(section) 부분에 대한 푸터(footer)를 정의함. 1. header HTML5에 새롭게 추가된 요소로서, 웹 문서 맨 윗부분에 있으며 웹 사이트 이름, 글로벌 링크(로그인, 회원가입, 사이트맵, 언어 선택등 웹사이트 어느 곳에서든지..

아주 나이스한 깃초보의 깃 실습을위한 연습 툴이다. 소스트리처럼 브랜치나 커밋의 움직을을 볼 수 있다. https://learngitbranching.js.org/ Learn Git Branching An interactive Git visualization tool to educate and challenge! learngitbranching.js.org