분류 전체보기

Node.js

[Node.js] Node.js & npm 최신 버전으로 업데이트 하기(Mac)

현재 설치된 버전 확인 # 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..

GIS

[QGIS] 불필요한 선(라인) 삭제하기 - 꼭지점 도구

꼭지점 도구를 사용하여 불필요한 선 제거하기 지도 shp파일에 불필요한 선이 발견되었다. 지우는 방법을 알아보자 우선 편집모드를 켜준다. 꼭지점 도구를 선택한다. 삭제하고 싶은 영역을 드래그로 선택한다. 활성화된 영역을 키보드의 Delete 버튼을 눌러 삭제한다. 이제 수정된 레이어를 저장 후 사용하면 된다.

인증 & 보안

Checksum이란?

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(검사합)이란? 네트워크를 통해서 전송된 데이터의 값이 변경되었는지(무결성)를 검사하..

인증 & 보안

[인증 & 암호] 메세지 위변조를 확인하는 MAC & HAMC

인증 (Authentication) 자신이 누구인지 확인하는 절차 인가 (Authorization) 인증된 사용자가 특정 행동에 대한 접근 권한이 있는지 확인하는 절차 즉, Role Base로 특정 자원에 대해 CRUD의 권한이 있는지 확인한다. MAC (Message Authentication code) 이란? 메시지의 위변조를 확인하기 위해 쓰이는 정보이며 비밀키를 사용하기 따문에 인증 역할도 수행한다. 인터넷을 통해 A → B로 메세지를 보낼 경우 메세지가 위조 혹은 변조될 위험에 노출된다. 이러한 문제를 해결하기 위해 메세지의 무결성과 인증이 담보되어야 한다. 무결성이란 '메시지가 변조되지 않았다'는 성질이며, 메시지 인증이란 '올바른 송신자로부터 온 메시지'라는 성질이다. MAC 생성 방식에 따..

HTML & CSS

[Error] A component is changing an uncontrolled input to be controlled 오류 해결방법

에러 발생 Formik을 사용하면서 SelectBox에서 선택한 text가 input 창에 입력되지 않는 오류가 발생했는데, 크롬 console창에는 다음과 같은 오류가 나타났다. A component is changing an uncontrolled input to be controlled. This is likely caused by the value changing from undefined to a defined value, which should not happen. Decide between using a controlled or uncontrolled input element for the lifetime of the component 에러 원인 input 태그의 value가 undefine..

Node.js

[Node.js] 실행중인 서버 cmd에서 종료하기 (강제 종료)

Node 서버의 비정상적인 종료 express를 가동중에 터미널창이 비정상적으로 사라지면서 http://localhost:6001이 백그라운드에서 계속 가동되는 상황이 발생되었다. yarn start로 서버를 재기동했지만 에러가 발생하여 백그라운드에 실행중인 서버를 종료 해야했다. CMD 창에서 강제 종료하기 단건 종료하기 윈도우 cmd 창에서 아래 명령을 입력하면 현재 실행중인 목록을 볼 수 있다. netstat -ano 종료하고싶은 포트번호의 PID값을 입력하면 포트가 강제 종료된다. taskkill /f /pid 피드번호 # ex) taskkill /f /pid 7518 전체 종료하기 윈도우 cmd 창에서 아래 명령을 입력하면 실행중인 모든 노드를 종료시킬 수 있다. Taskkill/IM node...

GIS

[QGIS] feature 빈 공간 채우는 방법 - Fill Ring, 홀 삭제

비어있는 공간 채우기 openLayers를 통해 지도를 표출하니 지도에 조그마한 점이 군데군데 보였다. 처음에는 코드에서 문제가 있다고 생각했었지만 결국엔 레이어에 아주 조그마한 빈 공간이 있는 것을 발견했다. 방법 1 - Fill Ring 위 비어있는 공간을 채우고자 QGIS에서 고리 채우기(Fill Ring) 기능을 알게 되었다. 1. 레이어 편집모드 2. 비어있는 영역을 Fill Ring으로 영역을 지정 후 오른클릭을 하면 해당 영역이 생성된다. 3. 생성된 영역와 feature를 병합시킨다. 방법 2 - 홀 삭제 이 방법은 직접 적용해보진 않았지만 다른 방법을 발견하여 참고 글을 가져왔다. 1. '입력 레이어'는 경계를 지정한다. 2. '다음 면적 미만 구멍 삭제' 값은 해당 값보다 작은 홀만 제..

시각화

[OpenLayers] 지도 확대 축소시 겹치는 text 안보이게 하기 - Declutter

Label Decluttering openlayers에서 지도를 축소시키면 지역명(text)이 밀집된 지역은 겹치게 된다. 이때 declutter 옵션을 사용하면 확대, 축소시 자동으로 표출되는 글자를 조절해주는 편리한 옵션이다. 사용법은 declutter 옵션을 적용할 레이어에 속성값을 true로 설정해 주면 된다. const vectorLayer = new VectorLayer({ background: 'white', source: new VectorSource({ url: 'https://openlayers.org/data/vector/us-states.json', format: new GeoJSON(), }), style: function (feature) { const label = featur..

시각화

[Openlayers] hover시 원하는 레이어에 선택하여 속성 표출하기(pointermove)

지도에 마우스를 hover하면 속성 데이터를 표출 기능이 필요했다. map.on("pointermove",fucntion(event){}) 기능을 사용하여 hover시 속성 데이터를 표출 가능하다. 하지만 레이어가 여러겹 있을 경우 어떤 속성 데이터를 표출할지 지정해 주어야한다. 레이어에 이름 지정 VectorLayer 생성시 layerName을 넣어준다. 임의의 속성을 부여했기 때문에 layerName이 아닌 name 등 다른 이름으로 속성을 지정해 주어도 된다. const vectorLayer = new VectorLayer({ source: vectorSource, style: myLayerStyle, // 위에서 정의한 스타일을 적용 layerName: 'myLayer', // 레이어 이름을 부여..

React

[React] Option에 JSON 객체를 value에 넣기 - JSON.stringify

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

캐럿노트
'분류 전체보기' 카테고리의 글 목록 (5 Page)