코딩/위코드 코딩학습

[위코드] TIL(Today I am Learned) -(45)(파일 다운로드 기능 구현)

카슈밀 2020. 9. 8. 23:45
반응형

- 오늘 해야할 일

파일 다운로드 주소 요청

- 오늘 수정사항

파일 경로 부분 진행 중

fetch함수를 axios로 변경

- 오늘 진행사항

파일 다운로드 로직문제 해결 중

- 오늘의 코드

    })
      .then((res) => {
        const file = new URL(
          `url`
        );
        console.log(file); // 파일 주소 제대로 찍히는 여부
        file.searchParams.get("file"); // 파일 다운로드 
        console.log(file.searchParams.get); // 파일값을 제대로 읽는지 확인
        // FileSaver.saveAs(res.url, "stock") // 라이브러리를 통한 다운로드
        // let a = document.createElement('a') // 자바스크립트 옛날 코드 다운로드 기능
        // a.href = down;
        // a.download = down.split('/').pop()
        // 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();  // user가 입력한 입력창의 내용을 날리기 위한 일부러 화면 리로딩기능 구현
      })
      .catch((e) => {   // fetch나 axios에 에러가 났을때 일부러 에러코드를 잡아내기 위한 cach코드
        console.log(e);
      });
  };

원래는 한때 포기했던 기능이다. 무려 3일간 붙잡았는데, 해당 주소로 접근이 불가능해서...

이를 알지 못해서 console.log만 엄청나게 찍었다.

하지만 서버 통신여부만 들어오지 해당 내용이 어찌 들어오는지는 알수 없었다.

결국 wecode의 coo개발자! 김예리님한테 문의하였다.

코드를 알려주진 않았다. 단지 postman을 써보라고...

그동안 까먹고 있던 postman을 찍어보니 내가 접근이 불가능한 c드라이브 내의 폴더주소로 나오는 게 아닌가?

이때 완전히 알았다.

접근이 불가능하구나하고...

그래서 월요일 9/7에 한번 내가 알아본 주소로 해당 내용을 구현하였다. 이로인해 다운은 된다.  (◕౪◕✿) 

하지만 파일이 깨져서 들어오더라.   (´•̥ω•̥`) 

즉, 백엔드쪽에서 파일을 잘 못 만들어서 주고 있었다.  (´•̥ω•̥`) 

 

정확히 다운로드 기능은 프론트에서 구현했다.

하지만 백엔드 측에서 해당 주소를 주지 못해서 이걸 요구대로 하는 중.

요구가 특이하게 url에 쿼리내용으로 보내달라는 것이었다.

하지만, access token과 개인 이메일 주소를 노출되게 보내달라하는데, 보안 측면에서 거부했다.

이게 무슨 황당한 요구란 말인가?!

하지만 나도 백엔드랑 통신하기 어렵듯이 백엔드도 프론트랑 통신하기 어려우니 해당 부분은 나도 이해한다.

그런데, 백엔드에서 파일이 있는 주소를 못 주는 것을 프론트에 보안측면을 버리고 이것을 요구하는건 아니라고

생각한다.

백엔드나 프론트 둘다 어차피 다들 초보이니 발생하는 문제라고 본다.

 

이제 목요일이면 9/10이면 기업협업도 끝난다.

대충 여태껏 해본 경험을 적으면, 못 써본 라이브러리도 쓰게되는 경험이고하니까 나쁘지는 않다고 생각한다.

하지만, 무급이라는 점에서 썩...;

다들 무급이라 책임도 없으니 신경쓰지말라고 말하지만

내가 만든 코드니까 잘 작동하는 것을 구현해서 보기 위해서 이틀만 열심히 더해서 마무리를 지어야겠다.

그후엔 자바스크립트와 리액트, 리덕스를 완벽히 끝내고 리액트 네이티브를 배우고

자바를 배워 안드로이드 개발에 뛰어들어야겠다고 생각한다.

 

여담으로 이번 인턴쉽이 끝나면 잠시 생활비 벌러 쿠팡에 알바나 갔다와야 할듯 싶다.  (o´〰`o) 

현재 돈은 충분한데, 곧 출시할 arm 맥북 16인치를 구매하려면 여분의 돈이 있어야 하니 말이다...ㅜㅡ

 

솔직히 데스크탑은 Ryzen 3900x, ram 64gb, 1060 6gb라서 그렇게 사양이 모자라거나 하진 않는데,

개발자가 외부에서 개발하는 경우가 종종 있어,

서피스 프로4 i5 8gb 256gb로는 충분하지 않다고 느끼고 있어서이다.

무엇보다 램이 부족해서 버벅거림;;;

액정도 12인치라 작고... -_-

개발모니터도 지급안해서 집에서 태블릿 가져와 개발하는 환경

제일 아쉬웠던 점이다.

개발모니터라도 지급해줬으면...

728x90