전체 글

또렷한 기억보다 희미한 연필자국이 낫다
Tip

[Git] 연결된 원격 저장소 URL 변경하는 방법

사내 내부망에서 개발 후 외부 출장지에서 급하게 변경할 일이 있었다. 사내 내부망에도 반영하기 위해 열어놓은 외부 주소를 통해 git 저장소 변경이 필요해서 아래 명령어로 변경했다.  GIT 주소 변경 명령어git remote set-url origin [변경할 URL] 변경 후 확인 명령어git remote -v

PS (Problem Solving)/Programmers

[프로그래머스] 모의고사 - 자바스크립트

문제https://school.programmers.co.kr/learn/courses/30/lessons/42840?language=javascript 프로그래머스코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요.programmers.co.kr 자바스크립트function solution(answers) { let scores = [0, 0, 0] // 배열 패턴 const arrA = [1, 2, 3, 4, 5] const arrB = [2, 1, 2, 3, 2, 4, 2, 5] const arrC = [3, 3, 1, 1, 2, 2, 4, 4, 5, 5] ..

React

[React] html2pdf.js를 활용해 PDF 다운로드 구현하기

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

[React] SVG 불러오기 (Webpack5 설정 + SVGR)

개발환경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을 넣는 ..

React

[React] 글로벌스타일(GlobalStyle) 적용 with Styled-Components

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

GIS

[QGIS] SHP 파일 Simplify 적용하기

대한민국 지도 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..

시각화

[Openlayers] 지도 기본 컨트롤러 숨기기

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

React

[React] SVG 파일 index.ts에서 export 하기 - SVGR

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

React

[React] npm start시 port 번호 변경하는 방법

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", } ...

React

[React-Query] 파리미터를 통해 레이어 선택 불러오기, 캐싱고민

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) => {..

캐럿노트
기록하는 블로그