개발환경react : v19vitetypescriptstyled-components : v6 폰트 다운로드 - Pretendard GOV woff 형식🔗 Pretendard GOV - woff 형식https://github.com/orioncactus/pretendard/tree/main/packages/pretendard-gov/dist/web/static/woff 폰트 경로사용할 폰트를 다운로드 후 public/fonts 폴더에 이동 시킨다.📂 public/ ├── 📂 fonts/ │ ├── PretendardGOV-Regular.woff2 │ ├── PretendardGOV-Bold.woff2src/assets/fonts/에 폰트 파일을 두면 vite build 실행 시 dist/ ..
Home 컴포넌트를 import할 때 "@/pages/Home" 형식이 아닌 src경로 하위의 폴더에 바로 접근하고 싶었다. 내가 원하는 경로 형식import Home from "pages/Home"; 하지만 아래와 같이 `pages/Home' 모듈 또는 해당 형식 선언을 찾을 수 없습니다.' 라는 오류가 뜨면서 경로를 찾을 수 없었다.import { Routes, Route } from "react-router-dom";import Home from "pages/Home";const routes = [{ path: "/", component: , name: "Home" }];const AppRoutes = () => { return ( {routes.map((route) => ( ..
Vite로 프로젝트 생성 후 height: 100vh를 적용했지만 전체 margin이 8px 적용되어 있는 것을 알게 되었다. vite로 초기 프로젝트를 생성하면 기본적으로 margin이 8px 생긴다고 한다. margin을 없애보자. CSS 파일 만들기 이를 없애려면 index.css 파일에 코드를 추가해야한다. #root{ // 기존에 쓰인 코드 } body{ margin: 0, } index.html 파일에 style 설정하기 index.html 안에 참고 https://velog.io/@hyorish03/Vite-VITE%EC%9D%98-%EA%B8%B0%EB%B3%B8-margin-%EC%97%86%EC%95%A0%EA%B8%B0 https://snowdeer.github.io/vuejs/202..
오류를 만나다 React에서 SVG를 import 하는 방식은 여러가지가 있지만 ReactComponent를 사용해 import 하는 방식을 주로 사용했다. import { ReactComponent as SampleSVG } from 'assets/sample.svg'; return 하지만 Vite를 사용하면서 다음과 같은 오류를 만나게 되었다. 오류를 만난 환경은 다음과 같다. - React : 18.2.0 - VIte : 5.0.8 - Typescript : 5.2.2 '".svg"' 모듈에 내보낸 멤버 'ReactComponent'이(가) 없습니다. 대신 '".svg"에서 ReactComponent 가져오기'를 사용하시겠습니까? vite-plugin-svgr 설치 설치한 버전 : vitejs/pl..
