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을 넣는 ..
styled-components의 createGlobalStyle을 활용하여 GlobalStyle을 적용하려고 한다. 개발환경React 18TypeScriptStyled-Componentswebpack styled-nomalize & styled-reset 설치npm i styled-normalizenpm i styled-resetstyled-normalize브라우저 간의 기본 스타일 차이를 줄이면서 일관된 스타일을 제공하는 normalize.css를 CSS-in-JS 환경에서 사용할 수 있게 하는 유틸리티styled-reset모든 브라우저의 기본 스타일을 제거하여 일관된 초기 상태를 제공하는 reset.css를 CSS-in-JS 환경에서 사용할 수 있게 하는 유틸리티 webpack.config.js ..
대한민국 지도 shp 파일을 좀 더 단순화시키기 위해 simplify를 진행한다. Map Shaper 접속 https://mapshaper.org/ mapshaperDrop, paste or select files to import. Shapefile, GeoJSON, TopoJSON, KML and CSV formats are supported. Files can be zipped or gzipped.mapshaper.org 파일 업로드dbf, shp, shx, prj 파일을 Drag & Drop으로 업로드 dbf, shp, shx 만 업로드 후 과정 진행시 좌표계를 맞추는데 어려움이 많았다.prj파일을 함께 업로드하여 좌표계를 설정해준다. 인코딩 인코딩이 EUC-KR인 경우 아래 옵션 입력 enc..
map을 생성할 때 컨트롤러의 attribution, zoom, rotate를 false로 처리한다.defaults({attribution: false, zoom: false, rotate: false}).extend([])const map = new Map({ layers: [baseLayer], target: mapRef.current, controls: defaults({ attribution: false, zoom: false, rotate: false, }).extend([]), view: new View({ projection: projection, c..
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..
