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 생성 방식에 따..
에러 발생 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 서버의 비정상적인 종료 express를 가동중에 터미널창이 비정상적으로 사라지면서 http://localhost:6001이 백그라운드에서 계속 가동되는 상황이 발생되었다. yarn start로 서버를 재기동했지만 에러가 발생하여 백그라운드에 실행중인 서버를 종료 해야했다. CMD 창에서 강제 종료하기 단건 종료하기 윈도우 cmd 창에서 아래 명령을 입력하면 현재 실행중인 목록을 볼 수 있다. netstat -ano 종료하고싶은 포트번호의 PID값을 입력하면 포트가 강제 종료된다. taskkill /f /pid 피드번호 # ex) taskkill /f /pid 7518 전체 종료하기 윈도우 cmd 창에서 아래 명령을 입력하면 실행중인 모든 노드를 종료시킬 수 있다. Taskkill/IM node...
비어있는 공간 채우기 openLayers를 통해 지도를 표출하니 지도에 조그마한 점이 군데군데 보였다. 처음에는 코드에서 문제가 있다고 생각했었지만 결국엔 레이어에 아주 조그마한 빈 공간이 있는 것을 발견했다. 방법 1 - Fill Ring 위 비어있는 공간을 채우고자 QGIS에서 고리 채우기(Fill Ring) 기능을 알게 되었다. 1. 레이어 편집모드 2. 비어있는 영역을 Fill Ring으로 영역을 지정 후 오른클릭을 하면 해당 영역이 생성된다. 3. 생성된 영역와 feature를 병합시킨다. 방법 2 - 홀 삭제 이 방법은 직접 적용해보진 않았지만 다른 방법을 발견하여 참고 글을 가져왔다. 1. '입력 레이어'는 경계를 지정한다. 2. '다음 면적 미만 구멍 삭제' 값은 해당 값보다 작은 홀만 제..
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..
지도에 마우스를 hover하면 속성 데이터를 표출 기능이 필요했다. map.on("pointermove",fucntion(event){}) 기능을 사용하여 hover시 속성 데이터를 표출 가능하다. 하지만 레이어가 여러겹 있을 경우 어떤 속성 데이터를 표출할지 지정해 주어야한다. 레이어에 이름 지정 VectorLayer 생성시 layerName을 넣어준다. 임의의 속성을 부여했기 때문에 layerName이 아닌 name 등 다른 이름으로 속성을 지정해 주어도 된다. const vectorLayer = new VectorLayer({ source: vectorSource, style: myLayerStyle, // 위에서 정의한 스타일을 적용 layerName: 'myLayer', // 레이어 이름을 부여..
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; `; ..
텍스트 ...으로 표시하기 텍스트가 너무 길 경우 ...으로 생략 하려고 했다. text-overflow : ellipsis 속성을 적용했지만 반응이 없어 조금 더 조사했다. text-overflow ellipsis 안먹힘 해결 방법 다음과 같은 조건으로 CSS가 작성되었는지 점검한다. 텍스트를 감싸고 있는 부모 요소는 블록 엘리먼트 요소(div, table, ul, ol, header, footer..)이다. 따라서 width값을 설정할 수 있고 이에 따라 text-overflow가 발생할 수 있다. white-space: nowrap - 문자 간 공백은 축소되고 개행(줄 바꿈)은 방지된다. overflow: hidden - 위 속성의 영향으로 문자의 개행이 방지되었기 때문에 텍스트가 한 줄로 길게 늘..
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] =..
