전체 글

1. 작업공간 : 레이어, 스타일을 저장할 폴더 2. 저장소 생성 : 연결할 db 정보 입력 : 이 곳을 통해 이미지의 feature를 알 수 있다. : user, password - DB의 비번을 적어주는 것임. (pgAdmin 접속시 비번이 아니라) 3. 레이어 생성 Layer란 : feature정보(공간정보)를 나타내는 정보다. ✔️3-1) 새로운 SQL뷰 설정하기 나의 경우는 db에 geometry 데이터가 직접 담겨있는게 아니라, 프론트에서 그 데이터로 geom데이터를 만들어서 써야하기 떄문에 직접 db를 조회하는 sql문을 써야한다. 이 방식으로 하면 db 뷰에서 쿼리를 복잡하게 짜지 않아도 되고, 쿼리에 매개변수를 받을 수 있다. ✔️3-2) sql 문 작성 4. 스타일 ✔️ 4-1) 스타일..

docker없이 설치하려면 geoserver는 java 기반이기 때문에 java를 쓸 수 있는 환경인 jre을 먼저 깔고 시작해야 한다.그러나 나는 java 개발자가 아니기 때문에 이런것 까지 번거롭게 설치해야 하나싶다. 때문에 docker로 geoserver를 설치해보고자 한다.이 방법이 설치 과정도 더 쉽고 mysql이나 다른 프로그램을 한번에 관리하기 더 수월하다 0. docker에 geoserver 설치 1. docker pull docker.osgeo.org/geoserver:2.24.x : 터미널에서 docker pull 을 통해 도커의 images에 geoserver 추가하기: npm pull 처럼 geoserver설치를 위한 cd를 가져오는 개념임→ 설치 완료되면 이렇게 Images에 생성..

DBMS (database management system) : 데이터의 집합을 관리하고 운영하는 소프트웨어 DBMS의 종류 : mysql, postgresql 등 MySQL: 관계형 DBMS(줄여서 RDBMS) SQL : DBMS에 데이터를 구축, 관리하기 위해 사용되는 언어 ✔️ 인덱스 react 에서 for문을 돌때 key를 쓰는 이유는 객체 하나하나를 다 비교하지 않고 바뀐 부분만 캐치하여 해당 요소만을 리렌더링 할 수 있기 때문이다. 이런 것 처럼 sql에서는 인덱스를 이용해 테이블을 전체 검색하는게 아니라, 해당 값을 빠르게 찾을 수 있다. CREATE INDEX idx_member_name ON member(member_name) member 테이블의 member_name 열에 인덱스를 지정..

v-model은 input, select, textarea에서 사용할 수 있다. input 이벤트: input type="text", textarea change 이벤트 : input type="checkbox", input type="radio", select default modifiers v.model.lazy- input 요소에서 포커스가 빠지면 data가 업데이트 된다. v.model.number - input에 입력된 값을 숫자형으로 바꿔준다. v.model.trim - js의 string의 trim 메서드와 같다. 입력값 앞뒤 공백을 제거해준다. checkbox에서의 true-value, false-value checkbox의 v-model로 바인딩한 data가 Boolean 형태이기 떄문..

prop을 자식 컴포넌트에 넘겨주는 것 처럼, 어떤 틀에 "template 자체"를 넘겨서 자식 컴포넌트에서 렌더할 수 있음. HTML 삽입 미리보기할 수 없는 소스

1. v-for문 안에서 v-if를 쓰지 않는다. 이유 : v-for문이 실행 된 후 v-if문이 실행되기 때문에, if문 조건에 따라 분기처리 되는게 아니라 for문을 도는 모든 요소을 다 거치게 된다. 해결 : computed에서 for문을 돌릴 배열을 만들어 그 값을 v-for로 사용한다. → 로직과 마크업 코드를 분리하여 가독성 증가 → 리렌더링 될 때마다 매번 for문이 실행되는게 아니라, computed 값이 바뀌었을 때만 다시 실행될 것이다. computed: { cheapProducts: () => { return this.products.filter(function (product) { return product.price < 100 }) } } 2. created나 watch에서 met..

data는 computed를 계산하기 전에 평가된다. 때문에 data의 값을 computed값으로 대입할 수 없는 것이다. 해결 : 굳이 이런 로직을 써야한다면, watch로 computed값이 바뀌었을때 data를 초기화해주는 방법을 활용할 수 있다. ※ data값으로 store값을 사용할 수는 있다. 참고자료 https://stackoverflow.com/questions/44318343/use-computed-property-in-data-in-vuejs

slot 슬롯은 어떤 콘텐츠를 다른 컴포넌트에 전달할 수 있게 됨. 활용 사례 : 캐러셀을 만들때 부모 컴포넌트1과 2는 공통된 자식컴포넌트를 사용함. 그러나 그 자식 컴포넌트의 레이아웃은 같지만 컨텐츠 내용만 바꿔 사용할 때 slot 활용할 수 있음. 리액트에서의 outlet과 비슷하다고 생각됨. 공식문서 : 영문 사이트 한글 사이트 ✅ 기본사용 - 특정 컨텐츠를 전달 (단일 슬롯 사용) Parent1과 Paren2는 Child컴포넌트를 공통으로 사용한다. 그러나 컨텐트 내용은 어떤 부모 컴포넌트 인지에 따라 다르게 나타내야 하는 상황. Parent에서 아무 컨텐츠도 쓰지 않았다면, 기본 값으로 slot에 정의해둔 컨텐츠인 "default" 가 나온다. // Parent1.vue - "/home" ho..

a태그와 router-link는 라우터 주소를 이동시킬 때 사용한다. 이 둘은 비슷하지만 다음과 같은 차이점이 있기 때문에, vue에선 a태그보단 router-link 사용을 선호한다. a태그 : 페이지 전체가 다시 실행되게 됨. (spa 구현x) router-link : 브라우저의 "새로고침 없이"도 다른 페이지로 이동시켜주는 컴포넌트임! (spa 구현ㅇ) 공식문서 : https://v3.router.vuejs.org/kr/api/#router-link