const asyncUpFetch = createAsyncThunk('counterSlice/asyncUpFetch', async () => {
const resp = await fetch('https://api.aergo.io/~~')
const data = await resp.json()
return data.value
})
<Button variant="contained" component="label">
아이콘 업로드
<input
accept="image/*"
multiple
type="file"
hidden
onChange={(e: ChangeEvent<HTMLInputElement>): void => handleUploadIcon(e)}
/>
</Button>
먼저, 업로드 버튼을 만들고, 모든이미지를 허용하고, file타입으로 input태그를 만든다.
const handleUploadIcon = (e: ChangeEvent<HTMLInputElement>) => {
setImgFile(e.target.files[0])
const imagePromise = e.target.files[0].arrayBuffer().then((buf) => {
return makeImage(buf, figure, borderColor)
})
imagePromise.then((resized) => {
const fileReader = new FileReader()
fileReader.readAsDataURL(resized)
fileReader.onload = (e) => {
const image = new Image()
image.src = e.target.result as string
image.onload = () => {
const base64Img = e.target.result as string
// //! 아이콘 해쉬 변환
const hash = CryptoJS.SHA256(base64Img).toString()
const file = dataURLtoFile(base64Img, 'MaskedImage.png')
dispatch(setInfo(base64Img, 'base64Img'))
dispatch(setInfo(hash, '아이콘 추가'))
setFile(file)
}
}
})
}
makeImage함수로 이미지를 masking 그리고, dataURLtoFile 함수로 파일객체로 만들어준다.
useEffect(() => {
if (imgFile) {
const imagePromise = imgFile.arrayBuffer().then((buf: ArrayBuffer) => {
return makeImage(buf, figure, borderColor)
})
imagePromise.then((resized: Blob) => {
const fileReader = new FileReader()
fileReader.readAsDataURL(resized)
fileReader.onload = (e) => {
const image = new Image()
image.src = e.target.result as string
image.onload = () => {
const base64Img = e.target.result as string
const hash = CryptoJS.SHA256(base64Img).toString()
const file = dataURLtoFile(base64Img, 'MaskedImage.png')
dispatch(setInfo(base64Img, 'base64Img'))
dispatch(setInfo(hash, '아이콘 추가'))
setFile(file)
}
}
})
}
}, [borderImgState, borderColor])
useEffect(() => {
if (icon && file) {
dispatch(setInfo(file, 'uploadFile'))
dispatch(setInfo(borderImg, 'borderImgState'))
dispatch(setInfo(borderColor, 'borderColor'))
}
}, [icon, file])
border가 바뀔때마다, 그리고 img가 바뀔때마다, masking 함수를 실행한다.
Promise
자바스크립트 ES6이후에 등장하게 된 promise객체는 비동기 처리 작업 할 때 콜백함수가 쌓이게되는 콜백지옥을 해결하기 위해 처음 등장이 되었다.
같은 원리이지만, promise객체를 통해 더 가독성이 쉽게 표시할 수 있어서 이용하게 되었고,
promise 또한 많은 promise변수를 사용하여 리턴하게 되면 promise지옥을 경험 할 수 있다.
콜백함수, promise, async/await의 응답속도
콜백함수나 promise의 응답속도는 거의 같다.
처음 호이스팅 환경에서 차례로 읽기 때문에 비동기 처리 되는 영역은 처리 완료 되지 않은 상태에서 다음을 읽는다. 따라서, setTimeout함수와 같이 딜레이를 주게 되어도 응답속도는 딜레이를 무시하고 먼저 처리한다.