[위코드] TIL(Today I am Learned) -(43)(세션스토리지 호출)

- 오늘 해야할 일

submit 버튼을 구현하여 해당 값을 죄다 보내고, 서버에서 보내온 파일을 다운 받을 수 있게 만들기.

- 오늘 수정사항

step1 세션 스토리지 저장방식 변환.

step4 세션 접근 방식으로 값을 조절.

- 오늘 진행사항

파일 다운로드 기능을 제외한 모든 기능 구현.

- 오늘의 코드

  // 백엔드 버튼 눌렀을시에 보내주는 기능
  const SubmitQuery= () =>{
    const comp  = sessionStorage.getItem("comp");
    const startDate = sessionStorage.getItem("startDate");
    const endDate = sessionStorage.getItem("endDate");
    const selected = sessionStorage.getItem("selected");
    const PERCO = sessionStorage.PERCO;
    const PERNO = sessionStorage.PERNO;
    const email = check.email;
    const format = check.format;
    const query_name = check.query_name;
    fetch(CRSP_SUBMIT,{
      method: "POST",
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({
        comp, startDate, endDate, selected, PERCO, PERNO, email, format, query_name
      })
    })
    .then(res => res.json())
    .then(res => {
      // <Link href={getFile.url}
      //   download={getFile.saveAsFileName}>
      // </Link>
    })
  }

const email, format, query_name은 check라는 state값에서 접근이 되었기에 저렇게 작성이 가능하다.

그러나

const file = sessionstorage.comp;
const access = file.check;

이렇게 접근은 안되는 것 같더라.

한번 다시 연구해보고 접근이 된다면 코드를 확 줄일 수 있을거라고 생각한다.

너무 낭비라고 생각되는 코드양

원래는 코드를 바로 fetch내에서 접근하려고 했는데, 실패했다.

 const SubmitQuery= () =>{
    fetch(CRSP_SUBMIT,{
      method: "POST",
      headers: {
        'Content-Type': 'application/json',
      },
      body: 
        sessionStorage.getItem("check");
        sessionStorage.getItem("comp");
        sessionStorage.getItem("startDate");
        sessionStorage.getItem("endDate");
        sessionStorage.getItem("selected");
        sessionStorage.getItem("PERCO")
        sessionStorage.getItem("PERNO")
    })
    .then(res => res.json())
    .then(res => {
      // <Link href={getFile.url}
      //   download={getFile.saveAsFileName}>
      // </Link>
    })
  }

TypeError: sessionStorage.getItem(...) is not a function

이라는 오류문구를 보면서 포기.

 const SubmitQuery= () =>{
    fetch(CRSP_SUBMIT,{
      method: "POST",
      headers: {
        'Content-Type': 'application/json',
      },
      body: 
        sessionStorage.getItem()
    })
    .then(res => res.json())
    .then(res => {
      // <Link href={getFile.url}
      //   download={getFile.saveAsFileName}>
      // </Link>
      // sessionStorage.clear()
    })
  }

전체 호출로 한번에 날로 먹겠다는 심보를 거절한것인지... 인자가 없다고 호출이 안되더라.

해당 값을 호출하려면 따로

const bundle = sessionStorage.getItem();로 fetch 바깥에서 빼야했던건가?

흠....

 

오늘의 경험은 세션, 로컬, 쿠키의 접근 방식에대해서 알게된 경험이었다.

정상적으로 진입이 되어 해당 값들은 정상작동된다.

내가 기입한 부분은 정상적으로 작동!

400이 뜨는 이유는 다른 팀원 부분이 작동되지 않아서 세션값으로 안들어오다보니 그런 듯하다.

아직 안되는 일부분이 있어 그부분은 수정된 후에 작동되리라고 본다.