나만의 개발 기록

Error occurred during initialization of VMjava.lang.Error: Properties init: Could not determine current working directory.at jdk.internal.util.SystemProps$Raw.platformProperties(java.base@17.0.18/Native Method)at jdk.internal.util.SystemProps$Raw.<init>(j

JaeSung Kim — Mon, 23 Feb 2026 17:27:07 +0900

Error occurred during initialization of VM
java.lang.Error: Properties init: Could not determine current working directory.
at jdk.internal.util.SystemProps$Raw.platformProperties(java.base@17.0.18/Native Method)
at jdk.internal.util.SystemProps$Raw.<init>(java.base@17.0.18/SystemProps.java:234)
at jdk.internal.util.SystemProps.initProperties(java.base@17.0.18/SystemProps.java:54)
at java.lang.System.initPhase1(java.base@17.0.18/System.java:2106)

ssh에서 java -version을 입력했을때 위와 같은 에러가 발생하였습니다.

이경우 java 자체의 결함이기보단 현재 터미널에 위치한 디렉터리가 갑자기 삭제되었거나 그럴때 터미널이 위치한 폴더를 시스템이 찾지 못했을때 생기는 에러입니다.

cd /
java -version

상위 폴더나 루트 디렉터리로 이동후 다시 입력을 해보면 정상적으로 java version이 표기가 됩니다.

Vue3 기본문법

JaeSung Kim — Thu, 15 Jan 2026 13:56:13 +0900

1. App.vue

<script setup lang="ts">
</script>

<template>
  <h1>Hello Vue 3</h1>
</template>

<style scoped>
</style>

- script setup -> Vue3 권장 문법

- template -> 화면

- style scoped -> 이 컴포넌트에만 스타일 적용

2. 반응형 데이터 (ref)

<script setup lang="ts">
import { ref } from "vue";

const count = ref(0);
</script>

<template>
  <h1>Count: {{ count }}</h1>
</template>

- ref(값) -> 반응형

- template에서는 .value 안씀

3. 이벤트 바인딩 (click)

<script setup lang="ts">
import { ref } from "vue";

const count = ref(0);

function increment(){
  count.value++;
}

</script>

<template>
  <h1>Count: {{ count }}</h1>
  <button @click="increment" >+</button>
</template>

- @click = v-on:click

- script에서는 .value로 값을 뽑음

- 버튼 클릭시 count를 1씩 증가

4. v-model (양방향 바인딩)

<script setup lang="ts">
import { ref } from "vue";

const name = ref("");
</script>

<template>
  <input v-model="name" placeholder="이름 입력" />
  <p>안녕하세요, {{ name }}</p>
</template>

- v-model = input <-> state 자동 연결

- form에서 필수 문법

5. 조건 렌더링 (v-if)

<script setup lang="ts">
import { ref } from "vue";

const isLogin = ref(false);
</script>

<template>
  <button @click="isLogin = !isLogin">
    로그인 토글
  </button>

  <p v-if="isLogin">로그인 상태</p>
  <p v-else>로그아웃 상태</p>
</template>

- 기본값 false이므로 처음 화면은 로그아웃 상태, 버튼 클릭시 로그인 상태로 변경됨

- 조간이 자주 바뀌면 v-show 고려,

6. reactive vs ref

- ref : 원시값 (number, string, boolean)

- reactive : 객체, 폼데이터

<script setup lang="ts">
import { reactive, ref } from "vue";

const count = ref(0);

const user = reactive({
  name: "",
  age: 0,
})
</script>

<template>
  <p>count: {{ count }}</p>

  <input v-model="user.name" placeholder="이름" />
  <input v-model="user.age" type="number" placeholder="이름" />

  <p>{{ user.name }} // {{ user.age }}</p>
</template>

- reactive는 .value 못씀

- 객체는 왠만하면 reactive

7. computed

<script setup lang="ts">
import { computed, ref } from "vue";

const count = ref(0);

const doubleCount = computed(() => {
  return count.value * 2;
})

</script>

<template>
  <button @click="count++"></button>
  <p>count: {{ count }}</p>
  <p>double: {{ doubleCount }}</p>
</template>

- 값 가공은 computed

- computed는 캐싱효과가 있음

7-1. computed 캐싱

<script setup lang="ts">
import { computed, ref } from "vue";

const count = ref(0);

const doubleCount = computed(() => {
  console.log("computed")
  return count.value * 2;
})

const test = () => {
  console.log("method");
  return count.value * 2;
}

</script>

<template>
  <button @click="count++"></button>
  <p>count: {{ count }}</p>
  <p>double: {{ doubleCount }}</p>
  <p>double: {{ doubleCount }}</p>
  <p>double: {{ test() }}</p>
  <p>double: {{ test() }}</p>
</template>

- 위에 코드를 실행후 network console로 확인을하면 computed로 선언한 함수는 2번 호출했는데 1번이 console로 찍히고,

함수를 2번 호출시는 2번 console이 찍힘

8. Watch

<script setup lang="ts">
import { ref, watch } from "vue";

const count = ref(0);

watch(count, (newVal, oldVal) => {
  console.log("변경 : ", oldVal, "->", newVal);
})

</script>

<template>
  <button @click="count++"></button>
  <p>{{ count }}</p>
</template>

- count 값이 변경될때 watch가 동작

9. v-for

<script setup lang="ts">
import { ref } from "vue";

const todos = ref([
  { id: 1, text: "Vue 공부" },
  { id: 2, text: "TypeScript 공부" },
]);
</script>

<template>
  <ul>
    <li v-for="todo in todos" :key="todo.id">
      {{ todo.text }}
    </li>
  </ul>
</template>

- key 필수, id 없으면 에러

9-1. computed + v-for

<script setup lang="ts">
import { ref, computed } from "vue";

const todos = ref([
  { id: 1, text: "Vue", done: true },
  { id: 2, text: "TS", done: false },
]);

const doneTodos = computed(() =>
  todos.value.filter(t => t.done)
);
</script>

<template>
  <h3>완료</h3>
  <ul>
    <li v-for="t in doneTodos" :key="t.id">
      {{ t.text }}
    </li>
  </ul>
</template>

- todo 리스트에서 done이 true인 항목만 필터링해서 화면에 뿌림

10. props & emit

Parent.vue

<script setup>
import { ref } from 'vue'
import Child from './Child.vue' // 자식 컴포넌트 불러오기

const myTitle = ref("부모가 주는 선물")
const myCount = ref(0)

// 자식이 보낸 신호를 받았을 때 실행할 함수
const handleIncrease = () => {
  myCount.value++
  console.log("자식의 신호를 받았습니다!")
}
</script>

<template>
  <div style="border: 2px solid #35495e; padding: 20px;">
    <h1> ‍ ‍  여기는 부모 컴포넌트</h1>
    <p>현재 부모의 숫자: {{ myCount }}</p>

    <Child 
      :childTitle="myTitle"
      :count="myCount"
      @increase-count="handleIncrease" 
    />
  </div>
</template>

Child.vue

<script setup>
// 1. Props 정의: 부모에게 받을 데이터 이름표를 만듭니다.
const props = defineProps({
  childTitle: String, // 타입 지정 (String, Number 등)
  count: Number
})

// 2. Emits 정의: 부모에게 보낼 신호 이름을 정합니다.
const emit = defineEmits(['increase-count'])

// 버튼 클릭 시 실행할 함수
const sendSignal = () => {
  // 'increase-count'라는 신호를 부모에게 발사! (필요하면 두 번째 인자로 데이터 전달 가능)
  emit('increase-count')
}
</script>

<template>
  <div style="border: 2px solid #42b883; padding: 10px; margin: 10px;">
    <h3>  여기는 자식 컴포넌트</h3>
    <p>받은 제목: {{ childTitle }}</p>
    <p>받은 숫자: {{ count }}</p>
    
    <button @click="sendSignal">숫자 올려달라고 조르기 (Emit)</button>
  </div>
</template>

TypeScript 기본문법 정리

JaeSung Kim — Wed, 14 Jan 2026 15:43:37 +0900

TypeScript = 자바스크립트에 타입을 붙인 것

쓰는 이유?

- 컴파일 전에 오류를 잡아줌

- 자동완성 + 리팩토링이 미친 듯이 좋아짐

- 협업 / 대규모 프로젝트 필수

- TS는 "문법"이 아니라 " 안전장치"라고 생각하면됨

1. 타입 붙이기

Javascript

let count = 0;
count = "hello"

- 자바스크립트는 런타임 실행 전까지 에러인지 모름

Typescript

let count: number = 0;
count = "hello";

- 타입스크립트는 컴파일시 에러가 발생하여 바로 확인이 가능함

자주 쓰는 기본 타입

let userName: string = "kim"
let age: number = 30;
let isLogin: boolean = true;

Typescript 타입 추론

let price = 100;

- pice 뒤에 : number를 선언하지 않아도 값을 보고 자동으로 타입을 추론함

2. 배열 & 객체

let numbers: number[] = [1, 2, 3];
let users: string[] = ["kim", "lee"];

3. interface / type

interface

interface User {
  id: number;
  email: string;
  isAdmin: boolean;
}

const user: User = {
  id: 1,
  email: "test@test.com",
  isAdmin: false,
};

3-1 interface를 써야하는 상황

DTO / API 응답 구조

interface UserDto {
  id: number;
  email: string;
  name: string;
}

interface ApiResponse<T> {
  success: boolean;
  data: T;
  message?: string;
}

Vue props 정의

interface User {
  id: number;
  email: string;
}

const props = defineProps<{
  user: User;
  isAdmin: boolean;
}>();

implements

interface LoginService {
  login(email: string, password: string): Promise<void>;
}

class AuthService implements LoginService {
  async login(email: string, password: string) {
    // ...
  }
}

확장 (extends)

interface BaseEntity {
  id: number;
  createdAt: string;
}

interface User extends BaseEntity {
  email: string;
}

type

type User = {
  id: number;
  email: string;
  isAdmin: boolean;
};

객체 구조 정의 -> interface

union, 함수 타입 -> type

3-2. type를 써야하는 상황

Union 타입

type Status = "idle" | "loading" | "error";
let status: Status = "loading";

함수 타입 정의

type LoginFn = (email: string, password: string) => Promise<void>;
const login: LoginFn = async (email, password) => {
  // ...
};

조합 타입 (intersection)

type WithToken = {
  accessToken: string;
};

type User = {
  id: number;
  email: string;
};

type AuthedUser = User & WithToken;

제네릭 + 조건 타입

type ApiResult<T> = 
  T extends string ? { value: string } : { value: number };

4. 함수 타입

4-1. 기본 함수

function add(a: number, b: number): number {
  return a + b;
}

4-2. 화살표 함수

const add = (a: number, b: number): number => {
  return a + b;
};

4-3. return 없는 함수

function log(msg: string): void {
  console.log(msg);
}

5. Optional / Nullable

5-1. Optional

interface User {
  id: number;
  name?: string; // 있어도 되고 없어도 됨
}

const u1: User = { id: 1 };
const u2: User = { id: 2, name: "kim" };

- name뒤에 ?를 붙이면 값이 있을수도 있고 없을수도 있다라는 의미임

5-2. null / undefined

let token: string | null = null;

token = "abc";
token = null; // OK

- token 값의 타입이 string이거나 null일수 있다 라는 의미

6. Union 타입

let status: "idle" | "loading" | "success" | "error";
status = "loading";
status = "done";   // 컴파일 에러

- 상태값에 done을 선언하지 않아서 컴파일 에러

7. any

let data: any = 123;
data.toUpperCase(); // 런타임 에러

- any는 어떤타입이든 들어올수 있다라고 설정하는거여서, 사용하면 typescript 쓰는 의미가 없음

- 123을 대문자로 바꾸려니 런타임 에러 발생

8. Unknown

let data: unknown;

if (typeof data === "string") {
  data.toUpperCase();
}

- unknown은 타입을 아직 모른다는걸 typescript에게 솔직하게 말하는 타입

9. any vs unknown

let data: any;

data = 123;
data = "hello";

data.toUpperCase();

- any로 선언을하면 toUpperCase 컴파일은 통과하지만, 런타임에서 에러가 발생함

let data: unknown;

data = 123;
data = "hello";

data.toUpperCase();

- unknown으로 선언하면 toUpperCase 컴파일에서 에러가 발생함, 즉 unknown은 확인하고 쓰라는걸 강제함

ubuntu 서버 최초 세팅

JaeSung Kim — Wed, 14 Jan 2026 13:07:52 +0900

1. 서버 접속

(기본 계정 : ubuntu)

ssh ubuntu@server_ip

2. 시스템업데이트

sudo apt update
sudo apt upgrade -y

3. 타임존 설정(선택이지만 추천)

sudo timedatectl set-timezone Asia/Seoul
timedatectl

4. sudo 권한 일반 사용자 계정 생성

sudo adduser username
sudo usermod -aG sudo username
groups username

4-1. sudo 계정 생성후 정상확인

su - username
sudo ls

-> 비밀번호 묻고 정상실행돠면 성공

5. ROOT 계정 SSH 로그인 비활성화

vim /etc/ssh/sshd_config

PermitRootLogin no # 해당 부분 no로 설정 yes면 root로 바로 로그인 가능한 상태임

(선택) 로그인 유지시간 설정

vim /etc/ssh/sshd_config

ClientAliveInterval 300
ClientAliveCountMax 0

ClientAliveInterval 300 : **300초(5분)**마다 클라이언트 응답 확인

ClientAliveCountMax 0 : 응답 없으면 즉시 세션 종료

결과: 5분 동안 아무 작업 없으면 자동 로그아웃

(선택) 패스워드 오류 허용 횟수 (로그인 실패 제한)

MaxAuthTries 3

패스워드 3번 틀리면 즉시 접속 종료

(선택) 로그인 시도 제한

LoginGraceTime 30

접속 후 30초 안에 인증 못 하면 강제 종료

운영서버에서 가장 많이 쓰는 조합

# 로그인 유지시간
ClientAliveInterval 300
ClientAliveCountMax 0

# 인증 보안
MaxAuthTries 3
LoginGraceTime 30

# root 로그인 차단 (이미 설정했을 가능성 높음)
PermitRootLogin no

- 만약 추가적으로 ssh 파일로만 로그인하고싶으면 아래 옵션을 설정하면 된다. id password 로그인 x

# 패스워드 로그인 허용 여부 (권장: 키 로그인만)
PasswordAuthentication no

5-1 ssh 설정파일 정상적으로 변경되었는지 확인후 restart

sudo sshd -t
sudo systemctl restart ssh

sudo sshd -t : sshd_config에 문법에 오류가 없으면 아무것도 안뜸

sudo systemctl restart ssh : ssh 재시작

6. 방화벽(UFW) 설정

sudo apt install ufw -y
sudo ufw default deny incoming
sudo ufw default allow outgoing
sudo ufw allow 22/tcp   # 또는 변경 포트
sudo ufw enable
sudo ufw status verbose

6-1. 웹서버 방화벽 설정

sudo ufw allow 80/tcp
sudo ufw allow 443/tcp

npm : 'npm' 용어가 cmdlet, 함수, 스크립트 파일 또는 실행할 수 있는 프로그램 이름으로 인식되지 않습니다. 이름이 정확한지 확인하고 경로가 포함된 경우 경로가 올바른지 검증한 다음 다시 시도하십시오.

JaeSung Kim — Wed, 14 Jan 2026 11:04:16 +0900

컴퓨터를 포맷한후 npm명령어가 먹지않아서 해결방법 포스팅합니다.

npm 명령어를 쓰다가 해당 에러가 발생할경우, cmd창에 아래명령어를 쳐서 확인합니다.

node -v

-> node js가 설치가 안되어있으면 node js를 다운로드합니다.

https://nodejs.org/ko/download

Node.js — Node.js® 다운로드

Node.js® is a free, open-source, cross-platform JavaScript runtime environment that lets developers create servers, web apps, command line tools and scripts.

nodejs.org

powershell에서 관리자 권한으로 실행

Get-ExecutionPolicy
Set-ExecutionPolicy RemoteSigned
npm -v

이후에 npm명령어가 정상적으로 동작하는것을 볼수있습니다.

reactJs 확장프로그램 devtool 설치

JaeSung Kim — Mon, 15 Dec 2025 20:16:10 +0900

https://chromewebstore.google.com/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi

React Developer Tools - Chrome 웹 스토어

Adds React debugging tools to the Chrome Developer Tools. Created from revision 3cde211b0c on 10/20/2025.

chromewebstore.google.com

해당 사이트에서 devtools 확장프로그램 추가

App.jsx

import Counter from "@/components/Counter";
import UserCard from "@/components/UserCard";

function App() {
  const user = {
    name: "Jaesung",
    age: 30,
    role: "Frontend Dev",
  };

  return (
    <div style={{ padding: 20 }}>
      <h1>React DevTools Test</h1>

      <Counter initial={5} />
      <Counter />

      <UserCard user={user} />
    </div>
  );
}

export default App;

components/Counter.jsx

import { useState } from "react";

function Counter({ initial = 0 }) {
    const [count, setCount] = useState(initial);

    return (
        <div style={{ border: "1px solid #ccc", padding: 12, marginBottom: 12 }}>
            <h3>Counter</h3>
            <p>count: {count}</p>
            <button onClick={() => setCount((c) => c + 1)}>+</button>
            <button onClick={() => setCount((c) => c - 1)}>-</button>
        </div>
    );
}

export default Counter;

components/UserCard.jsx

function UserCard({ user }) {
    return (
        <div style={{ border: "1px solid #aaa", padding: 12 }}>
            <h3>UserCard</h3>
            <p>name: {user.name}</p>
            <p>age: {user.age}</p>
            <p>role: {user.role}</p>
        </div>
    );
}

export default UserCard;

개발자도구 - Components를 클릭해보면 각 컴포넌트의 props hooks등을 확인할수 있다.

reactJs vsCode eslint 플러그인 설정

JaeSung Kim — Mon, 15 Dec 2025 20:07:42 +0900

플러그인 선택후 eslint 설치

eslint.config.js

import js from '@eslint/js'
import globals from 'globals'
import reactHooks from 'eslint-plugin-react-hooks'
import reactRefresh from 'eslint-plugin-react-refresh'
import { defineConfig, globalIgnores } from 'eslint/config'

export default defineConfig([
  globalIgnores(['dist']),
  {
    files: ['**/*.{js,jsx}'],
    extends: [
      js.configs.recommended,
      reactHooks.configs.flat.recommended,
      reactRefresh.configs.vite,
    ],
    languageOptions: {
      ecmaVersion: 2020,
      globals: globals.browser,
      parserOptions: {
        ecmaVersion: 'latest',
        ecmaFeatures: { jsx: true },
        sourceType: 'module',
      },
    },
    rules: {
      'no-unused-vars': ['error', { varsIgnorePattern: '^[A-Z_]' }],
      'react/prop-types': 'off',
    },
  },
])

- rule안에 react/prop-types off로 설정

reactJs 프로젝트 경로 src '@' 설정

JaeSung Kim — Mon, 15 Dec 2025 19:58:53 +0900

vite.config.js

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import { resolve } from "path";

export default defineConfig({
  plugins: [react()],
  resolve: {
    alias: {
      "@": resolve("src"),
    },
  },
});

루트디렉터리에 jsconfig.json 생성

- vite.config.js만 생성하도 컴파일 에러가 나지않지만, Eslint 설정이 빡세게 되어있거나, idel에서 에러가 날경우가 있어서 아래 추가

jsconfig.json

{
    "compilerOptions": {
        "baseUrl": ".",
        "paths": {
            "@/*": [
                "src/*"
            ]
        }
    }
}

components/Header.jsx

function Header() {
    return (
        <header>
            <h1>My App Header</h1>
        </header>
    );
}

export default Header;

App.jsx

import Header from "@/components/Header";

function App() {
  return <Header />;
}

export default App;

index.css, app.css는 삭제

서버 시작

npm run dev

react 프로젝트 세팅

JaeSung Kim — Mon, 15 Dec 2025 19:06:48 +0900

노드 설치 및 확인

vsCode를 실행한후 아래 명령어를 실행한다.

node -v
npm -v

- 설치가 되어있지않으면 node js 설치를 한다.

https://nodejs.org/en/

Node.js — Run JavaScript Everywhere

Node.js® is a free, open-source, cross-platform JavaScript runtime environment that lets developers create servers, web apps, command line tools and scripts.

nodejs.org

프로젝트 설정

vsCode 터미널에서 프로젝트를 생성할 폴더로 이동후 아래 명령어를 작성한다.

npm create vite@latest 프로젝트명

- React 선택

- Typescript나 JavaScript 사용하고자 하는 언어 선택

- no 선택

-> rolldown-vite는 Rust로 만든 차세대 번들러임 , rollup을 대체하려는 목적

특징은 훨씬 빠른 빌드속도를 가지고 있지만, 아직 실험단계임

- yes 선택

- 프로젝트안에 접속후 코드를 보고 싶으면 해당 경로로 이동후 아래 명령어를 입력한다.

cd 프로젝트경로
code .

[코프링] 13. dotenv 적용해서 spring 프로퍼티 중요정보 .env 파일로 분리하기

JaeSung Kim — Tue, 18 Feb 2025 14:01:42 +0900

spring 프로퍼티를 설정할때 중요정보를 보여주지 않고 따로 환경설정 파일로 분리하고 싶을때가 있을것이다.

그때 dotenv를 적용해서 env파일로 분리하는 방법을 아래 내용에 작성하려고 한다.

build.gradle.kts

//dotenv
implementation ("io.github.cdimascio:java-dotenv:5.2.2")

루트 디렉터리 경로에 .env 파일 생성

.env

SPRING_PROFILES_ACTIVE=local
SECRET=jwt시크릿키

application.yml

spring:
  config:
    import: optional:file:.env[.properties]
  profiles:
    active: ${SPRING_PROFILES_ACTIVE}  # 기본적으로 local 프로파일 사용 (운영에서는 prod로 변경)

jwt:
  expiration_time: 86400000 # 1일
  secret: ${secret}

logging:
  level:
    org.hibernate.SQL: DEBUG  # Hibernate 쿼리 로그 출력

config 아래 import 부분을 추가, .env에 설정한 key를 사용

application.kt

package com.contact.management

import io.github.cdimascio.dotenv.Dotenv
import org.springframework.boot.autoconfigure.SpringBootApplication
import org.springframework.boot.runApplication
import org.springframework.data.jpa.repository.config.EnableJpaAuditing


@SpringBootApplication
@EnableJpaAuditing
class ManagementApplication

fun main(args: Array<String>) {
	runApplication<ManagementApplication>(*args)
	val dotenv = Dotenv.load()
	System.out.println("SPRING_PROFILES_ACTIVE: " + dotenv.get("SPRING_PROFILES_ACTIVE"));
	System.out.println("SECRET: " + dotenv.get("SECRET"));
}

test 코드를 만들어도 되지만 간단하게 테스트 하기위해서 applicaiton.kt에 해당 코드 작성

.gitignore

.env*

- 깃에 커밋시 해당 환경설정 파일이 commit되면 안되므로 맨 아래 라인에 .env*을 추가

git ignore에 .env*을 포함해도 .env파일이 git staging에 보일경우 안보이게 하는법

1. .env 파일을 백업하고 프로젝트에 있는 .env 파일을 삭제

2. 아래 명령어 intelij 터미널에 입력

git rm .env --cached
git add .
git commit -m "remove .env file from git"
git push

3. 이후 다시 루트 디렉터리에 백업한 .env파일을 생성한후 git - commit 클릭

env 파일을 변경해도 커밋 changes에 안보이는것을 확인할수 있음

[코프링] 12. Render 무료 호스팅서버에 Spring boot + Kotlin 배포하기

JaeSung Kim — Fri, 14 Feb 2025 16:26:12 +0900

백엔드 무료서버가 몇가지있지만 그중 Render라는 무료 서버 호스팅 사이트에 배포하는 방법 관련 내용입니다.

이전 포스팅한 간단한 프로젝트를 Render에 배포해보겠습니다.

기본적으로 docker hub 회원가입 및 도커가 설치 되어있다는 기준으로 진행하겠습니다.

intelij 프로젝트에서 gradle build 클릭

DockerFile

FROM azul/zulu-openjdk:17-latest
VOLUME /tmp
COPY build/libs/*.jar app.jar
ENTRYPOINT ["java","-jar","/app.jar"]

intelij 터미널에 아래 명령어 순서대로 입력

docker build -t 프로젝트명 .
docker images
docker tag 프로젝트명:latest         도커아이디명/프로젝트명
docker push 도커아이디명/프로젝트명

docker hub 사이트 접속

https://hub.docker.com/

Docker Hub Container Image Library | App Containerization

Increase your reach and adoption on Docker Hub With a Docker Verified Publisher subscription, you'll increase trust, boost discoverability, get exclusive data insights, and much more.

hub.docker.com

- docker hub사이트에 접속해보면 이미지가 push가 잘된것을 볼수 있습니다.

render 사이트에 접속을 합니다.

https://dashboard.render.com/

Cloud Application Hosting for Developers | Render

Render is a unified cloud to build and run all your apps and websites with free SSL, global CDN, private networks and automatic deploys from Git.

dashboard.render.com

Overview - Create New Service

Web Service 클릭

docker hub에 push한 image url을 입력후 Connect

Region은 가장 가까운 Singapore로 설정

Instance Type는 Free로 설정

SPRING_PROFILES_ACTIVE -> prod로 설정이후 Deploy Web Service

배포 완료화면

- 로그를 보면 application.yml prod를 바라보게 설정이 된것을 볼수 있음

배포한 서버의 사용자 조회 api 호출

배포한 서버의 신규 사용자 등록 api 호출

[코프링] 11. Render 무료 호스팅서버 Postgres 데이터베이스 생성

JaeSung Kim — Fri, 14 Feb 2025 15:35:47 +0900

render 사이트에 접속을 합니다.

https://dashboard.render.com/

Cloud Application Hosting for Developers | Render

Render is a unified cloud to build and run all your apps and websites with free SSL, global CDN, private networks and automatic deploys from Git.

dashboard.render.com

1. 메인 - project에 들어가서 Create new proejct를 클릭

2. 프로젝트 이름 작성후 create

3. Overview 클릭 - 오른쪽에 플러스 버튼 클릭 - Create New Service 클릭

4. render는 database를 Postgres를 지원함, 하단에 Postgres 클릭

5. Postgres를 설정하는 화면

Name : postgres 프로젝트 이름 (render에서 사용하는거라 아무거나 적어도 무방)

Databse : 데이터베이스명

User: 사용자명

Region: 지역 선택 (가장 가까운 지역이 싱가폴이라서 고름)

Plan Options: Free로 선택해야함, 그래야 돈 안나감

6. info에 들어가면 생성된 database 정보를 볼수 있음

- External Database Url 옆에 눈모양 클릭후 jdbc url 복사

application.prod.yml

spring:
  datasource:
    driver-class-name: org.postgresql.Driver
    url: jdbc:postgresql://호스트명:5432/데이터베이스
    username: 사용자명
    password: 패스워드

  jpa:
    hibernate:
      ddl-auto: create
    show-sql: false
    properties:
      hibernate:
        format_sql: false

- 위에 복사한 url에서 필요한 정보들 yml에 값 설정

application.yml

spring:
  profiles:
    active: prod  # 기본적으로 local 프로파일 사용 (운영에서는 prod로 변경)

jwt:
  expiration_time: 86400000 # 1일
  secret: 시크릿키

logging:
  level:
    org.hibernate.SQL: DEBUG  # Hibernate 쿼리 로그 출력

prod로 설정해보고 application 시작

서버 시작시 로그를 보면 h2가 아니라 postgres가 뜨는것을 볼수 있음

- 이전에 만들었던 사용자 등록 api 호출

- 이전에 만들었던 사용자 조회 api 호출

render 무료호스팅으로 생성한 postgres가 정상적으로 연결된것을 확인할수 있음

[코프링] 10. application.yml 운영, 로컬 분리하기, postgres 설정

JaeSung Kim — Fri, 14 Feb 2025 15:23:10 +0900

기존에 application.yml이 하나였는데 로컬, 운영으로 분리해보겠습니다.

application.yml

spring:
  profiles:
    active: local  # 기본적으로 local 프로파일 사용 (운영에서는 prod로 변경)

jwt:
  expiration_time: 86400000 # 1일
  secret: jwt 시크릿키

application-local.yml

spring:
  h2:
    console:
      enabled: true
      path: /h2-console

  datasource:
    driver-class-name: org.h2.Driver
    url: jdbc:h2:mem:management
    username: sa
    password:

  jpa:
    hibernate:
      ddl-auto: create
    show-sql: true
    database-platform: org.hibernate.dialect.H2Dialect
    properties:
      hibernate:
        format_sql: true

로컬에서는 h2 데이터베이스를 바라보게 설정

application-prod.yml

spring:
  datasource:
    driver-class-name: org.postgresql.Driver
    url: jdbc:postgresql://호스트명:5432/데이터베이스명
    username: 사용자명
    password: 패스워드

  jpa:
    hibernate:
      ddl-auto: create
    show-sql: false
    database-platform: org.hibernate.dialect.PostgreSQLDialect
    properties:
      hibernate:
        format_sql: false

logging:
  level:
    org.hibernate.SQL: DEBUG  # Hibernate 쿼리 로그 출력

운영에서는 postgres 데이터베이스를 바라보게 설정

build.gradle

implementation("org.postgresql:postgresql")

posgresql 의존성 추가

jsch를 활용한 spring java에서 ssh command 명령어 실행하기

JaeSung Kim — Fri, 14 Feb 2025 13:23:38 +0900

프로젝트를 하다가 웹에서 버튼클릭시 서버에 설치된 파이썬 파일을 실행해야하는 일이 생겨서, 아래 관련 내용을 정리합니다.

jsch란?

JSCH는 Java에서 SSH 프로토콜을 지원하는 라이브러리로, SFTP, SCP, 포트 포워딩, 터널링 등의 기능을 제공합니다.
Spring에서는 JSCH를 활용하여 원격 서버에 접속하고 파일을 업로드/다운로드하는 등의 작업을 수행할 수 있습니다.

pom.xml

<dependency>
	<groupId>com.jcraft</groupId>
	<artifactId>jsch</artifactId>
	<version>0.1.55</version>
</dependency>

build.gradle

implementation group: 'com.jcraft', name: 'jsch', version: '0.1.55'

Controller

import com.jcraft.jsch.ChannelExec;
import com.jcraft.jsch.JSch;
import com.jcraft.jsch.Session;

...

@ResponseBody
@PostMapping("/sshCommand.json")

    public String sshCommand(@RequestBody Map<String, Object> params) {

        String host = "ssh ip를 입력";  // SSH 서버의 호스트
        int port = port를 입력;
        String user = "로그인 아이디 입력";     // SSH 로그인 사용자
        String password = "로그인 패스워드 입력";  // SSH 로그인 비밀번호
        String command = "df -h";  // ssh command에 입력할 명령어 입력

        Session session = null;
        ChannelExec channel = null;

        try {
            // JSch 객체 생성
            JSch jsch = new JSch();
            session = jsch.getSession(user, host, port);
            session.setPassword(password);

            // SSH 연결 시 호스트 키 확인을 건너뛰기
            session.setConfig("StrictHostKeyChecking", "no");

            // 연결 타임아웃 설정
        	session.connect(10000);

       		//session.connect();



            // 명령어 실행을 위한 채널 열기
            channel = (ChannelExec) session.openChannel("exec");
            channel.setCommand(command);  // 쉘 스크립트 실행 명령 설정
            channel.setErrStream(System.err);

            // 명령어 실행
            InputStream inputStream = channel.getInputStream();
            channel.connect();

            // 실행 결과 읽기
            BufferedReader reader = new BufferedReader(new InputStreamReader(inputStream));
            String line;
            while ((line = reader.readLine()) != null) {
                System.out.println(line);  // 명령어 실행 결과 출력
            }
            channel.disconnect();
            session.disconnect();
        } catch (Exception e) {
            e.printStackTrace();
        }
        return "ok";  // 명령어 실행 후 홈으로 리다이렉트

    }

- command에는 ssh 명령어 입력창에 입력되는 명령어를 입력합니다.

//예제 home으로 이동한후 test.sh파일을 실행해라
cd /home && ./test.sh

session time out 현상이 있어서 아래 코드를 추가하였습니다.

아래코드는 session time out을 10초까지 기다린다는 의미입니다.

session.connect(10000);

jsch 0.1.55 socket is not established error가 발생할경우

- host, post, user, password를 다시 한번 확인해서 입력을 해야 합니다. 해당 정보가 맞지않거나 방화벽이 허용되지 않아, 웹 소켓 연결이 안될경우 발생하는 에러입니다.

[코프링] 9. Spring Kotlin Jpa Querydsl Security Jwt 적용

JaeSung Kim — Tue, 11 Feb 2025 14:27:42 +0900

jwt secret 생성

https://jwtsecret.com/generate

JwtSecret.com - Generate JWT Secrets Online

Full secret is hidden for security.

jwtsecret.com

- 위사이트 접속후 32자 클릭, Generate 선택후 복사

application.yml

spring:
  # H2 Console 설정
  h2:
    console:
      enabled: true  # H2 Console을 사용할지 여부
      path: /h2-console  # H2 Console의 접근 경로

  # 데이터베이스 설정
  datasource:
    driver-class-name: org.h2.Driver  # H2 드라이버 사용
    url: jdbc:h2:mem:management  # 메모리 내 데이터베이스 (테스트용)
    username: sa  # 접속할 사용자명
    password:  # 비밀번호 (없으면 공백으로 설정)

  # JPA 설정
  jpa:
    hibernate:
      ddl-auto: create  # 테이블 자동 생성 및 업데이트 (설정에 따라 'none', 'update', 'create', 'create-drop' 등이 가능)
    show-sql: true  # SQL 쿼리를 로그에 출력
    database-platform: org.hibernate.dialect.H2Dialect  # H2 데이터베이스용 Hibernate Dialect 설정
    properties:
      hibernate:
        format_sql: true  # SQL을 보기 쉽게 포맷

jwt:
  expiration_time: 86400000 #1일
  secret: 위에 복사한 key를 여기에 넣으세요

jwt, expiration_time, secret 추가

이번 포스팅에 추가, 변경된 파일들

build.gradle.kts

plugins {
	id("org.springframework.boot") version "3.4.2"
	id("io.spring.dependency-management") version "1.1.7"
	kotlin("jvm") version "1.9.25"
	kotlin("plugin.spring") version "1.9.25"
	kotlin("plugin.jpa") version "1.9.25"
	kotlin("kapt") version "1.9.25"
}

group = "com.contact"
version = "0.0.1-SNAPSHOT"

java {
	toolchain {
		languageVersion.set(JavaLanguageVersion.of(17))
	}
}

repositories {
	mavenCentral()
}

dependencies {
	implementation("org.springframework.boot:spring-boot-starter-data-jpa")
	implementation("org.springframework.boot:spring-boot-starter-web")
	implementation("org.jetbrains.kotlin:kotlin-stdlib-jdk8")
	implementation("org.jetbrains.kotlin:kotlin-reflect")
	implementation("com.fasterxml.jackson.module:jackson-module-kotlin")
	implementation("org.springframework.boot:spring-boot-starter-validation")

	//jwt
	implementation("io.jsonwebtoken:jjwt-api:0.11.5")
	implementation("io.jsonwebtoken:jjwt-impl:0.11.5")
	implementation("io.jsonwebtoken:jjwt-jackson:0.11.5")

	// QueryDSL 의존성 추가
	implementation("com.querydsl:querydsl-jpa:5.1.0:jakarta")
	kapt("com.querydsl:querydsl-apt:5.1.0:jakarta")
	kapt("jakarta.annotation:jakarta.annotation-api")
	kapt("jakarta.persistence:jakarta.persistence-api")

	implementation ("org.springframework.boot:spring-boot-starter-security")

	runtimeOnly("com.h2database:h2")
	testImplementation("org.springframework.boot:spring-boot-starter-test")
}

// Querydsl 설정부 추가 - start
val generated = file("src/main/generated")

// querydsl QClass 파일 생성 위치를 지정
tasks.withType<JavaCompile> {
	options.generatedSourceOutputDirectory.set(generated)
}

// kotlin source set 에 querydsl QClass 위치 추가
sourceSets {
	main {
		kotlin.srcDirs += generated
	}
}

// gradle clean 시에 QClass 디렉토리 삭제
tasks.named("clean") {
	doLast {
		generated.deleteRecursively()
	}
}
kapt {
	generateStubs = true
}

- jwt 부분 추가

각 의존성의 역할

- jjwt-api (io.jsonwebtoken:jjwt-api:0.11.5)
JWT를 생성, 서명, 검증할 수 있는 API를 제공하는 라이브러리
예를 들어, JWT를 생성할 때 Jwts.builder() 같은 기능을 사용할 수 있도록 해줌

- jjwt-impl (io.jsonwebtoken:jjwt-impl:0.11.5)
jjwt-api에서 제공하는 기능의 실제 구현체
API만 추가하면 동작하지 않으므로 반드시 함께 추가

- jjwt-jackson (io.jsonwebtoken:jjwt-jackson:0.11.5)
JSON 파싱을 위해 Jackson을 활용하는 구현체
JWT의 Payload(내용) 을 JSON 형식으로 변환하거나, JSON을 객체로 변환할 때 필요
Jackson을 사용하여 claims(클레임, JWT의 데이터) 정보를 다룰 수 있도록 해줌

User.kt

package com.contact.management.entity

import com.contact.management.audit.BaseEntity
import com.contact.management.dto.SignUpRequest
import com.contact.management.dto.UserUpdateRequest
import jakarta.persistence.Column
import jakarta.persistence.Entity
import jakarta.persistence.EnumType
import jakarta.persistence.Enumerated
import jakarta.persistence.GeneratedValue
import jakarta.persistence.GenerationType
import jakarta.persistence.Id
import jakarta.persistence.Table
import org.springframework.security.crypto.password.PasswordEncoder

@Entity
@Table(name = "users")
class User (
    @Id @GeneratedValue(strategy = GenerationType.IDENTITY)
    val id: Long?= null,
    var password: String,
    var name: String,
    var age: Int,
    var email: String,

    @Enumerated(EnumType.STRING)
    @Column(name = "ROLE", nullable = false)
    var role: RoleType // Adding the role field

) : BaseEntity(){
    companion object {
        fun from(request: SignUpRequest, encoder: PasswordEncoder) = User(
            password = encoder.encode(request.password),
            name = request.name,
            age = request.age,
            email = request.email,
            role = RoleType.ROLE_USER
        )
    }

    fun update(request: UserUpdateRequest, encoder: PasswordEncoder){
        this.password = encoder.encode(request.password)
        this.name = request.name
        this.age = request.age
    }

}

- 사용자 권한 role 추가

RoleType.kt

package com.contact.management.entity

enum class RoleType {
    ROLE_USER,  // 일반 사용자
    ROLE_ADMIN  // 관리자
}

- 권한은 간단하게 일반사용자, 관리자

JwtAccessDeniedHandler.kt

package com.contact.management.jwt

import jakarta.servlet.ServletException
import jakarta.servlet.http.HttpServletRequest
import jakarta.servlet.http.HttpServletResponse
import org.springframework.security.access.AccessDeniedException
import org.springframework.security.web.access.AccessDeniedHandler
import org.springframework.stereotype.Component
import java.io.IOException

/**
 *  필요한 권한이 존재하지 않는 경우에 403 Forbidden 에러 return
 */
@Component
class JwtAccessDeniedHandler : AccessDeniedHandler {
    @Throws(IOException::class, ServletException::class)
    override fun handle(request: HttpServletRequest, response: HttpServletResponse, accessDeniedException: AccessDeniedException) {
        response.sendError(HttpServletResponse.SC_FORBIDDEN)
    }
}

- 이 코드는 Spring Security에서 JWT 기반 인증 및 권한 관리를 할 때, 사용자가 필요한 권한이 없을 경우 403 Forbidden 응답을 반환하는 역할을 하는 클래스

동작방식

1. 사용자가 보호된 API 엔드포인트에 요청
2. Spring Security가 사용자의 JWT 토큰을 검증
3. 사용자가 필요한 권한이 없으면 JwtAccessDeniedHandler의 handle() 메서드가 호출됨
4. 클라이언트에게 403 Forbidden 응답 반환

JwtAuthenticationEntryPoint.kt

package com.contact.management.jwt

import jakarta.servlet.ServletException
import jakarta.servlet.http.HttpServletRequest
import jakarta.servlet.http.HttpServletResponse
import org.springframework.security.core.AuthenticationException
import org.springframework.security.web.AuthenticationEntryPoint
import org.springframework.stereotype.Component
import java.io.IOException

/**
 *  유효한 자격증명을 제공하지 않고 접근하려 할때 401 Unauthorized 에러 리턴
 */
@Component
class JwtAuthenticationEntryPoint : AuthenticationEntryPoint {
    @Throws(IOException::class, ServletException::class)
    override fun commence(request: HttpServletRequest, response: HttpServletResponse, authException: AuthenticationException) {
        response.sendError(HttpServletResponse.SC_UNAUTHORIZED)
    }
}

JwtAuthenticationEntryPoint는 로그인하지 않은 사용자가 보호된 API에 접근하면 401 응답을 반환
@Component를 사용하여 Spring Bean으로 등록되며, Security 설정에서 사용됩
AuthenticationEntryPoint 인터페이스를 구현하여 Spring Security에서 인증되지 않은 요청을 처리

JwtAuthFilter.kt

package com.contact.management.jwt

import com.contact.management.security.CustomUserDetailsService
import jakarta.servlet.FilterChain
import jakarta.servlet.ServletException
import jakarta.servlet.http.HttpServletRequest
import jakarta.servlet.http.HttpServletResponse
import org.springframework.security.authentication.UsernamePasswordAuthenticationToken
import org.springframework.security.core.context.SecurityContextHolder
import org.springframework.security.core.userdetails.UserDetails
import org.springframework.web.filter.OncePerRequestFilter
import java.io.IOException

class JwtAuthFilter(
    private val customUserDetailsService: CustomUserDetailsService,
    private val jwtUtil: JwtUtil
) : OncePerRequestFilter() { // OncePerRequestFilter -> 한 번 실행 보장

    @Throws(ServletException::class, IOException::class)
    override fun doFilterInternal(request: HttpServletRequest, response: HttpServletResponse, filterChain: FilterChain) {
        val authorizationHeader = request.getHeader("Authorization")

        // JWT가 헤더에 있는 경우
        if (authorizationHeader != null && authorizationHeader.startsWith("Bearer ")) {
            val token = authorizationHeader.substring(7)
            // JWT 유효성 검증
            if (jwtUtil.validateToken(token)) {
                val userId = jwtUtil.getUserId(token)

                // 유저와 토큰 일치 시 userDetails 생성
                val userDetails: UserDetails = customUserDetailsService.loadUserByUsername(userId.toString())

                val usernamePasswordAuthenticationToken = UsernamePasswordAuthenticationToken(
                    userDetails, null, userDetails.authorities
                )
                SecurityContextHolder.getContext().authentication = usernamePasswordAuthenticationToken
            }
        }

        filterChain.doFilter(request, response) // 다음 필터로 넘기기
    }
}

1. HTTP 요청의 "Authorization" 헤더에서 JWT를 추출.
2. JWT가 "Bearer "로 시작하는지 확인.
3. JWT의 유효성을 검사.
4. 유효하면 userId를 추출하여 UserDetails 객체를 생성.
5. UsernamePasswordAuthenticationToken을 생성하고 SecurityContextHolder에 저장.
6. 인증이 완료된 요청으로 설정한 후, 다음 필터로 넘김.

요약

JWT 인증을 처리하는 필터로, 요청을 가로채어 JWT를 검증하고 SecurityContext에 인증 정보를 저장하는 역할.
JWT를 헤더에서 추출하고 유효성을 검사한 후, 해당 사용자 정보를 SecurityContextHolder에 저장하여 Spring Security가 인증된 사용자로 인식하도록 설정.
Spring Security 설정에서 필터로 등록해야 동작.

JwtUtil.kt

package com.contact.management.jwt

import com.contact.management.exception.CommonException
import com.contact.management.exception.CommonExceptionCode
import com.contact.management.security.CustomUserDto
import io.jsonwebtoken.*
import io.jsonwebtoken.io.Decoders
import io.jsonwebtoken.security.Keys
import org.slf4j.Logger
import org.slf4j.LoggerFactory
import org.springframework.beans.factory.annotation.Value
import org.springframework.stereotype.Component
import java.security.Key
import java.time.ZonedDateTime
import java.util.*

/**
 * [JWT 관련 메서드를 제공하는 클래스]
 */
@Component
class JwtUtil(
    @Value("\${jwt.secret}") secretKey: String,
    @Value("\${jwt.expiration_time}") private val accessTokenExpTime: Long
) {
    private val log: Logger = LoggerFactory.getLogger(JwtUtil::class.java)
    private val key: Key = Keys.hmacShaKeyFor(Decoders.BASE64.decode(secretKey))

    /**
     * Access Token 생성
     * @param user
     * @return Access Token String
     */
    fun createAccessToken(user: CustomUserDto): String {
        return createToken(user, accessTokenExpTime)
    }

    /**
     * JWT 생성
     * @param user
     * @param expireTime
     * @return JWT String
     */
    private fun createToken(user: CustomUserDto, expireTime: Long): String {
        val claims: Claims = Jwts.claims().apply {
            put("id", user.id)
            put("email", user.email)
            put("authorities", user.role)
        }

        val now = ZonedDateTime.now()
        val tokenValidity = now.plusSeconds(expireTime)

        return Jwts.builder()
            .setClaims(claims)
            .setIssuedAt(Date.from(now.toInstant()))
            .setExpiration(Date.from(tokenValidity.toInstant()))
            .signWith(key, SignatureAlgorithm.HS256)
            .compact()
    }

    /**
     * Token에서 User ID 추출
     * @param token
     * @return User ID
     */
    fun getUserId(token: String): Long {
        val id = parseClaims(token)["id", Integer::class.java]  // Read the claim as an Integer
        return id?.toLong() ?: throw CommonException(CommonExceptionCode.INVALID_AUTH_TOKEN) // Convert Integer to Long
    }

    /**
     * JWT 검증
     * @param token
     * @return IsValidate
     */
    fun validateToken(token: String): Boolean {
        return try {
            Jwts.parserBuilder().setSigningKey(key).build().parseClaimsJws(token)
            true
        } catch (e: io.jsonwebtoken.security.SecurityException) {
            log.info("Invalid JWT Token", e)
            false
        } catch (e: MalformedJwtException) {
            log.info("Invalid JWT Token", e)
            false
        } catch (e: ExpiredJwtException) {
            log.info("Expired JWT Token", e)
            false
        } catch (e: UnsupportedJwtException) {
            log.info("Unsupported JWT Token", e)
            false
        } catch (e: IllegalArgumentException) {
            log.info("JWT claims string is empty.", e)
            false
        }
    }

    /**
     * JWT Claims 추출
     * @param accessToken
     * @return JWT Claims
     */
    fun parseClaims(accessToken: String): Claims {
        return try {
            Jwts.parserBuilder().setSigningKey(key).build().parseClaimsJws(accessToken).body
        } catch (e: ExpiredJwtException) {
            e.claims
        }
    }
}

이 코드는 JWT(JSON Web Token) 관련 유틸리티 클래스로,
JWT 생성
JWT 검증
JWT에서 사용자 정보 추출
하는 기능을 제공
Spring Security 기반으로 JWT 인증을 처리하는 핵심 로직

JWT 인증 흐름

클라이언트가 로그인 → JwtUtil.createAccessToken(user) 실행 → JWT 생성 후 반환.
클라이언트가 JWT를 Authorization 헤더에 담아 요청.
JwtAuthFilter가 요청을 가로채 JwtUtil.validateToken(token) 실행 → JWT가 유효하면 SecurityContext에 인증 정보 저장.
Spring Security는 SecurityContext에서 인증된 사용자 정보를 가져와 요청을 처리.

CustomUserDetails.kt

package com.contact.management.security

import org.springframework.security.core.GrantedAuthority
import org.springframework.security.core.authority.SimpleGrantedAuthority
import org.springframework.security.core.userdetails.UserDetails

class CustomUserDetails(
    private val member: CustomUserDto // Change from CustomUserInfoDto to CustomUserDto
) : UserDetails {

    override fun getAuthorities(): Collection<GrantedAuthority> {
        // RoleType에 따라 권한 리스트를 생성
        val roles = listOf(member.role).map { role -> SimpleGrantedAuthority(role.name) }
        return roles
    }

    override fun getPassword(): String = member.password // Ensure the DTO has password if needed

    override fun getUsername(): String = member.id.toString() // or member.name if that's preferred

    override fun isAccountNonExpired(): Boolean = true

    override fun isAccountNonLocked(): Boolean = true

    override fun isCredentialsNonExpired(): Boolean = true

    override fun isEnabled(): Boolean = true
}

CustomUserDetails 클래스는 사용자 정보를 Spring Security에 맞는 형태로 변환하여 제공
이를 통해 Spring Security의 인증(Authentication) 및 인가(Authorization) 절차가 정상적으로 처리

CustomUserDetailsService.kt

package com.contact.management.security

import com.contact.management.entity.User
import com.contact.management.repository.UserRepository
import org.springframework.security.core.userdetails.UserDetails
import org.springframework.security.core.userdetails.UserDetailsService
import org.springframework.security.core.userdetails.UsernameNotFoundException
import org.springframework.stereotype.Service
import org.springframework.transaction.annotation.Transactional

@Service
@Transactional(readOnly = true)
class CustomUserDetailsService(
    private val userRepository: UserRepository
) : UserDetailsService {

    override fun loadUserByUsername(id: String): UserDetails {
        val user: User = userRepository.findById(id.toLong())
            .orElseThrow { UsernameNotFoundException("해당하는 유저가 없습니다.") }

        // entity -> dto 변환
        val dto = CustomUserDto.from(user)

        return CustomUserDetails(dto)
    }
}

주요기능

DB에서 사용자 조회 (UserRepository 이용)
찾은 User 엔티티를 CustomUserDto로 변환
Spring Security의 UserDetails 객체(CustomUserDetails)로 반환

CustomUserDto.kt

package com.contact.management.security

//내부에서 사용하는 dto
import com.contact.management.entity.RoleType
import com.contact.management.entity.User

data class CustomUserDto(
    val id: Long?= null,
    var password: String,
    val name: String,
    val age: Int,
    val email: String,
    val role: RoleType
) {
    companion object {
        // Factory method for creating CustomUserDto from User entity
        fun from(user: User): CustomUserDto {
            return CustomUserDto(
                id = user.id,
                password = user.password,
                name = user.name,
                age = user.age,
                email = user.email,
                role = user.role
            )
        }
    }
}

SecurityConfig.kt

package com.contact.management.security

import com.contact.management.jwt.JwtAccessDeniedHandler
import com.contact.management.jwt.JwtAuthFilter
import com.contact.management.jwt.JwtAuthenticationEntryPoint
import com.contact.management.jwt.JwtUtil
import org.springframework.boot.autoconfigure.condition.ConditionalOnProperty
import org.springframework.boot.autoconfigure.security.servlet.PathRequest
import org.springframework.context.annotation.Bean
import org.springframework.context.annotation.Configuration
import org.springframework.security.config.annotation.method.configuration.EnableGlobalMethodSecurity
import org.springframework.security.config.annotation.method.configuration.EnableMethodSecurity
import org.springframework.security.config.annotation.web.builders.HttpSecurity
import org.springframework.security.config.annotation.web.configuration.EnableWebSecurity
import org.springframework.security.config.annotation.web.configuration.WebSecurityCustomizer
import org.springframework.security.config.http.SessionCreationPolicy
import org.springframework.security.crypto.bcrypt.BCryptPasswordEncoder
import org.springframework.security.crypto.password.PasswordEncoder
import org.springframework.security.web.SecurityFilterChain
import org.springframework.security.web.authentication.UsernamePasswordAuthenticationFilter

@Configuration
@EnableWebSecurity
//@EnableMethodSecurity(securedEnabled = true, jsr250Enabled = true, prePostEnabled = true)         //PreAuthorize 사용하기위한
class SecurityConfig(
    private val customUserDetailsService: CustomUserDetailsService,
    private val jwtUtil: JwtUtil,
    private val accessDeniedHandler: JwtAccessDeniedHandler,
    private val authenticationEntryPoint: JwtAuthenticationEntryPoint
) {

    companion object {
        private val AUTH_WHITELIST = arrayOf(
            "/api/users/**", // Allows unrestricted access to this endpoint
        )
    }

    @Bean
    @ConditionalOnProperty(name = ["spring.h2.console.enabled"], havingValue = "true")
    fun configureH2ConsoleEnable(): WebSecurityCustomizer {
        return WebSecurityCustomizer { web -> web.ignoring().requestMatchers(PathRequest.toH2Console()) }
    }

    @Bean
    fun filterChain(http: HttpSecurity): SecurityFilterChain {
        http
            .csrf { it.disable() }
            .cors { }
            .sessionManagement { it.sessionCreationPolicy(SessionCreationPolicy.STATELESS) }
            .authorizeHttpRequests {
                it
                    .requestMatchers(*AUTH_WHITELIST).permitAll()
                    .requestMatchers("/api/test/users/**").hasAuthority("ROLE_USER")   //USER 역할만 접근 허용
                    .requestMatchers("/api/test/admin/**").hasAuthority("ROLE_ADMIN")  // ADMIN 역할만 접근 허용
                    .anyRequest().authenticated()
            }
            .exceptionHandling {
                it.authenticationEntryPoint(authenticationEntryPoint)
                    .accessDeniedHandler(accessDeniedHandler)
            }
            .addFilterBefore(JwtAuthFilter(customUserDetailsService, jwtUtil), UsernamePasswordAuthenticationFilter::class.java)
            .formLogin { it.disable() }
            .httpBasic { it.disable() }
        return http.build()
    }

    @Bean
    fun passwordEncoder(): PasswordEncoder = BCryptPasswordEncoder()
}

주요기능

JWT 기반 인증 적용 (JwtAuthFilter 추가)
세션 사용 안 함 (STATELESS 설정)
CSRF 및 기본 로그인 기능 비활성화
예외 처리 설정 (JwtAccessDeniedHandler, JwtAuthenticationEntryPoint)
H2 콘솔 보안 설정 (ConditionalOnProperty)
비밀번호 암호화 (BCryptPasswordEncoder)

주요설정

CSRF 보호 비활성화 (csrf { it.disable() })
JWT 기반 인증에서는 CSRF 토큰이 필요하지 않음.
CORS 설정 (cors { })
기본 CORS 설정 (필요시 CorsFilter 추가 가능).
세션 미사용 (SessionCreationPolicy.STATELESS)
JWT 기반 인증 방식에서는 세션을 사용하지 않음.
기본 로그인 방식 비활성화
formLogin { it.disable() } → 기본 폼 로그인 X.
httpBasic { it.disable() } → HTTP Basic 인증 X.

Spring Security 인증흐름

1. 사용자 로그인 요청
/api/users/login 엔드포인트로 로그인 요청 (AUTH_WHITELIST에 포함됨).
2. 로그인 성공 시 JWT 토큰 발급.
요청 헤더에 JWT 포함
클라이언트는 이후 요청마다 Authorization: Bearer <JWT> 헤더를 포함하여 보냄.
3. JwtAuthFilter에서 JWT 검증
JWT가 유효하면 SecurityContext에 사용자 정보 저장.
4. 요청 인증 처리
SecurityFilterChain에서 설정한 대로 인증이 필요한 요청인지 확인 후 처리.

UserController.kt

package com.contact.management.controller

import com.contact.management.dto.LoginRequest
import com.contact.management.dto.SignUpRequest
import com.contact.management.dto.UserResponse
import com.contact.management.dto.UserUpdateRequest
import com.contact.management.service.QuerydslUserService
import com.contact.management.service.UserService
import jakarta.validation.Valid
import org.springframework.data.domain.Page
import org.springframework.data.domain.Pageable
import org.springframework.http.HttpHeaders
import org.springframework.http.HttpStatus
import org.springframework.http.ResponseEntity
import org.springframework.security.crypto.password.PasswordEncoder
import org.springframework.web.bind.annotation.*
import kotlin.math.log

@RestController
@RequestMapping("/api/users")
class UserController(
     private val userService: UserService
    ,private val querydslUserService: QuerydslUserService
) {

    @GetMapping
    fun getUsers(): ResponseEntity<List<UserResponse>> {
        val users = userService.getAllUsers()
        return ResponseEntity.ok(users)
    }

    @GetMapping("/{id}")
    fun getUser(@PathVariable id: Long): ResponseEntity<UserResponse> {
        return ResponseEntity.ok(userService.getUserById(id))
    }

    @PostMapping
    fun createUser(@Valid @RequestBody request: SignUpRequest): ResponseEntity<UserResponse> {
        val createdUser = userService.createdUser(request)
        return ResponseEntity
            .status(HttpStatus.CREATED) // 201 Created
            .header(HttpHeaders.LOCATION, "/api/users/${createdUser.id}") // 생성된 리소스의 URI 반환
            .body(createdUser)
    }

    @PutMapping("/{id}")
    fun updateUser(@PathVariable id: Long,@Valid @RequestBody request: UserUpdateRequest): ResponseEntity<UserResponse> {
        val updatedUser = userService.updateUser(id, request)
        return ResponseEntity.ok(updatedUser)
    }

    @DeleteMapping("/{id}")
    fun deleteUser(@PathVariable id: Long): ResponseEntity<Void> {
        userService.deleteUser(id)
        return ResponseEntity.noContent().build() // 204 No Content
    }

    @GetMapping("/paged")
    fun getUsersWithPaging(pageable: Pageable, @RequestParam searchVal: String?): Page<UserResponse> {
        // 페이징된 사용자 목록 반환
        return querydslUserService.getUsersWithPaging(pageable, searchVal)
    }

    @PostMapping("/login")
    fun login(@Valid @RequestBody loginRequest: LoginRequest): ResponseEntity<String>{
        val token = userService.login(loginRequest)
        return ResponseEntity.ok(token)
    }
}

/login 추가

UserService.kt

package com.contact.management.service

import com.contact.management.dto.LoginRequest
import com.contact.management.dto.SignUpRequest
import com.contact.management.dto.UserResponse
import com.contact.management.dto.UserUpdateRequest
import com.contact.management.entity.QUser
import com.contact.management.entity.User
import com.contact.management.exception.CommonException
import com.contact.management.exception.CommonExceptionCode.EMAIL_ALREADY_EXISTS
import com.contact.management.exception.CommonExceptionCode.USER_NOT_FOUND
import com.contact.management.jwt.JwtUtil
import com.contact.management.repository.UserRepository
import com.contact.management.security.CustomUserDto
import com.querydsl.jpa.impl.JPAQueryFactory
import org.springframework.data.domain.Page
import org.springframework.data.domain.PageImpl
import org.springframework.data.domain.Pageable
import org.springframework.security.crypto.password.PasswordEncoder
import org.springframework.stereotype.Service
import org.springframework.transaction.annotation.Transactional

@Service
@Transactional
class UserService(
     private val userRepository: UserRepository
    ,private val queryFactory: JPAQueryFactory
    ,private val encoder: PasswordEncoder
    ,private val jwtUtil: JwtUtil
) {

    @Transactional(readOnly = true)
    fun getAllUsers() : List<UserResponse> {
        return userRepository.findAll().map { UserResponse.from(it) }
    }

    @Transactional(readOnly = true)
    fun getUserById(id: Long): UserResponse {
        val user = userRepository.findById(id).orElseThrow{ CommonException(USER_NOT_FOUND) }
        return UserResponse.from(user)
    }

    fun createdUser(request: SignUpRequest): UserResponse {
        userRepository.findByEmail(request.email)?.let {
            throw CommonException(EMAIL_ALREADY_EXISTS)
        }

        val user = userRepository.save(User.from(request, encoder))
        return UserResponse.from(user)
    }

    // 사용자 업데이트
    fun updateUser(id: Long, request: UserUpdateRequest): UserResponse{
        val user = userRepository.findById(id).orElseThrow{ CommonException(USER_NOT_FOUND) }

        user.update(request, encoder)

        return UserResponse.from(user)
    }

    fun deleteUser(id: Long){
        if(!userRepository.existsById(id)){
            throw CommonException(USER_NOT_FOUND)
        }
        userRepository.deleteById(id)
    }

    @Transactional(readOnly = true)
    fun getUsersWithPaging(pageable: Pageable): Page<UserResponse> {
        val qUser = QUser.user

        // JPAQueryFactory를 사용하여 쿼리 작성
        val query = queryFactory
            .selectFrom(qUser)
            .orderBy(qUser.id.asc()) // ID 기준으로 오름차순 정렬 (필요에 따라 변경 가능)

        // 실제 데이터 조회
        val users = query
            .offset(pageable.offset) // 페이지의 시작 인덱스
            .limit(pageable.pageSize.toLong()) // 페이지 크기
            .fetch() // 결과 가져오기

        // 총 개수를 구하는 쿼리 작성 (countQuery)
        val countQuery = queryFactory
            .select(qUser.count()) // 총 개수 계산
            .from(qUser)
        val total = countQuery.fetchOne() ?: 0L // fetchOne()으로 단일 값 가져오기

        // Page 객체로 반환
        val userDtos = users.map { UserResponse.from(it) }
        return PageImpl(userDtos, pageable, total)
    }

    @Transactional(readOnly = true)
    fun login(request: LoginRequest): String {
        val email = request.email
        val password = request.password
        val user = userRepository.findByEmail(email) ?: throw CommonException(USER_NOT_FOUND)

        // 암호화된 password를 디코딩한 값과 입력한 패스워드 값이 다르면 예외를 던짐
        if (!encoder.matches(password, user.password)) {
            throw CommonException(USER_NOT_FOUND)
        }

        val info = CustomUserDto.from(user)
        return jwtUtil.createAccessToken(info)
    }

}

로그인시 해당 계정이 존재하지않는경우 USER_NOT_FOUND

암호화된 패스워드를 디코딩한 값과 입력한 패스워드값이 다를경우 USER_NOT_FOUND ERROR

통과시 jwt access token 생성 후 return

결과

사용자 등록

사용자 로그인

token값 return

TestController.kt

package com.contact.management.controller

import com.contact.management.dto.LoginRequest
import org.springframework.web.bind.annotation.GetMapping
import org.springframework.web.bind.annotation.PostMapping
import org.springframework.web.bind.annotation.RequestBody
import org.springframework.web.bind.annotation.RestController

@RestController
class TestController {

    @GetMapping("/test")
    fun test(): String{
        return "ok";
    }

    @PostMapping("/api/test/user")
//    @PreAuthorize("hasRole('ROLE_USER')")
    fun userTest(@RequestBody loginRequest: LoginRequest): LoginRequest {
        return loginRequest
    }

    @PostMapping("/api/test/admin")
//    @PreAuthorize("hasRole('ROLE_ADMIN')")
    fun adminTest(@RequestBody loginRequest: LoginRequest): LoginRequest {
        return loginRequest
    }

}

users 계정으로 /api/test/user 호출

user계정으로 /api/test/admin 호출

user 계정으로 admin api를 호출하였을때, 403이 나와야할것 같은데, 401이 나옴 원인 파악중..

[코프링] 8. Companion Object - 팩토리 메서드 패턴 설정

JaeSung Kim — Mon, 10 Feb 2025 11:09:03 +0900

팩토리 메서드 패턴이란?
팩토리 메서드 패턴은 객체 생성을 캡슐화하여, 객체 생성 로직을 별도의 메서드로 분리하는 디자인 패턴 이를 통해 객체 생성 방식을 통제하고, 생성 과정이 변경되더라도 클라이언트 코드의 수정을 최소화

기존방식 (팩토리 메서드 미적용)

val user = User(
    password = encoder.encode(signUpRequest.password),
    name = signUpRequest.name,
    age = signUpRequest.age,
    email = signUpRequest.email
)

- 기존 방식의코드는 api 메소드 마다 user 값을 setting 해주려면 하나하나 전부 setting 해줘야하는 단점이 있다.

변경된 방식 (팩토리 메서드 적용)

val user = User.from(signUpRequest, encoder)

- 팩토리 메서드를 적용하면 api 메서드 마다 .from을 호출하는식으로 캡슐화를 해서, 코드도 더 간결해 보인다.

- 팩토리 메서드 역할

from 메서드는 SignUpRequest DTO와 PasswordEncoder를 받아, User 객체를 생성하는 역할
비밀번호는 평문으로 저장하면 보안상 문제가 있기 때문에, encoder.encode(request.password)를 통해 암호화된 비밀번호를 저장하는 로직을 캡슐화
이를 통해 User 객체를 직접 생성하지 않고, from 메서드를 통해 일관된 방식으로 안전하게 객체를 생성

- 팩토리 메서드 패턴의 장점 적용

객체 생성을 캡슐화
User 객체의 생성 로직이 한 곳(from)에 모여 있어, 객체 생성을 단순화하고 코드 중복을 방지
유지보수성 증가
만약 User 생성 방식이 바뀌어도 from 메서드만 수정하면 되므로, 다른 코드에 영향을 주지 않습니다.
의미 있는 생성 메서드 제공
from(request, encoder)는 User 객체를 생성하는 의미를 직관적으로 전달
생성자를 직접 호출하는 것보다 가독성이 좋아지고, 명확한 객체 생성 방법을 제공

그러면 이전에 작성한 코드에서 팩토리 메서드 패턴을 적용해 보자

User.kt

package com.contact.management.entity

import com.contact.management.audit.BaseEntity
import com.contact.management.dto.SignUpRequest
import com.contact.management.dto.UserUpdateRequest
import jakarta.persistence.Entity
import jakarta.persistence.GeneratedValue
import jakarta.persistence.GenerationType
import jakarta.persistence.Id
import jakarta.persistence.Table
import org.springframework.security.crypto.password.PasswordEncoder

@Entity
@Table(name = "users")
class User (
    @Id @GeneratedValue(strategy = GenerationType.IDENTITY)
    val id: Long?= null,
    var password: String,
    var name: String,
    var age: Int,
    var email: String
) : BaseEntity(){
    companion object {
        fun from(request: SignUpRequest, encoder: PasswordEncoder) = User(
            password = encoder.encode(request.password),
            name = request.name,
            age = request.age,
            email = request.email
        )
    }

    fun update(request: UserUpdateRequest, encoder: PasswordEncoder){
        this.password = encoder.encode(request.password)
        this.name = request.name
        this.age = request.age
    }

}

UserController.kt

package com.contact.management.controller

import com.contact.management.dto.SignUpRequest
import com.contact.management.dto.UserResponse
import com.contact.management.dto.UserUpdateRequest
import com.contact.management.service.QuerydslUserService
import com.contact.management.service.UserService
import jakarta.validation.Valid
import org.springframework.data.domain.Page
import org.springframework.data.domain.Pageable
import org.springframework.http.HttpHeaders
import org.springframework.http.HttpStatus
import org.springframework.http.ResponseEntity
import org.springframework.security.crypto.password.PasswordEncoder
import org.springframework.web.bind.annotation.*

@RestController
@RequestMapping("/api/users")
class UserController(
     private val userService: UserService
    ,private val querydslUserService: QuerydslUserService
) {

    @GetMapping
    fun getUsers(): ResponseEntity<List<UserResponse>> {
        val users = userService.getAllUsers()
        return ResponseEntity.ok(users)
    }

    @GetMapping("/{id}")
    fun getUser(@PathVariable id: Long): ResponseEntity<UserResponse> {
        return ResponseEntity.ok(userService.getUserById(id))
    }

    @PostMapping
    fun createUser(@Valid @RequestBody request: SignUpRequest): ResponseEntity<UserResponse> {
        val createdUser = userService.createdUser(request)
        return ResponseEntity
            .status(HttpStatus.CREATED) // 201 Created
            .header(HttpHeaders.LOCATION, "/api/users/${createdUser.id}") // 생성된 리소스의 URI 반환
            .body(createdUser)
    }

    @PutMapping("/{id}")
    fun updateUser(@PathVariable id: Long,@Valid @RequestBody request: UserUpdateRequest): ResponseEntity<UserResponse> {
        val updatedUser = userService.updateUser(id, request)
        return ResponseEntity.ok(updatedUser)
    }

    @DeleteMapping("/{id}")
    fun deleteUser(@PathVariable id: Long): ResponseEntity<Void> {
        userService.deleteUser(id)
        return ResponseEntity.noContent().build() // 204 No Content
    }

    @GetMapping("/paged")
    fun getUsersWithPaging(pageable: Pageable, @RequestParam searchVal: String?): Page<UserResponse> {
        // 페이징된 사용자 목록 반환
        return querydslUserService.getUsersWithPaging(pageable, searchVal)
    }
}

- 기존에 dto를 UserDto 하나만 사용해서 실제 api를 만들때는 그렇게 하지 않기때문에 나눴습니다.

UserDto -> SignUpRequest, UserUpdateRequest

SignUpRequest -> 사용자 등록할때 사용하는 요청 파라미터

UserUpdateRequest -> 사용자 수정할때 사용하는 요청 파라미터

UserResponse 추가

SignUpRequest.kt

package com.contact.management.dto

import jakarta.validation.constraints.Email
import jakarta.validation.constraints.Max
import jakarta.validation.constraints.Min
import jakarta.validation.constraints.NotBlank
import jakarta.validation.constraints.Pattern
import jakarta.validation.constraints.Size

data class SignUpRequest(
    val id: Long?= null,

    @field:Size(min = 8, message = "비밀번호는 최소 8자 이상이어야 합니다.")
    @field:Pattern(
        regexp = "^(?=.*[0-9])(?=.*[!@#\$%^&*()_+\\-=\\[\\]{};':\"\\\\|,.<>/?]).{8,}\$",
        message = "비밀번호는 최소 1개 이상의 숫자와 특수문자를 포함해야 합니다."
    )
    val password:String,

    @field:NotBlank(message = "이름은 필수 입력 항목입니다.")
    @field:Size(min = 2, max = 50, message = "이름은 2~50자 사이여야 합니다.")
    val name: String,

    @field:Min(value = 0, message = "나이는 0 이상이어야 합니다.")
    @field:Max(value = 150, message = "나이는 150 이하여야 합니다.")
    val age: Int,

    @field:NotBlank(message = "이메일은 필수 입력 항목입니다.")
    @field:Email(message = "올바른 이메일 형식을 입력하세요.")
    val email: String
)

- validation을 추가

UserUpdate.kt

package com.contact.management.dto

import jakarta.validation.constraints.*

data class UserUpdateRequest(

    @field:Size(min = 8, message = "비밀번호는 최소 8자 이상이어야 합니다.")
    @field:Pattern(
        regexp = "^(?=.*[0-9])(?=.*[!@#\$%^&*()_+\\-=\\[\\]{};':\"\\\\|,.<>/?]).{8,}\$",
        message = "비밀번호는 최소 1개 이상의 숫자와 특수문자를 포함해야 합니다."
    )
    val password:String,

    @field:NotBlank(message = "이름은 필수 입력 항목입니다.")
    @field:Size(min = 2, max = 50, message = "이름은 2~50자 사이여야 합니다.")
    val name: String,

    @field:Min(value = 0, message = "나이는 0 이상이어야 합니다.")
    @field:Max(value = 150, message = "나이는 150 이하여야 합니다.")
    val age: Int,

    @field:NotBlank(message = "이메일은 필수 입력 항목입니다.")
    @field:Email(message = "올바른 이메일 형식을 입력하세요.")
    val email: String
)

- validation을 추가

UserResponse.kt

package com.contact.management.dto

import com.contact.management.entity.User
import jakarta.validation.constraints.Email
import jakarta.validation.constraints.Size
import org.springframework.security.crypto.password.PasswordEncoder

data class UserResponse(
    val id: Long?= null,
    val name: String,
    val age: Int,
    val email: String
){
    companion object {
        fun from(user: User) = UserResponse(
            id = user.id,
            name = user.name,
            age = user.age,
            email = user.email
        )
    }
}

- UserResponse 추가

UserService.kt

package com.contact.management.service

import com.contact.management.dto.SignUpRequest
import com.contact.management.dto.UserResponse
import com.contact.management.dto.UserUpdateRequest
import com.contact.management.entity.QUser
import com.contact.management.entity.User
import com.contact.management.exception.CommonException
import com.contact.management.exception.CommonExceptionCode.EMAIL_ALREADY_EXISTS
import com.contact.management.exception.CommonExceptionCode.USER_NOT_FOUND
import com.contact.management.repository.UserRepository
import com.querydsl.jpa.impl.JPAQueryFactory
import org.springframework.data.domain.Page
import org.springframework.data.domain.PageImpl
import org.springframework.data.domain.Pageable
import org.springframework.security.crypto.password.PasswordEncoder
import org.springframework.stereotype.Service
import org.springframework.transaction.annotation.Transactional

@Service
@Transactional
class UserService(
     private val userRepository: UserRepository
    ,private val queryFactory: JPAQueryFactory
    ,private val encoder: PasswordEncoder
) {

    @Transactional(readOnly = true)
    fun getAllUsers() : List<UserResponse> {
        return userRepository.findAll().map { UserResponse.from(it) }
    }

    @Transactional(readOnly = true)
    fun getUserById(id: Long): UserResponse {
        val user = userRepository.findById(id).orElseThrow{ CommonException(USER_NOT_FOUND) }
        return UserResponse.from(user)
    }

    fun createdUser(request: SignUpRequest): UserResponse {
        userRepository.findByEmail(request.email)?.let {
            throw CommonException(EMAIL_ALREADY_EXISTS)
        }

        val user = userRepository.save(User.from(request, encoder))
        return UserResponse.from(user)
    }

    // 사용자 업데이트
    fun updateUser(id: Long, request: UserUpdateRequest): UserResponse{
        val user = userRepository.findById(id).orElseThrow{ CommonException(USER_NOT_FOUND) }

        user.update(request, encoder)

        return UserResponse.from(user)
    }

    fun deleteUser(id: Long){
        if(!userRepository.existsById(id)){
            throw CommonException(USER_NOT_FOUND)
        }
        userRepository.deleteById(id)
    }

    @Transactional(readOnly = true)
    fun getUsersWithPaging(pageable: Pageable): Page<UserResponse> {
        val qUser = QUser.user

        // JPAQueryFactory를 사용하여 쿼리 작성
        val query = queryFactory
            .selectFrom(qUser)
            .orderBy(qUser.id.asc()) // ID 기준으로 오름차순 정렬 (필요에 따라 변경 가능)

        // 실제 데이터 조회
        val users = query
            .offset(pageable.offset) // 페이지의 시작 인덱스
            .limit(pageable.pageSize.toLong()) // 페이지 크기
            .fetch() // 결과 가져오기

        // 총 개수를 구하는 쿼리 작성 (countQuery)
        val countQuery = queryFactory
            .select(qUser.count()) // 총 개수 계산
            .from(qUser)
        val total = countQuery.fetchOne() ?: 0L // fetchOne()으로 단일 값 가져오기

        // Page 객체로 반환
        val userDtos = users.map { UserResponse.from(it) }
        return PageImpl(userDtos, pageable, total)
    }

}

User.kt에서 작성한 from, update를 호출하게 service단에서 변경

passwordEncoder는 아직 Bean으로 등록을 하지않아서, 다음 포스팅에 security 적용하면서 작성할 예정입니다.

[코프링] Kotlin Spring Boot Api에서 파라미터 not null, null 체크

JaeSung Kim — Mon, 10 Feb 2025 10:33:24 +0900

package com.example.basic_kotlin_2025.controller.response

import com.example.basic_kotlin_2025.model.http.UserRequest
import org.springframework.http.HttpStatus
import org.springframework.http.ResponseEntity
import org.springframework.web.bind.annotation.DeleteMapping
import org.springframework.web.bind.annotation.GetMapping
import org.springframework.web.bind.annotation.PathVariable
import org.springframework.web.bind.annotation.PostMapping
import org.springframework.web.bind.annotation.PutMapping
import org.springframework.web.bind.annotation.RequestBody
import org.springframework.web.bind.annotation.RequestMapping
import org.springframework.web.bind.annotation.RequestParam
import org.springframework.web.bind.annotation.RestController

@RestController
@RequestMapping("/api/response")
class ResponseApiController {

    // 1. get 4xx
    // http://localhost:8080/api/response
    @GetMapping("/get-mapping")
    fun getMapping(@RequestParam age: Int?): ResponseEntity<String> {   //age 값이 없을수도 있다.

        // 1. age > 20 -> 400 error
        if(age == null){
            return ResponseEntity.status(400).body("age 값이 누락되었습니다.")
        }

        // 2. age < 20 -> 400 error
        if(age < 20){
            return ResponseEntity.status(400).body("age 값은 20보다 커야 합니다.")
        }
     
        //return ResponseEntity.ok("OK")
    }
}

- 만약 이러한 스타일의 api를 kotlin스럽게 코딩을 한다면 아래 코드 처럼 변경할수 있다.

package com.example.basic_kotlin_2025.controller.response

import com.example.basic_kotlin_2025.model.http.UserRequest
import org.springframework.http.HttpStatus
import org.springframework.http.ResponseEntity
import org.springframework.web.bind.annotation.DeleteMapping
import org.springframework.web.bind.annotation.GetMapping
import org.springframework.web.bind.annotation.PathVariable
import org.springframework.web.bind.annotation.PostMapping
import org.springframework.web.bind.annotation.PutMapping
import org.springframework.web.bind.annotation.RequestBody
import org.springframework.web.bind.annotation.RequestMapping
import org.springframework.web.bind.annotation.RequestParam
import org.springframework.web.bind.annotation.RestController

@RestController
@RequestMapping("/api/response")
class ResponseApiController {

    // 1. get 4xx
    // http://localhost:8080/api/response
    @GetMapping("/get-mapping")
    fun getMapping(@RequestParam age: Int?): ResponseEntity<String> {   //age 값이 없을수도 있다.

       return age?.let{

            if(age < 20){
                return ResponseEntity.status(400).body("age 값은 20보다 커야 합니다.")
            }

           ResponseEntity.ok("OK")
            // age not null
        }?: kotlin.run {
            //age is null
            return ResponseEntity.status(400).body("age 값이 누락되었습니다.")
        }
        
        //return ResponseEntity.ok("OK")
    }

}

return age?.let{

            if(age < 20){
                return ResponseEntity.status(400).body("age 값은 20보다 커야 합니다.")
            }

           ResponseEntity.ok("OK")
            // age not null
        }

- 이 코드는 age값이 null이 아닐경우 타는 부분

?: kotlin.run {
            //age is null
            return ResponseEntity.status(400).body("age 값이 누락되었습니다.")
        }

- 이 코드는 age값이 null일 경우 타는 부분

[코프링] 7. Spring Kotlin Jpa Querydsl BooleanExpression 동적쿼리 적용

JaeSung Kim — Fri, 7 Feb 2025 17:28:14 +0900

UserController.kt

@GetMapping("/paged")
fun getUsersWithPaging(pageable: Pageable, @RequestParam searchVal: String?): Page<UserDto> {
    // 페이징된 사용자 목록 반환
    return querydslUserService.getUsersWithPaging(pageable, searchVal)
}

-> 지난번에 추가한 controller 해당 api에 @RequestParam으로 검색어를 받는부분을 추가

QuerydslUserService.kt

package com.contact.management.service

import com.contact.management.dto.UserDto
import com.contact.management.entity.QUser
import com.contact.management.repository.UserRepository
import com.querydsl.core.types.dsl.BooleanExpression
import com.querydsl.jpa.impl.JPAQueryFactory
import org.springframework.data.domain.Page
import org.springframework.data.domain.PageImpl
import org.springframework.data.domain.Pageable
import org.springframework.stereotype.Service
import org.springframework.transaction.annotation.Transactional

@Service
@Transactional
class QuerydslUserService(
    private val queryFactory: JPAQueryFactory
) {

    @Transactional(readOnly = true)
    fun getUsersWithPaging(pageable: Pageable, searchVal: String?): Page<UserDto> {
        val qUser = QUser.user
        var predicate: BooleanExpression = qUser.isNotNull

        searchVal?.let {
            predicate = predicate.and(qUser.name.containsIgnoreCase(searchVal))
        }

        // JPAQueryFactory를 사용하여 쿼리 작성
        val query = queryFactory
            .selectFrom(qUser)
            .where(predicate)
            .orderBy(qUser.id.asc()) // ID 기준으로 오름차순 정렬 (필요에 따라 변경 가능)

        // 실제 데이터 조회
        val users = query
            .offset(pageable.offset) // 페이지의 시작 인덱스
            .limit(pageable.pageSize.toLong()) // 페이지 크기
            .fetch() // 결과 가져오기

        // 총 개수를 구하는 쿼리 작성 (countQuery)
        val countQuery = queryFactory
            .select(qUser.count()) // 총 개수 계산
            .from(qUser)
            .where(predicate)
        val total = countQuery.fetchOne() ?: 0L // fetchOne()으로 단일 값 가져오기

        // Page 객체로 반환
        val userDtos = users.map { UserDto(it.id, it.name, it.email) }
        return PageImpl(userDtos, pageable, total)
    }

}

searchVal 값을 null 허용을 하고 searchVal?.let을 선언해서 검색어가 "" 이거나 null일때는 통과, 그 외는 containsIgnoreCase를 사용해서 이름 like 검색을 하게 추가 하였음

결과

searchVal null인경우

-> 모든 항목이 나옴

searchVal 빈값인 경우

-> 모든 항목이 나옴

searchVal -> aa로 보낸경우

aa@naver.com 데이터가 조회됨

[코프링] 6. Spring Kotlin Jpa Querydsl 적용, 페이징 예제

JaeSung Kim — Fri, 7 Feb 2025 16:51:10 +0900

build.gradle.kt

plugins {
	id("org.springframework.boot") version "3.4.2"
	id("io.spring.dependency-management") version "1.1.7"
	kotlin("jvm") version "1.9.25"
	kotlin("plugin.spring") version "1.9.25"
	kotlin("plugin.jpa") version "1.9.25"
	kotlin("kapt") version "1.9.25"
}

group = "com.contact"
version = "0.0.1-SNAPSHOT"

java {
	toolchain {
		languageVersion.set(JavaLanguageVersion.of(17))
	}
}

repositories {
	mavenCentral()
}

dependencies {
	implementation("org.springframework.boot:spring-boot-starter-data-jpa")
	implementation("org.springframework.boot:spring-boot-starter-web")
	implementation("org.jetbrains.kotlin:kotlin-stdlib-jdk8")
	implementation("org.jetbrains.kotlin:kotlin-reflect")
	implementation("com.fasterxml.jackson.module:jackson-module-kotlin")
	implementation("org.springframework.boot:spring-boot-starter-validation")

	// QueryDSL 의존성 추가
	implementation("com.querydsl:querydsl-jpa:5.1.0:jakarta")
	kapt("com.querydsl:querydsl-apt:5.1.0:jakarta")
	kapt("jakarta.annotation:jakarta.annotation-api")
	kapt("jakarta.persistence:jakarta.persistence-api")

	runtimeOnly("com.h2database:h2")
	testImplementation("org.springframework.boot:spring-boot-starter-test")
}

// Querydsl 설정부 추가 - start
val generated = file("src/main/generated")

// querydsl QClass 파일 생성 위치를 지정
tasks.withType<JavaCompile> {
	options.generatedSourceOutputDirectory.set(generated)
}

// kotlin source set 에 querydsl QClass 위치 추가
sourceSets {
	main {
		kotlin.srcDirs += generated
	}
}

// gradle clean 시에 QClass 디렉토리 삭제
tasks.named("clean") {
	doLast {
		generated.deleteRecursively()
	}
}
kapt {
	generateStubs = true
}

설명

1. Query-dsl 종속성 추가

implementation("com.querydsl:querydsl-jpa:5.1.0:jakarta")
kapt("com.querydsl:querydsl-apt:5.1.0:jakarta")
kapt("jakarta.annotation:jakarta.annotation-api")
kapt("jakarta.persistence:jakarta.persistence-api")

com.querydsl:querydsl-jpa: 이는 QueryDSL JPA 모듈로, QueryDSL을 사용하여 유형이 안전한 쿼리를 작성하기 위한 JPA 관련 기능을 제공
com.querydsl:querydsl-apt: 이 주석 프로세서는 빌드 프로세스 중에 QueryDSL Q-클래스(즉, JPA 엔터티를 나타내는 클래스)를 생성
jakarta.annotation-api&jakarta.persistence-api : JPA 엔터티를 처리하는 데 사용되는 Jakarta 지속성과 관련된 필수

2. Q-class 생성

val generated = file("src/main/generated")

tasks.withType<JavaCompile> {
	options.generatedSourceOutputDirectory.set(generated)
}

생성된 Q-클래스에 대한 디렉토리 설정 : 생성된 QueryDSL Q-클래스가 저장될 위치를 지정

3. 생성된 소스를 Kotlin 소스 세트에 추가

sourceSets {
	main {
		kotlin.srcDirs += generated
	}
}

이렇게 하면 생성된 QueryDSL Q-클래스가 Kotlin 소스 세트에 추가되어 프로젝트의 나머지 부분에서 사용 generatedKotlin이 코드를 컴파일할 때 고려하는 디렉토리 목록에 디렉토리를 추가

4. Gradle에서 생성된 파일 정리 Clean:

tasks.named("clean") {
	doLast {
		generated.deleteRecursively()
	}
}

gradle clean시 Qclass 디렉토리를 삭제

querydsl 패키지 생성후 QuerydslConfog.kt 생성

package com.contact.management.querydsl

import com.querydsl.jpa.impl.JPAQueryFactory
import jakarta.persistence.EntityManager
import org.springframework.context.annotation.Bean
import org.springframework.context.annotation.Configuration

@Configuration
class QueryDslConfig(
    val em: EntityManager
) {

    @Bean
    fun queryFactory(): JPAQueryFactory {
        return JPAQueryFactory(em)
    }
}

service 패키지에 QuerydslUserSerivce.kt 생성

package com.contact.management.service

import com.contact.management.dto.UserDto
import com.contact.management.entity.QUser
import com.contact.management.repository.UserRepository
import com.querydsl.jpa.impl.JPAQueryFactory
import org.springframework.data.domain.Page
import org.springframework.data.domain.PageImpl
import org.springframework.data.domain.Pageable
import org.springframework.stereotype.Service
import org.springframework.transaction.annotation.Transactional

@Service
@Transactional
class QuerydslUserService(
    private val queryFactory: JPAQueryFactory
) {

    @Transactional(readOnly = true)
    fun getUsersWithPaging(pageable: Pageable): Page<UserDto> {
        val qUser = QUser.user

        // JPAQueryFactory를 사용하여 쿼리 작성
        val query = queryFactory
            .selectFrom(qUser)
            .orderBy(qUser.id.asc()) // ID 기준으로 오름차순 정렬 (필요에 따라 변경 가능)

        // 실제 데이터 조회
        val users = query
            .offset(pageable.offset) // 페이지의 시작 인덱스
            .limit(pageable.pageSize.toLong()) // 페이지 크기
            .fetch() // 결과 가져오기

        // 총 개수를 구하는 쿼리 작성 (countQuery)
        val countQuery = queryFactory
            .select(qUser.count()) // 총 개수 계산
            .from(qUser)
        val total = countQuery.fetchOne() ?: 0L // fetchOne()으로 단일 값 가져오기

        // Page 객체로 반환
        val userDtos = users.map { UserDto(it.id, it.name, it.email) }
        return PageImpl(userDtos, pageable, total)
    }

}

UserController.kt

package com.contact.management.controller

import com.contact.management.dto.UserDto
import com.contact.management.service.QuerydslUserService
import com.contact.management.service.UserService
import jakarta.validation.Valid
import org.springframework.data.domain.Page
import org.springframework.data.domain.Pageable
import org.springframework.http.HttpHeaders
import org.springframework.http.HttpStatus
import org.springframework.http.ResponseEntity
import org.springframework.web.bind.annotation.*

@RestController
@RequestMapping("/api/users")
class UserController(
     private val userService: UserService
    ,private val querydslUserService: QuerydslUserService
) {

    @GetMapping
    fun getUsers(): ResponseEntity<List<UserDto>> {
        val users = userService.getAllUsers()
        return ResponseEntity.ok(users)
    }

    @GetMapping("/{id}")
    fun getUser(@PathVariable id: Long): ResponseEntity<UserDto> {
        return ResponseEntity.ok(userService.getUserById(id))
    }

    @PostMapping
    fun createUser(@Valid @RequestBody userDto: UserDto): ResponseEntity<UserDto> {
        val createdUser = userService.createdUser(userDto)
        return ResponseEntity
            .status(HttpStatus.CREATED) // 201 Created
            .header(HttpHeaders.LOCATION, "/api/users/${createdUser.id}") // 생성된 리소스의 URI 반환
            .body(createdUser)
    }

    @PutMapping("/{id}")
    fun updateUser(@PathVariable id: Long,@Valid @RequestBody userDto: UserDto): ResponseEntity<UserDto> {
        val updatedUser = userService.updateUser(id, userDto)
        return ResponseEntity.ok(updatedUser)
    }

    @DeleteMapping("/{id}")
    fun deleteUser(@PathVariable id: Long): ResponseEntity<Void> {
        userService.deleteUser(id)
        return ResponseEntity.noContent().build() // 204 No Content
    }

    @GetMapping("/paged")
    fun getUsersWithPaging(pageable: Pageable): Page<UserDto> {
        // 페이징된 사용자 목록 반환
        return querydslUserService.getUsersWithPaging(pageable)
    }
}

getUsersWithPaging 메소드 추가

데이터 미리 넣어보고 /api/users/paged 호출하면 아래형식으로 return됨

{
    "content": [
        {
            "id": 1,
            "name": "aa",
            "email": "aa@domain.com"
        },
        {
            "id": 2,
            "name": "bb",
            "email": "bb@domain.com"
        },
        {
            "id": 3,
            "name": "cc",
            "email": "cc@domain.com"
        },
        {
            "id": 4,
            "name": "dd",
            "email": "dd@domain.com"
        },
        {
            "id": 5,
            "name": "ee",
            "email": "ee@domain.com"
        },
        {
            "id": 6,
            "name": "ff",
            "email": "ff@domain.com"
        },
        {
            "id": 7,
            "name": "gg",
            "email": "gg@domain.com"
        },
        {
            "id": 8,
            "name": "hh",
            "email": "hh@domain.com"
        },
        {
            "id": 9,
            "name": "ii",
            "email": "ii@domain.com"
        },
        {
            "id": 10,
            "name": "jj",
            "email": "jj@domain.com"
        },
        {
            "id": 11,
            "name": "kk",
            "email": "kk@domain.com"
        },
        {
            "id": 12,
            "name": "ll",
            "email": "ll@domain.com"
        },
        {
            "id": 13,
            "name": "mm",
            "email": "mm@domain.com"
        },
        {
            "id": 14,
            "name": "nn",
            "email": "nn@domain.com"
        },
        {
            "id": 15,
            "name": "oo",
            "email": "oo@domain.com"
        },
        {
            "id": 16,
            "name": "pp",
            "email": "pp@domain.com"
        },
        {
            "id": 17,
            "name": "qq",
            "email": "qq@domain.com"
        },
        {
            "id": 18,
            "name": "rr",
            "email": "rr@domain.com"
        },
        {
            "id": 19,
            "name": "ss",
            "email": "ss@domain.com"
        },
        {
            "id": 20,
            "name": "tt",
            "email": "tt@domain.com"
        }
    ],
    "pageable": {
        "pageNumber": 0,
        "pageSize": 20,
        "sort": {
            "empty": true,
            "sorted": false,
            "unsorted": true
        },
        "offset": 0,
        "paged": true,
        "unpaged": false
    },
    "last": true,
    "totalElements": 20,
    "totalPages": 1,
    "first": true,
    "size": 20,
    "number": 0,
    "sort": {
        "empty": true,
        "sorted": false,
        "unsorted": true
    },
    "numberOfElements": 20,
    "empty": false
}

[코프링] 5. Spring Jpa Auditing 적용

JaeSung Kim — Fri, 7 Feb 2025 15:34:14 +0900

audit란?

엔터티(Entity)의 생성 및 변경 이력을 자동으로 감지. 이를 통해 데이터 변경 내역을 자동으로 기록할 수 있고, 수동으로 createdAt, updatedAt 등을 설정할 필요가 없음

예제

package com.contact.management.entity

import jakarta.persistence.*
import org.springframework.data.annotation.CreatedBy
import org.springframework.data.annotation.CreatedDate
import org.springframework.data.annotation.LastModifiedBy
import org.springframework.data.annotation.LastModifiedDate
import java.time.LocalDateTime

@Entity
@Table(name = "users")
class User2 (
    @Id @GeneratedValue(strategy = GenerationType.IDENTITY)
    val id: Long?= null,
    var name: String,
    var email: String,
    @CreatedDate
    @Column(updatable = false)
    var createdAt: LocalDateTime,

    @LastModifiedDate
    var updatedAt: LocalDateTime,
    
    @CreatedBy
    @Column(updatable = false)
    var createdBy: String,
    
    @LastModifiedBy
    var updatedBy: String
)

-> entity를 생성할때 등록자, 수정자, 등록일, 수정일을 추가하고싶을때 수많은 entity에 동일한 코드가 들어가게 된다.

audit를 적용하면 중복된 코드들을 하나의 entity로 관리를 할수 있다.

audit 적용 예제

audit 패키지를 생성후 아래 .kt 파일들을 생성

AuditorAwareConfig.kt

package com.contact.management.audit

import org.springframework.context.annotation.Bean
import org.springframework.context.annotation.Configuration
import org.springframework.data.domain.AuditorAware
import java.util.Optional

@Configuration
class AuditorAwareConfig {
    @Bean
    fun auditorProvider(): AuditorAware<String> {
        return AuditorAware { Optional.of("system") } // 실제 환경에서는 SecurityContext에서 가져오기
    }
}

-> 아직 spring security를 적용하기 전이므로 system이라는 값을 하드코딩 하였음, security를 적용한 이후에는 로그인한 사용자의 아이디를 가져오게 변경해야함

BaseEntity.kt

package com.contact.management.audit

import jakarta.persistence.Column
import jakarta.persistence.EntityListeners
import jakarta.persistence.MappedSuperclass
import org.springframework.data.annotation.CreatedBy
import org.springframework.data.annotation.CreatedDate
import org.springframework.data.annotation.LastModifiedBy
import org.springframework.data.annotation.LastModifiedDate
import org.springframework.data.jpa.domain.support.AuditingEntityListener
import java.time.LocalDateTime

@EntityListeners(AuditingEntityListener::class)
@MappedSuperclass
abstract class BaseEntity {

    @CreatedDate
    @Column(updatable = false)
    lateinit var createdAt: LocalDateTime

    @LastModifiedDate
    lateinit var updatedAt: LocalDateTime

    @CreatedBy
    @Column(updatable = false)
    lateinit var createdBy: String

    @LastModifiedBy
    lateinit var updatedBy: String
}

Application.kt

package com.contact.management

import org.springframework.boot.autoconfigure.SpringBootApplication
import org.springframework.boot.runApplication
import org.springframework.data.jpa.repository.config.EnableJpaAuditing

@SpringBootApplication
@EnableJpaAuditing
class ManagementApplication

fun main(args: Array<String>) {
	runApplication<ManagementApplication>(*args)
}

처음 프로젝트를 생성할때 만들어지는 Application.kt 파일에 @EnableJpaAuditing을 추가한다.

User.kt

package com.contact.management.entity

import com.contact.management.audit.BaseEntity
import jakarta.persistence.Entity
import jakarta.persistence.GeneratedValue
import jakarta.persistence.GenerationType
import jakarta.persistence.Id
import jakarta.persistence.Table

@Entity
@Table(name = "users")
class User (
    @Id @GeneratedValue(strategy = GenerationType.IDENTITY)
    val id: Long?= null,
    var name: String,
    var email: String
) : BaseEntity()

audit를 적용하고자 하는 entity 뒤에 : BaseEntity()를 추가해준다.

결과

-> 이전에 만든 사용자 등록 api를 호출

USERS 테이블을 조회하면 날짜와 하드 코딩한 system이 등록자, 수정자에 insert가 된것을 확인할수 있음

[코프링] 4. @Valid를 사용한 REST API validation 처리

JaeSung Kim — Thu, 6 Feb 2025 18:37:56 +0900

의존성 추가

build.gradle dependencies 안에 아래 코드 추가

implementation("org.springframework.boot:spring-boot-starter-validation")

build.gradle.kt

plugins {
	id("org.springframework.boot") version "3.4.2"
	id("io.spring.dependency-management") version "1.1.7"
	id("java")
	id("org.jetbrains.kotlin.jvm") version "1.9.25"
	id("org.jetbrains.kotlin.plugin.jpa") version "1.9.25"
	id("org.jetbrains.kotlin.plugin.spring") version "1.9.25"
	id("org.jetbrains.kotlin.kapt") version "1.9.25"
}

group = "com.contact"
version = "0.0.1-SNAPSHOT"

java {
	toolchain {
		languageVersion.set(JavaLanguageVersion.of(17))
	}
}

repositories {
	mavenCentral()
}

dependencies {
	implementation("org.springframework.boot:spring-boot-starter-data-jpa")
	implementation("org.springframework.boot:spring-boot-starter-web")
	implementation("org.jetbrains.kotlin:kotlin-stdlib-jdk8")
	implementation("org.jetbrains.kotlin:kotlin-reflect")
	implementation("com.fasterxml.jackson.module:jackson-module-kotlin")
	implementation("org.springframework.boot:spring-boot-starter-validation")
	runtimeOnly("com.h2database:h2")
	testImplementation("org.springframework.boot:spring-boot-starter-test")
}

tasks.withType<Test> {
	useJUnitPlatform()
}

tasks.withType<org.jetbrains.kotlin.gradle.tasks.KotlinCompile> {
	kotlinOptions {
		jvmTarget = "17"
	}
}

UserDto.kt

package com.contact.management.dto

import jakarta.validation.constraints.Email
import jakarta.validation.constraints.Size

data class UserDto(
    val id: Long?= null,

    @field:Size(min = 2, max = 50, message = "이름은 2~50자 사이여야 합니다.")
    val name: String,

    @field:Email(message = "올바른 이메일 형식을 입력하세요.")
    val email: String
)

GlobalExceptionHandler.kt

package com.contact.management.exception

import org.springframework.http.HttpStatus
import org.springframework.http.ResponseEntity
import org.springframework.web.bind.MethodArgumentNotValidException
import org.springframework.web.bind.annotation.ExceptionHandler
import org.springframework.web.bind.annotation.RestControllerAdvice

@RestControllerAdvice
class GlobalExceptionHandler {

    @ExceptionHandler(CommonException::class)
    fun handleCommonException(e: CommonException): ResponseEntity<ErrorResponse> {
        val errorResponse = ErrorResponse(
            status = e.exceptionCode.status.value(),
            error = e.exceptionCode.message,
            message = e.message ?: "예외 발생"
        )
        return ResponseEntity(errorResponse, e.exceptionCode.status)
    }

    @ExceptionHandler(MethodArgumentNotValidException::class)
    fun handleValidationExceptions(ex: MethodArgumentNotValidException): ResponseEntity<ErrorResponse> {
        val errors = ex.bindingResult.fieldErrors.associate { it.field to (it.defaultMessage ?: "잘못된 값") }

        val errorResponse = ErrorResponse(
            status = HttpStatus.BAD_REQUEST.value(),
            error = "Validation Failed",
            message = "입력값이 올바르지 않습니다.",
            errors = errors
        )

        return ResponseEntity(errorResponse, HttpStatus.BAD_REQUEST)
    }
}

-> handlerValdationExceptions를 추가함, vadliation에 걸렸을때 errorResponse에 400 BAD_REQUEST, 에러 내용을 return 하게 설정함

UserController.kt

package com.contact.management.controller

import com.contact.management.dto.UserDto
import com.contact.management.service.UserService
import jakarta.validation.Valid
import org.springframework.http.HttpHeaders
import org.springframework.http.HttpStatus
import org.springframework.http.ResponseEntity
import org.springframework.web.bind.annotation.*

@RestController
@RequestMapping("/api/users")
class UserController(
    private val userService: UserService
) {

    @GetMapping
    fun getUsers(): ResponseEntity<List<UserDto>> {
        val users = userService.getAllUsers()
        return ResponseEntity.ok(users)
    }

    @GetMapping("/{id}")
    fun getUser(@PathVariable id: Long): ResponseEntity<UserDto> {
        return ResponseEntity.ok(userService.getUserById(id))
    }

    @PostMapping
    fun createUser(@Valid @RequestBody userDto: UserDto): ResponseEntity<UserDto> {
        val createdUser = userService.createdUser(userDto)
        return ResponseEntity
            .status(HttpStatus.CREATED) // 201 Created
            .header(HttpHeaders.LOCATION, "/api/users/${createdUser.id}") // 생성된 리소스의 URI 반환
            .body(createdUser)
    }

    @PutMapping("/{id}")
    fun updateUser(@PathVariable id: Long,@Valid @RequestBody userDto: UserDto): ResponseEntity<UserDto> {
        val updatedUser = userService.updateUser(id, userDto)
        return ResponseEntity.ok(updatedUser)
    }

    @DeleteMapping("/{id}")
    fun deleteUser(@PathVariable id: Long): ResponseEntity<Void> {
        userService.deleteUser(id)
        return ResponseEntity.noContent().build() // 204 No Content
    }
}

-> createUser, updateUser api에 @Valid를 추가

이름 길이가 2~50자가 아닌경우

이메일 형식을 벗어난 경우

만약 GlobalException에 handleValidationExceptions를 적용하지않았다면

-> GlobalExcpetionHandler에 등록했을때와 비교했을때 에러 메시지가 부족

[코프링] 3. GlobalException handler를 이용한 restApi 에러 처리

JaeSung Kim — Wed, 5 Feb 2025 18:10:03 +0900

프로젝트 구조

CommonException.kt

package com.contact.management.exception

class CommonException(val exceptionCode: CommonExceptionCode) : RuntimeException()

CommonExceptionCode.kt

package com.contact.management.exception

import org.springframework.http.HttpStatus

enum class CommonExceptionCode(
    val status: HttpStatus,
    val message: String,
) {
    USER_NOT_FOUND(HttpStatus.NOT_FOUND, "사용자를 찾을 수 없습니다."),
    EMAIL_ALREADY_EXISTS(HttpStatus.BAD_REQUEST, "이미 존재하는 이메일 입니다."),
}

ErrorResponse.kt

package com.contact.management.exception

import com.fasterxml.jackson.annotation.JsonInclude
import java.time.LocalDateTime

@JsonInclude(JsonInclude.Include.NON_NULL) // null 필드는 JSON 응답에서 제외
data class ErrorResponse(
    val timestamp: LocalDateTime = LocalDateTime.now(),
    val status: Int,
    val error: String,
    val message: String,
    val errors: Map<String, String>? = null // validation 에러 처리를 위한 필드 추가
)

GlobalExceptionHandler.kt

package com.contact.management.exception

import org.springframework.http.HttpStatus
import org.springframework.http.ResponseEntity
import org.springframework.web.bind.MethodArgumentNotValidException
import org.springframework.web.bind.annotation.ExceptionHandler
import org.springframework.web.bind.annotation.RestControllerAdvice

@RestControllerAdvice
class GlobalExceptionHandler {

    @ExceptionHandler(CommonException::class)
    fun handleCommonException(e: CommonException): ResponseEntity<ErrorResponse> {
        val errorResponse = ErrorResponse(
            status = e.exceptionCode.status.value(),
            error = e.exceptionCode.message,
            message = e.message ?: "예외 발생"
        )
        return ResponseEntity(errorResponse, e.exceptionCode.status)
    }
}

-> api에서 CommonException을 throw 하였을때 선언한 httpStatus, message를 return 하게 설정

UserController.kt

package com.contact.management.controller

import com.contact.management.dto.UserDto
import com.contact.management.service.UserService
import org.springframework.http.ResponseEntity
import org.springframework.web.bind.annotation.*

@RestController
@RequestMapping("/api/users")
class UserController(
    private val userService: UserService
) {

    @GetMapping
    fun getUsers(): ResponseEntity<List<UserDto>> {
        val users = userService.getAllUsers()
        return ResponseEntity.ok(users)
    }

    @GetMapping("/{id}")
    fun getUser(@PathVariable id: Long): ResponseEntity<UserDto> {
        return ResponseEntity.ok(userService.getUserById(id))
    }

     @PostMapping
    fun createUser(@RequestBody userDto: UserDto): ResponseEntity<UserDto> {
        val createdUser = userService.createdUser(userDto)
        return ResponseEntity
            .status(HttpStatus.CREATED) // 201 Created
            .header(HttpHeaders.LOCATION, "/api/users/${createdUser.id}") // 생성된 리소스의 URI 반환
            .body(createdUser)
    }

    @PutMapping("/{id}")
    fun updateUser(@PathVariable id: Long, @RequestBody userDto: UserDto): ResponseEntity<UserDto> {
        val updatedUser = userService.updateUser(id, userDto)
        return ResponseEntity.ok(updatedUser)
    }

    @DeleteMapping("/{id}")
    fun deleteUser(@PathVariable id: Long): ResponseEntity<Void> {
        userService.deleteUser(id)
        return ResponseEntity.noContent().build() // 204 No Content
    }
}

rest api 설계 원칙

1. request, response 파라미터는 dto를 사용한다. (entity 사용 x)

why : entity는 테이블 생성에 영향을 주기때문에 분리함

2. 간혹 api를 전부 @PostMapping으로 모두 선언해서 설계하는 경우가 있는데, 이는 올바른 설계가 아님

3. api가 정상적인경우는 데이터를 return, 정상적이지 않는경우 status, message, timeStamp 등 에러메시지를 return

4. api는 버전을 통한 관리가 이뤄줘야함

why : 버전관리가 안되고 기존 api를 변경이되면 api를 사용하고 있던 client들에게 장애가 발생할수 있음

ex) 기존 api -> /api/v1/users

