오류를 만나다 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..
꼭지점 도구를 사용하여 불필요한 선 제거하기 지도 shp파일에 불필요한 선이 발견되었다. 지우는 방법을 알아보자 우선 편집모드를 켜준다. 꼭지점 도구를 선택한다. 삭제하고 싶은 영역을 드래그로 선택한다. 활성화된 영역을 키보드의 Delete 버튼을 눌러 삭제한다. 이제 수정된 레이어를 저장 후 사용하면 된다.
Intro 프로젝트에서 접한 checksum의 개념에 대해 정리해보려 한다. 프론트엔드에서 React-Dropzone-Uploader 라이브러리를 활용하여 파일 업로드를 구현했다. React Dropzone Uploader 라이브러리 https://react-dropzone-uploader.js.org/ https://www.npmjs.com/package/react-dropzone-uploader 파일 업로드시 저장소에 중복된 파일이 누적되는 것은 비효율적이라 판단하여 checksum을 통해 중복된 파일은 기존의 저장 위치를 바라보게 설계가 진행되었으며, 덕분에 checksum이라는 개념을 알게 되었다. Checksum(검사합)이란? 네트워크를 통해서 전송된 데이터의 값이 변경되었는지(무결성)를 검사하..
인증 (Authentication) 자신이 누구인지 확인하는 절차 인가 (Authorization) 인증된 사용자가 특정 행동에 대한 접근 권한이 있는지 확인하는 절차 즉, Role Base로 특정 자원에 대해 CRUD의 권한이 있는지 확인한다. MAC (Message Authentication code) 이란? 메시지의 위변조를 확인하기 위해 쓰이는 정보이며 비밀키를 사용하기 따문에 인증 역할도 수행한다. 인터넷을 통해 A → B로 메세지를 보낼 경우 메세지가 위조 혹은 변조될 위험에 노출된다. 이러한 문제를 해결하기 위해 메세지의 무결성과 인증이 담보되어야 한다. 무결성이란 '메시지가 변조되지 않았다'는 성질이며, 메시지 인증이란 '올바른 송신자로부터 온 메시지'라는 성질이다. MAC 생성 방식에 따..
