소소하냐

MDN 원문 참조 : https://developer.mozilla.org/en-US/docs/Web/API/IndexedDB_API/Using_IndexedDB#version_changes_while_a_web_app_is_open_in_another_tab 날짜 : 2022.11.14 (문서 내용은 계속 변경되는 부분이라 정리한 날짜를 함께 기록) 위 참조 링크 내용을 정리하였습니다. 다른 탭에 웹 응용프로그램이 열려있을 때 버전 변경 (Version changes while a web app is open in another tab) - 데이터베이스 버전 변경 시, 이전 버전이 다른 탭에 열려 있을 경우 : 데이터베이스는 변경이 일어나기 전에 요청을 명시적으로 확인함 (onblocked 이벤트는 탭..

MDN 원문 참조: https://developer.mozilla.org/en-US/docs/Web/API/IndexedDB_API/Using_IndexedDB#adding_retrieving_and_removing_data 날짜 : 2022.11.10 (문서 내용은 계속 변경되는 부분이라 정리한 날짜를 함께 기록) 위 참조 링크 내용을 정리하였습니다. [ 데이터 추가, 검색, 제거 (Adding, retrieving, and removing data) ] 하위 목차 - 데이터베이스에 데이터 추가 (Adding data to the database) - 데이터베이스에서 데이터 제거 (Removing data from the database) - 데이터베이스에서 데이터 가져오기 (Getting data f..

MDN 원문 참조: https://developer.mozilla.org/en-US/docs/Web/API/IndexedDB_API/Using_IndexedDB#creating_and_structuring_the_store 날짜 : 2022.11.09 (문서 내용은 계속 변경되는 부분이라 정리한 날짜를 함께 기록) 위 참조 링크 내용을 정리하였습니다. [ 저장소(store) 생성 및 구조화 (Creating and structuring the store) ] 하위 목차 - 데이터베이스 열기(Opening a database) - 핸들러 생성 (Generating handlers) - 에러 처리 (Handling Errors) - 데이터베이스 생성 또는 버전 업데이트 - 데이터베이스 구조화 (Structu..

MDN 원문 참조: https://developer.mozilla.org/en-US/docs/Web/API/IndexedDB_API/Using_IndexedDB 날짜 : 2022.11.09 (문서 내용은 계속 변경되는 부분이라 정리한 날짜를 함께 기록) 위 참조 링크 내용을 정리하였습니다. - IndexedDB : 사용자의 브라우저에 데이터를 지속적으로 저장하는 방법. - 네트워크 가용성에 관계 없이 온라인/오프라인 모두에서 작동 가능 이 문서에 대하여 - 이 문서는 IndexedDB의 비동기(asynchronous ) API 사용을 안내 - IndexedDB에 익숙하지 않다면, IndexedDB의 주요 특징과 기본 용어(원문) 문서 참고 - IndexedDB API 참고 문서는, IndexedDB AP..

MDN 원문 참조 : https://developer.mozilla.org/en-US/docs/Web/API/IndexedDB_API#see_also 날짜 : 2022.11.08 (문서 내용은 계속 변경되는 부분이라 정리한 날짜를 함께 기록) 위 참조 링크 내용을 정리하였습니다. 설명 IndexedDB API는 강력하지만 복잡합니다. 간단한 API를 선호하는 경우 IndexedDB를 프로그래머에게 더 친숙하게 만드는 라이브러리를 사용해 보십시오. Note: IndexedDB API is powerful, but may seem too complicated for simple cases. If you'd prefer a simple API, try libraries in See also section th..

