말랑말랑 개발기

Environment API새로운 실험적 Environment API의 일환으로 큰 내부 리팩토링이 필요했습니다. Vite 6는 대부분의 프로젝트가 새로운 메이저 버전으로 빠르게 업그레이드할 수 있도록 호환성을 깨지 않으려 노력했습니다. 생태계의 대부분이 새 API를 안정적으로 사용하기 시작할 때까지 기다릴 예정입니다. 일부 엣지 케이스가 있을 수 있지만, 이는 주로 프레임워크와 도구의 저수준 사용에만 영향을 미칠 것입니다. 릴리스 전에 생태계의 메인테이너들과 협력하여 이러한 차이점들을 완화했습니다. 문제점을 발견하시면 이슈를 열어주세요. Vite의 구현 변경으로 인해 일부 내부 API가 제거되었습니다. 이러한 API를 사용하고 계셨다면 기능 요청을 해주시기 바랍니다.Vite Runtime API실험적인..

Google Identity Services로의 마이그레이션  2023년 3월 이후, Google Sign-in platform library는 deprecated 되었으며, Google Identity Services library로 대체되었습니다. 기존에 사용하던 react-google-login 라이브러리를 삭제하고 새로운 라이브러리로 마이그레이션을 진행하였습니다. 이 글에서는 Google Identity Services를 활용한 Google 로그인 구현 방법을 설명합니다. 1. 사전 준비GCP에서 Client ID 발급Google Cloud Platform에서 Client ID를 발급받아야 합니다. 이 과정은 생략하였으며, 관련 자료는 구글링을 통해 쉽게 찾을 수 있습니다. 2. Google Lo..

리액트에서 화면 캡쳐하기제가 받은 요구 사항은 아래와 같습니다. 1. 화면에 랜더링된 부분을 캡쳐하여 이미지로 저장2. 해당 화면에 접속하지 않아도 이미지 저장하는 기능 위 개발을 진행하면서 화면 캡쳐 시 발생할 수 있는 오류 상황과 해결방안을 알아보겠습니다. 1. html2canvas랜더링 된 화면을 캡쳐하고자 할 때 가장 간단하게 사용할 수 있습니다.import { saveAs } from 'file-saver';import html2canvas from 'html2canvas';const downloadImage = async () => { const modalElement = document.getElementById('your-element-id'); if (modalElement) ..

1. vite-plugin-svgr 다운pnpm add -D vite-plugin-svgr 2. 설정 추가vite.config.tsplugins에 svgr() 추가import { defineConfig } from 'vite'import react from '@vitejs/plugin-react'import svgr from 'vite-plugin-svgr' // https://vitejs.dev/config/export default defineConfig({ plugins: [ react(), svgr({ svgrOptions: { // svgr options }, }), ], })  2-1. vite-plugin-svgr ^4.0.0vite-en..

React 에서 쿠키를 사용할때 react-cookie 라이브러리를 사용합니다. 물론 필요한 곳에서 라이브러리를 불러다 사용할 수도 있지만, 유지보수를 쉽게 하기 위해서 하나의 파일에서 관리하는 편이 좋습니다. 이렇게 하나의 파일에서 관리하면, 쿠키 키를 한눈에 볼 수 있고 관련 코드를 찾기도 쉬워 응집도를 높힐 수 있습니다. import { Cookies } from 'react-cookie';const cookies = new Cookies();export const COOKIE_KEY = 'customKey';export const setCookie = (name: string, value: string, options?: any) => { return cookies.set(name, value,..

홈페이지 우측 하단에 고정되어 따라다니는 플로팅 버튼을 만들었습니다. 그런데 이 플로팅 버튼으로인해 홈페이지 최하단 푸터의 일부 정보가 보이지 않는 현상이 있었습니다. 이를 방지하고자 스크롤을 일정 이상 내렸을 경우 플로팅 버튼이 사라지는 효과를 넣었습니다. 부드럽게 보이기 위해 페이드인, 페이드아웃 애니메이션도 추가해주었습니다. body의 전체 스크롤 높이를 이용하여 EventListener를 붙이는 간단한 방법입니다. export const FloatingButton = () => { const [isVisible, setVisible] = useState(true); useEffect(() => { const handleScroll = (e: Event) => { if (window.scrollY ..

vite에서 절대경로를 설정해 주기 위해서는 vite.config.ts와 tsconfig.json에 alias를 설정해줘야 합니다. 이것이 귀찮다면 vite-tsconfig-paths 플러그인을 사용합니다. (관련 링크) 이번 글에서는 플러그인을 사용하지 않고 manual 하게 설정해 보겠습니다. 자주 사용하는 src, atoms, hooks, components, pages, types 폴더에 대해서 설정해 보겠습니다. vite.config.ts import path from 'path'; import { defineConfig } from 'vite'; import eslint from 'vite-plugin-eslint'; import react from '@vitejs/plugin-react-sw..