처음부터 시작하는 Java

GIS지리정보시스템 (Geographic Infomation System)지리적 데이터를 수집, 저장, 분석, 관리 및 시각화하는데 사용되는 시스템다양한 형태의 공간 정보를 다루며 지도 제작, 도시 계획, 환경 연구, 재난 관리 등 여러 분야에서 활용됨 지리정보의 유형공간상에 있는 객체나 현상의 공간적인 위치를 나타내는 도형자료(graphic data) 와 관련된 속성자료 (attribute data)로 구분 지리정보의 특성도형자료와 속성자료의 상호 연계 : 도형자료 속성자료 상호검색 가능공간적 위상관계 : 도형자료에서 지리적 객체간에 존재하는 공간적 상호관계로 객체간의 상호 인접성, 연결성, 근접성 등의 특성을 바탕으로 일정조건을 만족하는 지역이나 조건을 검색, 분석 가능동적인 공간자료 : 일정기간에..

인터넷 : 개방형 네트워크, 모든 컴퓨팅 기기는 규칙(프로토콜)을 따르는 한 네트워크에 접속이 가능.프로토콜 : 각 기기가 서로 통신해야 하는 방식의 정의, 인터넷은 여러 계층의 프로토콜로 구동됨 컴퓨팅 장치의 글로벌 네트워크를 구축하기 위해 필요한 것프로토콜's유선 및 무선 : 장치 간의 물리적 연결과 전자기 신호를 이진 데이터로 변환IP : IP 주소를 사용하여 장치를 고유하게 식별하고 대상 IP 주소로 데이터를 전송하는 라우팅 전략을 제공TCP/UDP :  한 장치에서 다른 장치로 데이터 패킷을 전송하고 전송 중에 오류를 확인TLS : 공격자가 개인 정보를 볼 수 없도록 암호화된 데이터를 전송HTTP, DNS : www를 구동하는 프로토콜, 브라우저가 웹 페이지 로드마다 사용됨  IP 주소IP 는 ..

IN 연산자SELECT * FROM employees WHERE department IN ('Sales', 'Marketing', 'HR');employees 테이블에서 department 의 값이 위의 셋 중하나 인 것을 출력 IN 연산자 & 서브쿼리SELECT title FROM songs WHERE artist IN ( SELECT name FROM artists WHERE genre = 'Pop');서브쿼리 ( ) 부터 시작 artists 테이블에서 genre 가 pop 인 아티스트의 이름을 선택외부쿼리 : songs 테이블에서 해당 아티스트의(해당 값을 가지고 있는) 노래 제목을 선택  LIKE 연산자 집계 쿼리 별칭 붙이기 : AS ~~ HAVING: 각 열의 개별 값이 아..

방화벽 상태 확인sudo systemctl status firewalld 방화벽 시작 (실행중이지 않을 때)sudo systemctl start firewalld 포트열기sudo firewall-cmd --zone=public --add-port=8080/tcp --permanent* --zone=public은 기본 영역을 지정.--add-port=8080/tcp는 TCP 프로토콜의 8080 포트를 엶 --permanent는 영구적으로 설정을 저장 방화벽 리로드 (바뀐 설정 적용 위해)sudo firewall-cmd --reload방화벽 열려 있는 포트번호 확인sudo firewall-cmd --list-all 특정 번호 방화벽 확인 sudo firewall-cmd --query-port=5432/tcp

docker 컨테이너 실행 확인docker ps 컨테이너 세부정보 확인docker inspect 컨테이너 ID or Name 세부 ip 확인docker inspect -f '{{range .NetworkSettings.Networks}}{{.IPAddress}}{{end}}' 컨테이너 ID or Name 컨테이너의 열린 포트 확인netstat -tnlp | grep "LISTEN"

포트 상태 확인sudo netstat -ltup l : netstat 모든 수신 소켓 표시t : TCP 표시u : UDP 표시p : 포트에서 수신하는 어플,데몬 이름 표시n : 서비스 이름 대신 port 번호 표기

컨테이너 목록 조회docker container ls -a 실행 중 컨테이너 목록 조회docker ps "컨테이너" 실행docker start 컨테이너ID 이미지 목록 조회docker images "이미지"에서 새 컨테이너로 실행docker run 이미지ID  Common Commands: run 이미지에서 새 컨테이너 생성 및 실행 exec 실행 중인 컨테이너에서 명령 실행 ps 컨테이너 나열 build Dockerfile에서 이미지 빌드 pull Download an image from a registry push 레지스트리에서 이미지 다운로드 images 이미지 나열 login 레지스트리에 로..

