치춘짱베리굿나이스

indexedDB 개인적으로 JLPT 공부를 위한 단어장 어플리케이션을 구상하면서, 단어를 저장할 수단을 고민하다가 브라우저별로 따로 저장할 수 있고, 로컬 스토리지보다 많은 양의 데이터를 담을 수 있는 Indexed DB 에 관해 공부해보기로 했다 json에 단어를 전부 저장해서 프론트엔드 코드 폴더에 저장한 뒤 불러오는 방식은 깃에 코드를 계속 올리다 보니 교재 저작권에 위배될 가능성이 있다고 느꼈다 서버를 만들어서 운용하기엔, 유저별로 다른 데이터를 보여주고 싶다면 회원 기능까지 구현해야 하기 때문에 생각보다 덩치가 너무 커질 것 같았다 그렇다고 회원 기능 없이 하나의 데이터베이스를 모두가 접근하게 하면 마찬가지로 저작권 이슈가 생길 가능성이 있고, 혹여나 (정말 혹시나!) 내 어플리케이션을 쓰고 ..

Web Share API 2차로 갈만한 가게를 추천해주는 웹앱 개발에 참여하면서, 특정 장소나 장소 모음집 (컬렉션) 을 다른 사람에게 공유해줄 수 있는 기능을 만들 일이 생겼다 스마트폰에서 공유 버튼을 누르면 대부분 같은 UI의 팝업이 뜨는데, 이걸 보니 공유 기능이 각자 독자적으로 개발된 것이 아니라 자바스크립트 또는 HTML 등에서 제공해주는 특정 API를 사용하겠구나 싶었고, 실제로도 그랬다 이 API를 사용해서 어떻게 링크 공유를 해줄 지 알아보자 설명 MDN에서의 설명 번역 The Web Share API allows a site to share text, links, files, and other content to user-selected share targets, utilizing the..

localStorage / sessionStorage 이번 기업과제는 로컬스토리지에 값을 저장해야 한다는 조건이 붙어 있어 store 라이브러리를 사용하려고 하는데, 기왕이면 로컬 스토리지에 관해 알고 사용하면 더 좋지 않을까? 싶어 정리를 해 본다 찾아보던 중에 세션 스토리지도 있길래 같이 적으려구 localStorage 로컬 스토리지는 말그대로 로컬에 저장되며, 브라우저를 종료해도 값이 살아있다 또한 같은 페이지 프로토콜 (같은 웹 페이지 주소) 는 탭이나 창이 달라도 같은 로컬 스토리지를 공유하므로, 다른 창을 열었다고 해서 다른 값이 나오지 않는다 이러한 특성 때문에 사용자가 고의로 지워버리지 않는 이상 데이터는 계속 유지된다 브라우저별로 서로 다른 로컬 스토리지 영역을 가지므로, 크롬에서 저장한..

e.currrentTarget vs e.target input 태그에서 값을 받아올 때 맨날 e.target만 사용했었는데 e.currentTarget의 존재를 프리온보딩 피드백을 받으며 처음 알게 되었다 input 태그는 자식 태그가 없고 보통 onChange를 통해 값의 변화만을 추적하기에 망정이지 다른 태그에서 무지성으로 e.target만을 사용했으면 큰일날 뻔 했다... 라고 반성을 좀 했다 ㅡ,,ㅡ;; 값 비교 const handleClick = (e) => { console.log(e.target); console.log(e.currentTarget); } bbb aaa ccc 위와 같은 컴포넌트가 있다고 가정하자 컴포넌트는 bbb 영역과 aaa 영역, ccc 영역으로 나눠진다 aaa 영역과 ..