# indexedDB

chloe1205

1. 리팩토링이란? > 결과물의 변경 없이 코드의 구조를 재조정한다는 의미로 코드의 가독성과 편리한 유지보수를 하기 위해 진행하는 행위를 의미한다. ( 버그를 없애거나 새로운 기능을 추가하는 행위와는 다르다! ) 리팩토링은 왜 해야할까? 1 ) 나 뿐만 아니라 다른 사람들과 다 함께 일하며 만드는 코드이므로 코드의 가독성을 높이기 위해! → 잘 만든 코드는 내가 봐도 남이봐도 읽기 쉬운 코드라고 들었던 기억이난다. 2) 코드 검토를 통해 발생할 수 있는 버그를 체크 할 수 있다. 3) 더 빠르고 수행되거나 더 적은 메모리로 프로그램을 사용하기 위해! → 단순히 깔끔하기만 한 코드 보다도 엔지니어는 늘 성능 향상을 위해 고민해야하고 좋은 품질을 제공하기 위해 개선 사항을 고민해야한다. 즉, 현재 코드를 바탕으로 더 이해하기 쉽고 확장하기 쉽도록 만들어야 개발속도가 좋아진다는것을 기억하자! 2. 모듈(module) 이란? > 프로그램을 구성

vieowf23r

