728x90 정글 2기/나만의무기 프로젝트2 canvas로 그린 sprite 이미지 끊김현상 - 이미지 해상도, pixel, 비트 심도 canvas로 그린 sprite 이미지 끊김현상 - 이미지 해상도, pixel, 비트 심도 처음에 물개 sprite 이미지를 s3로부터 불러와서 canvas로 그리는데 원본의 이미지 끊김 현상이 발생했다. 우리 서비스는 client단에서 canvas가 60FPS로 화면을 그리기 때문에 이미지가 무거운 것이 끊김의 원인으로 생각했다. 하기 예시 이미지 파일이 실제 물개 파일은 아니지만 동일한 리사이징 과정을 거쳤기 때문에 이것으로 설명하고자 한다. 1) 비트 심도 조정을 통한 파일 크기 감소 1) 처음에는 파일 크기만 줄이면 해결되지 않을까라는 생각에 비트 심도를 줄이는 방향(1->2)으로 진행하였으나 여전히 끊김 현상이 발생했다. 이는 s3로부터 이미지 파일을 가져오는 데 시간은 줄여주지만, client.. 2021. 12. 10. [React] 슬라이드 모달창(Modal) 구현 (feat. React-Redux) [React] 슬라이드 모달창(Modal) 구현 (feat. React-Redux) React-Redux 없이 Modal 구현(21/11/10) showModal 변수를 useState를 이용하여 on / off 기능을 통해 모달을 구현하였다. 클릭시 openModal 함수가 실행되어 showModal값이 false에서 true로 바뀌고 모달창이 pop-up되었을 때 배경(Background)을 누르면 clsoseModal 함수가 실행되어 다시 false로 바뀌어 모달창이 꺼진다. // index.js import React, { useState } from "react"; import SideBarModal from "../../../components/Modal/SideBarModal.js"; ..... 2021. 11. 11. 이전 1 다음 728x90
