JHeaon 개발일지

파이썬으로 sqlite3 DB을 관리하는 방법을 알아보기 전 간단하게 데이터베이스와 그 개념에 대해 살펴보고, 그 지식을 활용하는 형식으로 sqlite3을 이용해 보자. 글의 순서는 데이터베이스가 무엇인지에 대해 살펴보고, sqlite SQL 쿼리문 작성, python에서 sqlite3.db관리 순으로 정리한다. 데이터베이스 데이터베이스 (DB) 정의 데이터베이스란 구조화된 정보 또는 데이터의 조직화된 모음으로 일반적으로 컴퓨터의 시스템에 전자적으로 저장되는 데이터의 모음을 의미한다. 일반적으로 DBMS(Data Base Management System)에 의해 관리되고 처리된다. 주로 삽입(Create), 조회(Read), 수정(Update), 삭제(Delete)를 통해 데이터가 수정되고 처리된다. 📢..

📚 import, export 프로그램을 작성하다보면 다른 모듈에서 함수나 변수들을 가져와 활용하는 경우가 많은데, 이를 사용하기 위해서는 import, export 문을 통해서 해당 행위를 실행한다. 간단하게 보자면, import은 자신의 스페이스에 다른 모듈의 것을 불러온다는 의미이며, export는 반대로 다른 모듈에게 함수나 값을 전달하는 의미로 받아드리면 된다. 📚 Named Export와 Default Export Export 하는 방법은 2가지가 있는데 차이점은 다음과 같다. Default Export - 한 파일 내에서 단 한개의 변수/클래스/함수만을 Export 할 수 있다. - from 뒤에 명시한 파일에서 단 한개의 모듈만 가져오기 때문에 as 키워드 없이 원하는대로 이름을 바꿀 수 ..

📚 Javascript에서 Date 객체 Javascript는 Date라는 내장 객체를 가지고 있다. 이는 날짜와 시간을 저장하고 그걸 처리하는 메소드를 포함하고 있다. 📚 Date 사용 일반적인 Date 객체의 생성은 다음과 같이 한다. const date = new Date(); // result : "2023-03-22T09:48:29.222Z" 📒 Date 객체를 이용한 년,월,일 구하기 const now = new Date();// 현재 날짜 및 시간 const year = now.getFullYear();// 연도 const month = now.getMonth();// 월 const date = now.getDate();// 일 📒 Date 객체를 이용한 시간, 분, 초 구하기 var now..

📚 setTimeout()과 setInterval() 함수 만약 어떠한 함수를 시간의 격차를 두고 사용하거나, 한번만 사용해야 한다면 다음 해당 함수를 이용하여 처리한다. 📒 setTimeout() setTimeout()은 n초뒤에 해당 함수을 한번 실행할 때 사용한다. // 함수 원형은 setTimeout(function, msTime); setTimeout(() => console.log("2초 후에 실행됨"), 2000); 📒 setInterval() setInterval()은 n초 간격으로 함수를 반복적으로 실행 시키고 싶을 때 사용한다. // 함수 원형은 setInterval(function, msTime); setInterval(() => console.log(new Date()), 2000);

📚 Local Storage란 브라우저에 Key-Value 값을 저장할 수 있는 공간을 의미한다. 저장한 데이터는 세션간에 공유되며, 세션이 바뀌어도 저장한 데이터는 유지가 된다. 📚 Local Storage 사용 아래는 localStorage에 아이템을 CURD 방법이다. 📒 setItem() localStorage에 아이템을 추가하기 위해서 setItem() 함수를 사용한다. localStorage.setItem(key, value) 📒 getItem() localStorage에 아이템을 읽기 위해서 getItem() 함수를 사용한다. localStorage.getItem(key) 📒 removeItem() localStorage에 아이템을 삭제를 위해서 removeItem() 함수를 사용한다. lo..

📚 classList 란? javascript에서 classList는 element의 읽기전용 속성으로 css class의 현재 값을 반환한다. classList을 통해서 element에 css class 추가, 제거를 할 수 있다. 📒 사용 예시 const classes = element.classList; 📚 classList class 추가, 삭제 element의 class 목록에 하나 이상의 css class를 추가하려면 classList의 add() 메소드를 사용하며, 삭제는 remove() 메소드를 사용한다. 📒 사용 예시 let div = document.querySelector('#content'); div.classList.add('info'); let div = document.quer..

📚 preventDefault() 어떤 이벤트를 명시적으로 처리하지 않은 경우, 해당 이벤트에 대한 브라우저의 기본 동작을 실행하지 않도록 지정하는 함수를 의미한다. 예를 들어 태그나 태그는 그 태그의 값을 전송하면서 해당 페이지를 새로고침 혹은 이동하는 기능을 가지고 있으나 의도치 않게 사용될 경우가 있을 수 있기 때문에 Event.preventDefault() 를 사용한다. 📒 태그에서의 사용 예제 해온의 블로그 📒 태그에서의 사용 예제 const onLoginSubmit = (e) => { e.preventDefault(); loginForm.classList.add("hidden"); const username = loginInput.value; localStorage.setItem(USERNAM..

event listener - DOM 객체에서 이벤트가 발생할 경우 해당 이벤트 처리 핸들러를 추가할 수 있는 오브젝트 (비유하자면 이벤트라는 소리가 발생했을 때, 듣는 객체를 listener라고 명한다.) - 특정 DOM에 위에 Javascirpt 이벤트가 발생할 때 특정 함수를 호출할 수 있다. 다음은 Click 이벤트에 대한 이벤트리스너를 설정하여 제작된 예제이다. 해당 코드는 a 요소에 마우스 클릭 이벤트가 발생하면 콘솔로그로 hi 라는 글자가 찍혀 나오게 된다. 클릭 event의 종류 이벤트의 종류가 많기 때문에 공식 문서를 참고하여 이벤트 찾자 문서 : https://developer.mozilla.org/ko/docs/Web/API/Window#%EC%9D%B4%EB%B2%A4%ED%8A%B8

📚 getElement*, querySelector*로 요소 접근하기 DOM 탐색 프로퍼티를 사용해 목표 요소에 쉽게 접근할 수 있다. 🔖 DOM : Document Object Model로 웹페이지를 자바스크립트로 제어하기 위한 객체 모델을 의미한다. 📒document.getElement* 을 통해 요소 검색하기 요소에 id 속성이 있으면 위치에 상관없이 메서드 document.getElement* 을 통해 접근이 가능하다. Element 📒document.querySelector* 을 통해 요소 검색하기 document.querySelector* 주어진 CSS 선택자에 대응하는 요소 중 첫번째 요소를 반환한다. 따라서 모든 요소를 반환하는 것을 원한다면, document.querySelectorAll..