변경된 api -> /api/v2/users

5. api를 설계할때 명칭은 계층적으로 만들어야함

ex) /api/v1/car/suv/genesis

UserDto.kt

package com.contact.management.dto

data class UserDto(
    val id: Long?= null,
    val name: String,
    val email: String
)

UserRepository.kt

package com.contact.management.repository

import com.contact.management.entity.User
import org.springframework.data.jpa.repository.JpaRepository
import org.springframework.stereotype.Repository
import java.util.Optional

@Repository
interface UserRepository : JpaRepository<User, Long>{
    fun findByEmail(username: String): User?
}

-> 사용자 등록시 이메일 중복 체크를 위해 findByEmail을 생성함

-> Kotlin에서는 Optional보다는 User?(nullable)로 반환, Optional 사용 시 let 블록 오작동

UserService.kt

package com.contact.management.service

import com.contact.management.dto.UserDto
import com.contact.management.entity.User
import com.contact.management.exception.CommonException
import com.contact.management.exception.CommonExceptionCode.EMAIL_ALREADY_EXISTS
import com.contact.management.exception.CommonExceptionCode.USER_NOT_FOUND
import com.contact.management.repository.UserRepository
import org.springframework.stereotype.Service
import org.springframework.transaction.annotation.Transactional

@Service
@Transactional
class UserService(
    private val userRepository: UserRepository
) {

    @Transactional(readOnly = true)
    fun getAllUsers() : List<UserDto> {
        return userRepository.findAll().map { UserDto(it.id, it.name, it.email) }
    }

    @Transactional(readOnly = true)
    fun getUserById(id: Long): UserDto {
        val user = userRepository.findById(id).orElseThrow{ CommonException(USER_NOT_FOUND) }
        return UserDto(user.id, user.name, user.email)
    }

    fun createdUser(userDto: UserDto): UserDto {
        userRepository.findByEmail(userDto.email)?.let {
            throw CommonException(EMAIL_ALREADY_EXISTS)
        }

        val user = userRepository.save(User(name = userDto.name, email = userDto.email))
        return UserDto(user.id, user.name, user.email)
    }

    // 사용자 업데이트
    fun updateUser(id: Long, userDto: UserDto): UserDto{
        val updatedUser = userRepository.findById(id).orElseThrow{ CommonException(USER_NOT_FOUND) }

        // 엔티티의 속성 수정
        updatedUser.name = userDto.name
        updatedUser.email = userDto.email
        // DB에 업데이트 로직

        return UserDto(
            id = updatedUser.id,
            name = updatedUser.name,
            email = updatedUser.email
        )
    }

    fun deleteUser(id: Long){
        if(!userRepository.existsById(id)){
            throw CommonException(USER_NOT_FOUND)
        }
        userRepository.deleteById(id)
    }

}

