Reactjs

발단이전 게시글에서 html2canvas를 이용하여 화면 스크린캡처 후 이미지 저장 기능을 구현해봤다.회사에 출근해서 바로 프로젝트에 적용해봤는데 생각지 못한 이슈가 있었다..! 이미 공식문서를 통해서 봐서 알고있었지만, html2canvas는 DOM을 canvas에 그린 후 image로 데이터를 내려받는 형식이라서 이 과정에서 css스타일이 빠지거나, svg이미지와 같은 요소들은 누락이 되었다 이 라이브러리를 프로젝트의 들일 때의 요건 사항으로는 테스트 기간에 QA가기능/UI테스트 이미지 증적을 쉽고 빠르게 업로드 할 수 있도록 하기 위함이였고,지금 개발중인 시스템은 컨텐츠나 디자인적요소가 많아  화면 캡쳐가 깨져버린다면 무슨소용이람? 싶었다🤷‍♀️그래서 htlml2canvas말고 다른 대안의 라이브..

SI프로젝트에서는 아직 많은 환경이 폐쇄망에서 이루어 진다.내가 있는 금융권 프로젝트는 특히 더더욱 그러함😂🤣 그래서 이러한 요구사항이 나온적이 있다. 단위테스트/통합테스트 단계에서 결함 이미지를 따서 이미지를 반입요청하고, 이를 프로젝트 관리시스템(PMS)에 업로드하기까지 너무 번거롭다는 것이다..! 그래서 테스트기간 중 화면에 챗봇버튼처럼 플로팅 버튼을 두어 클릭하면 해당 화면을 캡처하면 해당 프로그램에 대한 정보로 PMS업로드 까지 연결해달라는 것!   그래서 알아보았다!화면을 캡처하고 이미지로 내려받게하는 아주 요긴한 라이브러리~이름하여 'html2Canvas' !  이미지 캡처를 도와주는 라이브러리에는 html2canvas, dom-to-image, html-to-image 등 여러개가 있지..

service-worker.ts/// /* eslint-disable no-restricted-globals */import { clientsClaim } from 'workbox-core';import { ExpirationPlugin } from 'workbox-expiration';import { precacheAndRoute, createHandlerBoundToURL } from 'workbox-precaching';import { registerRoute } from 'workbox-routing';import { StaleWhileRevalidate } from 'workbox-strategies';declare const self: ServiceWorkerGlobalScope;clients..

useEffectDOM의 렌더링 이후 리액트 함수 컴포넌트에 어떤 일을 수행해야하는지 알려주기 위해 useEffect 훅을 활용할 수 있다. 그럼 useEffect의 타입정의를 알아보자. function useEffect(effect: EffectCallback, deps?: DependencyList): void;type DependencyList = ReadonlyArray;type EffectCallback = () => void | Destructor; useEffect의 첫번쨰 인자로는 effect 타입인 아무것도 반환하지 않는(void) Callback 함수이다. Promise 타입은 반환하지 않으므로 비동기 함수는 들어갈 수 없다. 두번째 인자인 deps는 옵셔널하게 제공되며 effect가 ..

React.js의 핵심 개념 중 하나는 컴포넌트의 생명주기(Life Cycle)이다. 컴포넌트의 생명주기는 컴포넌트가 브라우저에 나타나고, 업데이트 되고, 마지막으로 사라질 때까지의 과정을 말한다. 이 생명주기는 여러 단계로 나뉘며, 각 단계마다 개발자는 특정 코드를 실행할 수 있는 메서드를 이용할 수 있다. (생명주기 메소드는 Class형 컴포넌트에서만 사용할 수 있다) 먼저 마운드될 때 발생하는 생명주기는 아래와 같다 constructor : 생성자 메서드. 컴포넌트 생성시 가장 먼저 실행되는 메서드 getDerivedStateFromProps : props 로 받아온 것을 state 에 넣어주고 싶을 때 사용한다. render : 컴포넌트를 표시하는 메서드 componentDidMount : 컴포넌..