복사 : Ctrl + Insert or Ctrl + Shift + C붙여넣기 Shift + Insert or Ctrl + Shitf + V

도커에서 사용 시,docker exec -it [컨테이너ID] psql -U postgres 테이블 목록 확인\dt 빠져나가기\q   참고https://www.devkuma.com/docs/postgresql/%EC%83%9D%EC%84%B1%EB%90%9C-%EC%8A%A4%ED%82%A4%EB%A7%88-%EB%AA%A9%EB%A1%9D-%EC%A1%B0%ED%9A%8C/ PostgreSQL | 스키마(Schema) | 생성된 스키마 목록 조회PostgreSQL에서 이미 생성된 스키마 목록을 조회하는 방법에 대해 설명한다. \dn 명령을 사용하여 먼저 psql의 메타 명령을 사용하는 방법에 대해 알아보자. 이미 생성된 스키마 목록을 조회하려면www.devkuma.com

nginx 높은 성능과 안정성으로 가장 많이 사요되고 있는 웹서버아파치와 비교시 더 빠르고 가볍고 대규모 어플 처리에 적합하다는 장점이 있다고함 nginx 를 이해하기전 알아야 할 용어클라이언트- 서비스를 이용하기 위해 네트워크를 통해 요청을 보내주는 주체 (크롬, 사파리 ...) 웹 서버- 클라이언트의 요청에 따라 HTML, CSS, JS 이미지 파일과 같은 정적 파일을 응답하여 제공하는 소프트웨어http 프로토콜을 사용하여 클라이언트와 통신. 대표적은 웹 서버는 Nginx, Apache WAS (Web Appliction Server)- 클라이언트 요청에 대해 동적인 처리를 담당하는 영역웹 서버와 달리 애플리케이션 로직을 실행할 수 있도록 구성ex. 회원가입이나 로그인 등의 로직 처리 영역, DB연동..

컨테이너란?컨테이너는 앱의 각 구성 요소에 대한 격리된 프로세스각 구성 요소(프런트엔드 React, Python API엔진, 데이터베이스)는 자체 격리된 환경에서 실행되며, 머신의 다른 모든 것과 완전히 격리됨 독립형 : 각 컨테이너는 호스트 머신에 미리 설치된 종속성에 의존하지 않고도 작동하는 데 필요한 모든 것을 갖추고 있음격리됨 : 컨테이너는 격리되어 실행되므로 호스트와 다른 컨테이너에 미치는 영향이 최소화되어 어플 보안 강화독립적 : 각 컨테이너는 독립적으로 관리, 컨테이너 하나를 삭제해도 다른 컨테이너에는 영향 없음휴대성 : 컨테이너는 어디에서나 실행가능 컨테이너 vs 가상 머신(VM)VM은 자체 커널, 하드웨어 드라이버, 프로그램 및 어플을 갖춘 전체 운영체제단일 어플만 분리하기 위해 VM을 ..

Docker 개요Docker는 어플 개발, 배포 및 실행하기 위한 오픈 플랫폼Docker를 사용하여 어플을 인프라에서 분리하여 소프트웨어를 빠르게 제공 할 수 있음 Docker 플랫폼Docker는 컨테이너라고 하는 느슨하게 격리된 환경에서 어플을 패키징하고 실행할 수 있는 기능을 제공격리 및 보안을 통해 주어진 호스트에서 여러 컨테이너를 동시에 실행 가능컨테이너는 가볍고 어플을 실행하는데 필요한 모든 것을 포함하므로 호스트에 설치된 것에 의존 할 필요가 없음작업하는 동안 컨테이너를 공유할 수 있으며 공유하는 모든 사람이 동일한 방식으로 작동하는 동일한 컨테이너를 받도록 할 수 있음 컨테이너는 어플을 배포하고 테스트하는 단위가 됨 Docker에서 할 수 있는 것들빠르고 일관된 어플 제공개발자가 어플과 서비..