-> 넘어온 id에 해당하는 사용자가 없을경우 CommonException(USER_NOT_FOUND)로 예외처리

-> 사용자 등록시 이메일 계정이 이미 등록되어있는경우 CommonException(EMAIL_ALREADY_EXISTS)로 예외처리

-> getAllUsers, getUserById는 데이터를 조회만 하기 떄문에 @Transactional(readOnly = true)를 적용

why : 이렇게 하면 변경감지를 하지않으므로 성능향상

주의!!

데이터를 추가/수정/삭제하는 메서드에 @Transactional(readOnly = true)를 적용을 하면 데이터 변경이 반영되지 않음

postman

사용자 등록

201 새로운 리소스(사용자)가 성공적으로 생성되었음을 명확하게 표시 또한 Location 헤더에 생성된 리소스의 URL을 포함

사용자 등록 (이메일 중복)

400 Bad Request	잘못된 요청 (유효성 검사 실패)	클라이언트가 유효하지 않은 데이터를 보냈을 때
409 Conflict	리소스 충돌 (중복 데이터)	데이터베이스의 고유 값 제약 조건을 위반할 때

사용자 전체조회

특정 사용자 조회

특정 사용자 조회 (없는 id)

404 Not Found는 요청한 리소스(사용자)가 존재하지 않을 때 사용하는 표준 상태 코드