MDN 원문 참조: https://developer.mozilla.org/en-US/docs/Web/API/IndexedDB_API 날짜 : 2022.11.08 (문서 내용은 계속 변경되는 부분이라 정리한 날짜를 함께 기록) 위 참조 링크 내용을 정리하였습니다. IndexedDB - file/blob을 포함한 구조화된 데이터를 클라이언트 스토리지에 저장하기 위한 API - 저장된 데이터를 인덱스를 사용하여 고성능 검색이 가능 - 많은 양의 데이터를 저장 가능 (Web Storage는 적은 양의 데이터 저장에 유용) Note - Web Workers에서 사용이 가능 Note - IndexedDB API는 강력하지만, 복잡. 단순한 API를 원하면 라이브러리(원문) / 라이브러리(원문->정리) 참고 주요 개..

1. 설치 전 다운로드 Elasticsearch Windows 다운로드 [다운로드 링크] Kibana Windows 다운로드 [다운로드 링크] 2. 원하는 위치에 압축 풀기 Kibana는 압축 푸는데 시간이 오래 걸립니다. 다 풀린줄 알고, 실행했는데 경로 오류가 발생하여 확인하니 압축이 덜 풀린 문제였습니다. ;; 3. Elasticsearch 실행 (명령 프롬프트) * \elasticsearch-8.4.3\bin 이동 > elasticsearch.bat 실행 4. Elasticsearch 실행 확인 중 오류 발생 * http://localhost:9200/ -> 페이지가 작동하지 않습니다. 오류가 발생 5. 설정 변경 * \elasticsearch-8.4.3\config\elasticsearch.ym..

Modal Popup(Layer Popup)을 제어할 수 있도록 하고 싶습니다. 결과물 - 여러 개 모달 팝업이 중첩될 수 있도록 한다. - Dimmed 처리도 함께 돼야 한다. 주어진 Html 조건 * root 영역 바깥에 dimmed 영역이 있다. * modal popup 영역은 Layout 컴포넌트에 위치한다. 소스 파일 간략 설명 * common.css : - 모달 팝업 관련 css 추가 * index.html : - 하위에 영역 추가됨 (dimmed 처리 위함) * Layout.js : - 모달 팝업 제어용 openModalPopup, closeModalPopup 이벤트 추가 - {modalPopup} 추가하여 모달 팝업이 해당 위치에 표시되도록 함 - 로 이벤트 전달 * Modal.js : -..

Lnb, Top 영역은 컴포넌트로 빼더라도, 모든 페이지마다 전체 화면을 감싸는 영역과 Lnb, Top 영역을 반복해서 작성하는 건 불편합니다. 페이지에서는 해당페이지의 내용(Contents)만 작성하고 싶습니다. [ 원하는 결과물 ] - Layout (공통으로 감싸는 영역) : 바깥의 빨간색 테두리 영역 - Top(GNB) : 상단 메뉴 영역 (파란색 테두리) - LNB : 좌측 메뉴 영역 (파란색 테두리) - Contents 부분은 Route로 매핑하여 Contents 부분만 변경되도록 (검은색 영역) ==> 각 페이지 컴포넌트는 Contents 영역만 작성하면 되도록 [ 폴더 구조 추가 ] - /commons 폴더 : 컴포넌트가 아닌 순수 자바스크립트 공통 함수들 모음 - /components 폴더..

이전 기록에서 프로젝트 생성까지 진행하였습니다. 이번 기록에서는 Layout 화면을 컴포넌트로 분리 전, 샘플 페이지로 표현하고 싶은 부분을 대략 작성하는 것까지 입니다. (다음 기록에서 Lnb, Top, Contents로 분리하는 부분을 작업하려고 합니다.) css는 따로 컴포넌트화 하지 않고, 전체적으로 참조하도록 진행할 예정입니다. 1. Prettier 설치 및 설정 1-1. 사용이유 * 정해진 코딩스타일에 맞추어 저장되도록 * 본인 작성시에도 편하고, 여러 명이 함께 개발할 때 코딩 스타일을 자동으로 맞추어주니 편함 1-2. 설치 npm i prettier --save-dev 1-3. 코딩 스타일 지정 .prettierrc.js : 해당 파일 없을 경우 default 값으로 지정, 별도 지정하려면..