HTML 구성 HTML에서 > 기호는 하위에 있는 태그를 의미 + 기호는 같은 레벨에 존재하는 태그를 의미 태그명.클래스명 이런식으로 . 를 통해 태그와 클래스명 구분 index.html 에서 `` 안에 다음 코드를 넣어 자바스크립트 파일이 연결됨 HTML문서는 위에서부터 순차적으로 load하지만 defer 키워드를 통해 HTML 문서가 전부 load된 다음 자바스크립트 파일을 load한다. createElement HTML 태그를 생성한다. 새로 만든 `` 태그를 modalEl이라고 선언. setAttribute 지정된 요소의 속성 값을 설정한다. modalEl 에 class=”modal__layout” 이라는 속성 추가. removeChild modalEl 노드를 삭제. FileReader 참조 [[JavaScript] 파일 입출력 (FileRead

dlwl98

HTTP와 HTTPS의 차이점 > HTTP와 HTTPS의 주된 차이점은 암호화 HTTPS는 대칭키 암호화와 비대칭키 암호화를 이용한다. > 비대칭키 암호화 > > 공개키와 개인키를 암복호화에 이용함. > > 공개키로 암호화 후 개인키로 복호화, 개인키로 암호화, 공개키로 복호화 처음 연결 시 안전한 연결(세션키 공유)을 위해 비대칭키 암호화를 통해 세션키를 공유하게 된다. 이후 데이터 교환시에는 대칭키 암호화(처음 연결시 공유된 세션키 이용)를 이용해 연산속도를 빠르게 한다. HTTPS의 연결과정 클라이언트(브라우저)가 서버로 최초 연결 시도를 함 서버는 인증서를 브라우저에게 넘겨줌 브라우저는 인증서의 유효성을 검사하고 세션키를 발급함 브라우저는 세션키를 보관하며 추가로 서버의 공개키로 세션키를 암호화하여 서버로 전송함 서버는 개인키로 암호화된 세션키를 복호화하여 세션키를 얻음 클라이언트와 서버는 동일

a770418

sessionStorage localStorage IndexedDB 각각의 차이점에 대해 알아보자 sessionStorage에 대해 sessionStorage의 특징 sessionStorage는 크롬을 기준으로 개발자 도구 -> 상단의 Application -> Storage에 sessionStorage로 로 들어가면 각 브라우저 탭별로 접근이 가능하다 이 저장소의 특징으로는 휘발성 데이터여서 해당탭을 끄는 순간 데이터가 사라진다. 각각의 탭별로 데이터를 가지고 있다( 오리진(도메인·포트·프로토콜)이 같은 경우 각각의 탭, iframe에서 공유 됌 ) 유효기간이 정해져 있다( 탭이 닫힐때 까지 ) localStorage와 SessionStorage는 string형태의 key : value 값으로 저장된다. sessionStorage의 장점 쿠키보다 큰 저장용량 http를 통한 조작이 불가능함( 오직 자바스크립트만을 이용해 조작가능 )

sebinn

💡 web storage HTML5에서는 웹 데이터를 클라이언트에 저장할 수 있는 기술인 web storage에 대해서 LocalStorage, SessionStorage, IndexedDB 등의 기술들을 제공하고 있다. (Web SQL Database 기술도 포함되어 있지만 본 글에서는 Web SQL Database를 제외한 나머지 3개의 기술에 대해서만 다뤄보려고 한다.) web storage는 cookie보다 훨씬 더 많은 데이터를 저장할 수 있으며, 서버에 데이터를 저장하거나 복잡한 데이터베이스를 구축하지 않아도 데이터를 쉽게 관리할 수 있게 해준다. 이러한 이유로, web storage는 웹 애플리케이션 개발에서 매우 유용하게 사용되고 있다. 앞서 언급한 3가지 기술에 대하여 각각의 장점과 단점을 알아보고, 어떤 상황에서 어떠한 기술을 사용하면 좋을지 그 적합한 사용 예시에 대해서도 함께 살펴보고자 한다.

khakisage

웹 페이지를 제작할 때, 브라우저에 데이터를 저장하는 것은 필수적인 부분이다. 브라우저에 데이터를 저장해야 하는 이유에 대하여 알아보자. 브라우저에 데이터를 저장하는 이유 웹 페이지에서 Client와 Server는 HTTP 프로토콜을 통해 통신을 진행한다. 이때, HTTP가 가지는 특징인 stateless로 인하여 요청 간의 연관성이 없다. 따라서, 각각의 요청은 독립적으로 처리되기 때문에, 예를 들어 로그인 정보를 유지하는 경우에 매번 요청에 사용자의 로그인 정보를 서버에 전달해야 한다. 매번 로그인 정보를 서버에 전달하게 되면, 서버의 부담이 늘어나고, 웹 페이지의 성능도 저하되는 문제가 발생한다. 따라서, 브라우저에 이러한 상태 정보들을 저장하게 된다면, 매번 서버에 해당 데이터를 전달하지 않아도 되며, 이를 통해 웹 페이지의 성능을 향상시키고, 서버의 부담을 줄일 수 있다. 브라우저에 데이터를 저장하는 방법 Cookie 쿠키는 브라우저에 저장되는 작은

cogito

인스타그램 클론코딩 과정 중 indexedDB를 처음 다루고있다. 생활코딩 indexedDB강의를 바탕으로indexedDB의 기본개념과 사용방법을 정리해보고자 한다. 웹브라우저에 정보를 저장하는 것의 장점 정보를 서버가 아닌 클라이언트에 저장하여 네트워크를 이용하지 않기 때문에 데이터를 가져오는 속도가 빠르다. 오프라인에서도 데이터를 사용할 수 있다. 속도가 빠르기 때문에 비용이 절약된다. 사용자의 정보가 서버로 전송되지 않고 브라우저에 직접 저장되기 때문에 보안이 유지된다. indexedDB의 특징 브라우저에 정보를 저장하는 기술은 대표적으로 Cookie, LocalStorage, indexedDB가 있다. 이 중 indexedDB의 상대적인 특징은 다음과 같다. 저장공간이 크다. (브라우저마다 다르다. 크롬의 경우 컴퓨터 저장장치의 80%까지 저장할 수 있다.) 네트워크에 포함되지 않는다. 데이터 타입의 제한이 없다. 비

foureaf

callBack 콜백함수 일급시민, 일급 객체 콜백함수 : 다른 함수의 입력값으로 전달되어 다른 함수에 의해서 나중에 호출되는 것. array.filter 내부에 있는 부분도 콜백함수. 콜백함수는 한 번만 사용하는 경우가 많고, 떨어져있으면 응집력이 낮아져서 파라미터 내부 안에 익명함수 형태로 작성하는 경우가 많음. IndexedDB IndexedDB의 특징 (장점) 서버 저장이 아닌 클라이언트 저장이기 때문에 속도가 훨씬 빠름 오프라인에서 데이터 사용 가능 비용 절약 사용자의 정보가 안전하게 클라이언트에 저장됨 | | Cookie | LocalStorage | IndexedDB | | --- | :--- | :---: |

dev_cdd

WEB Storage 보통 웹페이지를 구성할 때 정보들을 기억해야 할 때가 분명 존재한다. 간단한 텍스트부터 용량이 꽤 되는 파일까지 다양한 요소들이 있다. 이를 위해 당연히 외부 DB를 사용할 것이라고 생각하겠지만 간단한 정보를 위해 외부 DB에 접근해서 값을 찾아오는 것은 성능적인 부분에서 꽤 손해가 큰 경우가 많다. 그럴 때 사용하는 것이 웹 브라우저 내의 기능인 기능이다. * Local Storage * 로컬 스토리지는 말 그대로 본인이 사용하고 있는 로컬 환경에 저장하는 방식이다. 세션을 종료하더라도 자료가 그대로 남고, 재활용에 용이하다는 장점이 있다. 크롬의 개발자 모드에서 로 들어가면 확인할 수 있고, 구현방식도 되게 간단하다. 이런식으로 값을 해줌으로써 에 값이 저장된다. 여기서 값을 다시 꺼내오려면 다음과 같이 진행하면 된다. 메서드 종류는 다음과 같다. 하지만 이 방식은 브라우저마다 용량에 대한 제한이 있고, 그 제한이

donghyun1113

IndexedDB란? IndexedDB는 서버에 데이터를 저장하는 것이 아닌, 웹 브라우저, 클라이언트 단에 데이터를 저장할 수 있는 DB이다. ‏‏‎ ‎ ‏‏‎ ‎ 장점 웹브라우저에 db를 저장하면 클라이언트와 서버와 모두 좋은 점이 있다. 네트워크를 통하지 않기 때문에 빠르게 데이터를 가지고 올 수 있어 속도가 빠르다. 별도의 서버 없이 오프라인에서 사용 가능하다. 속도가 빠르기 때문에 비용이 절약된다라는 장점이 있다. 사용자의 정보가 서버로 전송 되지 않기 때문에 안전하게 클라이언트 단에 보관된다. 웹 브라우저에 저장하는 데이터들 [![IndexedDB image](https://slid-users-assets-v1-seoul.s3.ap-northeast-2.amazonaws.com/public/capture_images/450aab81ce0f468aaa18344f270278b4/8

beberiche

IndexedDB IndexedDB는 웹 브라우저에서 사용할 수 있는 자바스크립트 기반의 데이터베이스 시스템이다. 이를 사용하면 클라이언트 측에서도 데이터 처리를 수행하는 것이 가능해진다. 서버로 전송하지 않아도 되기 때문에, 성능을 높이고, 비용도 줄이는 등의 이점을 가질 수 있다. 비동기 IndexedDB에서는 대부분의 작업이 비동기적으로 수행된다. 이는 IndexedDB가 대량의 데이터를 처리할 수 있도록 하기 위한 방식이다. 비동기 방식으로 작업을 처리할 때는, 작업 결과를 핸들링하는 콜백 함수를 등록해야 한다. 이 콜백 함수는 작업이 완료된 후에 호출되며, 작업 결과를 인자로 전달받는다. IndexedDB - 시작하기 IndexedDB에서는 여러 개의 database를 만들 수 있으며, 각 database 내부에는 여러 개의 object store를 가질 수 있다. 이를 통해 비슷한 형태의 데이터끼리 모아서 저장할 수 있다. database를 생성하는

bwj0509

indexedDB란? IndexedDB는 파일이나 블롭 등 많은 양의 구조화된 데이터를 클라이언트에 저장하기 위한 로우 레벨 API 장점 많은 양의 구조화된 데이터를 클라이언트에 저장할 수 있다. Javascript 기반의 객체지향 데이터베이스이다. 트랜잭션을 사용하며 Key-Value 데이터베이스이다. 비동기식 API 이다. react-indexed-db 라이브러리 > react-indexed-db react-indexed-db is a service that wraps IndexedDB database in an "easier to use" service. It exposes very simple promises API to enable the usage of IndexedDB without most of it plumbing. 라이브러리를 사용하면 indexedDB를 쉽게 핸들링 할 수 있어 사용하기로

devsol

프로젝트를 진행하며 장바구니 데이터를 로컬에 저장해두기 위해 적합한 웹 스토리지를 찾던 중, IndexedDB에 대해 알게 되었다. 웹 스토리지 중에 왜 IndexedDB를 선택했는지, 그리고 프로젝트 내에서 어떤 방식으로 구현을 했는지 간단하게 정리해보려 한다. IndexedDB 우선 IndexedDB란 무엇이고 어떤 특징을 가지고 있는지 알아보자! [IndexedDB는 파일이나 블롭 등 많은 양의 구조화된 데이터를 클라이언트에 저장하기 위한 로우 레벨 API이다.](https://developer.mozilla.org/ko/d

gyuri092

"2주간의 웹 서비스 개발 프로젝트가 끝났다!" 엘리스 SW 엔지니어 트랙 3기에 와서 처음 한 프로젝트가 끝이 났다. 개발부터 배포까지의 과정을 한 것은 처음이었고, 정말 하루 하루가 눈뜨면 코딩 눈감기 전에도 코딩 생각뿐이었던 것 같았다. 하루에 잠자는 시간을 제외한 모든 시간을 개발에 쏟으면서 대망의 쇼핑몰 웹 만들기를 성공리에 마쳤다. 1. 프로젝트를 진행하며 좋았던 점 ◆ 협업 우선, 누구 하나 빠짐없이 열정 가득하고 열심히 하는 팀원들을 만났다는 것이 가장 좋았다.🥰 바닐라 자바스크립트 프로젝트이기 때문에 여러 가지 한계점이 존재함에도 의지와 열정으로 어려운 점들을 모두 메워줬기에 해낼 수 있었다. 또한, 매일 하루도 빠짐없이 진행하는 스크럼으로 개발의 방향성을 명확히 하고 소통에 부족함이 없었기에 서로가 맡은 영역에 대한 내용을 공유하고 같이 고민해줄 수 있었던 것이 좋았다. ![](https://velog.velcdn.com/images

profitgyu

웹 스토리지 웹 스토리지는 해당 도메인과 관련된 특정 데이터를 서버가 아니라 클라이언트에 저장 할 수 있도록 하는 기능이다. 1. 쿠키 1.클라이언트가 서버에 방문한 정보를 클라이언트 단에 저장하는 작은 파일을 의미한다. 2.클라이언트의 브라우저 메모리 혹은 하드디스크에 저장이 된다. 3.매번 서버에 전송되므로 크기가 클 경우 서버에 부담이 갈 수 있다. 4.대략 4KB까지의 데이터를 저장할 수 있으며 유효 기간이 존재한다. 2. 웹 스토리지 1.클라이언트에 데이터를 저장할 수 있도록 HTML5부터 새롭게 지원하는 저장소이다. 2.키(Key)와 값(Value)의 쌍 형태로 데이터를 저장한다. 3.쿠키와 달리, 서버에 전송되지 않으므로 서버에 부담이 가지 않는다. (명시적으로만 전송 가능) 4.쿠키와 달리, 대략 5MB까지의 데이터를 저장할 수 있으며 유효 기간이 존재하지 않는다. 5.HTML5를 지원하지 않는 브라우저에서는 사용할 수 없다. 6.종류로는 로컬 스

cloud_oort

썸네일 출처 Next.js를 이용하여 프로젝트를 진행하였습니다. indexedDB는 웹 브라우저에 정보를 저장하는 툴 중 하나이며, 최근 본 작품 기능을 구현하기 위해 indexedDB를 사용하기로 결정했습니다. 왜 indexedDB? 웹 브라우저에 데이터를 저장하는 기술은 많습니다. 대표적으로 cookie, localstorage, indexedDB가 있습니다. | | cookie | localStorage | indexedDB | |:----------:|:----------:|:----------:| :----------:| | 저장공간 | 소량 | 5MB | 브라우저마다 다름, chrome의 경우 컴퓨터의 저장장치의 80%까지 저장가능 (이런 정책은 언제든지 바뀔 수 있음) | 네트워크에 포함 | 포함됨(때문에 인증작업에 많이 쓰임) | 포함안됨 | 포함

huisso

🤔 IndexedDB API에 대해 정리한 글입니다. IndexedDB API IndexedDB는 많은 양의 구조화된 데이터를 클레이언트에 저장하기 위한 클라이언트 스토리지이다. 🙋‍♀️ 클라이언트 스토리지 localStorage, cookies, indexedDB가 클라이언트 스토리지에 속한다. 핵심 개념 SQL을 사용하는 관계형 데이터베이스(RDBMS)와 같이 트랜잭션을 사용하는 데이터베이스 시스템이다. 고정컬럼 테이블을 사용하는 RDBMS와 달리, IndexedDB는 Javascript기반의 객체지향 데이터베이스이다. 엔딕스 키를 사용해 저장 및 검색할 수 있다. 사용 순서 : 데이터베이스 스키마 지정 -> 통신 오픈(windpw -> 트랜잭션을 통해 데이터 가져오기 혹은 업데이트 애플리케이션 블록을 방지하기 위해 모두 비동기로 이루어진다. IDB IndexedDB를 개선한 라이브러리 [IDB 공식Github](https

outclassstudio

브라우저에 이런 친구가 내장되어 있다는 걸 이제야 알았다 1. indexedDB란? indexedDB는 브라우저에 내장된 데이터 베이스입니다. 따라서, 일반적으로 사용되는 데이터베이스의 사용법과 거의 똑같은 접근이 가능합니다. ※ localStorage와의 비교 indexedDB는 localStorage와 마찬가지로 데이터를 로컬에 저장할 수 있습니다. localStorage는 string만을 저장할 수 있는 데 반해 indexedDB는 키/값 쌍으로 원하는 데이터를 얼마든지 저장할 수 있습니다. localStorage는 10mb의 용량 제한이 있지만, indexedDB는 비교적 더 큰 데이터를 저장 할 수 있습니다.(아래 표 참고) ※ 브라우저별 indexedDB 사용 가능한 용량 크롬 : 사용자 디스크 용량의 60% 엣지 : 사용자 디스크 용량의 60% 파이어폭스 : 빈 디스크 용량의 50% 사파리 :

negu63

읽으면 얻을 수 있는 것 브라우저에 암호 키를 안전하게 저장하는 방법 약간의 webcrypto API 지식 약간의 indexedDB 지식 발단 종단 간 암호화를 구현하는 과정에서 클라이언트에 암호 키를 저장해야 할 필요가 생겼습니다. 그런데 웹에는 안전한 키 저장소가 없다고 생각해서 앱으로 다시 개발하고 있었습니다. 그러다가 브라우저에서 작동하는 암호 화폐 지갑들은 개인 키를 어떻게 저장하는지에 의문이 생겼고 이에 대해 검색하던 중에 괜찮은 방법을 찾게 되었습니다. 지갑들이 이 방식을 사용하는지는 모르겠지만 좋은 방법인 것 같아서 공유하고자 글을 썼습니다! 실마리 검색하면서 여러 가지 방법들을 봤는데 '이거다!' 하는 방법은 딱히 없었습니다. 그런데 <a href="https://crypto.stackexchange.com/questions/35530/where-and-how-to-store-private-keys-in-web-applica

heena92

Client-side Storage란? Client-side Storage는 클라이언트 측 저장소로서 웹 브라우저에서 사용자의 허락 하에 사용자 컴퓨터에 웹사이트 정보를 저장할 수 있는 저장소이다. 브라우저 자체에 데이터를 저장함으로써 사용자가 필요할 때마다 서버에서 정보를 가져오는 것을 건너뛸 수 있다. 용도 웹사이트에 대한 선호 개인화 (예, 사용자가 선택한 커스텀 위젯, 배색, 폰트 크기 사용) 이전 활동 기록 저장 (이전 세션에 담았던 장바구니 목록 저장, 로그인 유지) 사이트 다운로드가 빨라지고(잠재적으로 비용이 적게 들어가고) 네트워크 연결 없이도 사용할 수 있게끔 데이터를 로컬에 저장 오프라인 상태에서 사용할 수 있도록 웹 애플리케이션 생성 문서를 로컬에 저장 참고 웹 스토리지 무엇을 써야 할까요? 종류 쿠키(Cookie) **쿠키(C