서론 [사진 보기], [동영상 보기] 버튼을 클릭 시 모달창이 띄워지면서 사진 또는 동영상이 출력되도록 하는 예제입니다. 사진과 동영상 파일을 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..

다운로드 및 설치 Node.js 다운로드 사이트에 접속한 후 플랫폼에 맞게 선택을 하여 다운로드합니다. Windows 환경에서 개발하기 위해 Windows Installer (.msi) 64-bit를 다운로드 합니다. 현재 최신 LTS 버전은 v16.17.0 버전입니다. 다운 받은 인스톨러 파일을 실행해서 설치를 진행합니다. 설치가 완료되면 아래 명령어를 입력해서 확인을 합니다. D\> node -v v16.17.0 D\> npm -v 8.15.0 Node.js를 설치하면 자동으로 NPM 이 설치가 됩니다. npm (노드 패키지 매니저/Node Package Manager)은 자바스크립트 프로그래밍 언어를 위한 패키지 관리자이다. 자바스크립트 런타임 환경 Node.js의 기본 패키지 관리자이다. 출처 :..

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

책 정보 책 소개 노드의 기본부터 실무까지, 전 과정을 한 권에 담았다! 다양한 서비스를 직접 만드는, 실무에 가장 가까운 강의! Node.js 10 + 자바스크립트 ES2018, 최신 문법으로 배우자. 서버와 데이터베이스 개념을 시작으로 노드의 기본 개념을 차근차근 설명해 나간다. 군더더기 없는 직관적인 설명, 풍부한 그림으로 기본 개념을 확실히 이해하고, 노드의 기능과 생태계를 사용해 보며 실제로 동작하는 서버를 만들어보자. 웹 서버, 웹 API 서버, SNS 서비스, 실시간 GIF 채팅방, 경매 시스템, 위치 기반 장소 검색 서비스, 커맨드라인 인터페이스를 모두 만들어 볼 수 있다. 실무에 당장 적용할 수 있고, 참고할 수 있는 예제와 코드를 최신 문법으로 다뤄보자. 리뷰 최근 Node.js에 관심..

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