본문 바로가기

Frontend146

JavaScript : 웹 스토리지 (2) - IndexedDB란? 앞서 Cookie와 Local Storage, Session Storage에 대해 공부했었다. 웹 스토리지의 경우에는 소량의 단순한 데이터를 효율적으로 저장하는데 적합하다. 대량의 구조적 데이터를 처리하기 위해서는 IndexedDB라는 API를 사용하여 대규모의 복잡한 데이터를 관리할 수 있다. indexedDB는키-값 쌍으로 데이터를 저장하며, 비동기 방식(함수 호출 시 결과를 반환하지 않는 대신, 함수를 종료할 때 동작할 콜백함수를 전달함. 요청한 동작이 종료되면 success, error와 같은 이벤트를 받아 다음 동작을 진행)으로 동작한다.  IndexedDB은 다음과 같이 사용한다.데이터베이스 생성 및 열기데이터베이스에 objectStore(객체저장소) 생성 : objectStore에 저장된 객.. 2024. 8. 18.
JavaScript : 웹 스토리지 (1) - Cookie와 Web Storage HTTP 프로토콜(웹 브라우저가 서버와 통신하는 규칙)의 경우 요청과 응답을 주고 받아 한 사이클이 종료되면 연결이 끊어진다. 즉 로그인정보다 브라우저에서 입력한 값 등이 페이지를 이동할 때마다 초기화 된다. 이러한 문제점을 해결하기 위해 데이터를 저장할 수 있도록 쿠키, 웹스토리지가 나오게 되었다. Cookie 쿠키는 클라이언트의 정보를 여러 세션동안 유지하기 위해 사용하는 기술로, 브라우저에 저장되는 만료기간이 존재하는 작은 텍스트 파일의 데이터이다. 쿠키는 사용자가 따로 요청하지 않아도 브라우저가 Request 시에 자동으로 서버에 전송한다. document.cookie쿠키는 클라이언트 측에서 정보를 유지할 수 있게 해 주며, 서버와 클라이언트 간에 상태를 공유하는 데 유용하다. 하지만 쿠키는 몇 .. 2024. 8. 17.
Node.js 설치하기 및 VScode에서 사용하기 Node.js는 Chrome V8 JavaScript로 빌드된 자바스크립트 런타임(프로그래밍 언어가 구동되는 환경)이다. 내장HTTP 서버 라이브러리를 포함하고 있어 자바스크립트를 웹 브라우저로부터 독립시켜 서버 구현을 가능하게 한다. 다양한 패키지 매니저(npm)을 기반으로 다양한 모듈(패키지)를 제공한다.  1. Node.js 설치하기Node.js는 Node.js 홈페이지에서 설치가 가능하다. Download Node.js(LTS)를 눌러 다운로드 받는다. 여기서 LTS란 Long Term Support로 해당 버전의 안정성과 신뢰도를 보장할 수 있는 버전을 의미한다. 다운로드를 받은 파일을 눌러 시행한 다음에 설치를 진행해주면 된다. 특별히 변경할 항목이 없어 그대로 설치하면 된다. 2. Node... 2024. 8. 16.
JavaScript: location 객체란? LocationLocation객체는 웹 브라우저의 url과 관련된 정보를 처리하는데 사용한다. 객체가 연결된 인터넷 상에서의 위치(url)에 대한 정보 제공 및 속성을 가져올 수 있다.속성설명location.href주소영역에 참조주소를 설정하거나 URL을 반환location.hashURL에 해시값(#에명시된값)을 반환location.hostnameURL에 호스트이름을 설정하거나 반환location.hostURL에 호스트이름과 포트번호를 가져옴location.portURL에 포트번호를 반환location.protocol URL에 프로토콜을 반환location.searchURL에 쿼리(요청값)을 반환location.reload()새로고침이일어난다 2024. 8. 15.
JavaScript: Screen 객체 Screen 객체는 사용자의 모니터 정보를 제공하는 객체로, 사용자 화면의 너비 및 높이 등에 대한 정보를 얻을 수 있다. 현재는 media query가 나오면서 사용 빈도가 줄었다.  종류설명screen.width화면의 너비screen.height화면의 높이screen.availWidth작업표시줄을 제외한 화면의 너비screen.avail.Height작업표시줄을 제외한 화면의 높이screen.colorDepth화면의 표현 가능한 컬러 색상 수 반환screen.pixelDepth화면의 픽셀당 비트 수 반환  See the Pen Untitled by coding-ji (@coding-ji) on CodePen. 2024. 8. 15.
JavaScript : 모듈(module)에 대해서 초창기의 JavaScript의 경우 스크립트의 크기도 작고 기능도 단순했기 때문에 모듈이 필요 없었다. 이후 Node.js의 등장하면서 자바스크립트의 사용법이 확장되면서 코드가 전체적으로 비대해지면서 모듈의 필요성이 증가하게 된다. 이에 ECMAScript6에서 모듈 시스템을 표준화 하여 import와 export 문을 통해 모듈화된 코드를 지원하게 된다.  모듈(module)모듈이란 기본적으로 JavaScript 코드를 담고 있는 파일을 의미한다. 이 파일은 관련된 함수, 객체, 클래스, 변수 등을 포함하고 있다. 모듈 시스템을 통해서 코드의 재사용성 및 유지보수를 용이하게 할 수 있다. 모듈은 모듈마다 자신의 스코프를 갖는다. 따라서 변수나 함수를 내보내거나(export) 가져오지(import)않는다.. 2024. 8. 14.

티스토리툴바