도커는 알아서 설치 ㅇㅇ 도커 구성하기난 우분투에 설치할 거라서 우분투 윈도우는 윈도우 설정ㄱ연결이 성공하면 연결 성공이라고 뜸 실행 대충 이런식으로 나오는데 이미지 풀인텔리제이는 도커허브를 따로 구성할 필요 없이 사용 가능한 이미지목록을 바로 불러 올 수 있음이미지를 클릭하면 위의 그림처럼 이미지를 가져올 수 있다ㅇㅇ 예를 들어 mysql 데이터베이스를 설정을 한다고 칠 때 mysql 을 선택하고 컨트롤+엔터를 하면 이미지를 가져옴  이미지를 클릭하면 이미지 아이디, 태그, 생성날짜 등등을 볼 수 있다, Inspection 은 오른쪽 점 3개를 클릭하고 검사를 누르면 더 자세한 정보를 볼 수 있음 컨테이너 생성은 이미지를 우클릭하고 컨테이너 생성을 누른다 이름을 수정할 수 있고 옵션을 따로 원한다면 옵..

타입스크립트는 자바스크립트 위에 레이어로서 자리잡고 있음자바스크립트의 기능들을 제공하면서 그 위에 자체 레이어를 추가 - 이 레이어가 타입스크립트 자바스크립트는 이미 string, number, object, undefined 같은 원시 타입을 가지고 있지만, 전체 코드베이스에 일관되게할당되었는지는 미리 확인해 주지 않음이는 이미 존재하고 잘 동작하는 자바스크립트 코드는 동시에 타입스크립트 코드라는 의미지만,타입스크립트의 타입 검사기는 사용자가 생각한 일과 자바스크립트가 실제로 하는 일 사이의 불일치를 강조하지 못함 타입 추론타입스크립트는 자바스크립트 언어를 알고 있으며 대부분의 경우 타입을 생성변수를 생성하면서 동시에 특정 값에 할당하는 경우, 타입스크립트는 그 값을 해당 변수의 타입으로 사용 타입 정..

WMS - web map servie, 개발된 지도 이미지를 제공하는 웹기반 GIS 지도 위의 각 피처에 대한 정보르 제공하지 않는다라고 하지만 GetFeatureInfo 요청을 통해 클라이언트가 지도 이미지상의 특정 위치에 마우스를 클릭하면 해당 위치의 피처정보를 반환하는 기능을 제공 이미지생성이 빠름서버 부하 적음 - 클라요청 > 서버 이미지 생성 > 클라 이미지 표출대용량 데이터 다루는 경우 및 다양한 스타일링 옵션, 간단한 피처 정보 조회 및 표출 WFS - web feature service, 공간 데이터를 다루는 웹기반 GIS 지도 위의 개별 피처에 대한 정보를 제공하는 서비스, 사용자가 요청한 지리정보를 서버에서 조회하고 피처의 상세 정보를 반환. 동적인 기능을 제공, 지리정보 수정, 생성,..

- line 11 : 개방해 배경지도를 사용하기 위한 필수 입력라인- line 31 : 171 라인에서 설정한 WFSTest.html 파일이 전부 로딩되면 자동으로 31라인의 init() 메소드가 호출- line 78 : init() 메소드에서 지도에 관한 세팅들이 마무리되면 getWFS() 메소드 호출, getWFS() 메소드는 개방해의 선상낚시 포인트레이어의 WFS 데이터를 요청하고 정상적으로 데이터를 받으면 parseGML() 메소드를 호출하여 세팅된 배경지도위에 해당 POI를 뿌려줌- line 103 : parseGML() 메소드는 개방해의 오픈 API 를 통해 받은 WFS 데이터를 OpenLayers Features 배열에 저장, 객체를 지도위에 POI 형태로 나타냄.POI는 마우스 클릭 이벤트..

3587 - 메카르트 투영법타원형의 지구를 2D 평면 지도에 표시한 좌표계, 오차 발생, 거리계산 불가능단순 웹페이지 지도 보여주기 형식+proj=merc 4326 - WGS84 타원체의 경위도 좌표계, 위도 경도를 사용타원체 모델 사용, 곡률을 계산하여 거리계산 가능 GIS 에서 사용정밀함이 필요할 때 사용+proj=longlat

vue.confing.jsconst { defineConfig } = require('@vue/cli-service')module.exports = defineConfig({ transpileDependencies: true, devServer: { port: 3000, proxy:"요청 api 주소", }}) 그후 axios url에 요청 api 주소 뒤 url을 작성해주면 된다 ez-

시작하기 필요버전ol: ^9.1.0ol-contextmenu: ^5.4.0ol-ext: ^4.0.15vue: ^3.4.0인스톨 npm 기준npm i ol ol-ext ol-contextmenu # install the peerDependenciesnpm i vue3-openlayers # install this library main.js or main.ts import { createApp } from "vue";import App from "./App.vue";// The style are only needed for some map controls.// However, you can also style them by your ownimport "vue3-openlayers..

