html2pdf.js 설치NPMhttps://www.npmjs.com/package/html2pdf.js html2pdf.jsClient-side HTML-to-PDF rendering using pure JS. Latest version: 0.10.2, last published: 15 days ago. Start using html2pdf.js in your project by running `npm i html2pdf.js`. There are 136 other projects in the npm registry using html2pdf.js.www.npmjs.com 2024.07.16 기준 NPM 사이트에 아래와 같은 문구가 있어 0.9.3 버전을 설치했다. 설치한 라이브러리는 그냥 html2p..
개발환경React 18Typescript 4Webpack 5styled-componentsSVGR 원래는 React에서는 SVG를 사용할 때 아래와 같은 방법을 주로 사용했다.import { ReactComponent as Logo } from "assets/images/logo.svg"; 그러나 Webpack5, Typescript 등 새로운 환경에서는 기존 방법이 잘 작동하지 않아 SVGR 라이브러리를 설치하여 사용하고 있다. 그러면서 아래와 같은 문법을 주로 사용하여 SVG를 호출하고 있었다.import CancelSvg from "assets/images/cancel.svg"; 위와 같은 방법으로 잘 사용하고 있었으나 체트박스 컴포넌트를 만들면서 background-image에 url을 넣는 ..
assets 폴더에서 svg 파일들을 한번에 import 하고 싶어서 index.ts 파일을 생성하여 export를 하려고 한다.현재 svgr 라이브러리를 시용중인데 라이브러리를 사용할때와 아닐때의 방법에 차이가 있다. 일반적인 방법// src/assets/images/index.tsexport { ReactComponent as Area } from "./area.svg";export { ReactComponent as Circle } from "./circle.svg";export { ReactComponent as Draw } from "./draw.svg";export { ReactComponent as Line } from "./line.svg";export { ReactComponent as ..
package.json 수정하기 1. Window set 명령어를 사용한다. // package.json ... "scripts": { "start": "set PORT=3001 && react-scripts start", } ... 2. Mac, Linux export 명령어를 사용한다. // package.json ... "scripts": { "start": "export PORT=3001 && react-scripts start", } ...
Intro 로컬에 있는 GeoJSON 파일 2개(서울 지도 레이어, 서울 시군구 중심점)를 각각 불러오는데 추후 GeoServer에서 데이터를 요청할 것을 가정해 react-query를 사용했다. 레이어명을 파라미터로 전달해 원하는 파일을 선택 조회하는 것을 의도했는데 처음 전달한 이름 1개만으로 조회가 되는 상황이 발생했다. 기존 코드 import axios from "axios"; import { useQuery } from "react-query"; /** * 지도 레이어를 가져오는 쿼리 * GeoJson, EPSG:5179 * @param layerName * @returns {useQuery} */ export const useGetSeoulMap = (layerName: string) => {..
Intro Openlayers에서 서울 지도레이어를 불러오기 위해 GeoJSON 파일을 assets 폴더에 저장했다. 추후에 GeoServer에서 지도 레이어를 불러올 것을 염두에 두어 React Query, Axios를 사용해 로컬에 있는 GeoJSON 파일을 불러오려고 했는데 response.data의 결과가 다음과 같이 나왔다. // 오류가 발생한 URL const { data } = await axios.get("../assets/maps/seoul_sig_5179.geojson"); 처음에는 React-Query 코드 부분이 이상한가 싶어 이것 저것 손대봤지만 결국 URL을 상대경로로 접근한 부분이 문제였다는 것을 알아냈다. URL을 상대경로 → 절대경로로 수정 후 원하는 JOSN 파일을 응답받..
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..
Intro 프론트엔드에서 .env 파일에서 백엔드 url등의 환경변수를 설정 후 빌드를 하게 되면 .env 안의 내용들이 함께 패킹되면서 빌드된 파일의 환경변수 설정을 바꾸는 것이 어렵다. 빌드 후에도 url 변경을 용이하게 하기 위해서 config.js 파일을 생성 후 관리할 수 있다. config.js 파일 생성하기 index.html 파일이 들어있는 publc 폴더 안에 config.js 파일을 생성 후 아래와 같이 변수를 생성한다. // public/config.js window.backendUrl = "URL" // example window.backendUrl = "http://192.168.0.1:8080/api" index.html에 config.js 추가하기 html → body → sc..
기본 형태 // 실행순서 : A -> B -> A useEffect(() => { // 이 컴포넌트가 마운트될 때 실행되는 함수 (A) return () => { // 이 컴포넌트가 언마운트될 때 실행되는 함수 (B) } }, []) Example - ToDo App 위 기본형태의 실행 순서를 ToDo로 예제로 보면 // todo가 A -> B로 변경될 때 useEffect(() => { // todo가 바뀔 때마다 실행됨 return () => { // todo가 바뀌기 직전에 실행됨 (cleanUp) } }, [todo]) todo가 A -> B로 변경될 때의 실행순서는 A useEffect → A cleanUp → B useEffect 로 이루어진다. 참고로 useEffect의 배열 부분인 의존성(..
