20220220_5주차 정리

권지현·2022년 2월 20일
0
post-thumbnail

💡 브라우저 저장소 ?

데이터 처리를 위해 변수에 저장하면 새로고침한 후에는 데이터가 초기화되기 때문에 로그인한 사용자 정보 등 새로고침을 하더라도 정보가 유지되도록 하는 방법 중 하나로 브라우저에 데이터를 저장하는 방법이 있다.

  • cookie : 데이터 저장 만료 시간이 정해져있는 저장소.
    저장된 데이터가 Backend-API 요청시에 자동으로 함께 전송되기때문에 쿠키에 많은 정보를 저장하는 방식은 비추천.
    백엔드와 정보를 교환할 때 document.cookie 데이터를 확인할 수 있지만 secure(https)/ httpOnly 설정 시 데이터 확인 불가, 벡엔드와 통신으로 데이터 주고받을 때 추천하는 방식.
  • localStorage : 영구 저장이 가능한 저장소.
    localStorage.getItem(“Token”)으로 바로 데이터 확인이 가능하기때문에 정보를 확인할 수 있다는 단점. 벡엔드와의 정보 교환보다 데이터는 저장하고 활용하는 방식을 추천(ex. 비회원 장바구니, 오늘 본 상품)
  • sessionStorage : 임시 저장용. 브라우저를 종료할 때 정보가 초기화되는 저장소.
const aaa = document.cookie
      .split("; ") // ["aaa=철수", "zzz=맹구"]
      .filter((el) => el.startsWith("aaa="))[0];
   //aaa=로 시작하는 요소만 => ["aaa=철수"]
const result = aaa.replace("aaa=", "");
    console.log(result);

값을 한번에 문자열로 가져올 수 있기 때문에 splice()와 startWith()를 사용해서 원하는 값을 가져올 수 있다.

💡 로그인 프로세스

정규표현식이나 yup등의 라이브러리로 우선 검증된 데이터를 API 요청 시
로그인 된 유저의 정보들을 특정한 규칙에 따라 배치된 일렬의 문자열 형태로 변환된 accessToken을 받아올 수 있다.

토큰을 받아왔다는 것은 사용자에 대한 검증이 완료 (이메일과 비밀번호가 일치하는지) 된 것으로 현재 사용자가 해당되는 사용자와 동일한 것을 인증해주는 것으로

서버와 통신할 때 AccessToken 을 함께 넘겨주면서 사용자에 대한 인증을 진행할 수 있다.
서버에서는 클라이언트로부터 받은 비밀번호를 원형 그대로 저장을 하지 않고 비밀번호를 어떠한 규칙에 따라 여러가지 문자들이 섞인 문자열로 변환한 후에 데이터베이스에 저장.

비밀번호를 그대로 서버에 저장하게 된다면 개인정보 유출 및 해킹 위험이 높기 때문에 개인의 비밀번호는 서버 관리자도 확인할 수 없도록 해싱과정을 거쳐야 한다.

벡엔드 서버에서는 해싱한 비밀번호와 이메일이 DB에 저장된 것과 일치하는 지 검증하고, 비밀번호와 이메일이 일치한 데이터가 데이터베이스에 있다면 해당 유저가 로그인 했다는 걸 인증해주기 위한 AccessToken을 만드는 데 이때 사용하는 방식이 JWT 방식

JWT 단점 - 누구나 토큰에 대한 정보 해독이 가능하기 때문에 중요한 데이터보다 아이디,로그인 만료 시간 등만 저장.

💡 Context-API

props로 데이터를 전달하는 방법 대신 전역(global)으로 사용되는 데이터를 최상위 컴포넌트에서 공유할 수 있도록 고안된 방법으로 context를 사용하면 컴포넌트마다 props를 넘겨주지 않고 필요한 컴포넌트에 연결을 통해 데이터를 사용할 수 있다.

//index.tsx
export const ExampleContext = createContext(null);

const myValues = {
  isEdit: true,
};

return (
  <ExampleContext.Provider value={myValues}>
      <BoardWriteConText />;
   </ExampleContext.Provider>
);

// BoardWrite.presenter.tsx
const { isEdit } = useContext(ExampleContext);

return <div>{isEdit ? "수정하기" : "등록하기"}</div>;

💡 refetch -> cache state

브라우저를 새로고침하지 않고 변경된 데이터가 적용된 화면을 보고싶을때 refetch 방식을 사용했는데, 이 방식은 결국 벡엔드에 데이터를 한번 더 요청해서 변경된 데이터가 반영된 정보를 가져오는 것이다.

벡엔드로 정보를 요청하지 않고 Apollo Cache(Global state) 에 저장되어있는 변수를 수정하면 state가 변경되었기때문에 화면이 다시 렌더링되고 변경된 데이터가 적용된 브라우저를 볼 수 있다.

const onClickSubmit = async () => {
    await createBoard({
      variables: {
        createBoardInput: {
          ...inputs
        },
      },
      update(cache, { data }) {
        //apollo-cache state 수정
        cache.modify({
          fields: {
            fetchBoards: (prev) => {
              return [data.createBoard, ...prev]; 
    // [{writer : "영희", password : '1234' ... }] +  prev(기존 데이터)
            },
          },
        });
      },
    });
  };
profile
FE 개발자 성장 기록 👩🏻‍💻

0개의 댓글