일 년 전 · 백승훈 님의 새로운 답변
react-native
svg를 깔았는데 svg모듈을 찾을 수 없다고 떠요 왜이럴까요?
개발자
#react-native
답변 1
댓글 0
보충이 필요해요 1
조회 84
일 년 전 · 김현우 님의 댓글 업데이트
vercel로 배포를 했는데 이미지가 화면에 업로드가 안되는데 뭐가 원인일까요??
vscode에서 리액트 프로젝트를 만들었고 vercel로 사이트를 배포했습니다. 배포된 사이트를 들어가면 전체적으로 잘 작동을 하는데 이미지 하나가 화면에 안뜨네요... 개발자 도구로 확인을 해보면 이미지를 불러오고 있기는 한데, 화면에는 안뜨는 이유가 뭘까요? 이미지는 화면 전체를 감싸는 컨테이너 컴포넌트에 스타일 컴포넌트를 적용하고 있는데 background에서 url을 불러오는 방식을 사용하고 있습니다. ex) const Container = styled.div` background: url('/images/Image.svg') ` 위와 같은 형식으로 작성을 했습니다. 원인이 뭘까요??
개발자
#프론드엔드
#react
답변 1
댓글 5
추천해요 1
조회 695
2년 전 · 익명 님의 질문 업데이트
Lottie json 퍼포먼스 이슈
Lottie 적용을 했는데, 사파리나 성능이 낮은 컴퓨터의 경우 퍼포먼스가 너무 떨어지는 이슈가 있는데요, (버벅거림이 너무 심해서 브라우저가 뻗는 이슈) Lottie 용량도 줄여보고 레이어 갯수를 최대한 줄여도 같은 이슈가 생기네요 ㅠㅠ 비슷한 dotlottie라고 변환해서 적용했는데도 마찬가지고요.. 렌더방식은 svg로 하고있는데 canvas로 렌더링하면 덜하지만 퍼포먼스가 떨어지는건 마찬가지였습니다 ㅠ 혹시 lottie 사용하시는 회원님들 중에 저와 같은 이슈를 경험해보신 분들 계신가요..?
개발자
#javascript
#json
#lottie
#html
#svg
답변 0
댓글 0
조회 334
2년 전 · 이상선 님의 새로운 답변
Lighthouse를 이용한 성능 최적화 - 텍스트 압축 사용
안녕하세요. 개발한 웹 페이지를 lighthouse를 통해 성능 최적화에서 난관을 겪고 1년차 React 개발자입니다. lighthouse에서 추천 항목에 "텍스트 압축 사용"을 적용해보려 시도 중입니다. .htaccess 파일에 다음과 같은 코드를 넣어서 텍스트 압축을 실행하였습니다. <IfModule mod_deflate.c> AddOutputFilterByType DEFLATE image/svg+xml AddOutputFilterByType DEFLATE text/plain AddOutputFilterByType DEFLATE text/html AddOutputFilterByType DEFLATE text/xml AddOutputFilterByType DEFLATE text/css AddOutputFilterByType DEFLATE application/xml AddOutputFilterByType DEFLATE application/xhtml+xml AddOutputFilterByType DEFLATE application/rss+xml AddOutputFilterByType DEFLATE application/javascript AddOutputFilterByType DEFLATE application/x-javascript AddOutputFilterByType DEFLATE application/x-font-ttf AddOutputFilterByType DEFLATE application/vnd.ms-fontobject AddOutputFilterByType DEFLATE font/opentype font/ttf font/eot font/otf </IfModule> 결과적으로 네트워크 탭에서 Content-Encoding: gzip 으로 표시되는 것을 보니까, 텍스트 압축이 되는 것처럼 보입니다. 그런데 lighthouse에서는 성능 점수가 더 올라가지 않고 있습니다. 혹시 "텍스트 압축" 부분에서 최적화 하는 다른 방법이 있을까요? 아니면 제가 놓치고 있는 부분이 있는 걸까요?
개발자
#react
#lighthouse
#front-end
답변 1
댓글 0
조회 335
2년 전 · 이영준 님의 새로운 답변
리액트 컴포넌트 설계에 대해 질문이 있습니다.
현재 Dropdown 컴포넌트를 compound pattern을 접목하여 구현을 해보고있습니다. ChatRoomHeader 라는곳에있는 DotsIcon을 클릭하면 Dropdown이 랜더링되게끔 구현을 하였는데요. 각 메뉴 리스트들을 배열로 해서 map을 사용하여 렌더링해주고있습니다. 제가 생각하는 문제점은 Dropdown안에 있는 로직들이 뭔가 전혀 상관없는곳에서 정의하고 props로 내려주는것에대해서 약간 문제점이 있어보이는것같습니다.. 혹시 다른방법이 있을까요? 아니면 참고할만한 블로그 알려주시면 감사하겠습니다 (__) 'use client'; import Link from 'next/link'; import ArrowLeftIcon from '@/public/arrow-left.svg'; import FlexBox from '@/components/ui/FlexBox'; import DotsIcon from '@/public/tabler_dots.svg'; import Dropdown from '@/components/ui/Dropdown/Dropdown'; import Divider from '@/components/ui/Divider'; export default function ChatRoomHeader({ title }: { title: string }) { const copyToClipboard = async () => { try { await navigator.clipboard.writeText(window.location.href); alert('복사 성공'); } catch { alert('복사 실패'); } }; const CHAT_ROOM_OPTIONS = [ { name: '공지', }, { name: '사진', }, { name: '링크' }, { name: '공유하기', event: copyToClipboard }, { name: '채팅방 나가기' }, ]; return ( <FlexBox as="header" justify="between" align="center" className=" p-8 h-14 tablet:h-24 w-full gap-4 bg-white border-b-[1px]" > <FlexBox className="gap-1"> <Link href="/community"> <ArrowLeftIcon className="w-7 h-7" /> </Link> <p className="text-xl font-bold">{title}</p> </FlexBox> <Dropdown> <Dropdown.Trigger> <DotsIcon className="w-6 h-6 tablet:w-7 tablet:h-7" /> </Dropdown.Trigger> <Dropdown.Menu> <li className="block tablet:hidden"> <Dropdown.Item>인원</Dropdown.Item> <Dropdown.Item>스케줄</Dropdown.Item> <Divider type="horizontal" /> </li> {CHAT_ROOM_OPTIONS.map((option) => ( <Dropdown.Item key={option.name} event={option.event}> {option.name} </Dropdown.Item> ))} </Dropdown.Menu> </Dropdown> </FlexBox> ); }
개발자
#react
답변 3
댓글 1
추천해요 2
조회 1,082
2년 전 · 커리어리 AI 봇 님의 답변 업데이트
리액트에서 SVG 이미지를 어떻게 사용하고 계신가요?
안녕하세요! 1년 조금 넘게 프론트엔드 개발자로 재직 중인 김병연이라고 합니다. 고민이 있습니다..! 리액트 환경에서 리스트 아이템을 map으로 렌더링하고 있어요. 그리고 아이템의 아이콘 이미지를 svg로 사용하고 있습니다. 현재는 img 태그를 사용해서 fill 속성을 제어 할 수 없어, 상호작용을 on, off로 나눠, 개별적으로 불러오고 있습니다.(사용자가 클릭 시 svg 아이콘의 색상이 변합니다.) on,off 이미지를 개별적으로 불러오는 게 좋은 방법인지 모르겠습니다..! svg 이미지들을 컴포넌트로 만들어서 fill 속성을 제어하는 방법도 생각했는데, 차라리 개별적으로 불러오고 캐시되어 사용되는 게 더 나은 것 같습니다. 혹시 다른 방법들도 있나 궁금합니다..! 다른 방법들을 알고 계신다면, 또는 의견이 있으시다면 공유 부탁드립니다! 감사합니다.
개발자
#react
답변 2
댓글 1
조회 448
3년 전 · 손정현 님의 새로운 댓글
Turborepo ui package svg build에러 질문입니다.
해결 방법 있을까요?? tsconfig.json 설정이랑 다 했는데.. 타입 지정도 했습니다. declare module "*.svg" { import React = require("react"); export const ReactComponent: React.FC<React.SVGProps<SVGSVGElement>>; const src: string; export default src; }
개발자
#react
#turborepo
#storybook
#svg
#ima
답변 1
댓글 2
추천해요 3
조회 409