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..
왜 안됩니까 빠른 수정 Next.js에서 아래와 같이 image태그를 사용하면 로 변환할 것을 요구한다. 하지만 로 변경시 "빠른 수정" 즉 auto import가 되지 않아 빨간 줄이 생긴다. 나도 할래 빠른 수정 해결방법은 tsconfig.json 파일에서 compilerOptions → include 에서 "someFile.d.ts"를 배열에 추가해주면 된다. 저장 후 바로 적용된다.
라우터 인터셉팅 과정에서 둘 다 링크를 이동시켜주는 redirect 와 useRouter의 차이점을 알아보자 라우터 인터셉팅 (Intercepting Routes) https://nextjs.org/docs/app/building-your-application/routing/intercepting-routes Routing: Intercepting Routes | Next.js Use intercepting routes to load a new route within the current layout while masking the browser URL, useful for advanced routing patterns such as modals. nextjs.org Server 컴포넌트의 redirec..
기본 형태 // 실행순서 : 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의 배열 부분인 의존성(..
뷰포트(Viewport)란? 뷰포트는 현재 보고 있는 컴퓨터 화면의 영역을 나타낸다. 웹 브라우저 용어로 UI, 메뉴바 등을 제외하고는 일반적으로 브라우저 창과 동일하다. vh, vw 사용 전 호환성 체크 : https://caniuse.com/viewport-units vh (Viewport Height) viewport(화면 크기)를 기준으로 하는 단위로 1vh는 뷰포트의 높이의 1%이다. vw (Viewport Width) 1vw는 뷰포트의 너비의 1%이다. - 뷰포트 너비, 높이 기반으로 설정하는 것은 편하지만, vh 는 모바일에서 버그가 많다. - 뷰포트 사이즈가 브라우저의 주소바 UI를 포함하지 않기 때문이다. - 100vh 는 모바일에서 전체 뷰포트 높이 만큼이 되어야 하지만, 스크롤시에 U..
현재 설치된 버전 확인 # node 버전 확인 node -v # 또는 node --version # npm 버전 확인 npm -v # 또는 npm --version n 모듈 설치 맥이나 리눅스도 nvm 패키지를 설치해 사용할 수 있다. 다만 맥, 리눅스는 nvm을 사용하는 것보다 n (Interactively Manage Your Node.js Versions)를 사용하는데 더 최적화가 되어있다. sudo npm install -g n https://www.npmjs.com/package/n n Interactively Manage All Your Node Versions. Latest version: 9.2.0, last published: 2 months ago. Start using n in you..