사용자 변경

사용자 삭제

리소스를 삭제할 때 204 No Content 응답 코드를 사용하는 것이 일반적

204 No Content를 사용하는 이유
성공적으로 삭제되었음을 나타냄: 요청이 정상적으로 처리되었음을 의미함.
응답 본문이 필요 없음: 삭제된 리소스에 대한 추가적인 정보가 필요하지 않음.
클라이언트가 불필요한 데이터 처리를 하지 않음: 응답 본문이 없으므로 클라이언트가 불필요한 데이터를 처리할 필요가 없음.

사용자 삭제 (없는 사용자)

[코프링] 2. H2 데이터베이스 메모리 내 데이터베이스 설정

JaeSung Kim — Mon, 3 Feb 2025 17:25:17 +0900

1. application.properties 파일 삭제후 application.yml 생성

2. h2 메모리 내 데이터베이스용으로 생성

application.yml

spring:
  # H2 Console 설정
  h2:
    console:
      enabled: true  # H2 Console을 사용할지 여부
      path: /h2-console  # H2 Console의 접근 경로

  # 데이터베이스 설정
  datasource:
    driver-class-name: org.h2.Driver  # H2 드라이버 사용
    url: jdbc:h2:mem:management  # 메모리 내 데이터베이스 (테스트용)
    username: sa  # 접속할 사용자명
    password:  # 비밀번호 (없으면 공백으로 설정)

  # JPA 설정
  jpa:
    hibernate:
      ddl-auto: create  # 테이블 자동 생성 및 업데이트 (설정에 따라 'none', 'update', 'create', 'create-drop' 등이 가능)
    show-sql: true  # SQL 쿼리를 로그에 출력
    database-platform: org.hibernate.dialect.H2Dialect  # H2 데이터베이스용 Hibernate Dialect 설정
    properties:
      hibernate:
        format_sql: true  # SQL을 보기 쉽게 포맷