다른 위치로 이동컴포넌트 내에서 라우터에 접근하려면 router 속성을 사용Composition API 는 useRouter() 를 호출하여 라우터에 접근 다른 URL로 이동하려면 router.push 를 사용 - 새 항목을 히스토리 스택으로 푸시, 사용자가 브라우저의 뒤로가기 버튼을 클릭하면 이전 URL 로 이동함 이것은 router-link 를 클릭할 때 내부적으로 호출되는 메서드이므로, router-link :to" . . . "를 클릭하는 것은 router.push(...) 를 호출하는 것과 가틍ㅁ 선언 방식 - 프로그래밍 방식 - router.push( . . . ) // 문자열 라우트router.push('/users/eduardo')// 라우트(path)를 나타낸 객체router.push({..

일부 앱의 UI는 여러 단계로 중첩된 컴포넌트로 구성된다이 경우, URL 세그먼트가 중첩된 컴포넌트 중 특정 구조와 일치되어야 하는 것을 매우 일반적임예시/user/johnny/profile /user/johnny/posts ┌──────────────────┐ ┌──────────────────┐│ User │ │ User ││ ┌──────────────┐ │ │ ┌──────────────┐ ││ │ Profile │ │ ●────────────▶ │ │ Posts │ ││ │ │ │ ..

라우트를 생성할 때 선택적으로 라우트에 name 을 지정가능const routes = [ { path: '/user/:username', name: 'profile', component: User }] 그러면 에 to prop 을 전달할 때 path 대신 name 을 사용할 수 있음 사용자 프로필 이렇게 되면 /user/erina 로 링크를 생성하게 된다 name 을 사용했을 때의 이점하드코딩 URL 없음params 의 자동 인코딩URL 오타방지경로 순위를 우회하여, 같은 경로와 일치하는 하위 순위 라우트를 표시 각 이름은 모든 라우트에서 유일해야함, 같은 여러 라우트에 추가하면 라우터는 마지막 것만 유지할 것임

Vue Router는 Vue.js 의 공식 라우터Vue 코어와 긴밀하게 통합되어 싱글 페이지 앱을 쉽게 만들 수 있음기능중첩된 라우트 매핑동적 라우팅모듈식 컴포넌트 기반의 라우터 설정라우트에 파라미터, 쿼리, 와일드카드 적용Vue.js의 트랜지션 시스템을 사용한 트랜지션 효과라우트 탐색을 세밀하게 컨트롤링크에 자동으로 엑티브 CSS 클래스 적용HTML5 히스토리 모드 또는 해시 모드커스텀 스크롤 동작URL에 대한 적절한 인코딩 설치기존 프로젝트가 있을 시 자신이 사용하는걸로 ㄱnpm install vue-router@4yarn add vue-router@4pnpm add vue-router@4  동적 라우트 매칭과 파라미터 주어진 패턴에 따라 같은 컴포넌트에 라우트를 매핑 해야 될 때예를 들어 모든 사용..

Vue Router는 vue의 공식 클라이언트 사이드 라우팅 솔루션 클라이언트 사이드 라우팅은 싱글 페이지 애플리케이션(SPA)에서 사용자가 보는 콘텐츠에 브라우저 URL을 연결하는 데 사용사용자가 애플리케이션을 탐색함에 따라 URL이 적절하게 업데이트되지만, 페이지를 서버에서 다시 로드할 필요는 없음App.vue Hello App! 현재 라우트 경로: {{ $route.fullPath }} 홈으로 가기 소개로 가기  Vue Router 에서 제공하는 두 컴포넌트RouterLink - 태그 대신 사용RouterView - 현재 라우트 컴포넌트를 렌더링할 위치를 Vue Router에 알려줌(현재 URL 경로에 해당하는 컴포넌트)굳이 App.vue에 있을 필요는..

컴포넌트를 사용하면 UI를 독립적이고 재사용 가능한 일부분으로 분할하고 각 부분을 개별적으로다룰 수 있음 -> 앱이 중첩된 컴포넌트의 트리로 구성되는 것은 일반적이것은 기본 HTML 엘리먼트를 중첩하는 방법과 매우 유사하지만,Vue 는 각 컴포넌트에 사용자 정의 컨텐츠와 논리를 캡슐화할 수 있는 자체 컴포넌트 모델을 구현함 컴포넌트 정의하기 빌드 방식을 사용할 때 일반적으로 싱글 파일 컴포넌트(SFC) 라고 하는 .vue 확장자를 사용하는 전용 파일에 각 Vue 컴포넌트를 정의 당신은 {{ count }} 번 클릭했습니다. 빌드 방식을 사용하지 않을 때 Vue 컴포넌트는 Vue 관련 옵션을 포함하는 일반 Js 객체로 정의할 수 있음import { ref } from 'vue'export default ..

