기본 형태 // 실행순서 : 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 생성 방식에 따..
에러 발생 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 Declutteringopenlayers에서 지도를 축소시키면 지역명(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 labe..
