개발하는 리트리버

API를 통해 받은 데이터가 아래와 같다면 이진법의 경우일 겁니다!

PK?N���]
'[Content_Types].xml͔]O�0���Ko�V@c�ap�ǥ��?��g��k��¿����A>�ܬY�{��...

보통 엑셀 값을 받았을 때 이런 값을 확인 할 수 있는데요, 이때 이 값을 바로 엑셀로 다운로드 되는 방식을 확인해볼게요! 

결과값은 아래와 같아요,

[Result]

		const blob = await response.blob();
		const url = window.URL.createObjectURL(new Blob([blob]));
		const link = document.createElement('a');
		link.href = url;
		link.setAttribute('download', '파일명.xlsx');
		document.body.appendChild(link);
		link.click();
		document.body.removeChild(link);

[Summary]

Blob 이란 Binary Large Object 로, 말 그대로 대용량의 이진법 데이터를 다루는 객체! 입니다.

Sheetjs, xlsx 등으로 프런트에서 엑셀을 직접 만드는 경우도 있지만,

벡엔드에서 엑셀 데이터 자체를 내려줄때는 위와 같은 방법을 통해 바로 다운로드 가능해요.

		const blob = await response.blob();
        	const url = window.URL.createObjectURL(new Blob([blob]));

첫 번째 라인은 api 를 통해 받은 response 값에서 바이너리 데이터를 추출하는 역할이에요.

그리고 나서 그 바이너리 데이터를 가진  URL 을 만들어요. 그럼으로써 브라우저에서 해당 값을 읽을 수 있게 되죠.

		const link = document.createElement('a');
		link.href = url;
		link.setAttribute('download', '파일명.xlsx');

그리고 나서는 document에 해당 url을 연결할 수 있는 태그를 생성하고

파일명을 설정해줄 수 있어요.

		document.body.appendChild(link);
		link.click();
		document.body.removeChild(link);

그 후엔 임의로 body에 만들어둔 태그를 추가하고

click 이벤트를 발동해서 해당 엑셀 다운로드 액션을 실행해요

다 끝나고 나서는 임의로 추가해 두었던 태그를 제거하는 것으로 순서를 끝냅니다.

Blob 으로 이미지, 영상 등의 데이터도 다룰 수 있어요. 기회가 되면 그 친구도,.,  

Xcode에서 실기기 빌드 시에 가끔 해당 기기가 준비 중이라는 알림 창이 나옵니다

마냥 기다려보다가 찾아보니  스오프햄들이(Stack Over Flow 멋쟁이 형님들) 해결책들을 제시해 주셨더군요

한번 확인해봅시다

링크 : https://stackoverflow.com/questions/46316373/fixing-xcode-9-issue-iphone-is-busy-preparing-debugger-support-for-iphone

[SOLUTION 1]

이 친구가 정말로 준비될 때까지 찬찬히 기다려보기

⮕  전 못하겠어요 

[SOLUTION 2]

기기 연결 해제 후 Xcode 와 실기기를 재부팅한 후에 연결해 보기

⮕ 전 이 과정에서 코드의 node-module 삭제 후 재설치, pod 파일 삭제 후 재설치의 과정도 함께 했는데 작동 잘하더라고요!

[SOLUTION 3]

기기 추가해 보기

Xcode ➢ Window ➢ Devices and Simulators

후에 나오는 팝업에서 왼쪽하단 '+' 버튼을 클릭하고 문제가 되는 기기를 선택하여 진행하면 등록이 되면서 문제가 해결된다고 합니다

⮕ 전 이 과정을 먼저 해보았는데 잘 안되더라고요.. 하지만 많은 스택오버햄들이 너무 좋은 방법이었다고 하니.. 살짝 알아두면 중요할 때 빛을 발하지 않을까 싶군요

전 Xocde 가 싫어요. 하지만 또 사랑해야겠죠. 

#0 목표

오늘의 목표는 계좌번호를 입력시킬 Input 컴포넌트를 제작하는 것! 조건은 아래와 같다

1. 표시방식 (우리 125-123-5123 => 1251235123) 이와같이 숫자만 표시되도록!

2. 모바일 기기로 해당 Input 을 클릭했을 때 숫자로 된 키패드가 나오도록!

3. 계좌번호를 복사해서 붙여넣는 경우!

#1 TMI

숫자를 받아야하는 input 태그에 보통 type="number" 를 지정하고 시작하는 경우가 많다.

하지만 상황에 따라 이 방법은 좋지 못하다 ㅜ

숫자가 아니어도 입력된 값은 순간적으로 보여주기도 하고

위 그림처럼 포커스를 해제했다가 이러가면 숫자가 아닌 값을 계속 입력시킬 수도 있다.

또한 가장 애 먹었던 부분 ( 또한 이 게시물을 남겨나야겠다고 다짐하게 만든) 은

웹에서 복사/붙여넣기, 모바일에서의 클립보드 이용 등으로 값을 한번에 붙여넣을 때이다. 

 type="number" 인 상태에서, 숫자 외의 값이 입력되면  e.target.value 으로 값을 받아올수가 없다. 🥺

#2 구현

구현 방식은 아래와 같다.

MUI의 Textfeild 태그를 사용할 때의 예시이다.

const [number, setNumber] = useState();

<TextField
  label="계좌번호"
  type="text"
  value={number}
  onPaste={handlePaste}
  onChange={handleOnChange}
  inputProps={{ pattern: '[0-9]*', inputMode: 'numeric' }}
/>

const handlePaste = (event) => {
  const pastedText = event.clipboardData.getData('text/plain');
  const filteredValue = pastedText.replace(/[^0-9]/g, '');
  setNumber(filteredValue);
  event.preventDefault();
};

const handleOnChange = (e) => {
  const { value } = e.target;
  const filteredValue = value.replace(/[^0-9]/g, '');
  setNumber(filteredValue);
};

- type

'number' 대신에 'text'를 사용하여 숫자가 아닌 값을 받더라도 e.target.value 값을 받아올 수 있도록 한다.

- onPaste

input 태그의 onPaste 속성을 이용하여 붙여넣기 이벤트를 추가해 준다.

이때 preventDefault()를 사용하여 해당 onPaste 변경 후에 다른 변경은 발생하지 않도록 해준다!

- inputProps

        - inputMode

         이 속성을 'numeric' 으로 설정해 줌으로 모바일 기기에서 숫자 키패드가 올라오도록 할 수 있다! 

참고로 안드로이드 기기에서 단순 '붙여넣기'를 사용하면 onPaste가 작동하지만

클립보드를 활용해서 붙여넣기를 하면 onPaste가 발동하지 않는다!

#코멘트는 언제나 환영입니다!