3. entity 패키지 생성후 Item.kt 생성

Item.kt

package com.contact.management.entity

import jakarta.persistence.Entity
import jakarta.persistence.GeneratedValue
import jakarta.persistence.GenerationType
import jakarta.persistence.Id

@Entity
class Item(
    @Id
    @GeneratedValue(strategy = GenerationType.IDENTITY)
    val id: Long? = null,

    val name: String,
    val description: String,
)

4. application 재시작

5. http://localhost:8080/h2-console/ 입력후 접속

6. 확인

[코프링] 1. 프로젝트 생성

JaeSung Kim — Mon, 3 Feb 2025 16:16:08 +0900

1. 해당사이트 접속후 Spring Web, H2 Database, Spring Boot Dev Tools, Spring Data Jpa를 추가합니다.

이후 Generate를 클릭합니다.

https://start.spring.io/

2. File - Project structure 클릭후 SDK가 선택한 JAVA로 선택되어있는지 확인후 변경합니다.

3. File - Settings - Gradle

Build and run using, Run tests Using이 inteliJ IDEA로 선택을 합니다.

build.gradle

plugins {
	id("org.springframework.boot") version "3.4.2"
	id("io.spring.dependency-management") version "1.1.7"
	id("java")
	id("org.jetbrains.kotlin.jvm") version "1.9.25"
	id("org.jetbrains.kotlin.plugin.jpa") version "1.9.25"
	id("org.jetbrains.kotlin.plugin.spring") version "1.9.25"
	id("org.jetbrains.kotlin.kapt") version "1.9.25"
}

group = "com.contact"
version = "0.0.1-SNAPSHOT"

java {
	toolchain {
		languageVersion.set(JavaLanguageVersion.of(17))
	}
}

repositories {
	mavenCentral()
}

dependencies {
	implementation("org.springframework.boot:spring-boot-starter-data-jpa")
	implementation("org.springframework.boot:spring-boot-starter-web")
	implementation("org.jetbrains.kotlin:kotlin-stdlib-jdk8")
	implementation("org.jetbrains.kotlin:kotlin-reflect")
	implementation("com.fasterxml.jackson.module:jackson-module-kotlin")

	runtimeOnly("com.h2database:h2")
	testImplementation("org.springframework.boot:spring-boot-starter-test")
}

tasks.withType<Test> {
	useJUnitPlatform()
}

tasks.withType<org.jetbrains.kotlin.gradle.tasks.KotlinCompile> {
	kotlinOptions {
		jvmTarget = "17"
	}
}

4. New - Kotlin Class/File 클릭후 TestController 생성

5. TestController.kt

package com.contact.management.controller

import org.springframework.web.bind.annotation.GetMapping
import org.springframework.web.bind.annotation.RestController

@RestController
class TestController {

    @GetMapping("/test")
    fun test(): String{
        return "ok";
    }
    
}

Spring boot 3.0 이상, 3.0이하 querydsl 설정 방법

JaeSung Kim — Sat, 30 Sep 2023 12:19:13 +0900

Spring boot 3.0 이상

build.gradle

plugins {
	id 'java'
	id 'org.springframework.boot' version '3.1.4'
	id 'io.spring.dependency-management' version '1.1.3'
}

group = 'study'
version = '0.0.1-SNAPSHOT'

java {
	sourceCompatibility = '17'
}

configurations {
	compileOnly {
		extendsFrom annotationProcessor
	}
}

repositories {
	mavenCentral()
}

dependencies {
	implementation 'org.springframework.boot:spring-boot-starter-data-jpa'
	implementation 'org.springframework.boot:spring-boot-starter-web'
	compileOnly 'org.projectlombok:lombok'
	runtimeOnly 'com.h2database:h2'
	annotationProcessor 'org.projectlombok:lombok'
	testImplementation 'org.springframework.boot:spring-boot-starter-test'

	// QueryDSL Implementation
	implementation 'com.querydsl:querydsl-jpa:5.0.0:jakarta'
	annotationProcessor "com.querydsl:querydsl-apt:${dependencyManagement.importedProperties['querydsl.version']}:jakarta"
	annotationProcessor "jakarta.annotation:jakarta.annotation-api"
	annotationProcessor "jakarta.persistence:jakarta.persistence-api"
}

test {
	useJUnitPlatform()
}

/**
 * QueryDSL Build Options
 */
def querydslDir = "src/main/generated"

sourceSets {
	main.java.srcDirs += [ querydslDir ]
}

tasks.withType(JavaCompile) {
	options.getGeneratedSourceOutputDirectory().set(file(querydslDir))
}

clean.doLast {
	file(querydslDir).deleteDir()
}

Spring boot 3.0 이하

build.gradle

// 1. queryDsl version 정보 추가
buildscript {
	ext {
		queryDslVersion = "5.0.0"
	}
}

plugins {
	id 'org.springframework.boot' version '2.7.1'
	id 'io.spring.dependency-management' version '1.0.11.RELEASE'
	// 2. querydsl plugins 추가
	id "com.ewerk.gradle.plugins.querydsl" version "1.0.10"
	id 'java'
}

group = 'study'
version = '0.0.1-SNAPSHOT'
sourceCompatibility = '1.8'

configurations {
	compileOnly {
		extendsFrom annotationProcessor
	}
}

repositories {
	mavenCentral()
}

dependencies {
	implementation 'org.springframework.boot:spring-boot-starter-data-jpa'
	implementation 'org.springframework.boot:spring-boot-starter-thymeleaf'
	implementation 'org.springframework.boot:spring-boot-starter-web'

	// 3. querydsl dependencies 추가
	implementation "com.querydsl:querydsl-jpa:${queryDslVersion}"
	implementation "com.querydsl:querydsl-apt:${queryDslVersion}"

	compileOnly 'org.projectlombok:lombok'
	developmentOnly 'org.springframework.boot:spring-boot-devtools'
	runtimeOnly 'com.h2database:h2'
	annotationProcessor 'org.projectlombok:lombok'
	testImplementation 'org.springframework.boot:spring-boot-starter-test'
}

tasks.named('test') {
	useJUnitPlatform()
}

/*
 * queryDSL 설정 추가
 */
// querydsl에서 사용할 경로 설정
def querydslDir = "$buildDir/generated/querydsl"
// JPA 사용 여부와 사용할 경로를 설정
querydsl {
	jpa = true
	querydslSourcesDir = querydslDir
}
// build 시 사용할 sourceSet 추가
sourceSets {
	main.java.srcDir querydslDir
}
// querydsl 컴파일시 사용할 옵션 설정
compileQuerydsl{
	options.annotationProcessorPath = configurations.querydsl
}
// querydsl 이 compileClassPath 를 상속하도록 설정
configurations {
	compileOnly {
		extendsFrom annotationProcessor
	}
	querydsl.extendsFrom compileClasspath
}

QuerydslConfig.java

package study.querydsl.config;

import com.querydsl.jpa.impl.JPAQueryFactory;
import jakarta.persistence.EntityManager;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;

@Configuration
public class QuerydslConfig {
    private final EntityManager entityManager;

    public QuerydslConfig(EntityManager entityManager) {
        this.entityManager = entityManager;
    }

    @Bean
    public JPAQueryFactory jpaQueryFactory() {
        return new JPAQueryFactory(entityManager);
    }
}

test.java

package study.querydsl;

import com.querydsl.jpa.impl.JPAQueryFactory;
import jakarta.persistence.EntityManager;
import org.assertj.core.api.Assertions;
import org.junit.jupiter.api.Test;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.boot.test.context.SpringBootTest;
import org.springframework.transaction.annotation.Transactional;
import study.querydsl.entity.Hello;
import study.querydsl.entity.QHello;

import static org.assertj.core.api.Assertions.*;

@SpringBootTest
@Transactional
class QuerydslApplicationTests {

	@Autowired
	EntityManager em;

	@Test
	void contextLoads() {
		Hello hello = new Hello();
		em.persist(hello);

		JPAQueryFactory query = new JPAQueryFactory(em);
		QHello qHello = QHello.hello;

		Hello result = query
				.selectFrom(qHello)
				.fetchOne();

		assertThat(result).isEqualTo(hello);
		assertThat(result.getId()).isEqualTo(hello.getId());

	}
}

build 하는법

gradle

clean - build

