프론트엔드 썸네일형 리스트형 SVGR id collision issue 해결하기 프로젝트: loplat UI 키워드: svgr, svg, id collision, unique id, sed, regex 상황 loplat UI에서 svgr을 이용하여 Icon 컴포넌트를 만든다. 실제 프로젝트에서 Icon을 사용할 때, 하나의 아이콘을 2번 렌더링하면 이미지가 깨지는 현상을 발견했다. // 2번 렌더링 ... 원인이 무엇인지 고민해보니 svg 속성 중 id가 random값이 아닌 고정값인 것을 확인했다. __a, __b 가 suffix로 붙지만 'infocircle_outline_svg__a' 라는 id값 자체는 고정이라 컴포넌트를 2번 렌더링하면 id 충돌이 일어나는 것이다. loplat UI 코드를 통해 svgr 이 만들어주는 id는 static하는 것을 확인했다. // id 고.. 더보기 번들링 최적화를 통해 import cost 줄이기(2) 프로젝트: loplat UI키워드: bundling optimization, rollup, tree shaking, import cost, webpack, side effects, postpublish상황이전 포스트 번들링 최적화를 통해 import cost 줄이기(1)에서 'esm format build'와 'code splitting' 단계를 거쳤지만 여전히 tree shaking이 제대로 되지 않는다.해결 과정rollup 공식 사이트에서 tree shaking 이 작동하지 않는 상황에 대한 문서를 확인했다.(https://rollupjs.org/guide/en/#tree-shaking-doesnt-seem-to-be-working)Sometimes, you'll end up with code in .. 더보기 번들링 최적화를 통해 import cost 줄이기(1) 프로젝트: loplat UI키워드: bundling optimization, rollup, tree shaking, code splitting, commonJS, es modules, import cost상황팀원분이 완성해둔 loplat ui 라이브러리를 실제 프로젝트에서 사용하고자한다.아래와 같이 사용하고 싶은 컴포넌트를 import 한다. import { Button } from 'loplat-ui';import { black400 } from 'loplat-ui';사용할 컴포넌트에 해당하는 코드만 불러오는 것이 아니라, 번들링 된 코드를 모두 불러와 과도한 import cost가 든다.black400이라는 palette const를 불러오는 것이므로 1kB도 되지않는 작은 크기여야만 한다.해결과정.. 더보기 Chrome과 안드로이드 기기를 유선/무선 연결하기 프로젝트: loplat UI 키워드: mobile debug, adb(Android Debug Bridge), samsung internet, chrome 상황 Spinner를 구현하던 중(https://vroomfan.tistory.com/6), 안드로이드 삼성인터넷 브라우저에서만 Spinner가 오작동하는 버그가 발견되었다. 코드를 여러 방법으로 수정해보았지만 PC 환경에서 디버깅하기엔 한계가 있었다. android와 PC를 연결하여 안드로이드 모바일 화면을 PC chrome에서 디버깅하고자 한다. 해결방법 안드로이드 기기와 PC가 통신할 수 있도록 해주는 adb(Android Debug Bridge)를 설치한다. Android 디버그 브리지 사이트에서 다운로드 받을 수 있지만, macOS의 brew.. 더보기 safari inset, intersection observer 크로스 브라우징하기 프로젝트: loplat X mobile 키워드: 크로스 브라우징, inset, intersection observer 상황 1 Modal을 구현할 때, 회색 배경을 position: fixed; inset: 0; 으로 구현했다. 아이폰 8(12.0.1)과 맥북 사파리 13으로 접속해보니 Modal이 전혀 보이지 않는 현상이 발생했다. 해결과정 Modal 컴포넌트는 createPortal을 이용하여 'portal' div를 부모로 삼아 렌더링한다. return ReactDOM.createPortal( {children}, document.getElementById('portal') as HTMLElement ); 사파리 개발자도구를 통해 확인해보니, portal DOM 의 children 내용은 잘 채워져.. 더보기 Firebase auth 정보를 redux로 관리하기 프로젝트: SNU FESTIVAL 키워드: firebase auth, oauth, redux, redux persist, session storage 상황 로그인 기능은 firebase auth 에서 제공하는 google login을 사용한다.(학교 메일과 Gmail이 연동돼있어 사용하기 쉽다.) 웹사이트 안에서 로그인 정보(email, name, firebase uid)를 이곳저곳에서 사용해야하므로 redux에 저장한다. 로그인을 할 때, 사용자 정보는 firebase auth instance와 redux에 동일하게 저장되어야한다. 로그아웃을 할 때, firebase auth instance와 redux에 저장되어있던 사용자 정보가 사라져야한다. 보안을 위해 브라우저 창을 닫을 때에도 사용자 정보를 제.. 더보기 css animation steps로 Spinner 구현하기 프로젝트: loplat ui 키워드: css animation steps, sprite image, 용량 최적화 상황 로딩 상태일 때 화면에 표시할 Loading UI Component가 필요하다. loplat ui library에서 재사용 가능한 컴포넌트를 직접 구현하고자한다. 로딩 애니메이션을 위해 gif를 사용할 경우 용량과 성능 문제가 발생한다. sprite image와 css animation의 steps 속성을 이용하여 애니메이션 효과를 구현할 수 있다. 해결과정 먼저 디자이너로부터 30장 이상으로 이루어진 sprite image를 받고 img 태그의 src에 넣었다. React Component의 prop으로 duration(애니메이션 재생 시간), scale(컴포넌트 크기 조절), zInd.. 더보기 env 파일의 보안 취약점과 api key 유출에 대비하기 프로젝트: SNU FESTIVAL 키워드: .env, react environment variables, security, chrome devtools sources, firebase auth, firestore 상황 프로젝트에서 로그인 기능은 firebase auth 의 google login 을 사용하고 있고, 데이터 CRUD는 firestore 를 사용하고 있다. CRA 환경에서 firebase api key 값을 .env 파일에 분리하여 저장하고있다. .env 파일이 보안을 위해 사용한다고 알려져있지만, 개발자 도구 source를 통해 충분히 노출될 가능성이 있다. 이를 막기 위해선 백엔드의 도움이 필요하지만, SNU FESTIVAL 프로젝트는 1인 개발이므로 firebase 의 보안 기능을 최대.. 더보기 이전 1 ··· 4 5 6 7 8 다음
