DOM에 대한 표시 여부 감시(IntersectionObserver)

먼저 코드는 다음과 같습니다.

import './style-intersectionObserver.css'

const divApp = document.querySelector("#app")

if(divApp) {
  for(let i=0; i<20; i++) {
    const div = document.createElement("div")
    div.innerHTML = (i+1).toString()
    divApp.append(div)
  }
  
  const observer = new IntersectionObserver((entries) => {
    entries.forEach((entry) => {
      if(entry.isIntersecting) {
        entry.target.classList.add("visible")
      } else {
        entry.target.classList.remove("visible")
      }
    })
  }, {
    threshold: 0
  })

  const divList = divApp.querySelectorAll("div")
  divList?.forEach((div) => observer.observe(div))
}

스타일은 다음과 같구요.

body {
  margin: 0;
}

#app {
  overflow-y: auto;
  position: fixed;
  background-color: rgb(45, 46, 47);
  background-image: 
    linear-gradient(to right, rgb(35, 36, 37) 1px, transparent 1px), 
    linear-gradient(to bottom, rgb(35, 36, 37) 1px, transparent 1px);
  background-size: 32px 32px;

  width: 100%;
  height: 100vh;
}

#app div {
  color: white;
  font-size: 5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 8px auto;
  height: 160px;
  width: 160px;
  border-radius: 10%;
  background-color: black;
  border: 2.5px solid white;
  transition: all 0.5s ease-in-out;
  transform: rotate(-90deg) scale(0.1);
  opacity: 0;
}

#app div.visible {
  transform: rotate(0deg) scale(1);
  opacity: 1;
}

실행 결과는 다음과 같습니다.

인문학적 주소 DB

기록은 남겨야겠고.. 그렇다고 딱히 머라 정할 제목은 만만치 않아 “인문학적”이라는 어디에도 붙여 써먹어도 멋진 단어를 사용했습니다.

경기도에는 부천시가 있습니다. (아래 이미지 출처 : 위키백과)

부천시는 분류상 시군구(sig)입니다. 실제 시스템적 DB화는 부천시 하나입니다. 일반적으로 사람에게 의미있는 정보에 대해 좀더 시스템적으로 처리하기 위해 코드를 부여하는데.. 오직 “부천시”에만 코드값이 할당되어 있습니다. 그런데 우리들은 이 부천시를 위의 그림처럼 오정구, 원미구, 소사구로 다시 구분해서 실생활에 활용합니다. 구분할 필요가 전혀 없는데도 말입니다. 결국 “부천시”에 대해서 동일한 코드값을 갖지만 “부천시 오정구”, “부천시 원미구”, “부천시 소사구”를 DB에 저장할 필요가 있습니다.

여튼 서론이 다소 장황했지만 시스템은 사람이 사용하는 것이므로 부천시에 대한 각 구는 반드시 구분해서 DB화를 해야 한다는 것입니다.

postgreSQL 테이블스페이스 생성

DB 용량이 늘어나게 되면 물리적인 저장장치를 분리해서 DB를 나눠 저장하는 경우가 생기게 되는데 이때 테이블 스페이스(Table Space)라는 단위가 사용됩니다. 참고로 테이블 스페이스는 오라클이나 포스트그래스큐엘 등과 같은 엔터프라이즈 DBMS에서만 지원하는 경우가 많습니다.

먼저 저장장치의 용량을 확인할 필요가 있습니다.

df -h

그리고 테이블스페이스로 사용할 디렉토리를 생성해야 하구요.

mkdir pg_tablespace_geocode2
chown postgres pg_tablespace_geocode2

psql을 통해 다음처럼 테이블 스페이스를 생성할 수 있습니다. 참고로 psql을 실행하기 위해서는 postgres 사용자의 권한을 필요하며 su – postgres와 같은 명령이 필요합니다.

create tablespace ts_geocode2 location '/usr/GeoService-Xr/webHome/user-files/pg_tablespace_geocode2';

테이블 스페이스를 확인하는 명령은 다음과 같습니다.

\db

특정 테이블 스페이스에 DB를 생성하는 명령은 다음과 같습니다.

CREATE DATABASE gis_20240219 WITH TABLESPACE = ts_geocode2;