Recoil 사용 방법에 대해 알아보겠습니다. Recoil Recoil는 페이스북에서 만든 React를 위한 상태 관리 라이브러리입니다. Recoil을 사용하면 atoms (공유 상태)에서 selectors (순수 함수)를 거쳐 React 컴포넌트로 내려가는 data-flow graph를 만들 수 있습니다. 설치 Recoil 패키지는 npm에 존재합니다. 안정한 최신 버전을 설치하기 위해서는 아래의 명령어를 실행하면 됩니다. $ npm install recoil 또는 yarn을 사용한다면 이 명령어를 사용하면 됩니다. $ yarn add recoil RecoilRoot 루트에 RecoilRoot를 감싸줍니다. // index.tsx import { RecoilRoot } from 'recoil'; imp..

서론 [사진 보기], [동영상 보기] 버튼을 클릭 시 모달창이 띄워지면서 사진 또는 동영상이 출력되도록 하는 예제입니다. 사진과 동영상 파일을 images 경로에 저장하여 출력하였고, 실제 구동되는 프로젝트에서는 웹 서버가 실행되는 곳의 특정 경로에 저장하여 URL을 불러와서 출력합니다. html 사진 보기 동영상 보기 사진/동영상 보기 × javascript JQuery를 이용하여 모달창을 생성합니다. // 이미지 출력 모달창 오픈 function openImageModal() { $('#file-viewer').empty(); let img = document.createElement('img'); img.setAttribute('src', 'images/image.jpg'); img.setAttri..

JQuery를 이용해서 select를 제어하는 방법에 대해 알아보겠습니다. 선택된 옵션 값 읽기 $('#nameSelect option:selected').val(); $('select[name=name]').val(); 선택된 옵션 이름 읽기 $('#nameSelect option:selected').text(); 옵션 추가하기 $('#nameSelect').append( $('', { value: 1, text: '테스트', }) ); 값이 변경되었을 때 $('#nameSelect').change(function () { const name = $(this).val(); console.log(name); }); 특정한 값 선택하기 $('#nameSelect').val(1).trigger('change..

UTF-8 인코딩 방식 바이트 길이 구하기 한글 한글자당 3 바이트씩 계산됩니다. // Function const getByteLengthOfString = function(s,b,i,c){ for(b=i=0;c=s.charCodeAt(i++);b+=c>>11?3:c>>7?2:1); return b; }; // Test const test = '테스트'; console.log('length : ', getByteLengthOfString(test), 'Bytes'); # 결과 length : 9 Bytes 한글의 경우 2바이트 계산되도록 아래 함수를 통해 한글 문자열의 바이트 수를 2 바이트로 나오게 할 수 있습니다. // Function String.prototype.getBytes = function..

JQuery 용 테이블 라이브러리인 DataTables 플러그인을 사용하여 개발했을 경우 편리하게 사용하기 위해 구조를 설계하였습니다. DataTables는 데이터를 테이블로 쉽게 구현할 수 있도록 도와주는 라이브러리입니다. 설치와 사용법은 DataTables 공식 사이트에 잘 설명되어 있기 때문에 생략하겠습니다. 초기 설정 여러 곳에서 DataTables로 작업할 때 유용하도록 초기 기본값으로 설정하였습니다. // table.js $.extend($.fn.dataTable.defaults, { autoWidth: false, dom: ``, language: { emptyTable: '데이터가 없습니다.', infoEmpty: '', info: ' _TOTAL_ 개의 데이터가 있습니다.', search..

Geoserver에서 필요한 정보를 가져오기 위해 OpenLayers의 getGetFeatureInfoUrl 함수를 사용하였습니다. feature의 정보 중에 GRAY_INDEX 라는 컬럼의 정보를 가져와야 합니다. 아래 방식으로 image 형태인 layer 를 구성하였습니다. var wmsLayer = new ol.layer.Image({ source: new ol.source.ImageWMS({ ratio: 1, url: 'http://localhost:8080/geoserver/img/wms', params: { FORMAT: 'image/png', VERSION: '1.1.1', STYLES: '', }, }), }); getGetFeatureInfoUrl 함수를 사용하여 feature 정보를 불..

영상 레이어 추가 Geoserver에 추가된 영상 레이어를 Cesium 지도에 표출하는 코드입니다. layers 에는 Geoserver에 있는 레이어의 이름을 넣으면 됩니다. let imageryLayer = viewer.imageryLayers.addImageryProvider( new Cesium.WebMapServiceImageryProvider({ url: 'http://localhost:8080/geoserver/img/wms', layers: 'img:GCOMW1_L2_SMC_20120703', parameters: { service: 'WMS', version: '1.1.0', request: 'GetMap', styles: '', srs: 'EPSG:4326', format: 'image/..

Project Setup Requirements 먼저 Node.js가 설치되어 있어야 합니다. Node.js 공식 다운로드 페이지(https://nodejs.org/ko/download/)에서 Window Installer를 다운로드하고 설치합니다. $ node -v $ npm -v 에디터로는 MS에서 제공하는 Visual Studio Code(VS Code)를 사용합니다. vscode는 크로스 플랫폼 에디터로 다양한 언어를 서포트 하며, IntelliSense와 Git 기능, 그리고 Extension을 이용한 확장 기능을 제공하고 있습니다. 설치방법은 https://code.visualstudio.com/ 에 접속하여 다운로드 후 설치하면 됩니다. React 개발에 좋은 Extension는 ESLint..

웹 프로젝트를 하면서 사용자 등록을 하게 될 때 주소를 입력을 하게 되는데, 우편번호 주소 조회가 되도록 처리해 달라는 요청이 있었습니다. 그래서 우편번호 서비스를 검색해 봤을 때 여러 가지가 있었지만 개인적으로 좋아 보이는 Daum 우편번호 서비스를 사용하게 되었습니다. Daum 우편번호 서비스 쉽고 간편하게 우편번호 검색, 도로명 주소 입력 기능을 만들 수 있습니다. Key를 발급받을 필요가 없습니다. 사용량에 대한 제한이 전혀 없습니다. 기업용이든 상업적 용도이든 상관없이 무조건 무료로 사용 가능합니다. 도로명 주소, 지번 주소, 영문 주소까지 모두 확인 가능합니다. 이 것 말고도 여러 가지 장점이 더 있지만 사용하기 쉽고 무료이며 사용량에 대한 제한이 없고, 특히나 기본 사용법이 정말 쉽게 잘 설..

사용자 등록 시 전화번호를 입력하게 되는데 아래 그림처럼 세 개의 입력을 받아 합치는 형식으로 많이 되어 있습니다. 이렇게 개발해도 괜찮지만 좀 더 쉽게 하기 위해서 전화번호 입력 시 자동으로 하이픈(-)이 입력되도록 하는 형식으로 바꾸면 좋겠다 싶어 반영해 봤습니다. 개발된 화면은 다음과 같습니다. HTML 먼저 HTML 소스 코드입니다. input 태그를 사용하고 pattern과 maxlength, required, placeholder를 사용하였습니다. 속성에 대한 설명은 참고 사이트를 보시면 됩니다. JavaScript 먼저 전화번호 크기에 따라 나눴습니다. 서울 전화번호는 02로 두 자리로 시작하고 핸드폰은 010, 011..이고 다른 지역 전화번호는 031, 041, 051 등 세 자리로 시작..