728x90 전체 글115 canvas로 그린 sprite 이미지 끊김현상 - 이미지 해상도, pixel, 비트 심도 canvas로 그린 sprite 이미지 끊김현상 - 이미지 해상도, pixel, 비트 심도 처음에 물개 sprite 이미지를 s3로부터 불러와서 canvas로 그리는데 원본의 이미지 끊김 현상이 발생했다. 우리 서비스는 client단에서 canvas가 60FPS로 화면을 그리기 때문에 이미지가 무거운 것이 끊김의 원인으로 생각했다. 하기 예시 이미지 파일이 실제 물개 파일은 아니지만 동일한 리사이징 과정을 거쳤기 때문에 이것으로 설명하고자 한다. 1) 비트 심도 조정을 통한 파일 크기 감소 1) 처음에는 파일 크기만 줄이면 해결되지 않을까라는 생각에 비트 심도를 줄이는 방향(1->2)으로 진행하였으나 여전히 끊김 현상이 발생했다. 이는 s3로부터 이미지 파일을 가져오는 데 시간은 줄여주지만, client.. 2021. 12. 10. [21/11/27] TIL_onClick 무한 렌더링, 21/11/27 TIL onClick event 무한 렌더링. (Room > serchbox.index.js) 아래 코드는 무한 렌더링 된다. const clickTag = useCallback( async (tag) =>{ setSearchKeyword(tag); ... // 함수의 결과값 렌더링시 onClick(clickTag(tag))의 함수가 실행되며 clickTag(tag)의 결과값을 받아오는 과정에서 setSearchKeyword(tag) 코드에 의해 state의 변화가 생기고 이 상태변화는 렌더링을 초래한다. 즉 렌더링 -> 함수실행 -> state 변화 -> 렌더링 -> 함수실행 -> state 변화 -> 렌더링 -> 함수실행 -> state 변화 ->.... 무한 반복 ! 그래서 함수 객.. 2021. 11. 27. [PWA] 프로젝트에 적용하기(feat. ngrok, PWA builder) [PWA] 프로젝트에 적용하기 (feat. ngrok, PWA builder) PWA는 Progressive Web Apps의 약자로 웹을 앱처럼 구현하여 앱의 특정 API들을 구현할 수 있도록 만드는 기술이다. ngrok으로 https 주소 얻기 먼저 PWA를 이용하기 위해서는 https 주소가 필요하기 때문에 localhost주소를 외부에서 접속하도록 연결해주는 ngrok 서비스를 이용하여 주소를 얻었다. ngrok 설치 3000 port에 리액트를 연결해주고 (npm start) 다른 터미널에서 하기 코드를 치면 localhost/3000에 연결된 https 주소가 뜬다. // 인증 ./ngrok authtoken 20xS7xLuD91TKfDnf0IidGAw6TU_cUqpDZf3jg9fVDodM3z.. 2021. 11. 17. [React] z-index, 그의 정체는?!? [React] z-index, 그것의 정체는?!? z-index html나 jsx로 화면을 구현할 때 layer 층 개념이 중요하다. 특정 Object가 제일 특정 위치에 오게 하기 위해서 z-index라는 인자를 사용한다. 기본적으로 숫자가 클수록 더 앞(위)에 위치한다. 하지만 왜 원하는대로 동작하지 않는 것이냐...... 규칙을 알아보자 layering 규칙 1. According to this rule, elements that come later in the markup will be on top of elements that come before them. 뒤에있는 코드가 더 위로 온다. 2. To set position for an element, add the CSS position pro.. 2021. 11. 12. [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. [React] SPA와 React-Redux [React] SPA와 React-Redux SPA SPA은 Single Page Application의 약어로 한 개의 페이지로 이루어진 애플리케이션이다. 뷰 렌더링을 사용자의 브라우저가 담당하도록 하고, 우선 애플리케이션을 브라우저에 불러와서 실행시킨 후에 사용자와의 인터렉션이 발생하면 필요한 부분만 자바스크립트를 사용하여 업데이트한다. 만약 새로운 데이터가 필요하다면 서버 API를 호출하여 필요한 데이터만 새로 불러와 애플리케이션에서 사용할 수 있다. 라우팅 : 다른 주소에 다른 화면을 보여 주는 것 SPA 단점 : 앱의 규모가 커지면 자바스크립트 파일이 너무 커진다. -> 코드 스플리팅(Code splitting)을 이용해 해결 가능 React - Redux React : 소문으로 전파 필요 없는.. 2021. 11. 11. [React] 21/11/07 TIL [React] 21/11/07 TIL useState 컴포넌트에서 보여줘야 하는 내용이 동적으로 바뀔 때 'Hooks'란 기능을 이용할 수 있다. useState는 React 내장함수로서 Hooks 중 하나이다. 데이터는 변수와 state에 저장할 수 있는데, state에 굳이 저장해 놓는 이유는 웹이 App처럼 동작할 수 있게 만들기 때문이다. 즉 state가 변경되면 html이 자동으로 재랜더링이 된다 !! state 데이터를 수정할 때에는 원래 데이터를 놔두고 array deep copy를 통해 수정하는 방식이 바람직하다. 참고고 데이터는 primitive data type 과 Reference data type 2 종류가 있으며 React에서 array 는 Reference data type이다... 2021. 11. 5. [네이버] 우상훈 책임리더/이사님 보호되어 있는 글 입니다. 2021. 11. 5. [Pintos] Project 4 마무리 [Pintos] Project 4 마무리 느낀점 장장 5.5주 동안 진행된 핀토스 프로젝트의 마지막 주차가 끝났다. 아직도 할게 많이 남은 것 같고, 완전히 이해하지 못한거 같은데 끝난다는 게 좀 아쉽긴 하다. 더 하고 싶다는 건 아니고... (세상엔 할수있는 게 너무 많다 !) 핀토스는 분명 체력적으로나 정신적으로 사람을 지치게 한다. 얽히고 섥힌 함수들을 해석하며 그들의 관계를 파악하는 것은 여간 쉬운 일이 아니다. 정말 끊임없이 뽑아도 뽑아도 나오는 줄줄이 사탕처럼 '끝은 어딘가? 아니 시작은 어디었던가?' 하는 순간의 연속이다. ㅋㅋ 엔지니어링 매 프로젝트를 시작할 때 마다 방대한 양과 난이도에 압도되었다. 모든 것을 완벽히 해낼 시간이 주어지지 않기 때문에 어떤 부분에 집중해서 어떤 것을 얻어갈.. 2021. 11. 2. 이전 1 ··· 3 4 5 6 7 8 9 ··· 13 다음 728x90
