PWA에서 다운로드 버튼을 클릭하면 사용자의 갤러리에 이미지가 저장되도록 하는 것이 구현 목표이다.일반적인 웹에서의 다운로드 링크로는 한계가 있었다. 💾 이미지 다운 구현1. Blob 객체로 이미지 데이터 처리현재 나는 백엔드에서 받은 이미지 url을 가지고 있는 상황이다.이미지 url을 Blob으로 변환한다. 2. 패키지 설치file-saver 라이브러리를 활용해 Blob을 png로 변환한다.나 같은 경우는 파일명에 .png로 지정해 주어 png로 저장되지만, .jpg로 지정하면 jpg로 저장된다.yarn add file-saver 3. 파일 저장 구현const handleDownload = async () => { try { const response = await fetch(imageUrl..

🚨 문제 상황svgr을 쓰기 위해 환경세팅을 하고 있었다.  global.d.tsdeclare module '*.svg' { import * as React from 'react'; export const ReactComponent: React.FC>; const src: string; export default src;}  위 파일의 마지막 src 부분에서 계속 아래와 같은 에러가 뜬다.  이름을 계속 바꿔봤는데 계속 안된다..저기서 중복되었다는 client.d.ts로 들어가 봤다.C:\\S11P12A808\\front-end\\node_modules\\vite\\client.d.ts  여기서 이미 선언되었다고 나온다.global.d.ts 내용이 덮어 써지는 건 줄 알았는데 아닌가 보다..일단..

1️⃣ React Quill 사용하기React Quill은 리액트의 텍스트 에디터 라이브러리 중 하나이다.위지위그(WYSIWYG, What you see is what you get)라고도 하는데, "보는 대로 얻는다"라는 뜻이다.즉, 사용자가 텍스트 에디터에서 작성하며 보여지는 그대로 출력물에서 나타나도록 한다. 📍  패키지 설치yarn add react-quill 📍 기본 코드import ReactQuill from 'react-quill';import 'react-quill/dist/quill.snow.css';interface TextEditorProps { value: string; onChange: (value: string) => void;}const TextEditor = ({val..

안녕하세요😀 싸피 11기 2학기가 시작한지 한 달이 다 되어 갑니다🍃저희 팀 주제는 데스크탑보다 모바일에 적합할 거 같아 웹앱을 구현하기로 했는데요!PWA 특징과 PWA를 쓰기 위한 세팅법을 알아보겠습니다. 📱 PWAProgressive Web Apps모바일에서 네이티브 앱과 같은 사용자 경험을 제공하는 웹 앱ex) Twitter Lite특징PWA는 웹처럼 개발하면 되지만 스마트폰에 네이티브 앱처럼 설치할 수 있고 앱처럼 보이고 동작한다.검색 엔진이 최적화되어있다. (SEO)백그라운드 기능이 네이티브 앱보다는 제한적이지만, 푸시 알림 정도는 가능하다.네이티브 앱에 비해 하드웨어 접근이 제한적이다.저희 팀은 React를 써서 프로젝트를 진행할 계획이었는데 주제가 모바일에 적합해 PWA를 적용하게 되었..