👉🏻 환경: vue2 + axios 👉🏻 API : jsonplaceholder[참고링크] 간단한 TEST를 위해서 jsonplaceholder API를 사용하겠습니다. 다음과 같은 컴포넌트가 있고 /posts에 get 요청을 하고 있습니다. // src/components/home.vue {{ item.title }} 👉🏻로컬스토리지에 5분동안 캐싱하기 이렇게 API 호출해서 받아온 데이터를 로컬스토리지에 저장하고 5분동안 캐싱해보도록 하겠습니다. {{ item.title }} 로컬스토리지에 caching하기위해서 정의한 함수들 // src/lib/storageCaching.js import http from '@/api/index'; // apis호출 메소드 모음. const apis = { post..

moonbucks-menu 스탭 1 회고 안녕하세요 TriplexLab 입니다. blackcoffee study라는 프론트 앤드 개발자 스터디를 최근에 알게 되어서 그곳에서 들은 내용들을 적어 보겠습니다. 블랙커피를 소개합니다. 훌륭한 의사소통은 블랙커피처럼 자극적이며, 후에 잠들기가 어렵다 - A.M. 린드버그(미국의 작가, 수필가) www.makerjun.com 👉 스탭 1에서 얻은 인사이트 1. 중복 코드를 하나의 함수로 따로 빼서 관리한다는 것 2. 요구사항을 단계별로 세세하게 나누는 게 중요하다는 걸 알게 됐다. 3. DOM 요소를 가져올 때는 $기호를 써서 변수로 사용할 수 있는 게 좋았다.(jquery 아님) 4. 새롭게 알게 된 메서드 insertAdjacentHTML // step1 요구..

안녕하세요 TriplexLab입니다. 오늘은 로컬 스토리지(localStorage)를 이용해서 검색어 기능을 만들어보겠습니다. 로컬 스토리지(localStorage) 로컬 스토리지에 관한 자세한 설명은 제가 작성한 글을 참고해주세요. 👇👇 [JavaScript]로컬스토리지, 세션스토리지, 쿠키 정리 🙋‍♂️ 로컬 스토리지, 세션 스토리지, 쿠키 차이점 안녕하세요 TriplexLab 입니다. 오늘은 로컬 스토리지, 세션 스토리지, 쿠키 차이점에 관해서 하나씩 살펴보도록 하겠습니다. 🍪 Cookie 📌 쿠 triplexlab.tistory.com 이것은 CRUD 중에서 C와 D에 해당되는 내용입니다. 음 개인적으로 간단한 이런 검색 기능 같은 경우에는 로컬 스토리지를 이용해서 만들어도 괜찮을 것 같네요. 프..

🙋‍♂️ 로컬 스토리지, 세션 스토리지, 쿠키 차이점 안녕하세요 TriplexLab 입니다. 오늘은 로컬 스토리지, 세션 스토리지, 쿠키 차이점에 관해서 하나씩 살펴보도록 하겠습니다. 🍪 Cookie 📌 쿠키는 만료 기한이 있는 Key, Value 형태의 저장소 function setCookie(name, value, day) { var date = new Date(); date.setTime(date.getTime() + day * 60 * 60 * 24 * 1000); document.cookie = name + '=' + value + ';expires=' + date.toUTCString() + ';path=/'; }; function getCookie(name) { var value = docu..