코딩/위코드 코딩학습

[위코드] TIL(Today I am Learned) -(47)(다운로드 기능 실행!)

카슈밀 2020. 9. 9. 20:31
반응형

- 오늘 해야할 일

다운로드 기능 구현

영문 번역 진행

- 오늘 수정사항

영문 번역 진행.

다운로드 기능 구현

- 오늘 진행사항

 

- 오늘의 코드

    })
      .then((res) => {
        const down = res.data.data.download;
        let a = document.createElement('a')
        a.href = down;
        a.download = down;
        document.body.appendChild(a)
        a.click()
        document.body.removeChild(a)
      })
      .then((res) => {
        sessionStorage.removeItem(
          "stock_code",
          "comp",
          "start_date",
          "end_date"
        );
        alert("요청하신 메일로 정상 발송되었습니다");
        window.location.reload();
      })
      .catch((e) => {
        console.log(e);
      });
  };

 

오늘 드디어 날 무던히 괴롭히던 다운로드 기능을 완성했다.

왜 고생했냐면 백엔드에서 데이터를 이상하게 주고 있었다.

파일 접근 경로

console.log(res.download)로 찍어보니

파일은 정상적으로 주는 것 같은데, 해당 주소로 접근이 안되는 것이었다.

하드 코딩으로 하면 정상적으로 다운이 되는걸 보고 정상적으로 다운은 되는데 왜 안되고

해당 주소로 계속 undefined가 뜨는 것일까? 생각했다.

왜 접근이 안되지 하고 있었는데, 백엔드에서

postman에서는 data -> download뜨길래 나도 response -> data -> download 이렇게 주는 줄 알고 계속 했는데

어째서인지 undefined가 계속 뜨던 것이었다.

이상하다 싶어서 불현듯 생각이 나서

res => console.log(res)를 했더니 위의 내용대로 뜨는 것을 보고

구조를 중복구조로 response -> data -> data -> download로 주고 있던 것을 깨달았다.

백엔드도 초보라서 처음에는 주소(내장 드라이브 주소)로 이상하게 주더니

이젠 주소를 꼬아서 주었던 것이었다 -0- 살려줘요!

둘다 초보라서 고생....아무튼 고생많았어요!

코딩이 뭐 그렇죠. 시행착오의 연속!

 

아무튼 이젠 결과적으로 정상적으로 작동해서 해당 파일 다운로드 기능은 완벽하게 굴러간다.

나도 이걸 구현하면서 많이 배운 다운로드 기능이었다. 무려 3편이나 관련 내용을  적었다!

그만큼 공을 많이 들이고, 검색도 여러번 했다.

 

마지막으로 앤서에서 취업제의를 하면 취업을 할것이냐고 물어보길래, 내가 거절했다.

아직 실력적으로 너무 많이 부족하다고 생각하기에

조금 더 공부해서 완벽하게 된다면 취업해도 되지 않을까라는 것이 내용의 이유.

 

생각해보니 같은 인턴쉽을 나간 3명중에서 2명은 취업되었는데, 나는 안되었군 =-=;;;

실력적으로 내가 떨어지는 것은 맞으니까 이를 개선해서 더 뛰어나도록 열심히 해야겠다.

 

이제 리덕스도 이해했지만, 리덕스 saga, thunk 등등 배워야하고

리덕스를 대체하기 위해 useContext란 것도 나왔다던데 이거 배우고,

타입스크립트 배운 후에 자바를 배워 개인용 서버도 만들어서 

내 nas에 ds716+ 서버 올려서 써먹어보던가 해야겠다.

 

이제야 올려보는 중간 발표 실행 영상.

풀 영상

youtu.be/e4O8m5HujZ0

내 담당부분 영상

youtu.be/wed-U9Lg738

 

728x90