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 파일을 응답받..
오류를 만나다 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의 배열 부분인 의존성(..
JSON.stringify - 드롭다운 컴포넌트에서 객체 배열을 넣으려고 한다. - 나열하고자 하는 옵션의 리스트 요소가 객체일 경우 JSON.stringify를 사용하여 풀어 넣을 수 있다. 코드 import React from "react"; import styled from "styled-components"; const SelectContainer = styled.select` width: 120px; height: 30px; background: #ffffff; border: 1px solid #cccccc; border-radius: 4px; font-size: 14px; padding: 0 10px 0 6px; color: #353535; margin: 5px 10px 0px 5px; `; ..
splice splice 함수를 사용하여 제거 array.splice(start[, deleteCount[, item1[, item2[, ...]]]]) start - 배열의 변경을 시작할 index deleteCount - 배열에서 제거할 개수 - 0일 경우 제거하지 않는다. (이 경우 최소한 하나의 새로운 요소를 추가해야한다.) item1, item2...(Oprional) - 배열에 추가할 요소 - 생략할 경우 요소를 제거하기만 한다 Return - 제거한 요소를 담은 배열 - 아무것도 제거하지 않을 경우 빈 배열을 반환 Code import React, { useState } from 'react'; function MyComponent() { const [myArray, setMyArray] =..
완성 결과물 결과물 GIF 1.기본 & 커스텀 모드를 선택할 수 있다. 2. 커스텀 모드일 경우 1번 색상과 2번 색상을 지정해 그라이데션을 설정할 수 있다. 3. 색상 설청창 외부 클릭시 닫힌다. 설계 및 주요 함수 위 결과물은 별도 라이브러리를 사용하지 않았다. input 태그에서 type="color"로 지정하면 색상 그라데이션을 설정할 수 있다. {defaultSetting ? null : ( setColor1(e.target.value)} /> )} input 태그는 색상을 HEX 코드로만 인식할 수 있기 때문에 아래 단계를 거쳤다. 1) 2가지 색상을 HEX 코드 입력 2) 2가지 색상을 RGB 코드로 변환 후 중간 값들을 계산 3) 결과 값들을 HEX 코드로 반환 RGB → HEX 변환 함수..
문제점 인식 - 메뉴탭을 클릭했을 시 강조되는 부분을 useState에 index를 넣어 관리했다.- 하지만 useState를 사용하니 새로고침시 무조건 0번 index인 첫번째 탭이 활성화되는 문제점이 발견되었다.- 때문에 현재 보고있는 페이지를 기준으로 메뉴탭을 활성화하는 방법을 찾게 되었다. react-router-dom 설치 - react 설치- react-router-dom 설치 npm install react react-router-dom useLocation react-router-dom의 useLocation을 사용하면 현재 URL과 path 값을 비교하여 탭을 활성화해준다. // App.js import React from "react"; import { BrowserRouter, Swi..
바로 코드로 들어간다. - 샘플 데이터 양식은 추후 수정 예정 코드 // App.jsx import React from "react"; import { Dropdown } from "components/buttons"; const smapleData = { data: ["1번", "2번", "3번", "4번"] }; export default function Main() { return ( ); } // src/components/buttons/index.jsx export * from "./Dropdown"; // src/components/buttons/Dropdown.jsx import React, { useState } from "react"; import styled from "styled-co..
