session storage, local storage가 뭘까

오늘부터 다시 공부 드가기로 했다

 

실무하면서 내가 기본기가 많이 부족하다고 느껴서

그날그날 팀장님이 말씀하신 내용 위주로 공부할 예정!

 

오늘은 간단한 로그인 기능을 구현했는데 그것조차 절절매서 너무 힘들었다 ㅎ.

 

axios를 활용해 post로 id와 password를 보내는 것!! 

보내면 토큰을 받아 session에 저장하라 하셨다 .. 근데 어떻게 저장하는 지 몰라서 ... ㅎ

 

 

데이터 저장 방법

로컬 스토리지(Local Storage):

로컬 스토리지는 웹 페이지의 도메인과 연결된 클라이언트 측 스토리지 공간으로, 데이터를 영구적으로 저장할 수 있습니다. 이 데이터는 사용자의 브라우저를 닫아도 계속 유지됩니다. 로컬 스토리지는 주로 오프라인 데이터나 애플리케이션의 설정과 같은 정보를 저장하는 데 사용됩니다.

 

세션 스토리지(Session Storage):

세션 스토리지는 로컬 스토리지와 유사하지만, 데이터가 세션(session) 동안에만 유지됩니다. 사용자가 브라우저 세션을 종료하면(브라우저를 닫거나 탭을 닫을 때) 세션 스토리지에 저장된 데이터가 삭제됩니다. 세션 스토리지는 주로 사용자의 임시적인 데이터를 저장하는 데 사용됩니다.

 

 

즉 로컬 스토리지는 사용자가 브라우저를 닫아도 데이터가 삭제되지 않고 정보를 저장할 수 있고,

 

세션 스토리지는 세션 기간동안만 사용할 수 있고, 변경된 사항은 페이지가 닫힐 때까지 저장되어 사용할 수 있다

(창 닫으면 저장된 데이터 삭제댐)

 

로컬스토리지, 세션스토리지 사용법

사용법은 매우.. 간단하다 

 

데이터 저장하기

sessionStorage.test = '123'; // 리터럴 방식

sessionStorage.setItem('test', '123'); // 메소드 방식

데이터 불러오기

sessionStorage.test; // 리터럴 방식
sessionStorage.getItem('test'); // 메소드 방식


sessionStorage.getItem(); // 인자를 안주면, 전체 값 받아오기
sessionStorage.length // 항목 갯수 반환
sessionStorage.key(0); // 인자(인덱스)에 해당하는 key의 value값을 받아온다.

데이터 삭제하기

sessionStorage.removeItem('test');
// sessionStorage 객체에서 원하는 값을 지우는 방법

sessionStorage.clear();
// 한번에 저장된 모든 값을 삭제하는 방법

 

실제 내가 적용한 코드

 

로그인 버튼을 누르면, onSubmit = {handleSubmit} 제출하는데, 로그인할 때 토큰을 세션에 저장하구 , header에도 저장하는 걸 짰다. 그리고 그 토큰을 가지고 사이트마다 세션을 가지고있게? 

 

음.

 

아무튼 데이터 저장하는 부분

const handleSubmit = (event) => {
    event.preventDefault();

    let data = {
      email: email,
      password: password,
    };

    axios
      .post("Url", data)
      .then((response) => {
        const token = response.data.Token;

        if (response.status === 200) {
          // 토큰을 세션 스토리지에 저장
          sessionStorage.setItem("token", token);

          // 토큰을 설정하여 헤더에 추가
          axios.defaults.headers.common["Authorization"] = `Token ${token}`;

          console.log(response);

          navigate("/");
        }
      })
      .catch((error) => {
        console.log(error.response);
      });
  };

post방식으로 요청하고, token 변수를 만들어준다. 

 

그리고 200이 떴을 때, (정상적으로 로그인이 됐을떄)

token을 sessionStorage에 저장을 해준다!! 그리고 토큰을 설정해서 헤더에 추가해줘야한다

 

여기서 Authorization이 또 뭔지 몰라서 쩔쩔 맸던 거 같다...... ㅎ.

 

그리고 로그인 성공했을 때 react-router-dom 기능 중 navigate 기능을 이용해 상품조회 페이지로 이동한다.

 

 

상품조회에서 데이터를 불러오는 코드

async function getProductList() {
    try {
      const token = sessionStorage.getItem("token");

      const response = await axios.get(
        `url`,
        {
          params: {},
          headers: {
            Authorization: `Token ${token}`,
          },
        }
      );

      setList(response.data);
      console.log(response);
    } catch (e) {
      console.error(e);
    }
  }

이쪾은 팀장님이 짜신 코드에 데이터 불러오는 것만 얹은 것이므로 .. 잘 모르겠다 ㅎ.

gpt 찬스 쓰겠습니다

 

비동기 함수는 다음과 같은 일련의 작업을 수행하는데, 주로 Axios 라이브러리를 사용하여 웹 요청을 처리하고, 그 결과로 받아온 데이터를 처리하는 역할을 합니다.

1. 함수 내부에서 세션 스토리지에서 "token"이라는 키로 저장된 값을 가져옵니다. 이는 사용자의 인증 토큰을 나타냅니다.
2. Axios를 사용하여 특정 URL로 GET 요청을 보냅니다. 이때 **params**는 URL의 쿼리 파라미터를 설정하는 객체이며, **headers**는 요청 헤더에 포함될 내용을 설정하는 객체입니다. 특히, "Authorization" 헤더에는 세션 스토리지에서 가져온 토큰이 "Token" 프리픽스와 함께 설정됩니다.
3. 서버로부터의 응답이 성공적으로 받아와지면, 응답 데이터의 data 속성을 추출하여 setList 함수를 호출하여 데이터를 처리합니다. 이 함수는 아마도 받아온 데이터를 화면에 표시하는 용도로 사용될 것입니다.
4. 요청이 실패한 경우(네트워크 문제, 인증 오류 등), catch 블록이 실행되어 오류를 콘솔에 출력합니다.

다 어디서 본 것들인데... 막상 보니까 해석도 안대고 걍 멘붕이 왔다

그리고 내일부터 자바스크립트를 다시 열심히 공부해보려 한다.

 

팀장님이 var, let, const 차이를 여쭤봤는데 걍 이상한 소리하다가 모르겠다고 했다.. 

책을 가져오면 미션이라던지 공부할 걸 알려주겠다라고 하셧다

 

맨날 회의실가서  팀장님이 개념 설명을 해주는데 녹음하고 복습이라도 해야할 모양이다 .... (뒤돌아서면  까먹음 ㅎ.)

 

아자아자 팟팅