H2 데이터베이스 생성 (Database not found, either pre-create it or allow remote database creation (not recommended in secure environments)

JaeSung Kim — Sat, 30 Sep 2023 12:13:43 +0900

처음에 프로젝트 생성후 Generice H2로 (Server)로 접근하려고 하면 해당 에러가 나오면서 접속이 되지 않음,

이경우 데이터베이스가 존재하지 않아서 나타나는 에러임

해결방법

jdbc:h2:~/데이터베이스명

위에 이미지 처럼 Generice H2 (Embedded)를 선택후 연결을 누르면 맨 처음에 데이터베이스가 없을때 생성하는 것으로, 위 문제를 해결할수 있음, 다음에 접속할때는 Generice H2 (Server)를 선택후 접속하면됨

위처럼 해도 데이터베이스가 안만들어지는경우

H2 Exit (종료)후 다시 실행 위작업을 진행

InteliJ UTF-8 한글깨짐 설정

JaeSung Kim — Wed, 20 Sep 2023 02:10:13 +0900

File - Settings - File Encodings에 해당 부분 변경

Help - Edit Custom VM Options 클릭후 해당 코드 넣기

-Dfile.encoding=UTF-8
-Dconsole.encoding=UTF-8

Docker Desktop - WSL kernel verision too low

JaeSung Kim — Wed, 6 Sep 2023 23:07:12 +0900

- docker Desktop을 실행하였는데 해당에러가 발생할경우 wsl을 업데이트 해줘야합니다.

- windows powerShell을 실행한 후 해당 명령어 실행

wsl --update

- 이후 docker desktop 실행하였을때 정상적으로 실행됨

windows에서 'docker-compose'은 내부 또는 외부 명령, 실행할 수 있는 프로그램, 또는 배치 파일이 아닙니다.

JaeSung Kim — Wed, 6 Sep 2023 22:58:33 +0900

- widnows에서 docker 관련된 명령어를 사용할때는 docker desktop을 설치 해야합니다.

Docker DeskTop 설치

https://www.docker.com/get-started/

Get Started | Docker

Get started with Docker Desktop and join millions of developers in faster, more secure app development using containers and beyond.

www.docker.com

Docker Desktop - WSL kernel verision too low 에러가 발생한경우

https://aamoos.tistory.com/738

Docker Desktop - WSL kernel verision too low

- windows powerShell을 실행한 후 해당 명령어 실행 wsl --update - 이후 docker desktop 실행하였을때 정상적으로 실행됨

aamoos.tistory.com

[LeafletJs] Leaflet Draw Circle 총반경 구하기

JaeSung Kim — Thu, 5 Jan 2023 17:02:25 +0900

이번 포스팅에서는 leaflet으로 circle을 그리고 총반경을 구하는것을 해보겠습니다.

- 네이버 지도에 보면 원 총반경을 구하는 기능이 있는데 해당 기능을 구현해보겠습니다.

전체코드

<%@ page contentType="text/html; charset=utf-8" pageEncoding="utf-8" %>
<body>
	<main role="main" class="inner cover">
        <h1 class="cover-heading">LeafletJs Tutorial</h1>
<!-- 		<p class="lead">- openstreetmap</p> -->
<!-- 		<div id="map"></div> -->
<!-- 		<br> -->
		<p class="lead">polygon 면적 측정</p>
		<div id="map"></div>
      </main>
</body>

<script>
	let lon = "";
	let lat = "";
	let leafletMap = "";
	let startMarker = "";
	let finishMarker = "";
	let contextMenuFlag = true;
	let lineArray = [];
	let drawControl = "";
	let layerType = "";
	let polygon = new L.featureGroup();
	let drawlon = "";
	let drawlat = "";
	let drawnItems = "";
	let layer = "";
	
	//apikey
	const apiKey = $("#apiKey").val();
	
	$(function(){
		init();
	});
	
	function init(){
		navigator.geolocation.getCurrentPosition(onGeoOk,onGeoError);
	}
	
	//현재 좌표값 가져오기
	function onGeoOk(position){
	    lon = position.coords.latitude;
	    lat = position.coords.longitude;
	    console.log("You live in", lon, lat);
	    
	    //wmts 가져오기
	    vworldWmts();
	}
	
	function onGeoError(){
	    alert("Can't find you. No weather for you.");
	}

	function vworldWmts(){
		//leaflet 지도 띄우기 (EPSG : 4326)
		leafletMap = L.map('map').setView([lon, lat], 15)
		
		L.tileLayer("http://api.vworld.kr/req/wmts/1.0.0/"+apiKey+"/Base/{z}/{y}/{x}.png").addTo(leafletMap);
		
		//해당 플래그가 true일때만 동작
		//맵에 오른쪽마우스 클릭이벤트
		leafletMap.on('click', leftMouseClick);
		leafletMap.on('contextmenu', rightMouseClick);
		
		//layer 변경
		changeLayer(leafletMap)
		
		//leaflet 그리기
		initLeafletDraw(leafletMap)
		
	}
	
	//layer 변경
	function changeLayer(leafletMap){
		drawnItems = L.featureGroup().addTo(leafletMap);
		const vworld = L.tileLayer("http://api.vworld.kr/req/wmts/1.0.0/"+apiKey+"/Base/{z}/{y}/{x}.png", { maxZoom: 18});
		//레이어 변경
		L.control.layers({
			'vworld' : vworld.addTo(leafletMap),
			'osm': L.tileLayer("http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
				attribution: 'osm'
			}),
			'google': L.tileLayer('http://www.google.cn/maps/vt?lyrs=s@189&gl=cn&x={x}&y={y}&z={z}', {
				attribution: 'google'
			})
		}, { 'drawlayer': drawnItems }, { position: 'topleft', collapsed: false }).addTo(leafletMap);		
	}
	
	//leaflet 그리기
	function initLeafletDraw(leafletMap){
		
		drawControl = new L.Control.Draw({
			edit : false,
// 			edit: {
// 				featureGroup: drawnItems,
// 				poly: {
// 					allowIntersection: false,
// 					remove: false
// 				}
// 			},
			
			draw: {
				polygon: {
					allowIntersection: false,
					showArea: true
				}
			}
		});
		
        leafletMap.addControl(drawControl);

		//created
		leafletMap.on(L.Draw.Event.CREATED, function (event) {
			layer = event.layer;
			layerType = event.layerType;
			drawnItems.addLayer(layer);
			//polyline 일경우
			if(layerType == 'polyline') {
				createAreaTooltip(layer);
		    }else if(layerType == 'polygon'){
		    	createAreaTooltip(layer);
		    }else if(layerType == 'circle'){
		    	createAreaTooltip(layer);
		    }
			  
		});
		
		//그리기 도구 열때
		leafletMap.on('draw:toolbaropened', function (e) {
			contextMenuFlag = false;
		});
		
		//그리기 도구 닫힐때
		leafletMap.on('draw:toolbarclosed', function (e) {
			contextMenuFlag = true;
		});
		
		//도구모음 클릭시 layerType
		leafletMap.on('draw:drawstart', function (e) {
			layerType = e.layerType;
		});
		
	}
	
	//폴리곤 tooltip 생성
	function createAreaTooltip(layer) {
		console.log(layer.areaTooltip);
        if(layer.areaTooltip) {
            return;
        }

        layer.areaTooltip = L.tooltip({
            permanent: true,
            direction: 'center',
            className: 'area-tooltip'
        });

        layer.on('remove', function(event) {
            layer.areaTooltip.remove();
        });

        layer.on('add', function(event) {
            updateAreaTooltip(layer);
            layer.areaTooltip.addTo(leafletMap);
        });

        if(leafletMap.hasLayer(layer)) {
            updateAreaTooltip(layer);
            console.log(layer.areaTooltip);
            //얘가문제
            layer.areaTooltip.addTo(leafletMap);
        }
    }
	
	//폴리곤 영역 update
	function updateAreaTooltip(layer) {

        let latlng = "";
        let content = "";
        
        if(layerType == "polyline"){
        	latlng = layer.getCenter();
        	let coords = layer.getLatLngs();
			let length = 0;
			for (let i = 0; i < coords.length - 1; i++) {
				length += coords[i].distanceTo(coords[i + 1]);
			}
			console.log(coords[coords.length - 1]);
		    
			//반올림
			let totalMeter = meterCalcurate(length);
			content = "<div class='list-group'><a style='text-align: center;' href='javascript:void(0);' class='list-group-item list-group-item-action'>총거리 : "+totalMeter+"</a></div>"
			latlng = [coords[coords.length - 1].lat, coords[coords.length - 1].lng];
			
        }else if(layerType == "polygon"){
        	 let area = L.GeometryUtil.geodesicArea(layer.getLatLngs()[0]);
        	 area = area.toFixed(1).replace(/\B(?<!\.\d*)(?=(\d{3})+(?!\d))/g, ",")+"㎡";
        	 latlng = layer.getCenter();
        	 content = "<div class='list-group'><a style='text-align: center;' href='javascript:void(0);' class='list-group-item list-group-item-action'>총면적 : "+area+"</a></div>"
        }
        
        else if(layerType == "circle"){
        	let radius = layer.getRadius().toFixed(1);
        	latlng = layer.getLatLng();
        	content = "<div class='list-group'><a style='text-align: center;' href='javascript:void(0);' class='list-group-item list-group-item-action'>총반경 : "+radius+"m</a></div>"
        }
   
        //ha -> 제곱미터로 변환후 소수 첫째자리까지 반올림후 3째자리까지 나누기
        layer.areaTooltip
            .setContent(content)
            .setLatLng(latlng);
        
        //polyline인경우 offset 처리
        if(layerType == "polyline"){
        	layer.areaTooltip.options.offset = [0,80];	
        }
    }
	
	//왼쪽마우스 클릭
	function leftMouseClick(e){
		
		if(!contextMenuFlag){
			//선
			if(layerType == "polyline"){
				lineArray.push(e.latlng);
				console.log(lineArray);
				
				let length = lineArray.length;
				
				const polyLineIcon = L.icon({
				    iconUrl: '/images/start-marker.png',

				    iconSize:     [30, 30], // size of the icon
				});

				drawlon = lineArray[length-1].lat;
				drawlat = lineArray[length-1].lng;
				
				polyLineMarker = new L.marker([drawlon, drawlat], {
					draggable: false,
					autoPan: false,
					icon: polyLineIcon
				});
				
				polyLineMarker.addTo(leafletMap);
				
				if(length > 1){
					let distance = lineArray[length-2].distanceTo(lineArray[length-1]);
					
					//미터 -> 키로미터로 변환
					distance = meterCalcurate(distance);
					
					polyLineMarker.bindTooltip(distance, {direction: 'top',noWrap: true, opacity: 0.9, permanent: true}).openTooltip();
				}	
			}
		}
	}
	
	// m -> km로 계산
	function meterCalcurate(distance){
		distance = Math.round(distance);
		
		if(distance >= 1000){
			distance = (distance / 1000).toFixed(2) + "km";
		}else{
			distance = distance + "m";
		}
		
		return distance;
	}
	
	//오른쪽 마우스 클릭
	function rightMouseClick(e) {
		
	    const lon = e.latlng.lat;
	    const lat = e.latlng.lng;
	    
	    const popDiv = "<div class='list-group'><a style='text-align: center;' href='javascript:void(0);' onclick='startBtnClicked("+lon+", "+lat+")' class='list-group-item list-group-item-action'>출발</a><a style='text-align: center;' href='javascript:void(0);' onclick='finishBtnClicked("+lon+", "+lat+")' class='list-group-item list-group-item-action'>도착</a><a href='javascript:void(0);' onclick='distanceMeasure()' class='list-group-item list-group-item-action'>거리측정</a></div>";
  
	    console.log("팝업 lon : " + lon, "lat : " + lat)
	    
	    //contextMenuFlag가 true일때만 팝업 show
	    if(contextMenuFlag){
	    	//오른쪽마우스 클릭이벤트
			const popup = L.popup()
		    .setLatLng([lon, lat])
		    .setContent(popDiv)
		    .openOn(leafletMap);
	    }
	}
	
	//출발버튼 클릭
	function startBtnClicked(lon, lat){
		if(startMarker != ""){
			startMarker.remove();	
		}
		
		leafletMap.closePopup();
		
		const startIcon = L.icon({
		    iconUrl: '/images/start-marker.png',

		    iconSize:     [30, 30], // size of the icon
		});

		startMarker = new L.marker([lon, lat], {
			draggable: true,
			autoPan: false,
			icon: startIcon
		});
		
		startMarker.addTo(leafletMap);
		
		//마커 마우스 이벤트
		markerMouseEvent(startMarker);
	}
	
	//도착버튼 클릭
	function finishBtnClicked(lon, lat){
		
		if(finishMarker != ""){
			finishMarker.remove();	
		}
		
		leafletMap.closePopup();
		
		const finishIcon = L.icon({
		    iconUrl: '/images/finish-marker.png',

		    iconSize:     [30, 30], // size of the icon
		});
		
		finishMarker = new L.marker([lon, lat], {
			draggable: true,
			autoPan: false,
			icon: finishIcon
		});
		finishMarker.addTo(leafletMap);
		
		//마커 마우스 이벤트
		markerMouseEvent(finishMarker);
	}
	
	//마커 마우스 이벤트
	function markerMouseEvent(marker){
		marker.on('mouseover', function (e) {
			marker.bindTooltip("끌어서 이동", {direction: 'top',noWrap: true, opacity: 0.9}).openTooltip();
			//class명 추가
// 			marker._icon.classList.add("btn__close");
        });
        marker.on('mouseout', function (e) {
//         	marker._icon.classList.remove("btn__close");
        });
        
        marker.on('click', function (e) {
        	marker.remove();
        });
	}
	
</script>

- updateTooltip에서 circle일경우 반경을 구해서 1의자리까지 반올림후 표현을 하였습니다.

[LeafletJs] Leaflet Draw Polygon 면적 재기

JaeSung Kim — Thu, 5 Jan 2023 14:20:36 +0900

이번장에서는 Leaflet Draw 기능중에 polygon으로 그렸을때 해당 총 면적을 tooltip으로 표현하는것을 해보겠습니다.

- 네이버 지도에서 면적기능을 클릭하면 polygon을 그리면 총면적을 볼수 있습니다. 해당 기능을 구현해보겠습니다.

<%@ page contentType="text/html; charset=utf-8" pageEncoding="utf-8" %>
<body>
	<main role="main" class="inner cover">
        <h1 class="cover-heading">LeafletJs Tutorial</h1>
<!-- 		<p class="lead">- openstreetmap</p> -->
<!-- 		<div id="map"></div> -->
<!-- 		<br> -->
		<p class="lead">polygon 면적 측정</p>
		<div id="map"></div>
      </main>
</body>

<script>
	let lon = "";
	let lat = "";
	let leafletMap = "";
	let startMarker = "";
	let finishMarker = "";
	let contextMenuFlag = true;
	let lineArray = [];
	let drawControl = "";
	let layerType = "";
	let polygon = new L.featureGroup();
	let drawlon = "";
	let drawlat = "";
	let drawnItems = "";
	let layer = "";
	
	//apikey
	const apiKey = $("#apiKey").val();
	
	$(function(){
		init();
	});
	
	function init(){
		navigator.geolocation.getCurrentPosition(onGeoOk,onGeoError);
	}
	
	//현재 좌표값 가져오기
	function onGeoOk(position){
	    lon = position.coords.latitude;
	    lat = position.coords.longitude;
	    console.log("You live in", lon, lat);
	    
	    //wmts 가져오기
	    vworldWmts();
	}
	
	function onGeoError(){
	    alert("Can't find you. No weather for you.");
	}

	function vworldWmts(){
		//leaflet 지도 띄우기 (EPSG : 4326)
		leafletMap = L.map('map').setView([lon, lat], 15)
		
		L.tileLayer("http://api.vworld.kr/req/wmts/1.0.0/"+apiKey+"/Base/{z}/{y}/{x}.png").addTo(leafletMap);
		
		//해당 플래그가 true일때만 동작
		//맵에 오른쪽마우스 클릭이벤트
		leafletMap.on('click', leftMouseClick);
		leafletMap.on('contextmenu', rightMouseClick);
		
		//layer 변경
		changeLayer(leafletMap)
		
		//leaflet 그리기
		initLeafletDraw(leafletMap)
		
	}
	
	//layer 변경
	function changeLayer(leafletMap){
		drawnItems = L.featureGroup().addTo(leafletMap);
		const vworld = L.tileLayer("http://api.vworld.kr/req/wmts/1.0.0/"+apiKey+"/Base/{z}/{y}/{x}.png", { maxZoom: 18});
		//레이어 변경
		L.control.layers({
			'vworld' : vworld.addTo(leafletMap),
			'osm': L.tileLayer("http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
				attribution: 'osm'
			}),
			'google': L.tileLayer('http://www.google.cn/maps/vt?lyrs=s@189&gl=cn&x={x}&y={y}&z={z}', {
				attribution: 'google'
			})
		}, { 'drawlayer': drawnItems }, { position: 'topleft', collapsed: false }).addTo(leafletMap);		
	}
	
	//leaflet 그리기
	function initLeafletDraw(leafletMap){
		
		drawControl = new L.Control.Draw({
			edit : false,
// 			edit: {
// 				featureGroup: drawnItems,
// 				poly: {
// 					allowIntersection: false,
// 					remove: false
// 				}
// 			},
			
			draw: {
				polygon: {
					allowIntersection: false,
					showArea: true
				}
			}
		});
		
        leafletMap.addControl(drawControl);

		//created
		leafletMap.on(L.Draw.Event.CREATED, function (event) {
			layer = event.layer;
			layerType = event.layerType;
			drawnItems.addLayer(layer);
			//polyline 일경우
			if(layerType == 'polyline') {
				createAreaTooltip(layer);
		    }else if(layerType == 'polygon'){
		    	createAreaTooltip(layer);
		    }  
		});
		
		//그리기 도구 열때
		leafletMap.on('draw:toolbaropened', function (e) {
			
			contextMenuFlag = false;
		});
		
		//그리기 도구 닫힐때
		leafletMap.on('draw:toolbarclosed', function (e) {
			contextMenuFlag = true;
		});
		
		//도구모음 클릭시 layerType
		leafletMap.on('draw:drawstart', function (e) {
			layerType = e.layerType;
		});
	}
	
	//폴리곤 tooltip 생성
	function createAreaTooltip(layer) {
		console.log(layer.areaTooltip);
        if(layer.areaTooltip) {
            return;
        }

        layer.areaTooltip = L.tooltip({
            permanent: true,
            direction: 'center',
            className: 'area-tooltip'
        });

        layer.on('remove', function(event) {
            layer.areaTooltip.remove();
        });

        layer.on('add', function(event) {
            updateAreaTooltip(layer);
            layer.areaTooltip.addTo(leafletMap);
        });

        if(leafletMap.hasLayer(layer)) {
            updateAreaTooltip(layer);
            console.log(layer.areaTooltip);
            //얘가문제
            layer.areaTooltip.addTo(leafletMap);
        }
    }
	
	//폴리곤 영역 update
	function updateAreaTooltip(layer) {
        let latlng = "";
        let content = "";
        
        if(layerType == "polyline"){
        	latlng = layer.getCenter();
        	let coords = layer.getLatLngs();
			let length = 0;
			for (let i = 0; i < coords.length - 1; i++) {
				length += coords[i].distanceTo(coords[i + 1]);
			}
			console.log(coords[coords.length - 1]);
		    
			//반올림
			let totalMeter = meterCalcurate(length);
			content = "<div class='list-group'><a style='text-align: center;' href='javascript:void(0);' class='list-group-item list-group-item-action'>총거리 : "+totalMeter+"</a></div>"
			latlng = [coords[coords.length - 1].lat, coords[coords.length - 1].lng];
			
        }else if(layerType == "polygon"){
        	 let area = L.GeometryUtil.geodesicArea(layer.getLatLngs()[0]);
        	 
        	 area = area.toFixed(1).replace(/\B(?<!\.\d*)(?=(\d{3})+(?!\d))/g, ",")+"㎡";

        	 latlng = layer.getCenter();
        	 content = "<div class='list-group'><a style='text-align: center;' href='javascript:void(0);' class='list-group-item list-group-item-action'>총면적 : "+area+"</a></div>"
        }
     
        //ha -> 제곱미터로 변환후 소수 첫째자리까지 반올림후 3째자리까지 나누기
        layer.areaTooltip
            .setContent(content)
            .setLatLng(latlng);
        
        //polyline인경우 offset 처리
        if(layerType == "polyline"){
        	layer.areaTooltip.options.offset = [0,80];	
        }
        
    }
	
	//왼쪽마우스 클릭
	function leftMouseClick(e){
		
		if(!contextMenuFlag){
			//선
			if(layerType == "polyline"){
				lineArray.push(e.latlng);
				console.log(lineArray);
				
				let length = lineArray.length;
				
				const polyLineIcon = L.icon({
				    iconUrl: '/images/start-marker.png',

				    iconSize:     [30, 30], // size of the icon
				});

				drawlon = lineArray[length-1].lat;
				drawlat = lineArray[length-1].lng;
				
				polyLineMarker = new L.marker([drawlon, drawlat], {
					draggable: false,
					autoPan: false,
					icon: polyLineIcon
				});
				
				polyLineMarker.addTo(leafletMap);
				
				if(length > 1){
					let distance = lineArray[length-2].distanceTo(lineArray[length-1]);
					
					//미터 -> 키로미터로 변환
					distance = meterCalcurate(distance);
					
					polyLineMarker.bindTooltip(distance, {direction: 'top',noWrap: true, opacity: 0.9, permanent: true}).openTooltip();
				}	
			}
		}
	}
	
	// m -> km로 계산
	function meterCalcurate(distance){
		distance = Math.round(distance);
		
		if(distance >= 1000){
			distance = (distance / 1000).toFixed(2) + "km";
		}else{
			distance = distance + "m";
		}
		
		return distance;
	}
	
	//오른쪽 마우스 클릭
	function rightMouseClick(e) {
		
	    const lon = e.latlng.lat;
	    const lat = e.latlng.lng;
	    
	    const popDiv = "<div class='list-group'><a style='text-align: center;' href='javascript:void(0);' onclick='startBtnClicked("+lon+", "+lat+")' class='list-group-item list-group-item-action'>출발</a><a style='text-align: center;' href='javascript:void(0);' onclick='finishBtnClicked("+lon+", "+lat+")' class='list-group-item list-group-item-action'>도착</a><a href='javascript:void(0);' onclick='distanceMeasure()' class='list-group-item list-group-item-action'>거리측정</a></div>";
  
	    console.log("팝업 lon : " + lon, "lat : " + lat)
	    
	    //contextMenuFlag가 true일때만 팝업 show
	    if(contextMenuFlag){
	    	//오른쪽마우스 클릭이벤트
			const popup = L.popup()
		    .setLatLng([lon, lat])
		    .setContent(popDiv)
		    .openOn(leafletMap);
	    }
	}
	
	//출발버튼 클릭
	function startBtnClicked(lon, lat){
		if(startMarker != ""){
			startMarker.remove();	
		}
		
		leafletMap.closePopup();
		
		const startIcon = L.icon({
		    iconUrl: '/images/start-marker.png',

		    iconSize:     [30, 30], // size of the icon
		});

		startMarker = new L.marker([lon, lat], {
			draggable: true,
			autoPan: false,
			icon: startIcon
		});
		
		startMarker.addTo(leafletMap);
		
		//마커 마우스 이벤트
		markerMouseEvent(startMarker);
	}
	
	//도착버튼 클릭
	function finishBtnClicked(lon, lat){
		
		if(finishMarker != ""){
			finishMarker.remove();	
		}
		
		leafletMap.closePopup();
		
		const finishIcon = L.icon({
		    iconUrl: '/images/finish-marker.png',

		    iconSize:     [30, 30], // size of the icon
		});
		
		finishMarker = new L.marker([lon, lat], {
			draggable: true,
			autoPan: false,
			icon: finishIcon
		});
		finishMarker.addTo(leafletMap);
		
		//마커 마우스 이벤트
		markerMouseEvent(finishMarker);
	}
	
	//마커 마우스 이벤트
	function markerMouseEvent(marker){
		marker.on('mouseover', function (e) {
			marker.bindTooltip("끌어서 이동", {direction: 'top',noWrap: true, opacity: 0.9}).openTooltip();
			//class명 추가
// 			marker._icon.classList.add("btn__close");
        });
        marker.on('mouseout', function (e) {
//         	marker._icon.classList.remove("btn__close");
        });
        
        marker.on('click', function (e) {
        	marker.remove();
        });
	}
	
</script>

- polygon으로 그릴때 해당 area를 소수점 첫째자리로 반올림하고 제곱미터를 붙였습니다.

[LeafletJs] Leaflet Draw Poly line 거리 측정

JaeSung Kim — Thu, 5 Jan 2023 14:06:17 +0900

이번장에서는 Leaflet Draw 기능중에 Poly Line으로 지도에 표시할때마다 거리와 총거리를 표현해보겠습니다.

- 네이버 지도에 보면 거리측정을 하면 마우스로 찍은 점마다 미터를 표시를 하는데 해당 기능을 구현해보겠습니다.

전체소스

<%@ page contentType="text/html; charset=utf-8" pageEncoding="utf-8" %>
<body>
	<main role="main" class="inner cover">
        <h1 class="cover-heading">LeafletJs Tutorial</h1>
<!-- 		<p class="lead">- openstreetmap</p> -->
<!-- 		<div id="map"></div> -->
<!-- 		<br> -->
		<p class="lead">leaflet draw 예제</p>
		<div id="map"></div>
      </main>
</body>

