𝐂𝐡𝐫𝐨𝐦𝐞 𝐞𝐱𝐭𝐞𝐧𝐬𝐢𝐨𝐧

𝐃𝐚𝐬𝐡𝐁𝐨𝐚𝐫𝐝
/
𝐂𝐡𝐫𝐨𝐦𝐞 𝐞𝐱𝐭𝐞𝐧𝐬𝐢𝐨𝐧
Search
Share
𝐂𝐡𝐫𝐨𝐦𝐞 𝐞𝐱𝐭𝐞𝐧𝐬𝐢𝐨𝐧
Why Chrome extension?
아무래도 요근래 컴퓨터로 공부를 하는 경우가 많아 모든것을 컴퓨터로 해결하고 싶은 마음이 컸습니다. 핸드폰으로도, 아이패드로도 혹은 아날로그하게 수첩으로도 필요할 때마다 필기를 할 수 있지만 조금 더 접근성이 좋으면 좋겠다는 생각을 했습니다. 그러다 문득 익스텐션 탭에 눈길이 가게 되었고, 투두리스트나 메모장을 익스텐션으로 만들어볼 수 없을까? 하는 생각을 하게 되었습니다.
깃허브
chrome-extension
sieunnnn
토이프로젝트 진행과정
•
대략적인 구성 짜기
피그마로 구성을 짜보았습니다. 개인적으로 윈도우98 감성을 참 좋아해서 이를 살려 만들어보았습니다..
•
manifest.jason 작성
{
  "manifest_version": 2,

  "name": "TodoList",
  "description": "윈도우 98 의 감성을 입힌 투두리스트와 메모장 입니다!",
  "version": "1.0.0",

  "browser_action": {
    "default_icon": "icon.png",
    "default_popup": "todoList.html"
  },
  "permissions": [
    "tabs",
    "activeTab",
    "storage"
  ]
}
JSON
복사
manifest_version 은 3 이 최신이지만, 3 에서는 activeTab 이 지원이 되지 않아 2 로 낮추어 진행하였습니다.
•
코드작성
◦
일반적인 todoList 와 memo 기능을 만들었습니다.
◦
localStorage 에 저장할 수 있도록 만들었습니다.
Local Storage
로컬 스토리지란 무엇인가? 로컬 스토리지는 웹 스토리지의 한 종류입니다. 데이터를 브라우저 상에 저장하는 기술인데, 동일한 컴퓨터에서 동일한 브라우저를 사용할 때에 한해 데이터 영속성이 유지됩니다. 만약 이 기술을 사용하지 않는다면 새로고침 하자마자 데이터가 날아가 버리겠죠,,
웹 스토리지는 기본적으로 키와 값으로 이루어진 데이터를 저장할 수 있습니다. 기본 API 사용법은 다음과 같습니다.
// 키에 데이터 쓰기
localStorage.setItem("key", value);

// 키로 부터 데이터 읽기
localStorage.getItem("key");

// 키의 데이터 삭제
localStorage.removeItem("key");

// 모든 키의 데이터 삭제
localStorage.clear();

// 저장된 키/값 쌍의 개수
localStorage.length;
JavaScript
복사
웹 스토리지를 이용하여 데이터를 저장/읽기 할 때 주의해야할 점이 하나 있습니다. 웹 스토리지는 문자열 데이터 밖에 저장할 수 없다는 점인데요, 이를 위해 데이터를 저장할 때는 배열을 JSON 형태로 직렬화(serialization) 하고, 데이터에 접근할 때는 반대로 스트링 형태의 데이터를 JSON 형태로 역직렬화(deserialization) 하여 원본의 데이터를 그대로 얻습니다.
직렬화
역직렬화
직렬화/역직렬화 간단한 정리
직렬화 & 역직렬화 ( JS )
이전 포스팅에서 Serialize(직렬화) & Deserialize(역직렬화) 에 대한 개요 느낌의 내용을 알아봤다.이번 포스팅은 이러한 방식의 데이터 포맷방식 중, 가장 대표적인 JSON 에 대해서 알아본다.JSON(JavaScript Object Notation)자
https://velog.io/@youngminss/WEB-직렬화-역직렬화-JS
시연
투두기능
메모기능
회고
밍기적대지만 않았다면 하루만에 끝냈을건디,, 너무 게으름을 피운것 같습니다. 나름 디테일을 살려보겠다고 했는데, 남이 보았을 때 잘 보일지는 모르겠습니다. 
그래도 간단한 프로그램, 재미있게 잘 마친것 같습니다. 만들고 보니 수정기능을 넣지 않아서 조만간 시간날 때 꼭 넣어봐야 겠습니다. 쓰다보면 그 기능이 필요할 때가 오겠죠,,?
크롬 익스텐션을 한번 만들어봤으니 다음 팀 프로젝트 진행 시 이를 사용해봐야 겠습니다. 어떻게 활용을 해볼지 벌써부터 기대가 되네요!
읽어주신 분들 모두 감사드립니다.