내가 보려고 정리하는/JS
editor.js / Local Storage 사용법 / 애자일 방법론
보동이용용
2023. 5. 2. 17:07
반응형
editor.js
Editor.js
Free block-style editor with a universal JSON output
editorjs.io
Data Grid: AG Grid: High-Performance React Grid, Angular Grid, JavaScript Grid
AG Grid is a feature rich datagrid designed for the major JavaScript Frameworks. Version 29. 3. Download v29 of the best Data Grid in the world now.
www.ag-grid.com
개발자 도구 > application > Local Storage
Local Storage는 해당 url을 벗어나거나 브라우져를 종료해도 데이터가 남아있고
session은 남아있지 않다.
현재 지원되는 용량은 사이트마다 최대 텍스트로 5메가이다.
문제는 객체 저장은 되지 않는다. 오직 문자열만 저장이 가능하다
잘쓰면 객체 지향처럼 사용 가능하고
사용자의 컴퓨터 저장공간을 사용하기 때문에 사용자의 정보를 저장할 수 있고 서버에 필요없는 정보를 굳이 서버에 저장하지 않아도 된다.
Local Storage 사용법
6개밖에 없음. 간단함.
<!DOCTYPE html>
<meta charset='utf-8'>
<body>
<h1>테스트!!</h1>
죄수 아이디<input type = "text" id="tId" value=""><br>
형벌<input type = "text" id="tPuni" value=""><br>
<button onclick="fUpdate()">수정</button>
</body>
<script>
const myTid = document.querySelector("#tId");
const myTpuni = document.querySelector("#tPuni");
const fUpdate = () => {
let schId = myTid.value;
let updatePuni = myTpuni.value;
// 먼저 로컬 스토리지에서 데이터를 읽어와야함, 읽어온 건 문자열!!
let totalData = JSON.parse(localStorage.getItem("criminals"));
// console.log(JSON.parse(totalData));// 의문이 들면 항상 찍어 봄
for(let i = 0; i<totalData.length; i++){
if(totalData[i].id == schId){
totalData[i].punish = updatePuni;
break;
}
}
console.log(totalData); // 요건 메모리상의 데이터
// 변경된 메모리상의 데이타를 다시 localStorage에 써줘야 변경완료
localStorage.setItem("criminals", JSON.stringify(totalData));
}
// 브라우져 저장공간 localStorage/sessionStorage
// 사용법 정확히 똑같음!(하나는 영구저장, 하나는 임시저장)
// 객체는 직접 저장할 수 없고, 꼬옥 문자열로 바꾸어 저장해야만 함(serialize개념)
/*
localStorage.setItem("name", "이죄인");
// localStorage.setItem("name", "무죄"); // 같은 키값을 주면 덮어쓴다.>>수정
// alert({merong:"메롱", age:100});
// localStorage.setItem("check", {merong:"메롱", age:100}); // 객체를 저장하면? [object Object] >> 객체의 타입
localStorage.setItem("check", JSON.stringify({merong:"메롱", age:100})); // 문자열화해서 입력 >> {"merong":"메롱","age":100}
localStorage.setItem("array", JSON.stringify(["흥","치","핑"])); // 문자열화해서 입력 >> ["흥","치","핑"]
localStorage.setItem("revenge", "언젠간 나도 놀라게 할 것임");
// alert(localStorage.length);
// alert(localStorage.getItem("revenge"));
for(let i=0; i<localStorage.length; i++){
alert(localStorage.key(i));
// 순서가 보장이 안됨, 사용시 스스로 정렬하여 사용해야만 한다는 의미.
}
localStorage.clear(); // clear
*/
// 일반적으로 객체지향DB의 형식으로 저장해서 많이 사용
// 특히 MongoDB의 형태(JSON)로 많이 저장
const totalData = [];
const puni = ["벌금형","사회봉사","징역","사형","추방"];
for(let i=1; i<=108; i++){
let member = {};
member.id = (i+1);
member.name = "죄인"+i;
member.punish = puni[ Math.floor(Math.random()*puni.length)];
totalData.push(member);
}
// 로컬스토리지에 저장
localStorage.setItem("criminals", JSON.stringify(totalData));
</script>
애자일 방법론
: 문서보다는 경험중시(수단과 방법을 가리지말고)
개인과 개인 간의 상호작용이 프로세스 및 툴보다 우선
작동하는 소프트웨어가 포괄적인 문서보다 우선
고객과의 협업이 계약 협상보다 우선
변화에 대응하는 것이 계획을 따르는 것보다 우선
반응형