<script>
	let lon = "";
	let lat = "";
	let leafletMap = "";
	let startMarker = "";
	let finishMarker = "";
	let contextMenuFlag = true;
	let lineArray = [];
	let drawControl = "";
	let layerType = "";
	let polygon = new L.featureGroup();
	let drawlon = "";
	let drawlat = "";
	let drawnItems = "";
	let layer = "";
	
	//apikey
	const apiKey = $("#apiKey").val();
	
	$(function(){
		init();
	});
	
	function init(){
		navigator.geolocation.getCurrentPosition(onGeoOk,onGeoError);
	}
	
	//현재 좌표값 가져오기
	function onGeoOk(position){
	    lon = position.coords.latitude;
	    lat = position.coords.longitude;
	    console.log("You live in", lon, lat);
	    
	    //wmts 가져오기
	    vworldWmts();
	}
	
	function onGeoError(){
	    alert("Can't find you. No weather for you.");
	}

	function vworldWmts(){
		//leaflet 지도 띄우기 (EPSG : 4326)
		leafletMap = L.map('map').setView([lon, lat], 15)
		
		L.tileLayer("http://api.vworld.kr/req/wmts/1.0.0/"+apiKey+"/Base/{z}/{y}/{x}.png").addTo(leafletMap);
		
		//해당 플래그가 true일때만 동작
		//맵에 오른쪽마우스 클릭이벤트
		leafletMap.on('click', leftMouseClick);
		leafletMap.on('contextmenu', rightMouseClick);
		
		//layer 변경
		changeLayer(leafletMap)
		
		//leaflet 그리기
		initLeafletDraw(leafletMap)
		
	}
	
	//layer 변경
	function changeLayer(leafletMap){
		drawnItems = L.featureGroup().addTo(leafletMap);
		const vworld = L.tileLayer("http://api.vworld.kr/req/wmts/1.0.0/"+apiKey+"/Base/{z}/{y}/{x}.png", { maxZoom: 18});
		//레이어 변경
		L.control.layers({
			'vworld' : vworld.addTo(leafletMap),
			'osm': L.tileLayer("http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
				attribution: 'osm'
			}),
			'google': L.tileLayer('http://www.google.cn/maps/vt?lyrs=s@189&gl=cn&x={x}&y={y}&z={z}', {
				attribution: 'google'
			})
		}, { 'drawlayer': drawnItems }, { position: 'topleft', collapsed: false }).addTo(leafletMap);		
	}
	
	//leaflet 그리기
	function initLeafletDraw(leafletMap){
		
		drawControl = new L.Control.Draw({
			edit : false,
// 			edit: {
// 				featureGroup: drawnItems,
// 				poly: {
// 					allowIntersection: false,
// 					remove: false
// 				}
// 			},
			
			draw: {
				polygon: {
					allowIntersection: false,
					showArea: true
				}
			}
		});
		
        leafletMap.addControl(drawControl);

		//created
		leafletMap.on(L.Draw.Event.CREATED, function (event) {
			layer = event.layer;
			layerType = event.layerType;
			drawnItems.addLayer(layer);
			//polyline 일경우
			if(layerType == 'polyline') {
				createAreaTooltip(layer);
		    }
		});
		
		//그리기 도구 열때
		leafletMap.on('draw:toolbaropened', function (e) {
			
			contextMenuFlag = false;
		});
		
		//그리기 도구 닫힐때
		leafletMap.on('draw:toolbarclosed', function (e) {
			contextMenuFlag = true;
		});
		
		//도구모음 클릭시 layerType
		leafletMap.on('draw:drawstart', function (e) {
			layerType = e.layerType;
		});
	}
	
	//tooltip 생성
	function createAreaTooltip(layer) {
		console.log(layer.areaTooltip);
        if(layer.areaTooltip) {
            return;
        }

        layer.areaTooltip = L.tooltip({
            permanent: true,
            direction: 'center',
            className: 'area-tooltip'
        });

        layer.on('remove', function(event) {
            layer.areaTooltip.remove();
        });

        layer.on('add', function(event) {
            updateAreaTooltip(layer);
            layer.areaTooltip.addTo(leafletMap);
        });

        if(leafletMap.hasLayer(layer)) {
            updateAreaTooltip(layer);
            console.log(layer.areaTooltip);
            //얘가문제
            layer.areaTooltip.addTo(leafletMap);
        }
    }
	
	//툴팁 content 업데이트
	function updateAreaTooltip(layer) {
        let latlng = "";
        let content = "";
        
        if(layerType == "polyline"){
        	latlng = layer.getCenter();
        	let coords = layer.getLatLngs();
			let length = 0;
			for (let i = 0; i < coords.length - 1; i++) {
				length += coords[i].distanceTo(coords[i + 1]);
			}
			console.log(coords[coords.length - 1]);
		    
			//반올림
			let totalMeter = meterCalcurate(length);
			content = "<div class='list-group'><a style='text-align: center;' href='javascript:void(0);' class='list-group-item list-group-item-action'>총거리 : "+totalMeter+"</a></div>"
			latlng = [coords[coords.length - 1].lat, coords[coords.length - 1].lng];
			
        }
        
        //ha -> 제곱미터로 변환후 소수 첫째자리까지 반올림후 3째자리까지 나누기
        layer.areaTooltip
            .setContent(content)
            .setLatLng(latlng);
        
        //polyline인경우 offset 처리
        if(layerType == "polyline"){
        	layer.areaTooltip.options.offset = [0,80];	
        }
    }
	
	//왼쪽마우스 클릭
	function leftMouseClick(e){
		
		if(!contextMenuFlag){
			//선
			if(layerType == "polyline"){
				lineArray.push(e.latlng);
				console.log(lineArray);
				
				let length = lineArray.length;
				
				const polyLineIcon = L.icon({
				    iconUrl: '/images/start-marker.png',

				    iconSize:     [30, 30], // size of the icon
				});

				drawlon = lineArray[length-1].lat;
				drawlat = lineArray[length-1].lng;
				
				polyLineMarker = new L.marker([drawlon, drawlat], {
					draggable: false,
					autoPan: false,
					icon: polyLineIcon
				});
				
				polyLineMarker.addTo(leafletMap);
				
				if(length > 1){
					let distance = lineArray[length-2].distanceTo(lineArray[length-1]);
					
					//미터 -> 키로미터로 변환
					distance = meterCalcurate(distance);
					
					polyLineMarker.bindTooltip(distance, {direction: 'top',noWrap: true, opacity: 0.9, permanent: true}).openTooltip();
				}	
			}
		}
	}
	
	// m -> km로 계산
	function meterCalcurate(distance){
		distance = Math.round(distance);
		
		if(distance >= 1000){
			distance = (distance / 1000).toFixed(2) + "km";
		}else{
			distance = distance + "m";
		}
		
		return distance;
	}
	
	//오른쪽 마우스 클릭
	function rightMouseClick(e) {
		
	    const lon = e.latlng.lat;
	    const lat = e.latlng.lng;
	    
	    const popDiv = "<div class='list-group'><a style='text-align: center;' href='javascript:void(0);' onclick='startBtnClicked("+lon+", "+lat+")' class='list-group-item list-group-item-action'>출발</a><a style='text-align: center;' href='javascript:void(0);' onclick='finishBtnClicked("+lon+", "+lat+")' class='list-group-item list-group-item-action'>도착</a><a href='javascript:void(0);' onclick='distanceMeasure()' class='list-group-item list-group-item-action'>거리측정</a></div>";
  
	    console.log("팝업 lon : " + lon, "lat : " + lat)
	    
	    //contextMenuFlag가 true일때만 팝업 show
	    if(contextMenuFlag){
	    	//오른쪽마우스 클릭이벤트
			const popup = L.popup()
		    .setLatLng([lon, lat])
		    .setContent(popDiv)
		    .openOn(leafletMap);
	    }
	}
	
	//출발버튼 클릭
	function startBtnClicked(lon, lat){
		if(startMarker != ""){
			startMarker.remove();	
		}
		
		leafletMap.closePopup();
		
		const startIcon = L.icon({
		    iconUrl: '/images/start-marker.png',

		    iconSize:     [30, 30], // size of the icon
		});

		startMarker = new L.marker([lon, lat], {
			draggable: true,
			autoPan: false,
			icon: startIcon
		});
		
		startMarker.addTo(leafletMap);
		
		//마커 마우스 이벤트
		markerMouseEvent(startMarker);
	}
	
	//도착버튼 클릭
	function finishBtnClicked(lon, lat){
		
		if(finishMarker != ""){
			finishMarker.remove();	
		}
		
		leafletMap.closePopup();
		
		const finishIcon = L.icon({
		    iconUrl: '/images/finish-marker.png',

		    iconSize:     [30, 30], // size of the icon
		});
		
		finishMarker = new L.marker([lon, lat], {
			draggable: true,
			autoPan: false,
			icon: finishIcon
		});
		finishMarker.addTo(leafletMap);
		
		//마커 마우스 이벤트
		markerMouseEvent(finishMarker);
	}
	
	//마커 마우스 이벤트
	function markerMouseEvent(marker){
		marker.on('mouseover', function (e) {
			marker.bindTooltip("끌어서 이동", {direction: 'top',noWrap: true, opacity: 0.9}).openTooltip();
			//class명 추가
// 			marker._icon.classList.add("btn__close");
        });
        marker.on('mouseout', function (e) {
//         	marker._icon.classList.remove("btn__close");
        });
        
        marker.on('click', function (e) {
        	marker.remove();
        });
	}
	
</script>

- 저는 왼쪽마우스를 클릭할때마다 마커를 찍고 해당 마커 좌표를 배열에 넣고, 마커가 2개이상일경우에 가장 마지막으로 찍은 마커와 그 직전에 찍은 마커의 좌표사이의 거리를 계산해서 popup으로 표시를 하였습니다.

그리고 draw:created를 보면 그림그리기 완료시 레이어에 찍힌 마커들 사이의 거리를 합쳐서 총거리를 구해서 팝업으로 표현하였습니다.

[LeafletJs] Leaflet draw 사용

JaeSung Kim — Thu, 5 Jan 2023 13:54:11 +0900

이번 포스팅에서는 Leaflet Draw 라이브러리를 사용해보겠습니다.

https://leaflet.github.io/Leaflet.draw/docs/examples/full.html

Leaflet.draw vector editing handlers

leaflet.github.io

해당 사이트에 있는 리소스 파일이랑 소스를 설정합니다.

소스코드

<%@ page contentType="text/html; charset=utf-8" pageEncoding="utf-8" %>
<body>
	<main role="main" class="inner cover">
        <h1 class="cover-heading">LeafletJs Tutorial</h1>
<!-- 		<p class="lead">- openstreetmap</p> -->
<!-- 		<div id="map"></div> -->
<!-- 		<br> -->
		<p class="lead">leaflet draw 예제</p>
		<div id="map"></div>
      </main>
</body>

<script>
	let lon = "";
	let lat = "";
	let leafletMap = "";
	let startMarker = "";
	let finishMarker = "";
	let contextMenuFlag = true;
	let drawControl = "";
	
	//apikey
	const apiKey = $("#apiKey").val();
	
	$(function(){
		init();
	});
	
	function init(){
		navigator.geolocation.getCurrentPosition(onGeoOk,onGeoError);
	}
	
	//현재 좌표값 가져오기
	function onGeoOk(position){
	    lon = position.coords.latitude;
	    lat = position.coords.longitude;
	    console.log("You live in", lon, lat);
	    
	    //wmts 가져오기
	    vworldWmts();
	}
	
	function onGeoError(){
	    alert("Can't find you. No weather for you.");
	}

	function vworldWmts(){
		//leaflet 지도 띄우기 (EPSG : 4326)
		leafletMap = L.map('map').setView([lon, lat], 15)
		
		L.tileLayer("http://api.vworld.kr/req/wmts/1.0.0/"+apiKey+"/Base/{z}/{y}/{x}.png").addTo(leafletMap);
		
		//해당 플래그가 true일때만 동작
		//맵에 오른쪽마우스 클릭이벤트
		leafletMap.on('contextmenu', rightMouseClick);
		
		//layer 변경
		changeLayer(leafletMap)
		
		//leaflet 그리기
		initLeafletDraw(leafletMap)
		
	}
	
	//layer 변경
	function changeLayer(leafletMap){
		
		vworld = L.tileLayer("http://api.vworld.kr/req/wmts/1.0.0/"+apiKey+"/Base/{z}/{y}/{x}.png", { maxZoom: 18}),
		drawnItems = L.featureGroup().addTo(leafletMap);
		
		//레이어 변경
		L.control.layers({
			'vworld' : vworld.addTo(leafletMap),
			'osm': L.tileLayer("http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
				attribution: 'osm'
			}),
			'google': L.tileLayer('http://www.google.cn/maps/vt?lyrs=s@189&gl=cn&x={x}&y={y}&z={z}', {
				attribution: 'google'
			})
		}, { 'drawlayer': drawnItems }, { position: 'topleft', collapsed: false }).addTo(leafletMap);		
	}
	
	//leaflet 그리기
	function initLeafletDraw(leafletMap){
		
		drawControl = new L.Control.Draw({
			edit : false,
// 			edit: {
// 				featureGroup: drawnItems,
// 				poly: {
// 					allowIntersection: false,
// 					remove: false
// 				}
// 			},
			
			draw: {
				polygon: {
					allowIntersection: false,
					showArea: true
				}
			}
		});
		
        leafletMap.addControl(drawControl);
        
        leafletMap.on(L.Draw.Event.CREATED, function (event) {
            var layer = event.layer;

            drawnItems.addLayer(layer);
        });
        
	}
	
	//오른쪽 마우스 클릭
	function rightMouseClick(e) {
		
	    const lon = e.latlng.lat;
	    const lat = e.latlng.lng;
	    
	    const popDiv = "<div class='list-group'><a style='text-align: center;' href='javascript:void(0);' onclick='startBtnClicked("+lon+", "+lat+")' class='list-group-item list-group-item-action'>출발</a><a style='text-align: center;' href='javascript:void(0);' onclick='finishBtnClicked("+lon+", "+lat+")' class='list-group-item list-group-item-action'>도착</a></div>";
  
	    console.log("팝업 lon : " + lon, "lat : " + lat)
	    
	    //contextMenuFlag가 true일때만 팝업 show
	    if(contextMenuFlag){
	    	//오른쪽마우스 클릭이벤트
			const popup = L.popup()
		    .setLatLng([lon, lat])
		    .setContent(popDiv)
		    .openOn(leafletMap);
	    }
	}
	
	//출발버튼 클릭
	function startBtnClicked(lon, lat){
		if(startMarker != ""){
			startMarker.remove();	
		}
		
		leafletMap.closePopup();
		
		const startIcon = L.icon({
		    iconUrl: '/images/start-marker.png',

		    iconSize:     [30, 30], // size of the icon
		});

		startMarker = new L.marker([lon, lat], {
			draggable: true,
			autoPan: false,
			icon: startIcon
		});
		
		startMarker.addTo(leafletMap);
		
		//마커 마우스 이벤트
		markerMouseEvent(startMarker);
	}
	
	//도착버튼 클릭
	function finishBtnClicked(lon, lat){
		
		if(finishMarker != ""){
			finishMarker.remove();	
		}
		
		leafletMap.closePopup();
		
		const finishIcon = L.icon({
		    iconUrl: '/images/finish-marker.png',

		    iconSize:     [30, 30], // size of the icon
		});
		
		finishMarker = new L.marker([lon, lat], {
			draggable: true,
			autoPan: false,
			icon: finishIcon
		});
		finishMarker.addTo(leafletMap);
		
		//마커 마우스 이벤트
		markerMouseEvent(finishMarker);
	}
	
	//마커 마우스 이벤트
	function markerMouseEvent(marker){
		marker.on('mouseover', function (e) {
			marker.bindTooltip("끌어서 이동", {direction: 'top',noWrap: true, opacity: 0.9}).openTooltip();
			//class명 추가
// 			marker._icon.classList.add("btn__close");
        });
        marker.on('mouseout', function (e) {
//         	marker._icon.classList.remove("btn__close");
        });
        
        marker.on('click', function (e) {
        	marker.remove();
        });
	}
	
</script>

[leafletjs] 배경지도 레이어 변경

JaeSung Kim — Thu, 5 Jan 2023 13:17:37 +0900

이번 포스팅에서는 왼쪽 상단에 팝업하나에 레이어를 선택함에 따라 해당 레이어로 변경이 되는것을 해보겠습니다. (vworld를 클릭하면 vworld wmts, osm을 클릭하면 openstree map, google을 클릭하면 google map)

<%@ page contentType="text/html; charset=utf-8" pageEncoding="utf-8" %>
<body>
	<main role="main" class="inner cover">
        <h1 class="cover-heading">LeafletJs Tutorial</h1>
<!-- 		<p class="lead">- openstreetmap</p> -->
<!-- 		<div id="map"></div> -->
<!-- 		<br> -->
		<p class="lead">- 레이어변경</p>
		<div id="map"></div>
      </main>
</body>

<script>
	let lon = "";
	let lat = "";
	let leafletMap = "";
	let startMarker = "";
	let finishMarker = "";
	let contextMenuFlag = true;
	
	//apikey
	const apiKey = $("#apiKey").val();
	
	$(function(){
		init();
	});
	
	function init(){
		navigator.geolocation.getCurrentPosition(onGeoOk,onGeoError);
	}
	
	//현재 좌표값 가져오기
	function onGeoOk(position){
	    lon = position.coords.latitude;
	    lat = position.coords.longitude;
	    console.log("You live in", lon, lat);
	    
	    //wmts 가져오기
	    vworldWmts();
	}
	
	//내좌표값 가져올때 error
	function onGeoError(){
	    alert("Can't find you. No weather for you.");
	}

	//vowld wmts 배경지도
	function vworldWmts(){
		//leaflet 지도 띄우기 (EPSG : 4326)
		leafletMap = L.map('map').setView([lon, lat], 15)
		
		L.tileLayer("http://api.vworld.kr/req/wmts/1.0.0/"+apiKey+"/Base/{z}/{y}/{x}.png").addTo(leafletMap);
		
		//해당 플래그가 true일때만 동작
		//맵에 오른쪽마우스 클릭이벤트
		leafletMap.on('contextmenu', rightMouseClick);
		
		
		changeLayer(leafletMap)
	}
	
	//layer 변경
	function changeLayer(leafletMap){
		
		vworld = L.tileLayer("http://api.vworld.kr/req/wmts/1.0.0/"+apiKey+"/Base/{z}/{y}/{x}.png", { maxZoom: 18}),
		drawnItems = L.featureGroup().addTo(leafletMap);
		
		//레이어 변경
		L.control.layers({
			'vworld' : vworld.addTo(leafletMap),
			'osm': L.tileLayer("http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
				attribution: 'osm'
			}),
			'google': L.tileLayer('http://www.google.cn/maps/vt?lyrs=s@189&gl=cn&x={x}&y={y}&z={z}', {
				attribution: 'google'
			})
		}, { 'drawlayer': drawnItems }, { position: 'topleft', collapsed: false }).addTo(leafletMap);		
	}
	
	//오른쪽 마우스 클릭
	function rightMouseClick(e) {
		
	    const lon = e.latlng.lat;
	    const lat = e.latlng.lng;
	    
	    const popDiv = "<div class='list-group'><a style='text-align: center;' href='javascript:void(0);' onclick='startBtnClicked("+lon+", "+lat+")' class='list-group-item list-group-item-action'>출발</a><a style='text-align: center;' href='javascript:void(0);' onclick='finishBtnClicked("+lon+", "+lat+")' class='list-group-item list-group-item-action'>도착</a></div>";
  
	    console.log("팝업 lon : " + lon, "lat : " + lat)
	    
	    //contextMenuFlag가 true일때만 팝업 show
	    if(contextMenuFlag){
	    	//오른쪽마우스 클릭이벤트
			const popup = L.popup()
		    .setLatLng([lon, lat])
		    .setContent(popDiv)
		    .openOn(leafletMap);
	    }
	}
	
	//출발버튼 클릭
	function startBtnClicked(lon, lat){
		if(startMarker != ""){
			startMarker.remove();	
		}
		
		leafletMap.closePopup();
		
		const startIcon = L.icon({
		    iconUrl: '/images/start-marker.png',

		    iconSize:     [30, 30], // size of the icon
		});

		startMarker = new L.marker([lon, lat], {
			draggable: true,
			autoPan: false,
			icon: startIcon
		});
		
		startMarker.addTo(leafletMap);
		
		//마커 마우스 이벤트
		markerMouseEvent(startMarker);
	}
	
	//도착버튼 클릭
	function finishBtnClicked(lon, lat){
		
		if(finishMarker != ""){
			finishMarker.remove();	
		}
		
		leafletMap.closePopup();
		
		const finishIcon = L.icon({
		    iconUrl: '/images/finish-marker.png',

		    iconSize:     [30, 30], // size of the icon
		});
		
		finishMarker = new L.marker([lon, lat], {
			draggable: true,
			autoPan: false,
			icon: finishIcon
		});
		finishMarker.addTo(leafletMap);
		
		//마커 마우스 이벤트
		markerMouseEvent(finishMarker);
	}
	
	//마커 마우스 이벤트
	function markerMouseEvent(marker){
		//마우스 오버
		marker.on('mouseover', function (e) {
			marker.bindTooltip("끌어서 이동", {direction: 'top',noWrap: true, opacity: 0.9}).openTooltip();
			//class명 추가
// 			marker._icon.classList.add("btn__close");
        });
		
		//마우스 아웃
        marker.on('mouseout', function (e) {
//         	marker._icon.classList.remove("btn__close");
        });
        
      //마우스 클릭
        marker.on('click', function (e) {
        	marker.remove();
        });
	}
	
</script>

[leafletjs] wmts 배경지도에 오른쪽 마우스 클릭시 출발 도착 marker 찍기

JaeSung Kim — Tue, 3 Jan 2023 17:04:13 +0900

저번에 wmts로 배경지도를 개발하였다면, 이번장에서는 해당 기능을 개발하려고 합니다.
1. 지도에 오른쪽 마우스 클릭시 출발, 도착 팝업 표출
2. 출발, 도착 버튼 누를경우 마커가 지도에 찍힘
3. 찍힌 마커에 마우스 오버시 텍스트 문구 표현
4. 찍힌 마커 드래그시 이동이 가능하게함
5. 마커 클릭시 클릭한 마커 삭제

소스코드

<%@ page contentType="text/html; charset=utf-8" pageEncoding="utf-8" %>
<body>
	<main role="main" class="inner cover">
        <h1 class="cover-heading">LeafletJs Tutorial</h1>
<!-- 		<p class="lead">- openstreetmap</p> -->
<!-- 		<div id="map"></div> -->
<!-- 		<br> -->
		<p class="lead">- 출발 도착 버튼 클릭시 마커찍기</p>
		<div id="map"></div>
      </main>
</body>

<script>
	let lon = "";
	let lat = "";
	let leafletMap = "";
	let startMarker = "";
	let finishMarker = "";
	const apiKey = $("#apiKey").val();
	
	$(function(){
		init();
	});
	
	function init(){
		navigator.geolocation.getCurrentPosition(onGeoOk,onGeoError);
	}
	
	//현재 좌표값 가져오기
	function onGeoOk(position){
	    lon = position.coords.latitude;
	    lat = position.coords.longitude;
	    console.log("You live in", lon, lat);
	    
	    //wmts 가져오기
	    vworldWmts();
	}
	
	//내좌표값 가져올때 error
	function onGeoError(){
	    alert("Can't find you. No weather for you.");
	}

	//vowld wmts 배경지도
	function vworldWmts(){
		
		//leaflet 지도 띄우기 (EPSG : 4326)
		leafletMap = L.map('map').setView([lon, lat], 15)
		
		L.tileLayer("http://api.vworld.kr/req/wmts/1.0.0/"+apiKey+"/Base/{z}/{y}/{x}.png").addTo(leafletMap);
		
		//맵에 오른쪽마우스 클릭이벤트
		leafletMap.on('contextmenu', onMapClick);
	}
	
	//마우스 오른쪽 클릭시
	function onMapClick(e) {
	    lon = e.latlng.lat;
	    lat = e.latlng.lng;
	    
	    const popDiv = "<div class='list-group'><a style='text-align: center;' href='javascript:void(0);' onclick='startBtnClicked("+lon+", "+lat+")' class='list-group-item list-group-item-action'>출발</a><a style='text-align: center;' href='javascript:void(0);' onclick='finishBtnClicked("+lon+", "+lat+")' class='list-group-item list-group-item-action'>도착</a></div>";
	    
	    console.log("팝업 lon : " + lon, "lat : " + lat)
	    
	  	//오른쪽마우스 클릭이벤트
		const popup = L.popup()
	    .setLatLng([lon, lat])
	    .setContent(popDiv)
	    .openOn(leafletMap);
	}
	
	//출발버튼 클릭
	function startBtnClicked(lon, lat){
		if(startMarker != ""){
			startMarker.remove();	
		}
		
		leafletMap.closePopup();
		
		const startIcon = L.icon({
		    iconUrl: '/images/start-marker.png',
		    iconSize:     [30, 30], // size of the icon
		});

		startMarker = new L.marker([lon, lat], {
			draggable: true,
			autoPan: false,
			icon: startIcon
		});
		
		startMarker.addTo(leafletMap);
		
		//마커 마우스 이벤트
		markerMouseEvent(startMarker);
	}
	
	//도착버튼 클릭
	function finishBtnClicked(lon, lat){
		
		if(finishMarker != ""){
			finishMarker.remove();	
		}
		
		leafletMap.closePopup();
		
		const finishIcon = L.icon({
		    iconUrl: '/images/finish-marker.png',

		    iconSize:     [30, 30], // size of the icon
		});
		
		finishMarker = new L.marker([lon, lat], {
			draggable: true,
			autoPan: false,
			icon: finishIcon
		});
		finishMarker.addTo(leafletMap);
		
		//마커 마우스 이벤트
		markerMouseEvent(finishMarker);
	}
	
	//마커 마우스 이벤트
	function markerMouseEvent(marker){
		//마우스 오버
		marker.on('mouseover', function (e) {
			marker.bindTooltip("끌어서 이동", {direction: 'top',noWrap: true, opacity: 0.9}).openTooltip();
			//class명 추가
// 			marker._icon.classList.add("btn__close");
        });
		
		//마우스 아웃
        marker.on('mouseout', function (e) {
//         	marker._icon.classList.remove("btn__close");
        });
        
		//마우스 클릭
        marker.on('click', function (e) {
        	marker.remove();
        });
	}
	
</script>

- maker 이미지는 해당 사이트에서 찾아서 넣었습니다.

icon 사이트

https://www.iconfinder.com/

