Age of Discovery

로컬 스토리지를 이용한 최근 본 상품 기능 구현 2탄을 시작하겠다. 전 편에서 선수들의 상세페이지에 접속했을 때 로컬스토리지에 선수들의 이름을 저장하는 것 까지 완료했다. 이젠 메인메뉴로 돌아왔을 때 우측에 최근 본 상품 박스를 띄워보자. import { useEffect, useState } from "react"; 역시나 useEffect와 useState는 필수로 import해주고 function App() { let get_local = JSON.parse(localStorage.getItem("data")); 여기서도 get_local이라는 변수에 기존에 로컬에 저장되어있던 'data'의 키를 가진 값 (즉 선수들의 이름)을 할당해준다. useEffect(() => { get_local === ..

로컬스토리지란 무엇일까?? 사용자의 개인 브라우저에 저장하는 임시저장소이며 간단한 데이터를 담고 빼올 수 있어서 매우 편하며 반영구적이다. 로그인할 때도 개인 브라우저에 비번이랑 아이디를 저장해놓은다음 다음에 접속할 때 또 귀찮게 로그인을 안해도 자동으로 로그인이 되는 좋은 기능을 가지고 있다. 로컬 짱! 그럼 JS를 이용해 로컬스토리지에 데이터를 저장하고 빼와서 사용해보자. 아주 간단하게 할 것이다. 원리만 알면 된다! const local_data = 'data' const local_obj = [ { name : '강해상', age : 35 } ] const use_local = () => { localStorage.setItem(local_data, local_obj); } local_data라는..

리액트 막 배우기 시작했을 때 투두리스트를 만들어보려고 했었다. 언제나 그랬듯 LocalStorage를 이용하려 했고 결과는 실패였다. useEffect에 대한 개념이 안잡혀있었기 때문 자 물약챙기고 마나채워서 다시 시작해보자! 메인화면 우측에 우측에 간단한 div 박스를 만들어 최근 본 상품 기능을 fix시키겠다. 선수들의 사진을클릭해 상세페이지인 Detail 컴포넌트로 넘어간 후 다시 메인화면으로 돌아왔을 때 최근 본 상품의 이름이 나오게 끔 해보자 우선은 선수들의 상세페이지를 눌렀을 때 선수들의 이름을 LocalStorage에 저장하자 import { useEffect, useState } from "react"; import { useParams } from "react-router-dom"; c..