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..

🐫 snake_case 응답 데이터를 camelCase로 변환하기 이전에 백엔드(Python)에서 프론트엔드(React)로 보내는 응답을 받았을 때, snake_case로 작성되어 있어서 프론트엔드 코드와 key가 맞지 않는 문제가 있었다. 그래서 camelcase-keys 라이브러리를 사용했다. 이번에는 파라미터에 값을 넣고 보내려고 하니까 400번대가 뜨는 거 아닌가..?! 확인해보니 파라미터명이 맞지 않았다.생각해 보니 내 코드는 camelCase로 작성되어 있어서 요청할 때도 snake_case로 바꿔서 보내야 하는 것이었다.. 당연한데 저땐 생각 못했당 ㅠ 그래서 찾아보니 snakecase-keys 라이브러리도 있었다!! (앗싸) 🐍 snakecase-keysyarn, npmyarn add ..

여태까지 백엔드는 Spring(Java), 프론트엔드는 React(JavaScript/TypeScript)를 사용해서 둘 다 camelCase를 썼었다.그래서 이런 상황을 겪을 일이 없었는데, 이번에는 백엔드에서 파이썬을 사용하고 있어 이런 문제를 겪었다. 파이썬에서는 snake_case를 주로 사용해서 백엔드에서 응답으로 오는 데이터의 key가 snake_case로 작성되어 있었다.프론트엔드에서는 camelCase로 작성하고 있어서 어떻게 해야 하나 싶었는데 이를 변환해 주는 라이브러리를 찾았다. 🐫 camelcase-keysyarn, npmyarn add camelcase-keys위 패키지를 설치해서 사용하면 된다.우리 프로젝트의 경우, 모든 응답의 데이터 key를 snake_case에서 camel..

React Router는 내비게이션, 경로 관리, 동적 페이지 렌더링 등을 위해 사용한다.React Router의 기능들에 대해 알아보겠다. 🔎 Link사용 시기내비게이션 바, 사이드 바, 메뉴 등에서 사용자가 클릭할 수 있는 정적인 링크 제공특징JSX 문법으로 선언적(Declarative)으로 경로 정의a 태그와 유사하게 동작하여 SEO 친화적a 태그와 유사하지만 페이지 리로드 없이 클라이언트 측 경로를 변경예시 코드import { Link } from 'react-router-dom';const NavigationMenu = ({src, alt, text, width, to}: NavigationMenuProps) => { return ( {text} );}; 🔎 use..

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를 적용하게 되었..