7,125,000+ free and premium vector icons, illustrations and 3D illustrations

Iconfinder is the world's largest marketplace for icons, illustrations and 3D illustrations in SVG, AI, and PNG format.

www.iconfinder.com

화면

[leafletjs] vworld wmts 배경지도 내위치 띄우기

JaeSung Kim — Tue, 3 Jan 2023 13:31:03 +0900

이번 포스팅에서는 leaflet js를 설정하고 vworld에서 지원하는 wmts 배경지도 api를 사용해서 지도를 표현하는것을 개발해보겠습니다.

css, js

<!-- leaflet -->
<script src="https://unpkg.com/leaflet@1.9.3/dist/leaflet.js" integrity="sha256-WBkoXOwTeyKclOHuWtc+i2uENFpDZ9YPdf5Hf+D7ewM=" crossorigin=""></script>

<!-- leaflet -->
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.3/dist/leaflet.css" integrity="sha256-kLaT2GOSpHechhsozzB+flnD+zUyjE2LlfWPgU04xyI=" crossorigin="" />

<%@ page contentType="text/html; charset=utf-8" pageEncoding="utf-8" %>
<body>
	<main role="main" class="inner cover">
        <h1 class="cover-heading">LeafletJs Tutorial</h1>
<!-- 		<p class="lead">- openstreetmap</p> -->
<!-- 		<div id="map"></div> -->
<!-- 		<br> -->
		<p class="lead">- wmts 배경지도 (내위치)</p>
		<div id="map"></div>
      </main>
</body>

<script>

	$(function(){
		init();
	});
	
	function init(){
		navigator.geolocation.getCurrentPosition(onGeoOk,onGeoError);
	}
	
	//현재 좌표값 가져오기
	function onGeoOk(position){
	    const lon = position.coords.latitude;
	    const lat = position.coords.longitude;
	    vworldWmts(lon, lat);
	}
	
	//내좌표값 가져올때 error
	function onGeoError(){
	    alert("Can't find you. No weather for you.");
	}

	//vowld wmts 배경지도
	function vworldWmts(lon, lat){
		//apikey
		const apiKey = $("#apiKey").val();
		
		//leaflet 지도 띄우기 (EPSG : 4326)
		const leafletMap = L.map('map').setView([lon, lat], 15)
		
		L.tileLayer("http://api.vworld.kr/req/wmts/1.0.0/"+apiKey+"/Base/{z}/{y}/{x}.png").addTo(leafletMap);
	}
	
</script>

- 화면이 로딩될때 navigator.geolocation.getCurrentPosition 함수가 호출되어 현재 내 좌표값을 얻어 냅니다.

- 이후 해당 좌표값 위치로 wmts를 사용해서 표현합니다.

- apikey는 아래 포스팅에서 한것처럼 vworld api key를 받아서 넣으면 됩니다.

vworld wmts api 사용방법

https://aamoos.tistory.com/515

[LeafletJs] vworld wmts 배경지도 띄우기, map, circle, polygon, pin 객체 올리기

vworld wmts api를 사용하여서 배경지도를 띄우는 부분입니다. 인터넷에 대부분의 예제는 아래 코드처럼 띄우는 형식으로 되어있는데 url에 보면 202002 버전으로 업데이트된 지도이므로 최신의 지도

aamoos.tistory.com

Vue 예제 - BootStrap Vue 적용

JaeSung Kim — Tue, 27 Dec 2022 15:31:59 +0900

npm install vue bootstrap bootstrap-vue-3

- VsCode에 해당 명령어를 입력해서 bootstrap을 install 합니다.

main.js

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import BootstrapVue3 from 'bootstrap-vue-3';
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue-3/dist/bootstrap-vue-3.css'

const app = createApp(App)
app.use(BootstrapVue3)
app.use(router)
app.mount('#app')

bootstrap-vue-3로 되어있는부분을 추가합니다.

MainView.vue

<template>
<div>
<b-button>Button</b-button>
<b-button variant="danger">Button</b-button>
<b-button variant="success">Button</b-button>
<b-button variant="outline-primary">Button</b-button>
</div>
</template>

테스트로 main에 부트스트랩이 적용된 코드를 넣어서 확인해봅니다.

VsCode 것허브 연동 커밋

JaeSung Kim — Tue, 27 Dec 2022 14:51:04 +0900

이번 게시글에는 VsCode에서 작성한 소스를 깃허브와 연동하고 커밋하는것을 해보겠습니다.

- VsCode 좌측하단에 해당 버튼을 눌러서 깃허브를 로그인합니다.

- private로 할지 public으로 할지 선택후 클릭합니다.

- access token을 입력하라는 창이뜹니다.

access token 확인하는방법

- 깃허브 로그인후 프로필 - settings

- 왼쪽 메뉴에 Developer Settings 클릭

- Tokens (classic)후 Generate new Token (classic) 클릭

- 토큰명과 repo 체크후 Generate Token 클릭

- 해당키 복사후 위에 토큰 입력창에 넣습니다.

- 깃허브에 확인해보면 제가 지정한 vue froject 이름으로 repository가 생성이 되었습니다. 이제 github에 커밋을 해보겠습니다.

깃허브 커밋

- 해당 버튼의 오른쪽에 화살표 버튼을 클릭한후 push&commit을 클릭합니다.

- 커밋이 정상적으로 된것을 확인할수 있습니다.

3. Vue 예제 - 서버 실행, vue-router 적용, footer, header 나누기

JaeSung Kim — Tue, 27 Dec 2022 13:33:56 +0900

이번 게시글에서는vue-router를 적용해보고 프로젝트를 실행해보겠습니다.

Vue-Router란?

- 특정 url에 접근하였을때 url마다 선언한 component vue로 화면을 보여주며, 하나의 페이지로 여러 화면을 보여주는 SPA를 개발할수 있게 해주는 라이브러리 입니다.

npm add vue-router@next

- 터미널에 해당 명령어를 입력해서 vue-rotuer를 설치합니다.

- src 폴더 밑에 router 폴더를 만들고 index.js 파일을 만듭니다. 그리고 src 폴더 밑에 views 폴더를 만들고 LoginView.vue, MainView.vue 파일을 만듭니다.

index.js

import { createWebHistory, createRouter } from "vue-router";
import Main from "@/views/MainView.vue";
import Login from "@/views/LoginView.vue";

const routes = [
  {
    path: "/",
    name: "Main",
    component: Main,
  },
  {
    path: "/login",
    name: "Login",
    component: Login,
  },
];

const router = createRouter({
    history: createWebHistory(),
    routes,
});

export default router;

LoginView.vue

<template>
  <h1>Login Page</h1>
</template>

MainView.vue

<template>
  <h1>Main Page</h1>
</template>

App.vue

<template>
  <router-view />
</template>

main.js

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'

const app = createApp(App)

app.use(router).mount('#app')

npm run build
npm run serve

- 해당 명령어를 VsCode 터미널에 입력합니다.

이번에는 vue-router를 이용해서 header, footer를 추가합니다.

src/views/layout 폴더를 생성후 그안에 FooterView.vue, HeaderView.vue를 생성합니다.

FooterView.vue

<template>
    <br><br>
    <div class="footer">made by jaeSung</div>
</template>

HeaderView.vue

<template>
  <div id="nav">
    <router-link class="menu" to="/">Main</router-link> | 
    <router-link class="menu" to="/login">Login</router-link>
  </div>
</template>

App.vue

<template>
  <Header />
  <router-view />
  <Footer />
</template>

<script>
import Header from './views/layout/HeaderView.vue';
import Footer from './views/layout/FooterView.vue';

export default {
  name: 'App',
  components: {
    Header,
    Footer
  }
}
</script>

결과화면

2. Vue 예제 - VsCode 플러그인 사용해보기

JaeSung Kim — Tue, 27 Dec 2022 10:24:35 +0900

이번글에서는 vue 개발에 유용한 VsCode 플러그인을 다운로드 해보고 사용해보는것을 해보겠습니다.

- 먼저 VsCode를 열면 해당 버튼을 누릅니다. (Extensions)

vetur 설치

- Vetur를 install 합니다. vetur를 받으면 vue 파일 하이라이팅 기능을 사용할수 있습니다.

vetur 설치전

vetur 설치후

material icon 설치

- Material Icon 플러그인을 install 합니다. 아이콘 테마를 바꿀수 있습니다.

material icon 적용

File - Preferences - File Icon Theme - Material Icon Theme 입력후 선택

material icon 설치전

material icon 설치후

- 아이콘 색깔이 알록달록 해졌습니다.

Night Owl 설치

- Night Owl 플러그인을 install 합니다. 색테마를 변경할수 있습니다.

Night Owl 적용

File - Preferences - Color Theme - Night owl 입력후 선택

Night Owl 적용전

Night Owl 적용후

- 색이 파래지는? 것을 볼수 있습니다. 아이콘, 색 테마는 본인의 취향에 맞게 적용을 하면 됩니다.

ESLint 설치

- vue를 개발할때 문법체크를 해주는 플러그인입니다. 해당 플러그인을 install합니다.

Prettier 설치

- vue를 개발할때 코드 포맷팅을 도와주는 플러그인입니다. 해당 플러그인을 install 합니다.

Auto Close Tag 설치

- 태그를 열면 닫히는 태그가 자동으로 입력되게 수행하는 플러그인입니다. 해당플러그인을 install 합니다.

Atom Keymap 설치

- 단축키로 코드를 자동으로 입력되게 도와주는 플러그인입니다. 해당 플러그인을 install 합니다.

단축키

! + Tab

- 기본적인 html 구조가 만들어집니다.

div#id

- 입력한 id를 가진 div가 생성됩니다.

script + tab

- script 코드가 생성이됩니다.

log + tab

- console이 생성이 됩니다.

이외에도 다양한 단축키가 있습니다.

1. vue 예제 - Vue 프로젝트 생성

JaeSung Kim — Tue, 27 Dec 2022 10:06:33 +0900

- 본 게시글은 VsCode에서 Vue3 프로젝트를 생성하는 방법을 정리하였습니다.

VsCode 설치

https://code.visualstudio.com/download
자신의 os에 맞는 vscode를 설치합니다.

NodeJs 설치

https://nodejs.org/ko/
LTS 버전을 설치합니다.

VueJs Devtools 설치

https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd
chrome에 확장프로그램 추가하기

Vue 설치

npm install -g @vue/cli

Vue 설치 확인

vue --version

- 위에 설치가 다되었으면 해당 명령어를 날려서 vue를 설치하고 확인을 합니다.

Vue 프로젝트 생성

vue cretate frontend

- VsCode 터미널에 해당 명령어를 실행후 Vue3 Default를 선택합니다.

- view project를 생성한 경로에 들어가보면 vue 관련 파일이 생긴것을 알수 있습니다. 해당 폴더를 vscode에 드래그합니다.

- 다음 글에서는 VsCode vue 관련 유용한 플러그인을 다운받아보고 사용해보도록 하겠습니다.

https://aamoos.tistory.com/724

2. Vue 기능 튜토리얼 - VsCode 플러그인 사용해보기

이번글에서는 vue 개발에 유용한 VsCode 플러그인을 다운로드 해보고 사용해보는것을 해보겠습니다. - 먼저 VsCode를 열면 해당 버튼을 누릅니다. (Extensions) vetur 설치 - Vetur를 install 합니다. vetur를 받

aamoos.tistory.com

A problem occurred configuring root project

JaeSung Kim — Tue, 27 Dec 2022 09:47:15 +0900

A problem occurred configuring root project

Could not resolve all files for configuration

Could not resolve org.springframework.boot:spring-boot-gradle-plugin:3.0.1.

- spring start io에서 java 11로 선택하고 프로젝트를 받은후 intelij에서 gradle build를 했을경우 아래 에러를 마주하였습니다.

- build.gradle 파일을 열어보니 sourceCompatibility 자바 버전이 17로 되어있습니다. 저는 11버전을 선택했는데도..

찾아보니 spring boot 3.0 부터는 자바가 17이 필요해서, 프로젝트 생성시 무조건 17로 된다고 합니다.

해결방법

File - Project Structure

- 저 같은경우에는 sdk가 No Sdk로 되어있었습니다. jdk 17이 없는경우 Add Sdk - Download Sdk에 들어가서 자바 17을 받은후 설정해줍니다.

File - Settings 들어가서 gradle 검색

- 맨아래 Gradle JVM에서 자바 17을 선택해줍니다. 마찬가지로 동일하게 자바 17이 없는 경우 Download Jdk에서 자바 17을 다운로드후 선택해주면 됩니다.

- build가 정상적으로 되었습니다.

Spring + jquery ajax post 파일 다운로드

JaeSung Kim — Thu, 8 Dec 2022 10:52:35 +0900

- 회사에서 일하던중 기존에 개발되어있던 소스가 해당코드처럼 링크를 클릭하면 get방식으로 다운로드 하는 방식이었습니다. 그런데 이게 웹 취약성에 걸려 post로 바꿔달라는 요구 사항이 있어서 그 내용에 관한것을 정리하고자 합니다.

- get 방식 (이전방식)

<a href="/dashboard/fileDownload.do?type=5&sn=1" target ="_blank" class="gray_btn2_line pdfDown">PDF다운로드</a>

- post 방식 (변경한방식)

<a href="javascript:void(0);" onclick="fileDownload(this)" type='5' sn='1' target ="_blank" class="gray_btn2_line pdfDown">PDF다운로드</a>

- 더 나은 방식이 있을수 있겠지만, 저는 기존에 get방식에서 뒤에 붙는 파라미터를 attribute로 선언을하여서 넣어줬습니다. (수정하고자한 프로젝트에 개발되어있던 방식이 type 마다 해당 파일을 찾는식으로 개발이 되어있음)

common.js

//파일다운로드 post 방식
function fileDownload(target){
	const type = $(target).attr("type");
	const sn = $(target).attr("sn");
	
	const formObj = $("#downloadForm");
	formObj.find('input[name=type]').val(type);
	formObj.find('input[name=sn]').val(sn);
    
	formObj.attr("action", "/fileDownload.do");
	formObj.attr("method", "POST");
	formObj.submit();
}

- ajax로 처음에 post 방식으로 다운로드 api에 전송해봤는데 ajax로는 다운로드가 되지 않는 현상이 있어서 (구글링 해봤을때도 안된다고함) form 전송으로 처리를 하였습니다.

download form

<!-- download form -->
<form id="downloadForm" method="post">
    <input type="hidden" name="type">
    <input type="hidden" name="sn">
</form>

- header나 공통 페이지에 넣어서 다운로드 클릭시 해당 hidden값에 값을 setting후 post로 다운로드 api에 전송하는 방식입니다.

다운로드 api는 인터넷에 예제가 많기 때문에 생략하겠습니다.

spring boot restart시 query 실행하기

JaeSung Kim — Tue, 29 Nov 2022 18:13:41 +0900

1. application.yml

spring:
  h2:
    console:
      enabled: true

  datasource:
    url: "dburl명"
    username: sa
    password:
    driver-class-name: org.h2.Driver

  jpa:
    hibernate:
      ddl-auto: create
    properties:
      hibernate:
        show_sql: true
        format_sql: true
    defer-datasource-initialization: true

sql:
  init:
    mode: always

logging:
  level:
    org.hibernate.SQL: debug

defer-datasource-initialization: true

sql:
  init:
    mode: always

- 해당 코드를 application.yml에 붙여줌 (글쓴이는 spring boot 2.7.5 버전 기준 h2 db에 쿼리를 실행하려고 함)

2.resources 디렉터리 밑에 import.sql 생성

- sql명을 처음에 data.sql로 지정하였는데, insert가 안되길래 import.sql로 이름을 바꾸면 insert가 된다는 글이 있길래 바꿔보니 insert가 됨

import.sql

INSERT INTO USERS(USER_ID, USERNAME, PASSWORD, NICKNAME, ACTIVATED) VALUES(1, 'admin', '$2a$10$E2pUd//AHzJ9GftoOUGMnudE967qaiZ1elVzkpv3lO0NNYhl6Dmmy', 'admin', 1);

INSERT INTO AUTHORITY (AUTHORITY_NAME) VALUES ('ROLE_USER');
INSERT INTO AUTHORITY (AUTHORITY_NAME) VALUES ('ROLE_ADMIN');

INSERT INTO USER_AUTHORITY (USER_ID, AUTHORITY_NAME) VALUES (1, 'ROLE_USER');
INSERT INTO USER_AUTHORITY (USER_ID, AUTHORITY_NAME) VALUES (1, 'ROLE_ADMIN');

- import.sql은 서버 restart시 실행할 쿼리를 입력하면됨, 글쓴이는 default 사용자 정보 권한을 입력하려고 넣었음

실행결과

Cannot find method 'value'

JaeSung Kim — Fri, 25 Nov 2022 11:16:16 +0900

jwt TokenProvider 구현중 Cannot find method 'value' 에러를 마주쳤습니다. 이 에러를 처리하는 방법에 대해 정리하려고 합니다.

해결방법

1. File-Settings에서 Annotation Processors에서 Enable annotation processing을 체크합니다.

2. 상단 import가 된 lombok 부분을 수정을 합니다.

수정전

import lombok.Value;

수정후

import org.springframework.beans.factory.annotation.Value;

application.yml을 열어서 jwt가 spring 하단으로 갔는지 체크합니다. (하단으로 가면 안됨)

spring:
  h2:
    console:
      enabled: true

  datasource:
    url: jdbc:h2:tcp://localhost/~/jwtdb
    driver-class-name: org.h2.Driver
    username: sa
    password:

  jpa:
    database-platform: org.hibernate.dialect.H2Dialect
    hibernate:
      ddl-auto: create
    properties:
      hibernate:
        format_sql: true
        show_sql: true

jwt:
  header: Authorization
  #HS512 알고리즘을 사용할 것이기 때문에 512bit, 즉 64byte 이상의 secret key를 사용해야 한다.
  #echo 'silvernine-tech-spring-boot-jwt-tutorial-secret-silvernine-tech-spring-boot-jwt-tutorial-secret'|base64
  secret: c2lsdmVybmluZS10ZWNoLXNwcmluZy1ib290LWp3dC10dXRvcmlhbC1zZWNyZXQtc2lsdmVybmluZS10ZWNoLXNwcmluZy1ib290LWp3dC10dXRvcmlhbC1zZWNyZXQK
  token-validity-in-seconds: 86400

오류가 사라진것을 확인할수 있습니다. yml에서 value를 가져올때 Cannot find method 'value' 에러를 마주치면, 해당 내용을 참고하면 될것 같습니다.

Cannot resolve symbol 'NotBlank', Cannot resolve symbol 'Pattern'

JaeSung Kim — Wed, 23 Nov 2022 14:08:43 +0900

- 회원가입 api를 개발할때 dto에서 유효성검사 관련 어노테이션을 사용하려고 하는데 해당에러를 마주칠경우 Gradle에서 start-validation을 추가하면 됩니다.

implementation 'org.springframework.boot:spring-boot-starter-validation'

위에 코드 build.gradle에 추가후 빌드하면 아래 이미지처럼 import를 할수 있는 창이 나옵니다.

intelij project 이름변경

JaeSung Kim — Tue, 22 Nov 2022 14:44:13 +0900

setting.gradle

rootProject.name = '프로젝트 이름'

- setting.gradle에서 rootProject 이름 변경후 rebuild

github에 project 올리기 (Share Project on Github)

JaeSung Kim — Tue, 22 Nov 2022 14:42:18 +0900

VCS - Share Project on GitHub

이후 OK 버튼 클릭

Arachni (아라크니) 웹취약성 무료 검사 툴 설치 및 사용방법

JaeSung Kim — Fri, 30 Sep 2022 13:19:51 +0900

설치방법

1. 해당 사이트 접속

https://www.arachni-scanner.com/download/

Download

Arachni is licensed under the Arachni Public Source License v1.0, requiring a non-free license for cases of commercialization. Please review the license before downloading. Current version: v1.6.1.…

www.arachni-scanner.com

2. 사용하는 컴퓨터 환경에 맞는 파일을 다운로드

- 경로는 전부 영문으로 이뤄줘야 되므로, c:\arachni 폴더를 만들고 해당 경로에 설치하겠습니다.

3. 아라크니 실행

아라크니 압축해제 한 폴더 bin 폴더안에 arachni_web.bat를 실행합니다.

4. 아라크니 사이트 접속

http://localhost:9292/

아라크니 폴더안에 README폴더를 열어보면 해당 사이트의 admin 계정이 default로 등록되어있습니다.

id : admin@admin.admin

pwd : administrator

해당 계정은 default로 등록된 계정입니다.

5. 로그인된 화면

6. 스캔하기

targetUrl에는 검사할 URL을 입력합니다. 인가되지않은 서버를 scan하면 불법이기 때문에 인가된서버에 하시기를 권장드립니다. 만약 취약성 검사를 했을때 google driver 98 error~가 뜨면 chrome 98version에서 아라크니를 사용할수 있는것 같아서, chrome을 98로 다운그레이드후 진행을 하면 정상적으로 진행이 됩니다.

chrom 버전다운그레이드 다운 홈페이지

https://google-chrome.en.uptodown.com/windows/download/4407134

Download Google Chrome 98.0.4758.82 for Windows | Uptodown.com

It arrives Mozilla successor... from the same creators A great browser to keep you organized while you work A browser that's geared towards gamers

google-chrome.en.uptodown.com

Window 10 CentOS 설치, 파이썬 3.8, pip-3 설치, 파이썬 파일 실행해보기

JaeSung Kim — Tue, 20 Sep 2022 14:04:15 +0900

안녕하세요. 회사에서 CentOS를 윈도우에 설치해보고, 파이썬을 실행해볼일이 있어서 방법을 포스팅해보겠습니다.

1. 해당 github에 들어가서 CentOS.zip을 다운로드 받습니다.

https://github.com/wsldl-pg/CentWSL/releases/tag/7.0.1905.1

Release 7.0.1905.1 · wsldl-pg/CentWSL

CentOS 7.6 1905 wsldl 19070200

github.com

2. 제어판 - 프로그램 - Windows 기능 켜기/끄기에서 Linux용 Windows 하위 시스템을 체크합니다.

3. 1번에서 받은 압축파일을 적당한곳에 압축해제 합니다. (CentOs를 실행하면 서버 환경을 해당 디렉터리에 해제해서 옮기기 어려우므로 잘지정해야합니다.)

- 저는 C:\centos 폴더에 해제하였습니다.

4. CentOS를 관리자 계정으로 실행을 하면 install이라고 써져있는 창이 뜨는데, 설치가 될때까지 기다립니다. 설치가 완료되면 해당 이미지처럼 디렉터리가 구성됩니다.

5. CentOs를 실행후 해당 명령어들을 입력합니다.

yum update

- centOS를 업데이트 해서 라이브러리들을 최신 라이브러리를 받습니다.

python --version

- 해당 명령어를 치면 기본으로 2.7.5 버전이 설치된것을 볼수 있습니다.

cd /home
https://www.python.org/ftp/python/3.8.1/Python-3.8.1.tgz

- 해당 명령어를 쳐서 home디렉터리 안에 python 3.8.1을 다운로드 받습니다.

tar xzf Python-3.8.1.tgz

- 받은 파이썬 압축파일을 해제합니다.

cd Python-3.8.1

- 설치된 파이썬 3.8.1 디렉터리로 이동합니다.

./configure --enable-optimizations

- configure을 실행해서 컴파일 합니다.

make altinstall

- 컴파일이 끝났으면 설치를 진행합니다.

which python3.8

- python3.8이 설치된 디렉터리를 찾습니다.

vi /root/.bashrc

alias python='/usr/local/bin/python3.8'
alias pip='/usr/local/bin/pip3.8'

- vi를 연후 alias로 python, pip를 등록해줍니다. pip 설치는 아래에서 진행해보겠습니다.

yum install epel-release
yum install python3-pip
rpm -qa | grep -i python3-pip
which pip3

- pip3란?

파이썬3 패키지 매니저로 예를 들면 소스에 import 되어있는 부분들을 사용하려면 먼저 pip로 해당 패키지를 설치를 해야합니다.

- requests를 사용하려면 구글 검색창에 pip3 requests 검색하면 해당 홈페이지가 나옵니다.

https://pypi.org/project/requests/

requests

Python HTTP for Humans.

pypi.org

여기에서 pip install requests를 복사후 centos에 입력을 하면 해당 패키지가 설치가 됩니다.

6. 파이썬 test 파일을 만들어보고 실행해보겠습니다.

- 메모장을 연후 해당 명령어를 작성후 저장합니다. (저는 이름을 test.txt로 저장했습니다.)

print('Hello, Python')

7. 해당 파일을 centos 안에 home 디렉터리에 넣은후 해당 명령어를 입력합니다.

python test.txt

- 파이썬파일이 잘 실행되었습니다.