Vue의 선언적 렌더링 모델은 개발자가 직접 DOM에 접근해야 하는 대부분을 추상화하지만개발자가 DOM 엘리먼트에 직접 접근해야 하는 경우가 여전히 있을 수 있음이러한 필요성을 충족시키기 위해 ref 라는 특별한 속성을 사용할 수 있음 //tem ref 는 v-for 장에서 언급한 key 속성과 유사한 특수 속성이를 통해 마운트된 특정 DOM 엘리먼트 또는 자식 컴포넌트 인스턴스에 직접적인 참조를 얻을 수 있음예를들어 컴포넌트 마운트의 인풋에 초점을 맞추거나 엘리먼트에서 타사 라이브러리를 초기화 하려는 경우,프로그래밍 방식으로 조작하기 편리함 ref로 접근하기 Composition API 를 사용하여 참조를 얻으려면, 템플릿 ref 속성 값과 일치하는 이름으로 ref 를 선언해야함   ..

기본예제 계산된 속성은 계산되어 파생된 값을 선언적으로 사용할 수 있게 함그러나 상태 변경에 대한 반응으로 "사이드 이펙트" 를  수행해야 하는 경우가 있음(ex. DOM을 변경하거나 비동기 작업의 결과를 기반으로 다른 상태를 변경 하는 것) watch 함수를 사용하여 반응형 속성이 변경될 때마다 함수를 실행 가능const question = ref('')const answer = ref('?를 포함해서 질문을 해보세요')watch(question, async (newQuestion) => { if (newQuestion.indexOf('?') > -1) { answer.value = 'Thinking...' try { const res = await fetch('https://ye..

각 Vue 컴포넌트 인스턴스는 생성될 때 일련의 초기화 단계를 거침데이터 감시를 설정, 템플릿을 컴파일, 인스턴스를 DOM에 마운트, 데이터 변경시 DOM 업데이트이 과정에서 생명 주기 훅 (lifecycle hooks)라 불리는 함수도 실행하여 특정 단계에서 개발자가 의도하는 로직이 실행될 수 있도록 함 생명 주기 훅 등록하기 onMounted 훅 - 컴포넌트가 초기 렌더링 및 DOM 노드 생성이 완료된 후 코드를 실행  가장 일반적으로 사용되는 것 -  onMounted, onUpdated, onUnmounted호출시 Vue 는 등록된 콜백 함수를 현재 활성 컴포넌트 인스턴스와 자동으로 연결함, 동기적으로 등록해야하므로아래와 같이 xsetTimeout(() => { onMounted(() => { ..

프론트엔드 폼 작업시 폼 입력 엘리먼트의 상태를 js 상태와 동기화해야 하는 경우가 많음 text = event.target.value">//단순화 * v-model 은 모든 폼 엘리먼트에서 감지되는 초기 value , checked 또는 select 속성 값을 무시항상 현재 바인딩된 js 상태를 유효값으로 취급, reactivity API를 사용하여 초기 값 선언해야함  기본 사용법 텍스트메세지: {{ message }} * 만약 IME 구성 (한국어 일본어 중국어)가 안된다면 v-model 대신 input 이벤트리스너와 value 바인딩을 사용해서 기능구현.... 여러 줄 텍스트여러 줄 메세지:{{ message }} 내부에 이중 중괄호 문법은 작동하지 않으므로 v-model을 사용{{ text }}..

이벤트 리스닝하기 일반적으로 v-on 디렉티브는 단축 문법으로 @ 기호를 사용, DOM 이벤트를 수신하고 트리거 될 때 사전 정의해둔 js 코드를 실행ex> v-on:click="handler" or @click="handler"  두가지 핸들러 값1. 인라인 핸들러 - 이벤트가 트리거될 때 실행되는 인라인 js (네이티브 oncilck 속성과 유사)2. 메서드 핸들러 - 컴포넌트에 정의된 메서드 이름 또는 메서드를 가리키는 경로 인라인 핸들러아래처럼 간단한 경우에 사용const count = ref(0)//tem1 추가숫자 값은: {{ count }}  메서드 핸들러v-on 은 컴포넌트의 메서드 이름이나 메서드를 가리키는 경로를 실행가능 const name = ref('Vue.js')function g..