신규 프로젝트에서 일명 코프링(Kotlin-Spring)을 하게 되어, 이 시리즈를 시작하게 되었습니다.

이 시리즈를 작성하면서 코프링을 배워가며, 나아가 가장 간단한 환경 설정부터 개발하면서 자프링과의 장단점 비교, 신규 문법들을 채워나갈 것입니다. 😊

1. 프로젝트 시작

1.1 프로젝트 셋업

새 프로젝트 생성

Kotlin-Spring 프로젝트를 할 것이기 때문에 위와 같이 선택했습니다.

• 언어: Kotlin
• 타입: Gradle-Kotlin
• Java Version: 17
• Spring Boot: 3.4.2

라이브러리 선택

간략한 실습을 위해 Spring Web을 추가하였습니다.

Lombok 이야기

Java-Spring 을 진행할 때는 무조건 Lombok을 선택했는데, Kotlin-Spring에서는 주로 사용하지 않는다고 합니다. 그 이유는 Kotlin의 Data Class가 롬복에서 지원하는 기능들을 기본적으로 제공해주기 때문입니다.

Data Class를 생성하면 기본적으로 Getter, Setter, toString, HashCode, equals를 제공하고, 적절한 변수 선언(val, var) 및 생성자를 통해 @RequiredArgsConstructor, @Builder를 대체할 수 있습니다.

IntelliJ 플러그인

IntelliJ로 Kotlin 프로젝트를 생성하면 아래의 플러그인이 자동으로 설정됩니다.

자프링, 코프링 뭐가 다를까?

새로운 기술을 대하는 IT인의 올바른 자세 -> "나를 가스라이팅한다"

사실 자프링이나 코프링이나 같은 스프링을 쓰기 때문에 문법적 차이를 제외하고 크게 다를 바 없다고 생각합니다.

초기 구성의 차이점을 짚어보자면 아래와 같이 써볼 수 있을 것 같습니다.

• 폴더명 변경: src/main/java -> src/main/kotlin
• 확장자 변경: .java -> .kt
• Gradle 파일 변경: build.gradle -> build.gradle.kts
• 문법 변경: 문법이 Java 스타일에서 Kotlin 스타일로 대거 변경됩니다.

2. Test Controller 작성

2.1 파일 생성하기

파일을 생성할 때, Java 클래스 대신 Kotlin 클래스를 선택해서 생성해야 합니다.

2.2 Hello World!

예시 화면

Controller 클래스를 생성하고 간단하게 Hello World를 응답하는 API를 구성해보았습니다.

Kotlin 함수 문법

Kotlin 함수의 기본 문법은 fun 키워드를 통해 정의하며 아래와 같이 쓸 수 있습니다.

fun 함수명 (매개변수): 반환타입 {}

예시 코드

아래의 코드는 함수를 사용하여 API를 만드는 예제 입니다.

package com.example.demo.controller

import org.slf4j.Logger
import org.slf4j.LoggerFactory
import org.springframework.http.HttpStatus
import org.springframework.http.ResponseEntity
import org.springframework.web.bind.annotation.RequestMapping
import org.springframework.web.bind.annotation.ResponseStatus
import org.springframework.web.bind.annotation.RestController

@RestController
class TestController {
    private val log: Logger = LoggerFactory.getLogger(TestController::class.java)

    // 간결화된 함수문
    @RequestMapping("/test")
    fun hello(): ResponseEntity<String> = ResponseEntity.ok("Hello World!")

    // 전형적인 함수
    @RequestMapping("/test2")
    fun hello2(): ResponseEntity<String> {
        return ResponseEntity.ok("Hello World!")
    }

    // 반환타입이 Any (Object 대체)
    @RequestMapping("/test3")
    fun hello3(): Any {
        return ResponseEntity.ok("Hello World!")
    }

    // 반환 타입이 Void
    @RequestMapping("/test4")
    @ResponseStatus(HttpStatus.OK)
    fun hello4() {
        log.info("Hello World!")
    }
}

아직까지는 Java와 달라진 점이 있다면 함수 문법 정도입니다

• 반환시 간결화된 Return 문 가능!
• 반환 타입 Void -> 선언 X
• 반환 타입 Object -> Any

💎 마치며

이번 포스팅에서는 코프링의 시작을 알리는 프로젝트 생성하기에 대해 다뤄보았습니다.

1. Terminal 설정

초기의 Terminal은 예쁘긴 하지만, 약간의 멋과 편의성을 위해 여러가지 세팅해보려고 합니다.

1.1 Terminal 테마

초기 화면

터미널 기본 환경설정

터미널을 켠뒤, 우측 상단의 터미널을 클릭하여 설정을 눌러주면, 아래와 같이 프로필(테마)을 설정할 수 있습니다

해당 프로필은 일반 옆 탭의 프로필 탭에서 보거나 변경할 수 있습니다.

1.2 neofetch

neofetch는 운영체제, 소프트웨어 및 하드웨어에 대한 정보를 예쁜 시각적인 방식으로 표시해주는 도구입니다.

neofetch GitHub 레포지토리에서 상세 정보를 볼 수 있습니다.

brew를 이용해 neofetch를 설치합니다.

brew install neofetch

그런 다음, neofetch 명령을 실행시켜보면, 아래와 같이 사과를 볼 수 있습니다.

터미널 실행 시마다 neofetch를 실행하게 하려면 터미널 설정을 변경해야 합니다.

저는 Z Shell을 설치해서 쓰고 있어, 아래와 같이 환경설정 파일에 반영해주었습니다.

echo "neofetch" >> ~/.zshrc
source ~/.zshrc

1.3 iTerm2

iTerm2란?

iTerm2는 MacOS에서 공식 터미널 대신 사용할 수 있는 가상 터미널입니다. 기존 터미널에서 제공하는 기능보다 더 편리하고 가독성을 높여주는 애플리케이션입니다.

brew를 이용해 iterm2를 설치합니다.

brew install iterm2

Spotlight를 통해 iterm을 실행시켜줍니다.

기본 터미널과 별개의 가상 터미널을 이용할 수 있습니다.

SSH Profile 등록하기

프로필 생성

iterm2를 열고, 상단의 Profiles 메뉴를 클릭해줍니다. ssh 접속할 프로필을 하나 생성해줍니다.

주요 설정 목록

• Name: 프로필명
• Tags: 태그 목록 설정
• Subtitle: 터미널에 나타날 서브 제목

iterm2는 터미널을 빠르게 열기 기능을 제공합니다. 이 때 Tag를 등록하면 Tag 별로 그룹핑해주고, 여러개 Tag 등록도 가능합니다.

비밀번호 관리

[상단 Window 메뉴 > Password Manager]를 눌러 입력할 계정을 추가해줍니다.

Password Manager 자동 실행

다시 Profiles로 돌아와서, Session 옵션 화면을 켭니다. Open password manager automatically 란을 활성화해줍니다.

2. Homebrew

2.1 Homebrew 란?

홈브루는 오픈소스 기반의 Mac OS용 패키지 매니저입니다.

패키지 매니저란, 컴퓨터 프로그램의 설치, 업그레이드, 구성, 제거 과정을 자동화하는 소프트웨어 도구들의 모임을 뜻합니다.

2.2 Homebrew 설치

홈브루 홈페이지에 접속해서 설치 명령어를 복사합니다.

Install command

/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

위의 명령을 실행하면, 홈브루 패키지 파일들을 다운받습니다. 비밀번호 입력 후, 다운로드가 완료되면 ENTER 키를 눌러줍니다.

후에는 자동으로 다운로드, 설치, 업데이트 과정을 거칩니다.

최종적으로, 터미널에서 사용하기 위해서는 환경변수로 등록해주어야합니다. Next Steps 아래 항목에 있는 명령들을 실행해줍니다.

echo >> /Users/twinkle/.zprofile
echo 'eval "$(/opt/homebrew/bin/brew shellenv)"' >> /Users/twinkle/.zprofile
eval "$(/opt/homebrew/bin/brew shellenv)"

이제 터미널에서 brew 명령어를 입력하면 사용할 . 수있습니다.

💎 마치며

💎 들어가며

React에서는 JWT로 로그인 기능을 구현한다는 것은 익히 들어 알고 있었지만, 왜 JWT를 이용하여 로그인을 해야하는 지는 감이 안잡혔습니다.

Spring + React 스택을 사용하면서 기존에 사용하던 Spring Security의 FormLogin 기능을 구조적으로 이용할 수 없기 때문에 JWT를 사용해야 된다는 것을 깨닫게 되었습니다.

• 기존의 Jsp 혹은 Thymeleaf 등의 Template Engine은 SSR (Server-Side-Rendering)으로, 서버 페이지이기 때문에 세션 정보를 관리할 수 있음
• 하지만 프론트를 프레임워크로 구현하게 되면 CSR (Client-Side-Rendering)으로, 서버 정보를 유지할 수 없음. ⇒ 유저를 어떻게 판별할 것인가?
• 정답은 JWT!

1. JWT

1.1 Definition

JWT는 Json Web Token의 약자로 JSON 객체로 정보를 안전하게 전송하는 방법을 정의하는 공개된 표준(RFC 7519)입니다.

JWT는 HMAC 알고리즘으로 비밀키를 사용하여 서명될 수 있고, RSA나 ECDSA를 사용한 공개/비공개 키 쌍으로도 서명될 수 있습니다.

1.2 JWT Structure

JWT 토큰에는 Header, Payload, Signature로 세가지 구성요소로 나뉘어 있으며, 아래와 같은 형태를 지닙니다.

HHHHH.PPPPP.SSSSS

출저: What is a JSON Web Token (JWT)?

Header

토큰의 첫번째 부분인 헤더(Header)에는 서명시 사용하는 서명 암호화 알고리즘(alg), 사용할 타입(typ) 등 메타 정보가 담겨있습니다.

보통 헤더는 두 부분으로 구성됩니다.

• 토큰의 종류 : JWT
• 사용되는 서명 알고리즘 : HMAC, SHA256, RSA

{
  "alg": "HS256",
  "typ": "JWT"
}

그리고 이 내용들은 JWT를 구성하기 위해 Base64Url로 인코딩됩니다.

Payload

토큰의 두번째 부분인 페이로드(Payload)에는 토큰에 담을 정보가 들어있으며, 담는 정보의 한 조각을 클레임(claim)이라고 부릅니다.

클레임에는 크게 세가지 분류로 나뉘어 있습니다.

1. 등록된(registered) 클레임
2. 공개(public) 클레임
3. 비공개(private) 클레임

등록된 클레임

먼저 등록된 클레임은 서비스에서 필요한 정보들이 아닌 토큰에 대한 정보를 담기 위해 이름이 이미 정해진 클레임들입니다.

• iss: 토큰 발급자 (issuer)
• sub: 토큰 제목(subject)
• aud: 토큰 대상자(audience)
• exp: 토큰 만료시간(expiraton), 형식은 NumericDate로 되어 있어야합니다. (예: 1480849147370)
• nbf: Not Before를 의미하며, 토큰의 활성 날짜와 비슷한 개념입니다. 이 날짜가 지나기 전까지는 토큰이 처리되지 않습니다.
• iat: 토큰이 발급된 시간(issued at), 이 값을 사용하여 토큰의 age가 얼마나 되었는지 판단할 수 있습니다.
• jti: JWT의 고유 식별자로서, 주로 중복적인 처리 방지를 위해 사용됩니다.

각 클레임들은 선택적(optional)으로 포함할 수 있습니다.

공개 클레임

공개 클레임은 사용자 정의 클레임으로, 공개용 정보를 위해 사용됩니다. 충돌을 방지하기 위해서는, 클레임 이름을 URI 형식으로 짓습니다.

{
    "https://localhost/jwt_claims/is_admin": true
}

비공개 클레임

비공개 클레임은 사용자 정의 클레임으로, 서버와 클라이언트 사이에 임의로 지정한 정보를 저장합니다.

{
    "username": "admin"
}

완성된 예시 페이로드

{
  "username": "admin",
  "auth": "ROLE_USER,ROLE_ADMIN",
  "https://localhost/jwt_claims/is_admin": true
  "exp": 1724135496,
  "iat": 1724133696
}

Signature

토큰의 마지막 부분인 서명(Signature)은 토큰을 인코딩하거나 유효성을 검증할 때 사용하는 고유한 암호화 코드입니다.

서명(Signature)을 만들기 위해서는 위에서 만든 헤더(Header)와 페이로드(Payload)의 값을 각각 BASE64로 인코딩하고, 인코딩한 값을 비밀 키를 이용해 헤더(Header)에서 정의한 알고리즘으로 해싱하고, 이 값을 다시 BASE64로 인코딩하여 생성합니다.

1. 헤더, 페이로드 Base64 인코딩
2. 인코딩한 값을 해싱 (Header의 'alg' 알고리즘 + 비밀 키)
3. 해싱한 값을 다시 Base64 인코딩
4. Signature 완성!

2. Spring + React 로그인

Spring과 React는 각각 Server, Client로 볼 수 있습니다.

Process

로그인 프로세스는 다음과 같습니다.

1. 클라이언트 단에서 사용자가 id, password를 이용해 로그인을 요청합니다.
2. 서버에서 사용자 확인시 미리 정의된 Secret Key와 알고리즘을 통해 Access Token을 발급합니다. (+ 이 때 Refresh Token도 함께 고려될 수 있습니다)
3. 클라이언트에 로그인 성공과 함께 jwt 토큰을 전달합니다
4. 클라이언트는 각 서비스 요청시에 헤더에 jwt 토큰을 넣어 전달합니다.
5. 서버는 요청 처리 전 JWT 서명을 체크하고, JWT 토큰을 분해하여 사용자 정보를 확인합니다.
6. 서버는 클라이언트 요청에 대한 응답을 전달합니다

in Spring

Spring에서는 다음과 같은 항목을 구현해야 합니다.

• DB 연동하여 로그인 요청 프로세스 구현 (AuthenticationProvider 구현)
• 로그인 시 JWT 토큰 발급 (Token Provider 구현)
• Request 요청시 Header에서 JWT 토큰을 통해 사용자 인증 정보 획득 (JwtRequestFilter 구현)

in React

React에서는 다음과 같은 항목을 고려해야 합니다.

• 로그인 요청시 받은 JWT 토큰 저장
• 매 요청시 헤더에 JWT 토큰 추가

💎 References

• Introduction to JSON Web Tokens
• What is a JSON Web Token (JWT)?
• [JWT] JSON Web Token 소개 및 구조

💎 마치며

이번 포스팅에서는 다음과 같은 항목에 의해 포스팅하였습니다.😊

• JWT란 무엇인지
• JWT를 이용하여 Spring과 React가 어떤 프로세스로 동작하는지
• 각 프로그램에서 어떤 것을 구현해야 되는지

다음 포스팅에서는 Spring에서 구현해야될 항목에 대해 포스팅하겠습니다~🙌

💎 들어가며

게시판 프로젝트를 하는 이유?!

단순한 CRUD 성의 프로젝트지만, Spring Boot 3와 React를 연동하고 결과물을 내는데 의의가 있습니다.

가벼운 프로젝트지만 여러가지를 내포하고 있습니다.

• 회사에서 개발한 프로젝트는 비공개이기 때문에 공개성 프로젝트
• Java 17, Spring Boot 3 기반 프로젝트
• Spring Security 6 버전 연동
• Spring + React 개발 환경 설정
• Spring + React JWT 로그인

1. 개발환경

• Java: 17
• Spring Boot: 3.3.2
• Build Tool: Gradle
• Node: 20.15.1
• React: 18.3.1
• IDE: IntelliJ, WebStorm

위의 환경에서 개발하였습니다. ⚠️ 버전에 따라 코드가 다를 수 있습니다.

2. 개발환경 세팅

개발환경 세팅 먼저 시작해보도록 하겠습니다~!

2.1 Spring 프로젝트 설정

프로젝트 생성

Spring Initializer를 통해 프로젝트를 생성합니다.

새 프로젝트	라이브러리 추가

Project 초기화면입니다.

application.properties를 application.yml로 확장자를 변경하고, 아래와 같이 환경설정 정보를 넣어주었습니다.

spring:
  application:
    name: board
  # DataSource Configuration
  datasource:
    url: jdbc:postgresql://127.0.0.1:5432/board
    username: postgres
    password:
  jpa:
    database-platform: org.hibernate.dialect.PostgreSQLDialect
    hibernate:
      ddl-auto: create-drop
  devtools:
    restart:
      enabled: true
server:
  port: 8080
logging:
  level:
    org.springframework.web: info

현재 시간 API 추가: /api/time

프론트 연동을 테스트 하기 위해 현재 시간을 가져오는 간단한 API를 추가하였습니다.

ApiController 클래스를 생성하였습니다.

package io.github.twinklekhj.board.api;

import lombok.extern.slf4j.Slf4j;
import org.springframework.http.ResponseEntity;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.RestController;

import java.time.LocalDateTime;
import java.time.format.DateTimeFormatter;

@RestController
@Slf4j
public class ApiController {
    @GetMapping("/api/time")
    public ResponseEntity<String> getTime() {
        DateTimeFormatter dtf = DateTimeFormatter.ofPattern("yyyy-MM-dd HH:mm:ss");
        return ResponseEntity.ok().body(LocalDateTime.now().format(dtf));
    }
}

2.2 React 프로젝트 설정

CRA 프로젝트 생성

터미널을 열어 React 프로젝트를 생성합니다. 저는 TypeScript 기반 프로젝트를 CRA로 생성하였습니다.

cd src/main
npx create-react-app frontend --template typescript

PS D:\Git\board\src\main> npx create-react-app frontend

Creating a new React app in D:\Git\board\src\main\frontend.

Installing packages. This might take a couple of minutes.
Installing react, react-dom, and react-scripts
with ccra-template-typescript...

Front IDE를 열어 프로젝트를 실행해줍니다. (저는 WebStorm을 이용하였습니다.)

http://localhost:3000 로 접속할 수 있습니다.

API 호출

fetch 메소드를 이용하여 API를 호출하는 코드를 예시로 작성해보았습니다.

// 파일 위치: src/App.tsx
import React, {useEffect} from 'react';

const App = () => {
    const [time, setTime] = React.useState("");
    useEffect(() => {
        fetch("http://localhost:8080/api/time", {
            method: "GET"
        })
            .then(res => {
                if (!res.ok) {
                    throw new Error('Network response was not ok');
                }
                return res.text();
            })
            .then(res => {
                setTime(res)
            })
            .catch(err => console.error(err));
    }, [])
    return (
        <div>
            Hi, Server time is {time}
        </div>
    );
};

export default App;

냅다 호출코드에 url을 적으면 문제가 발생하리란 걸 아실 겁니다.

바로 CORS 문제!!

CORS란?

CORS(Cross-Origin Resource Sharing)는 직역하면 "교차 출처 리소스 공유"로 URL에서 도메인만 뜻하는 게 아니라 프로토콜과 포트까지 포함하는 개념입니다.

출처를 구성하는 세 요소는 프로토콜·도메인(호스트 이름)·포트로, 이 중 하나라도 다르면 CORS 에러를 만나게 됩니다.

Proxy 설정

React에서 다른 애플리케이션을 호출할 때 생기는 CORS를 해결하기 위해서 Proxy 설정이 꼭 필요합니다.

React에서는 두가지 방법을 제공합니다.

1. package.json에 proxy 프로퍼티에 url 추가
2. http-proxy-middle 라이브러리 설치 및 설정 스크립트 추가

package.json

package.json에 프로퍼티를 추가하는 방법은 간단합니다.

http-proxy-middleware

아래 명령어를 통해 http-proxy-middleware 모듈을 설치해줍니다.

npm install http-proxy-middleware --save
npm install @types/http-proxy-middleware

아래와 같이 설정합니다.

• React 프로젝트 아래에 .env 파일 생성
• src 폴더 아래에 setupProxy.js 파일 생성

파일을 넣기만 하면 자동으로 설정합니다.

주의! ts 파일로 생성하면 자동으로 생성되지 않습니다.

// 파일 위치: frontend/.env
REACT_APP_API_URL=http://localhost:8080/api

// 파일위치: frontend/src/setupProxy.js

import { createProxyMiddleware } from 'http-proxy-middleware';

const { REACT_APP_API_URL } = process.env;
module.exports = function (app: any) {
    app.use(
        '/api',
        createProxyMiddleware({
            target: REACT_APP_API_URL || 'http://localhost:8080/api',
            changeOrigin: true,
        })
    );
};

이제 fetch 코드에서 api url을 빼줍니다.

fetch("/api/time", {
  method: "GET",
})
.then(res => {
  if (!res.ok) {
    throw new Error('Network response was not ok');
  }
  return res.text();
})
.then(res => {
  setTime(res)
})
.catch(err => console.error(err));

결과 화면

2.3 Gradle 빌드 설정

Spring Boot 빌드 배포시 자동으로 react 파일을 import 하도록 배포 자동화를 설정할 수 있습니다. build.gradle 파일을 열어 하단에 아래 내용을 추가해줍니다.

빌드 스크립트 작성

processResources {
    dependsOn "copyReactBuildFiles"
    duplicatesStrategy = DuplicatesStrategy.INCLUDE
}

// react 설치
tasks.register('installReact', Exec) {
    workingDir("$frontendDir")
    inputs.dir("$frontendDir")
    group = BasePlugin.BUILD_GROUP
    if (System.getProperty('os.name').toLowerCase(Locale.ROOT).contains('windows')) {
        commandLine "npm.cmd", "audit", "fix"
        commandLine 'npm.cmd', 'install'
    } else {
        commandLine "npm", "audit", "fix" commandLine 'npm', 'install'
    }
}

// react 빌드
tasks.register('buildReact', Exec) {
    dependsOn "installReact"
    workingDir "$frontendDir"
    inputs.dir "$frontendDir"
    group = BasePlugin.BUILD_GROUP
    if (System.getProperty('os.name').toLowerCase(Locale.ROOT).contains('windows')) {
        commandLine "npm.cmd", "run-script", "build"
    } else {
        commandLine "npm", "run-script", "build"
    }
}

// react build 파일 static 폴더로 복사
tasks.register('copyReactBuildFiles', Copy) {
    dependsOn "buildReact"
    from "$frontendDir/build"
    into "$project.projectDir/src/main/resources/static"
}

Spring Boot 프로젝트가 build 될 때 실행시키는 스크립트 입니다.

• React 프로젝트가 먼저 build
• 결과물을 SpringBoot 프로젝트 build 결과물에 포함

결과 화면

Spring 프로젝트를 실행만 하더라도 아래와 같이 화면이 구성된 것을 볼 수 있습니다.

💎 References

• Spring Boot + React.js 개발환경 연동하기
• CORS(교차 출저 리소스 공유)

💎 마치며

이것으로 환경 설정이 마무리 되었습니다!! 다음 포스팅에서는 JWT를 이용한 Spring + React 로그인에 대해 포스팅하겠습니다🙌

마야흐로 1년전 백수가 먼저 된 친구와 이야기하면서 사랑니 치료에 대해 알게되었습니다. 백수 시절에 사랑니를 발치했다고... 일 안다닐때 가는게 좋다더군요!!🤗

화이트덴트 치과

약 5개월 전, 그 말이 떠올라 그렇게 무작정 집 앞에 화이트덴트 치과에 갔습니다. ⭐

화이트 덴트 치과 바로가기

개업한 지도 얼마 안됐고, 치과들은 대부분 인테리어가 화이트 톤에 예쁘더라구요~

시작된 검사

"사랑니 발치하고 싶어서 왔어요. 치과는 처음이니 종합검진 해주세요"

종합 검진을 받고 관리가 전혀 안된다는 말을 들었어요. 제 입장에선 당연한 결과라 그리 충격적이진 않았습니다. 치과에 간게 처음이니까요.🤣

하지만 그 말을 듣고, 치과도 건강 검진처럼 주기적으로 가서 검진을 해봐야 되겠다는 생각이 들었습니다.

종합검진 요약해보자면

• 주기적으로 스케일링할 것
• 레진 치료 2개
• 사랑니 발치 4개
• 크라운을 뜯고 검사해볼 것

스케일링

종합 검진 그 후, 난생 처음으로 스케일링을 받았습니다. 28살이 되도록 내 발로 직접 치과에 간건 처음이라, 너무 너무 무서웠어요😢

하지만...!! 그 막연한 두려움이 스케일링을 받고 어마 무시한 두려움으로 바꼈습니다. 체감상 약 5-10분 정도 한 거같은데 세상이 안끝나는 거 같더라구요. 아직도 스케일링을 생각하면 끔찍해요🤢🤢

치료하면서 간호사님이 너무 긴장한거 같다구 춘식이 인형을 갖다 주시더라구요 ㅎㅎ

스케일링이 1년에 한번 건강보험 적용 혜택이 있다는 건 알았지만, 정확히 어떻게 적용된다는 건지도 이해를 못했었는데, 그냥 일반 병원가듯이 가면 되는 거였어요..!!

건강보험 가입자라면 1년에 1회에 한에 약 1만 5천원 정도로 스케일링을 받을 수 있습니다

본격적인 사랑니 발치 계획

엑스레이 검사

본격적인 사랑니 발치 계획을 세우기 위해 치아 전체의 엑스레이를 찍었습니다. 기구에 치아를 악물면서 엑스레이를 찍었습니다.

"사랑니가 4개 있으시군요. 위에 2개는 이미 썩었습니다.🤢 뽑는 건 선택이지만, 뽑는 게 좋을 거 같네요. 우선 급한 위에 사랑니 1개를 발치하겠습니다. 한개씩 밖에 안뽑아요~"

사실 스케일링으로 너무 지쳐있던 나머지, 더 남았다는 사실이 무서워서 2개를 뽑을 엄두도 안났어요.🤣 모두 친절하게 잘 해주셔서 왕추천..!!!

발치 계획

• 3/12 (당일) - 왼쪽 위 사랑니 발치. 스케일링 및 엑스레이 포함 약 5.5
• 3/26 (그후 일주일) - 오른쪽 위 사랑니 발치. 약 2.8

일반 사랑니 빼는 건 얼마 안하더라구요

발치한 치아

두근 두근..!!

제 발치한 치아입니다... 너무 더럽네요...😣 변명을 해보자면 입안 구조가 작은 탓에 가장 깊숙히 숨어 있던 놈입니다.. ㅎㅎ 사랑니가 이렇게 관리가 안되요~

그렇게 처음 사랑니를 빼고 집에 가면서, 가고서 며칠 동안 하나도 안아팠어요!!! 화이트덴트 치과 여기 사랑니 맛집이에요!!! 나머지 3개의 사랑니를 빨리 빼고 싶더라구요. 그 후 일주일 뒤에는 일주일 씩 빼는게 너~무 느리고 아프지도 않아서 사랑니 두개를 빼달라고 요청했더니..

Me: 사랑니 두 개도 발치 가능한가요? 간호사: 환자분, 용기가 너무 가득해지셨는데요???

춘식이 주신 간호사님의 용기가 가득하단 말을 듣고 너무 웃겨서 한참을 웃었습니다. 🤣🤣

But... 결국 한개를 발치하게 됐어요. 우선, 일반 치과 병원에는 매복 사랑니를 발치해주지 않는다고 해요.. 그리고 어려운 치아(신경과 가까운 치아)도 발치해주지 않아요. (찾아보니 치료 거절 사례가 상당하더라구요)

치아는 신경이 예민해서 조금만 건드려도 얼굴 하관에 마비가 올 수 있다고 하더라구요. 그래서 일반병원에서는 못하고 전문병원을 가야된다고 합니다. 또, 그런 이유로 사랑니를 발치할 때마다 서약서를 작성합니다.

2. 사랑니 전문 병원에 가다

기존 치과에서의 거절 끝에 사랑니 전문 병원을 탐색했어요. 역시 장소 검색은 Naver..!! 가장 가까운 병원인 퍼스트 사랑니 치과를 보면서 꽉 차있는 예약과 후기가 좋아서 선택했어요!💕

네이버 플레이스 1등이라 더 믿음직 스러웠답니다.!

퍼스트 사랑니 치과

2024.07.17 기준 예약 목록

퍼스트 사랑니 치과 바로가기

가자마자 문진표 작성 후, 바로 엑스레이를 찍었습니다! 치과는 병원 기록이 공유가 되지 않아서 치과를 옮길 때마다 엑스레이같은 경우도 다시 찍어야됩니다.

처음부터 여기를 왔더라면 엑스레이 비용을 두번 내지 않았을 거 같다는 생각이.... 들었지만, 여기는 사랑니 전문 병원이라 사랑니 발치 외엔 거의 진료를 보지 않습니다..!! 어찌됐든 다른 치과는 필요했던 것이었죠. 🤗

진료 받으려고 누워있는데, 한번에 거의 세명씩 누워 있더라구요.

사랑니 발치

이번에는 아래 사랑니 두개를 발치해버렸습니다. 이 치과에서도 사랑니를 두개 발치하는 것을 권장하지는 병원을 또 가야되는게 너무 귀찮은 나머지, 두개를 한번에 발치해버렸습니다.

한개 뽑을 때랑은 달리 아래 사랑니 두개를 뽑아버려서 첫, 둘째 날은 죽만 먹었어요 😢😢 게다가 더 심각한건 매복 사랑니를 뺀 덕분에 치통이 발생하기 시작했습니다...

사랑니를 뺄 때도 옆에 치아를 건드리는 매복 사랑니는 옆에 치아를 계속 건드려서 썩기 때문에, 발치하게 되면 그 옆 치아는 신경치료를 해야될 거라고 하더라구요

가격은 사악했습니다.. 두개 빼서, 약 20만원 정도 깨졌어요

3. 신경 치료 시작

시리고 아프고 말로 형용할 수 없는 치통으로 진통제로 겨우 버티며 4일을 고생하다 먼저 갔던 치과로 달려갔어요.

너무 아픈 치통으로 바로 신경치료를 시작하고 싶었지만, 사랑니 발치를 얼마 하지 않은 상태여서 치아가 자리 잡지 않았다고 하더군요.. 약 5일을 기다려 신경 치료를 시작했습니다.

Me: 신경 치료, 많이 아픈가요..? 의사: 사랑니는 발치하면 끝이지만 신경치료는 오래걸리고 계속 아파요

치료하다 보니 너무너무 아프더라구요... 한 번은 밥먹다가 갈비탕을 먹었는데 잘게 안잘랐다가 잘못해서 해당 이빨을 건드려서 순간 너무 아파서 엉엉 눈물 흘려버리고 밥을 안먹은 적이 있었네요...😂

그래도 진통제로 버틸 때보단 나을 거라는 기약 때문인지 참을 만 했어요. 🤦‍♀️

신경치료 일정

기억은 잘 안나지만 본뜨고 한 일주일 정도 기다려서, 치료 만으로 약 3주, 검진부터는 약 한달이 소요됐어요.

• 사랑니 발치: 5/6
• 검진: 5/11
• 1차: 5/16 신경 긁어내기
• 2차: 5/21 신경 긁어내기
• 3차: 5/24 신경 채우기
• 4차: 5/31 본뜨기
• 5차: ?.? 크라운 씌우기

신경치료 가격

신경치료 후 반드시 덧씌워야(크라운)되기 때문에 약 60만원 정도 깨집니다.

• 신경 치료는 약 9만원
• 크라운은 약 50만원

치과 치료를 받은 지 오래되셨다면 무조건 보험부터 들고 계획을 세우고 가세요.... 보험 들 생각을 안했던 저는 생돈을 전부 냈답니다..😢

신경치료 과정

신경 치료는 신경을 죽이고 긁어내서 채우고 크라운을 씌우는 과정이에요.

두-세번 방문하여 신경을 긁어내고, 신경을 채운 다음, 이빨을 본을 뜨고 크라운을 제작한 다음 이빨 위에 씌워요.

💎 마치며

길고 길었던 치과 치료... 약 90만원 정도 깨진거 같네요 🤦‍♀️ 그치만 적어도 지금은 치아 관리에 대해 조금은 알게 되었습니다. 주기적으로 치아관리를 위해 노력할 예정입니다!

이번 포스팅에서는 Spring에서 ActiveMQ를 세팅하고 구현하는 과정에 대해 기술하였습니다.

1. 구현에 앞서

Spring에서 ActiveMQ 클라이언트를 구현하기 앞서 필요한 JMS 주요 개념을 먼저 살펴보겠습니다.

1.1 JMS

ActiveMQ는 Java로 개발된 MQ 미들웨어로, JMS를 기반으로 통신을 제어합니다. 즉, ActiveMQ는 JMS의 구현체입니다.

JMS란?

MOM (메시지 지향 미들웨어)를 구현한 자바 API

JMS의 주요 구성요소

공통 인터페이스

• ConnectionFactory: Connection 연결 설정 정보 관리 인터페이스.
• Session: 연결 세션 관리 인터페이스. Producer, Consumer, Listener, Message 등 관리 기능 수행.
• Destination: 목적지 인터페이스. 메세지를 수신받을 목적지 (Consumer 의 주소)
• Message: 전송 할 메시지 인터페이스.

메세지 방식 인터페이스

• Queue: Queue는 특정 Consumer에게 메시지 전송
• Topic: Topic은 발행(Publish)-구독(Subscribe) 모델로, Topic 구독자에게 메시지 전송

메시지 송수신 인터페이스

• MessageProducer: 메시지 전송 인터페이스
• MessageConsumer: 메시지 수신 처리 인터페이스
• MessageListener: 메시지 수신 처리 콜백 인터페이스

JMS 연결 순서

1. 메시지 브로커 연결을 위한 Connection Factory 생성
2. 큐, 토픽 중 방식을 선택하여 Destination 생성
3. 브로커 서버 연결 ⇒ 세션 취득
4. 메시지 Producer나 Consumer를 생성하여 메시지 송수신
5. Exception 처리
6. 세션 및 연결 닫기

Java 예시 코드

@RequiredArgsConstructor
@Slf4j
class MessageService {
  public boolean send(String message) {
      // 1. ActiveMQ ConnectionFactory 생성
      ConnectionFactory connectionFactory = new ActiveMQConnectionFactory("tcp://localhost:61616");
      Connection connection = connectionFactory.createConnection();

      // 2. 목적지(Destination) 생성
      // 2.1 큐(Queue) 생성
      Queue queue = new ActiveMQQueue("Queue 이름");

      // 2.2 토픽(Topic) 생성
      Topic topic = new ActiveMQTopic("Topic 이름");

      // 6. Try 문에서 객체를 생성하여 Auto-close
      try (ActiveMQConnection connection = (ActiveMQConnection) connectionFactory.createConnection();
           ActiveMQSession session = (ActiveMQSession) connection.createSession(false,  ActiveMQSession.AUTO_ACKNOWLEDGE)) {

          // 3. 세션 취득
          connection.start();

          // 4. 목적지 전송
          // 4.1 Producer 생성
          MessageProducer producer = session.createProducer(queue);
          producer.setDeliveryMode(DeliveryMode.PERSISTENT);

          // 4.2 Message 생성
          Message m = session.createTextMessage(message);

          // 4.3 Message 전송
          producer.send(m);

          log.info("ActiveMQ 메세지 전송. 메세지: {}", message);

          return true;
      }
      // 5. Exception 처리
      catch (JMSException e) {
          log.error("JMS 에러 발생. 메시지: {}", e.getMessage());
          return false;
      }
  }
}

JmsTemplate

자바에서 제공하는 기본 API인 JMS를 이용하면 JDBC와 유사하게 연결부터 데이터 송수신까지 수많은 보일러플레이트 코드를 작성해야합니다.

스프링은 템플릿 기반으로 JMS 코드를 단순화하는 솔루션을 제공합니다. JMS 템플릿 클래스 JmsTemplate을 이용하면 소량의 코드만으로도 JMS 메시지를 주고받을 수 있습니다.

2. Spring Boot 설정

2.1 Project Setting

프로젝트 생성

우선 테스트 프로그램을 만들기 위해 Spring Initializr를 이용해 프로젝트를 생성하였습니다.

• 프로젝트명: mqclient
• Java: 17
• Spring Boot: 3.3.1

프로젝트 환경 설정	종속성 추가

이번 포스팅에서 다루지는 않을 예정이지만, Spring Web + Thymeleaf + WebSocket을 추가하여 Front에서 기능을 구현하면 실시간 채팅 애플리케이션을 구현할 수 있습니다

라이브러리 추가

추가적으로 Lombok 및 Json 관련 라이브러리를 추가해주었습니다

<properties>
  <java.version>17</java.version>
  <jackson.version>2.17.2</jackson.version>
</properties>

<!-- Lombok -->
<dependencies>
  <dependency>
    <groupId>org.projectlombok</groupId>
    <artifactId>lombok</artifactId>
  </dependency>

  <!-- JSON -->
  <dependency>
    <groupId>org.json</groupId>
    <artifactId>json</artifactId>
    <version>20231013</version>
  </dependency>
  <dependency>
    <groupId>com.fasterxml.jackson.core</groupId>
    <artifactId>jackson-core</artifactId>
    <version>${jackson.version}</version>
    <scope>provided</scope>
  </dependency>
  <dependency>
    <groupId>com.fasterxml.jackson.core</groupId>
    <artifactId>jackson-databind</artifactId>
    <version>${jackson.version}</version>
    <scope>provided</scope>
  </dependency>
  <dependency>
    <groupId>com.fasterxml.jackson.datatype</groupId>
    <artifactId>jackson-datatype-jsr310</artifactId>
    <version>${jackson.version}</version>
  </dependency>
</dependencies>

롬복 플러그인 설정

<plugin>
  <groupId>org.springframework.boot</groupId>
  <artifactId>spring-boot-maven-plugin</artifactId>
  <configuration>
    <excludes>
      <exclude>
        <groupId>org.projectlombok</groupId>
        <artifactId>lombok</artifactId>
      </exclude>
    </excludes>
  </configuration>
</plugin>

ActiveMQ 5.18.4 다운로드

최신버전은 6.x 지만 라이브러리가 Spring for Apache ActiveMQ 5 이므로 5.x를 다운받았습니다.

2.2 Configuration

application.yml

application.yml 파일에 사용할 브로커의 설정 값을 입력합니다.

spring:
  activemq:
    broker-url: tcp://localhost:61616 # ActiveMQ Broker URL
    user: admin       # ActiveMQ 웹 관리 콘솔 아이디
    password: admin   # ActiveMQ 웹 관리 콘솔 비밀번호

이 설정 값들은 ActiveMQProperties 객체로 활용이 가능합니다.

// ActiveMQ Class 내부
@ConfigurationProperties(
    prefix = "spring.activemq"
)
public class ActiveMQProperties {
    private static final String DEFAULT_NETWORK_BROKER_URL
                    = "tcp://localhost:61616";
    private String brokerUrl;
    private String user;
    private String password;
    private Duration closeTimeout = Duration.ofSeconds(15L);
    private boolean nonBlockingRedelivery = false;
    private Duration sendTimeout = Duration.ofMillis(0L);
    @NestedConfigurationProperty
    private final JmsPoolConnectionFactoryProperties pool = 
                    new JmsPoolConnectionFactoryProperties();
    private final Packages packages = new Packages();
}

Config 클래스 생성

ActiveMQ에서 사용할 Bean들을 관리하기 위한 클래스를 생성하고, @Configuration을 이용하여 설정합니다.

ActiveMQ에서 사용할 Bean 들에는 ConnectionFactory, JmsTemplate, Queue, Topic, MessageConverter, JmsListenerContainerFactory 등이 있습니다.

초기 설정에는 ConnectionFactory 및 JmsTemplate을 추가해주었습니다.

import org.apache.activemq.ActiveMQConnectionFactory;
import org.springframework.boot.autoconfigure.jms.activemq.ActiveMQProperties;
import org.springframework.boot.context.properties.EnableConfigurationProperties;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.jms.core.JmsTemplate;

@Configuration
@EnableConfigurationProperties(ActiveMQProperties.class)
public class ActiveMQConfig {
    @Bean
    public ActiveMQConnectionFactory connectionFactory(ActiveMQProperties properties) {
        ActiveMQConnectionFactory factory = new ActiveMQConnectionFactory(properties.getBrokerUrl());
        factory.setUserName(properties.getUser());
        factory.setPassword(properties.getPassword());
        factory.setCloseTimeout(properties.getCloseTimeout().toMillisPart());

        return factory;
    }

    @Bean
    public JmsTemplate jmsTemplate(ActiveMQConnectionFactory factory) {
        JmsTemplate template = new JmsTemplate(factory);
        template.setExplicitQosEnabled(true);    // 메시지 전송 시 QOS을 설정
        template.setDeliveryPersistent(false);   // 메시지의 영속성을 설정
        template.setReceiveTimeout(1000 * 3);    // 메시지를 수신하는 동안의 대기 시간을 설정(3초)
        template.setTimeToLive(1000 * 60 * 30);  // 메시지의 유효 기간을 설정(30분)

        return template;
    }
}

@EnableConfigurationProperties 어노테이션을 활용하여 ActiveMQProperties 객체를 바인딩해주었습니다

MessageConverter 등록

Java 객체를 JSON 형태로 변환하기 위해서는 Converter를 등록해야합니다. ActiveMQConfig 클래스에 다음과 같이 Converter를 추가해줍니다.

@Bean
public MappingJackson2MessageConverter messageConverter() {
    MappingJackson2MessageConverter messageConverter =
            new MappingJackson2MessageConverter();
    messageConverter.setTypeIdPropertyName("_typeId");

    // VO 타입 추가하기
    Map<String, Class<?>> typeIdMappings = new HashMap<>();
    typeIdMappings.put("chat", ChatMessage.class);

     essageConverter.setTypeIdMappings(typeIdMappings);

    return messageConverter;
}

추가한 Converter를 JmsTemplate에 추가해줍니다.

@Bean
public JmsTemplate jmsTemplate(ActiveMQConnectionFactory factory, 
                                MappingJackson2MessageConverter messageConverter) {
    JmsTemplate template = new JmsTemplate(factory);
    template.setMessageConverter(messageConverter); // 메시지 Converter 설정

    ... (중략)

    return template;
}

3. Message 송수신

이제 간단한 Message 송수신을 구현해볼 차례입니다!

3.1 VO 구현

우선, 메시지를 VO 객체로 구현합니다. 저는 Chatting Message를 구현했습니다.

@Data
@Builder
@NoArgsConstructor
@AllArgsConstructor
public class ChatMessage {
    private String userId;
    private String msg;

    @JsonSerialize(using = CustomLocalDateTimeSerializer.class)
    @JsonDeserialize(using = CustomLocalDateTimeDeserializer.class)
    private LocalDateTime date;
}

LocalDataTime 처리

직렬화, 역직렬화 예시를 보여주기 위해 VO 객체 필드에 많이 사용하는 LocalDateTime 객체를 추가했습니다.

LocalDateTime 객체는 json 형태로 자동 변환을 지원하지 않아서 직렬화 및 역직렬화를 직접 구현해야합니다.

// 직렬화 코드
@JsonComponent
public class CustomLocalDateTimeSerializer extends StdSerializer<LocalDateTime> {
    private static final DateTimeFormatter DATE_TIME_FORMATTER = DateTimeFormatter.ofPattern("yyyy-MM-dd'T'HH:mm:ss");

    public CustomLocalDateTimeSerializer() {
        this(null);
    }

    protected CustomLocalDateTimeSerializer(Class<LocalDateTime> t) {
        super(t);
    }

    @Override
    public void serialize(LocalDateTime localDateTime, JsonGenerator jsonGenerator, SerializerProvider serializerProvider) throws IOException {
        jsonGenerator.writeString(localDateTime.format(DATE_TIME_FORMATTER));
    }
}

// 역직렬화 코드
@JsonComponent
public class CustomLocalDateTimeDeserializer extends StdDeserializer<LocalDateTime> {
    private static final DateTimeFormatter DATE_TIME_FORMATTER = DateTimeFormatter.ofPattern("yyyy-MM-dd'T'HH:mm:ss");

    public CustomLocalDateTimeDeserializer() {
        this(null);
    }

    public CustomLocalDateTimeDeserializer(Class<?> vc) {
        super(vc);
    }

    @Override
    public LocalDateTime deserialize(JsonParser jsonParser, DeserializationContext deserializationContext) throws IOException {
        JsonNode node = jsonParser.getCodec().readTree(jsonParser);
        String dateString = node.asText();
        return LocalDateTime.parse(dateString, DATE_TIME_FORMATTER);
    }
}

3.2 Destination 관리

현업에서는 메세지 프로토콜이 이미 정의되어 있기 때문에 Destination (Queue, Topic) 등을 String으로 보낼 필요가 없습니다.

properties 설정

application.yml 파일에 사용할 Queue와 Topic의 이름을 관리합니다.

# 파일명: application.yml

activemq:
  queue:
    chat: chat
  topic:
    chat: chat

환경설정 클래스 수정

환경설정 클래스(ActiveMQConfig)에 Bean을 추가하여 해당 Destination을 싱글톤 객체로 관리해줍니다

@Bean
public ActiveMQQueue chatQueue(@Value("${activemq.queue.chat}") String queueName) {
    return new ActiveMQQueue(queueName);
}

@Bean
public Topic chatTopic(@Value("${activemq.topic.chat}") String topicName) {
    return new ActiveMQTopic(topicName);
}

3.3 메세지 보내기

인터페이스

Topic과 Queue를 보내는 간단한 인터페이스입니다.

public interface ChattingService {
    boolean send(Destination destination, ChatMessage message);
    boolean sendQueue(ChatMessage message);
    boolean sendTopic(ChatMessage message);
}

구현

JmsTemplate을 이용하여 간편하게 구현이 가능합니다. 이미 정의한 Queue, Topic을 Autowiring 하여 메시지를 전송합니다.

@Service
@RequiredArgsConstructor
@Slf4j
public class ChatServiceImpl implements ChatService {
    private final JmsTemplate template;
    private final Queue chatQueue;
    private final Topic chatTopic;

    @Override
    public boolean send(Destination destination, ChatMessage message) {
        try {
            template.convertAndSend(destination, message);

            return true;
        } catch (JmsException exception) {
            log.error("JMS Exception 발생: {}", exception.getMessage());
            exception.getStackTrace();
            return false;
        }
    }

    @Override
    public boolean sendQueue(ChatMessage message) {
        log.info("[Queue] send message: {}", message);
        return send(chatQueue, message);
    }

    @Override
    public boolean sendTopic(ChatMessage message) {
        log.info("[Topic] send message: {}", message);
        return send(chatTopic, message);
    }
}

3.4 메시지 받기

메시지 수신 컨테이너 등록

메시지를 수신받기 위해서는 메시지 수신 컨테이너를 등록해야합니다. 환경설정 클래스에서 JmsListenerContainerFactory 빈을 등록해줍니다.

@Bean
public JmsListenerContainerFactory<?> queueContainerFactory(
        ActiveMQConnectionFactory connectionFactory, MappingJackson2MessageConverter messageConverter) {
    DefaultJmsListenerContainerFactory factory = new DefaultJmsListenerContainerFactory();
    factory.setConnectionFactory(connectionFactory);
    factory.setMessageConverter(messageConverter);
    return factory;
}

@Bean
public JmsListenerContainerFactory<?> topicContainerFactory(
       ActiveMQConnectionFactory connectionFactory,
       MappingJackson2MessageConverter messageConverter) {
    DefaultJmsListenerContainerFactory factory = new DefaultJmsListenerContainerFactory();

    // Topic 구조로 설정
    factory.setPubSubDomain(true);

    factory.setConnectionFactory(connectionFactory);
    factory.setMessageConverter(messageConverter);
    return factory;
}

메시지 리스너 구현

메시지 리스너를 구현하는 방법에는 두가지가 있습니다

1. @JmsListener를 이용하여 메소드 단에서 구현
2. MessageListener 인터페이스를 구현하여 DefaultMessageListenerContainer에 등록하여 클래스 단에서 구현

메소드 단에서 구현

@JmsListener 어노테이션을 이용하면 리스너를 손쉽게 구현할 수 있습니다

@Component
@Slf4j
public class ChatListener {
    @JmsListener(destination = "${activemq.queue.chat}", containerFactory = "queueContainerFactory")
    public void receiveQueue(ChatMessage message) {
        log.info("[Queue] receive message: {}", message);
    }

    @JmsListener(destination = "${activemq.topic.chat}", containerFactory = "topicContainerFactory")
    public void receiveTopic(ChatMessage message) {
        log.info("[Topic] receive message: {}", message);
    }
}

클래스 단에서 구현

또 다른 방법으로는 MessageListener를 구현하여 DefaultMessageListenerContainer에 등록하는 방법입니다.

먼저 리스너를 구현할 클래스를 생성하여 MessageListener 인터페이스를 implements 합니다.

@Component
@Slf4j
public class TopicListener implements MessageListener {
    @Override
    public void onMessage(Message message) {
        log.info("[Topic Object] receive message: {}", message);
    }
}

그런 다음 DefaultMessageListenerContainer 빈을 추가하여 구현한 MessageListener를 등록합니다.

@Bean
public DefaultMessageListenerContainer topicContainerFactory2(
        ActiveMQConnectionFactory factory, Topic topic, TopicListener listener) {
    DefaultMessageListenerContainer container = new DefaultMessageListenerContainer();
    container.setConnectionFactory(factory);
    container.setDestination(topic);

    // 1. 구현한 클래스 등록
    container.setMessageListener(listener);

    // 2. 람다식 구현
    container.setMessageListener((MessageListener) message -> {
        log.info("[Topic - Lambda] receive message: {}", message);
    });

    return container;
}

꼭 클래스 파일을 생성하지 않아도 람다 익명 객체를 이용하여 메시지 리스너를 구현할 수도 있습니다.

메시지 리스너를 클래스로 구현할 때 한가지 아쉬운 점은 MessageListener가 Message 객체를 처리할 것을 요구하기 때문에 VO로 바로 받기 어렵다는 점입니다

Message 객체를 로깅해보면 아주 아주 많은 정보를 담고 있는 것을 볼 수 있습니다.

ActiveMQBytesMessage {
commandId = 5, responseRequired = false, 
messageId = ID:DESKTOP-05O71ON-63104-1720286743523-1:5:1:1:1, 
originalDestination = null, originalTransactionId = null, 
producerId = ID:DESKTOP-05O71ON-63104-1720286743523-1:5:1:1, 
destination = topic://TOPIC_CHAT, 
transactionId = null, 
deliveryTime = 0, expiration = 1720288545781, timestamp = 1720286745781, arrival = 0, 
brokerInTime = 1720286745782, brokerOutTime = 1720286745794,
correlationId = null, replyTo = null, persistent = false, 
type = null, priority = 4, groupID = null, groupSequence = 0, 
targetConsumerId = null, compressed = false, userID = null, 
content = org.apache.activemq.util.ByteSequence@656d5cea, 
marshalledProperties = org.apache.activemq.util.ByteSequence@38811fe, 
dataStructure = null, redeliveryCounter = 0, size = 0, 
properties = {_typeId=chat}, readOnlyProperties = true, 
readOnlyBody = true, droppable = false, jmsXGroupFirstForConsumer = false} 
ActiveMQBytesMessage{ bytesOut = null, dataOut = null, dataIn = null 
}

Message To Object

이 Message를 parsing하기 위해서는 아래와 같이 구현이 가능합니다.

@Component
@Slf4j
public class TopicListener implements MessageListener {
    @Override
    public void onMessage(Message message) {
        log.info("[Topic Object] receive message: {}", message);
        if (message instanceof TextMessage) {
            TextMessage textMessage = (TextMessage) message;
            ChatMessage body = null;
            try {
                body = textMessage.getBody(ChatMessage.class);
            } catch (JMSException e) {
                throw new RuntimeException(e);
            }
            log.info("[Topic Object] receive body: {}", body);
        }
    }
}

4. Test 코드 작성

메시지 송수신이 잘 이루어지고 있는지 테스트 코드를 작성하여 확인하였습니다.

@SpringBootTest
class MqclientApplicationTests {
    private final ChatService chatService;

    @Autowired
    MqclientApplicationTests(ChatService chatService) {
        this.chatService = chatService;
    }

    @Test
    @DisplayName("Queue 테스트")
    void topicQueue() throws JMSException {
        ChatMessage message = ChatMessage.builder()
                .userId("twinklekhj")
                .msg("안녕하세요!")
                .date(LocalDateTime.now())
                .build();

        Assertions.assertTrue(chatService.sendQueue(message), "Queue 보내기 실패");
    }
    @Test
    @DisplayName("Topic 테스트")
    void topicTopic() throws JMSException {
        ChatMessage message = ChatMessage.builder()
                .userId("twinklekhj")
                .msg("좋은 하루 보내세요~")
                .date(LocalDateTime.now())
                .build();

        Assertions.assertTrue(chatService.sendTopic(message), "Topic 보내기 실패");
    }
}

테스트 로그는 다음과 같습니다!

안녕하세요~ 좋은 하루보내세요😊🙌

💎 마치며

이미 ActiveMQ 클라이언트 프로그램을 완벽하게 구현했다고 생각했지만, 내용을 정리하면서 기존 코드가 얼마나 깔끔하지 못했는지 다시 한번 회고하게 되는 시간이었습니다😢

"포트폴리오에 유의미한 성과에 대해 적으려면 성능에 관해 적어야되는데 성능은 어떻게 체크할까?" 에 대해 고민하다가 Artillery를 알게 되었습니다.

이번 포스팅에서는 Artillery의 간단한 사용법에 대해 적어볼까 합니다.🤗

1.Artilley란?

Artilley는 Node.js 기반의 부하테스트 도구입니다. HTTP 혹은 websocket request를 원하는 시나리오대로 요청할 수 있습니다.

이를테면 아래 같은 상황을 재현할 수 있습니다.

"10분동안 초당 5개의 POST /api/info 와 같은 URL 요청을 쏜다."

2. 설치

우선 Artillery는 Node 기반의 프로그램이기 때문에 Node가 설치되어있어야합니다. 터미널에 아래와 같은 명령어를 통해서 Artillery를 설치해줍니다.

npm install -g artillery@latest

이렇게 설치하고 아래 명령어를 통해서 버전이 잘 확인되면 잘 설치된 것입니다.

> npx artillery version

        ___         __  _ ____
  _____/   |  _____/ /_(_) / /__  _______  __ ___
 /____/ /| | / ___/ __/ / / / _ \/ ___/ / / /____/
/____/ ___ |/ /  / /_/ / / /  __/ /  / /_/ /____/
    /_/  |_/_/   \__/_/_/_/\___/_/   \__  /
                                    /____/


VERSION INFO:

Artillery: 2.0.15
Node.js:   v20.10.0
OS:        win32

자세한 내용은 공식 Docs에서 볼수 있습니다.

3. Test 들어가기

concept에 대해 정리하기 전에 Artillery란 무엇인지 파악하기 위해 우선 test 코드를 예제대로 짜서 따라해보았습니다.

3.1 quick 명령어

> artillery quick --count 1000 -n 100 http://localhost:8080

artillery를 빠르게 실행해보는 방법은 quick 명령어를 사용하는 것입니다. 테스트 스크립트 없이 API를 테스트 해볼 수 있습니다.

artillery quick [TARGET] [-c <value>] [-n <value>] [-o <value>] [-k] [-q]

주요 옵션

• -c, --count value: 생성할 가상 사용자 수 (기본 값: 10)
• -n, --num: 가상사용자가 보샐 요청 수 (기본 값: 10)
• -o, --output: JSON 리포트 파일명
• -q, --quiet: Quiet 모드

3.2 run 명령어

Script 작성

config:
  target: "http://localhost:8080"
  phases:
    - duration: 60        # 지속시간
      arrivalRate: 5     # 초당 요청수
scenarios:
  - name: Books
    flow:
      - post:
          url: "/api/books"

60초 동안 초당 5명의 사용자가 동시접속을 시나리오로 도서목록 요청을 보내는 간단한 테스트 스크립트 입니다.

실행

> artillery run test.yml --output test.json

run 명령어를 통해 작성한 스크립트를 수행합니다.

• --output 옵션을 통해 JSON 형태의 리포트 파일을 받을 수 있습니다.

그 밖의 명령어에 대한 정보는 --help 옵션을 통해 얻을 수 있습니다.

> artillery run --help

Report

> artillery report test.json

report 명령을 날리면 DEPRECATION 경고와 함께 html을 생성해줍니다.

> artillery report test.json

┌───────────────────────────────────────────────────────────────────────┐
│                          DEPRECATION NOTICE                           │
├───────────────────────────────────────────────────────────────────────┤
│ The "report" command is deprecated and will be removed in a future    │
│ release of Artillery.                                                 │
│                                                                       │
│ Artillery Cloud is now the recommended way to visualize test results. │
│ It provides more comprehensive reporting, advanced visualizations,    │
│ and includes a free tier.                                             │
│                                                                       │
│ Sign up on https://app.artillery.io                                 │
└───────────────────────────────────────────────────────────────────────┘

Report generated: test.json.html

test.json.html을 클릭해서 들어가보면 test.json 의 성능 지표를 표와 그래프로 보여줍니다.

3.3 Cloud Dashboard

저는 로컬 Report 보다 Cloud Dashboard 를 어떻게 이용하는 것일까가 더 궁금했는데요! (Cloud Dashboard의 통계가 더 이해하기 쉽게 느껴졌습니다)

아래 순서대로 진행하면 됩니다.

API Key 발급

• https://app.artillery.io/ 에 접속합니다.
• Dashboard에 로그인합니다.
• Settings 메뉴 → API Keys 클릭한뒤, 새로운 API key를 만들어줍니다.

Run 시 key 추가

대시보드에 테스트 수행을 기록하려면 run 명령어 수행시 --record 옵션과 --key 옵션을 사용해야합니다.

아래는 --record 옵션과 --key 옵션을 사용한 예제입니다.

> artillery run my-service-test.yml --record --key 0x12345_my_api_key

결과 추적

대시보드의 메인화면에서 테스트 목록을 볼 수 있습니다.

하나의 테스트를 클릭하면 상세 결과를 볼 수 있습니다.

3.4 결과 분석

그래픽 보는 법

• max: 가장 오래 걸린 요청 -> 응답 시간
• p95: 전체 HTTP 트랜잭션 중 가장 빠른 것부터 95%까지 (대부분의 트래픽)
• p50: 전체 HTTP 트랜잭션 중 가장 빠른 것부터 50%까지 (절반의 트래픽)
• min: 가장 빠르게 온 요청 -> 응답 시간
• p99: 이외에도 많이 사용하는데, 거의 모든 트래픽을 의미하기 때문

TPS 측정

TPS(Transaction Per Second)는 arrivalRate로 측정할 수 있습니다.

대부분의 경우 스트레스 테스트는 목표로 하는 TPS가 고정되어 있고 그 TPS를 맞춰야 하기 때문에 TPS를 고정 시킨 상태에서 코드나 인프라를 수정하면서 목표로 하는 TPS가 안정적인지 보면 됩니다.

4. Concepts

4.1 Scripts

Artillery의 테스트 스크립트는 YAML 파일로, 두가지 주요 section이 있습니다.

• config: URI, Protocol 등 테스트를 위한 실행 환경 설정
• senarios: 가상유저(VU, Virutal User)의 행동(behavior)을 정의

config

target

테스트할 엔드포인트(endpoint) 지정합니다.

config:
  target: 'http://localhost:8080'

phases

phases는 Artillery가 구체적으로 가상 유저(VU, 이하 VU)를 어떻게 생성할 지에 대해 정의합니다.

phases는 리스트로 여러가지 단계(phase)가 포함 될 수 있습니다.

phases:
  - name: ramp up
      duration: 30m
    arrivalRate: 1
    rampTo: 100

  - name: pause
      duration: 1h

  - name: sustain
      duration: 3h
    arrivalRate: 100

name 옵션

CLI 로그 및 Artillery Cloud 대시보드에서 더 쉽게 식별할 수 있도록 단계에 이름을 지정할 수 있습니다.

> artillery run artillery.yml

# 이름 지정시
Phase completed: test (index: 0, duration: 10s) 12:05:34(+0900)

# 이름 미지정시
Phase started: unnamed (index: 0, duration: 10s) 12:05:51(+0900)

duration 옵션

초(s)단위의 단계 시간 (VU가 생성되는 도착 시간)을 의미합니다.

arrivalRate 옵션

초당 생성할 VU를 정의합니다. 아래 예시에서는 5분(300초) 동안 매초 50명의 VU를 생성합니다.

phases:
  - duration: 300
    arrivalRate: 50

arrivalCount 옵션

한 단계에 VU를 지정할 수 있습니다. 아래 예시에서는 60초 안에 20명의 가상 사용자를 만듭니다. (대략 3초마다 한 명의 가상 사용자)

phases:
  - duration: 60
    arrivalCount: 20

maxUsers 옵션

최대 VU를 지정할 수 있습니다. 아래 예시에서는 5분 동안 매초 10명의 VU를 생성하며, 특정 시간에 최대 50명의 동시 VU를 생성합니다.

phases:
  - duration: 300
    arrivalRate: 10
    maxVusers: 50

rampTo 옵션

duration 동안 VU를 rampTo 옵션 만큼 늘립니다. 아래 예시에서는 2분 동안 가상 사용자의 도착률을 10명에서 50명으로 늘립니다.

phases:
  - duration: 120
    arrivalRate: 10
    rampTo: 50

pause 옵션

아무것도 하지 않는 단계를 구성할 수 있습니다.

config:
  target: 'https://staging.example.com'
  phases:
    - pause: 60

tls 옵션

Artillery로 https 연결을 하게 되면 자체 서명된 인증서에 한해 아래와 같은 에러가 발생할 수 있습니다. ⇒ errors.UNABLE_TO_VERIFY_LEAF_SIGNATURE

Postman으로 해당 URL을 날려보면 아래와 같은 에러를 볼 수 있죠 ⇒ SSL Error: Unable to verify the first certificate

config:
  tls:
    rejectUnauthorized: false

이 때 TLS 옵션으로 Artillery가 자체 서명된 TLS 인증서를 수락하도록 지시할 수 있습니다. (보안이 중요하다면 권장하지는 않습니다.)

environments

하나의 테스트 스크립트에 다양한 환경을 정의할 수 있습니다.

예를 들어 로컬, 테스트서버, 프로덕션에서 동일한 성능 테스트를 실행하고자 할때, 각 환경에 대해 테스트 정의 파일을 복제하는 대신 config.environments 설정을 통해 환경 별로 구성을 정의할 수 있습니다.

config:
  target: 'http://service1.acme.corp:3003'
  phases:
    - duration: 10
      arrivalRate: 1
  environments:
    production:
      target: 'http://service1.prod.acme.corp:44321'
      phases:
        - duration: 1200
          arrivalRate: 10
    local:
      target: 'http://127.0.0.1:3003'
      phases:
        - duration: 1200
          arrivalRate: 20

테스트를 실행할 때 -e 옵션을 사용하여 명령줄에서 환경을 지정할 수 있습니다.

> artillery run my-script.yml
> artillery run -e local my-script.yml

특정 환경에서 테스트를 실행할 때 $environment 변수를 사용하여 현재 환경의 이름에 액세스할 수 있습니다.

scenarios:
  - flow:
      - log: 'Current environment is set to: {{ $environment }}'

scenarios

scenarios 섹션에서는 Artillery가 생성할 가상 사용자(VU)에 대한 하나 이상의 시나리오에 대한 정의가 포함되어 있습니다.

각 시나리오는 애플리케이션 사용자가 보낸 일반적인 요청 또는 메시지 순서를 나타내는 일련의 단계입니다.

시나리오별 옵션

flow (필수)

가상 사용자가 수행하는 작업 배열입니다. HTTP 기반의 애플리케이션의 경우 GET 및 HTTP 요청을 실행하거나 Socket.io 테스트에 대한 이벤트를 내보낼 수 있습니다.

name (선택)

보고에 도움이 되는 설명이 포함된 이름을 시나리오에 할당합니다.

weight (선택)

새로운 VU가 시나리오를 선택할 확률을 다른 시나리오와 비교하여 가중치를 설정할 수 있습니다. 가중치가 높을 경우 높은 확률로 해당 시나리오가 선택됩니다.

before, after

시나리오가 시작되기 전에 사용할 수 있습니다.

다음 예시에서는 before 섹션에서 인증 요청을 호출하고 가상 사용자가 도착하기 전에 인증 토큰을 캡처합니다. 시나리오가 실행된 후 after섹션에서는 토큰을 무효화합니다.

config:
  target: 'http://app01.local.dev'
  phases:
    - duration: 300
      arrivalRate: 25

before:
  flow:
    - log: 'Get auth token'
    - post:
        url: '/auth'
        json:
          username: 'myUsername'
          password: 'myPassword'
        capture:
          - json: $.id_token
            as: token
scenarios:
  - flow:
      - get:
          url: '/data'
          headers:
            authorization: 'Bearer {{ token }}'
after:
  flow:
    - log: 'Invalidate token'
    - post:
        url: '/logout'
        json:
          token: '{{ token }}'

4.2 Commands

이 포스트에서는 기본적인 Command인 run과 quick에 대해서만 다룹니다

기본적인 Command

• run - Artillery 테스트 스크립트를 실행합니다.
• quick - 테스트 스크립트 없이 하나의 HTTP 엔드포인트를 테스트합니다.

AWS 관련 Command

• run-lambda - AWS Lamda에서 분산 테스트를 수행합니다.
• run-fargate - AWS Fargate에서 분산 테스트를 수행합니다.

💎 References

• Artillery 공식 Docs
• Artillery 부하 테스트 사용해보기 - 곽태민 블로그
• artillery를 이용한 서버 부하 테스트 - YS 개발 블로그
• 어떤 부분을 테스트하고 분석해야 할까?

💎 마치며

Artillery를 사용해보면서 아직 추가 보완해야될 내용이 있지만, 생각보다 사용하기 쉽다고 느껴졌습니다!🤗

이번 포스팅에서는 요일 구하는 문제를 풀어볼까합니다~! (사실 한달이 며칠까지 있는지 매번 까먹어서 기록용으로 포스팅합니다🤣)

1. 한달세기

날짜 구하기

한달은 며칠까지 있을까?

사진 출저 - 스브스뉴스

2월을 제외한 모든 달은 30일 또는 31일을 갖습니다.

윤년 구하기

윤년에는 법칙이 있습니다.

• 윤년은 4년마다 돌아옵니다. (2016년, 2020년, 2024년 등등)
• 윤년의 의미는 1년이 366일까지 있다는 뜻이며, 그 중에서도 2월이 29일까지 있습니다. (1900년, 2100년, 2200년)
• 100으로 나누어 떨어지면 평년인데 400으로 나누어 떨어지면 윤년입니다. (2000년, 2400년)

파이썬 코드로 구현하면 다음과 같습니다.

def get_day(year):
    if year % 100 == 0 and year % 400 != 0:
        return 28
    elif year % 4 == 0:
        return 29
    return 0

2. 문제

2.1 2016년

문제 설명

2016년 1월 1일은 금요일입니다. 2016년 a월 b일은 무슨 요일일까요? 두 수 a ,b를 입력받아 2016년 a월 b일이 무슨 요일인지 리턴하는 함수, solution을 완성하세요.

요일의 이름은 일요일부터 토요일까지 각각 SUN,MON,TUE,WED,THU,FRI,SAT입니다. 예를 들어 a=5, b=24라면 5월 24일은 화요일이므로 문자열 "TUE"를 반환하세요.

제한 조건

• 2016년은 윤년입니다.
• 2016년 a월 b일은 실제로 있는 날입니다. (13월 26일이나 2월 45일같은 날짜는 주어지지 않습니다)

2.2 코드

def solution(a, b):
    day_list = ['SUN','MON','TUE','WED','THU','FRI','SAT']
    day = 5

    month_list = [31, 29, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31]
    for i in range(1, a):
        day += month_list[i-1]
    day += b - 1

    return day_list[day % 7]

• day: 우선, 1월 1일이 금요일이라고 했으니, 시작 값 5로 시작합니다.
• month 별로 날짜를 더해줍니다
• 마지막 날짜를 더해줍니다. 여기서 1월 값인 month_list[0]에 1월 1일이 포함되어 있으므로 1을 빼줍니다.
• 모듈러 연산을 통해 요일을 구해줍니다.

💎 References

• 2월은 왜 짧을까?

이번 포스팅에서는 소인수 분해에 대해 다뤄볼까 합니다. 😉

소인수 분해는 중학생 때 배울 정도로 쉬운 개념이지만, 알고리즘으르 짜는 것(코딩으로 구현하는 것)은 다른 영역이기 때문에 포스팅을 통해 남겨두고자 합니다.

1. 소인수 분해

소인수 분해

소인수 분해 (Prime Factorization)란

소인수 분해란 어떠한 숫자를 1보다 큰 자연수인 소인수(소수인 인수)들만의 곱으로 표현하는 것을 말합니다.

소인수

인수 : 어떤수를 곱하기로 표현했을 때 곱해지는 각각의 수들 소인수 : 인수 중에서 소수인 것  

• 6의 인수 : 1, 2, 3, 6
• 6의 소인수 : 2, 3

소수

여기서 소수는 1과 자기 자신 만의 곱으로만 이루어진 수입니다. 다르게 말하면 1과 자기 자신 외에 약수를 갖지 않습니다.

예를 들어, 2는 1 * 2의 곱으로 표현할 수 있습니다

• 5 = 1 * 5
• 7 = 1 * 7
• 17 = 1 * 17

숫자 12의 약수는 {1, 2, 3, 4, 6, 12}으로 정리되며, 2 * 6, 3 * 4 등으로 표현될 수 있어 소수가 아닙니다

소인수 분해하는 방법

소인수분해를 하는 가장 간단한 방법은 다음과 같습니다.

1. 해당 합성수를 소인수로 몫이 소수가 될 때까지 나눗셈을 계속합니다.
2. 사용된 모든 소인수와 마지막 몫을 지수의 형태로 곱합니다.

예제) 72를 소인수분해하시오.

코드

소인수는 2부터 시작하여 2로 나누지 못할 경우 2에서 +1를 해주면서 나누어지는지 체크하면 됩니다.

왜 2부터 시작하느냐? 하면 아래 코드를 통해 알 수 있습니다.

def factorization(n):
    result = []
    i = 2
    for i <= n:
        if n % i == 0:
            n //= i
            # 인수 목록만 구할 경우
            # if i in result:
            result.append(i)
        else:
            i += 1
    return result

2. 실전 문제

https://school.programmers.co.kr/learn/courses/30/lessons/120852

References

• 소인수분해 하는 법, 인수와 소인수의 뜻
• 소수와 소인수분해

정규식은 모든 프로그래밍에서 어려운 영역 중에 하나로 손 꼽히는데요, 문자열 관련 문제를 풀다가 정규 표현식을 이용하여 깔끔하게 푼 문제가 있어 이번 기회에 정리해볼까 합니다.

간략하게 포스팅 내용을 정리해보자면 다음과 같습니다.

• re 모듈 이용
• 메타 문자: . ^ $ * + ? { } [ ] \ | ( )
• 컴파일: re.compile("expression")
• 검색 메소드: match, search, findall, finditer
• pattern 객체 메소드: group, start, end, span
• 옵션: re.DOTALL, re.IGNORECASE, re.MULTILINE, re.VERBOSE

1. 정규식

정규 표현식(regular expressions) 은 복잡한 문자열을 처리할 때 사용하는 기법으로, 파이썬만의 고유 문법이 아니라 문자열을 처리하는 모든 곳에서 사용하는 일종의 형식 언어이다.

정규 표현식은 우리가 흔히 알고 있는 정규식으로도 불립니다. 정규식은 파이썬 뿐만 아니라 많은 영역에서 사용되는데, 주된 목적은 정규표현식의 패턴을 이용하여 해당하는 문자열을 골라내고 치환하는 역할을 합니다.

1.1 메타 문자

메타 문자는 원래 그 문자가 가진 뜻이 아니라 특별한 의미를 가진 문자를 의미합니다. 정규 표현식에서 다음과 같은 메타 문자를 사용하면 특별한 의미를 갖게 됩니다.

. ^ $ * + ? { } [ ] \ | ( )

[ ] 문자 - 문자 클래스

문자 클래스로 만들어진 정규식은 '['와 ']' 사이의 문자들의 매치라는 의미를 가집니다. 예를 들어, 정규 표현식이 [abc]라면, 이 표현식의 의미는 'a, b, c 중 한 개의 문자와 매치'를 뜻합니다.

하이픈(-)

[] 안의 두 문자 사이에 하이픈(-)을 사용하면 두 문자 사이의 범위를 의미합니다.

• [a-zA-Z]: 모든 알파벳
• [0-9]: 모든 숫자

[^]

문자 클래스 안에 어떤 문자나 메타 문자도 사용할 수 있지만, 주의해야할 문자가 1가지 있습니다. 그것은 바로 ^인데, 문자 클래스 안에 ^ 메타문자를 사용할 경우에는 반대(not)라는 의미를 갖습니다.

예를 들어, [^0-9]라는 정규 표현식은 숫자가 아닌 문자만 매치됩니다.

자주 사용되는 문자 클래스

[0-9] 또는 [a-zA-Z] 등은 무척 자주 사용하는 정규 표현식이다. 이렇게 자주 사용하는 정규식은 별도의 표기법으로 표현할 수 있다. 다음을 기억해 두자.

• \d - 숫자와 매치된다. [0-9]와 동일한 표현식이다.
• \D - 숫자가 아닌 것과 매치된다. [^0-9]와 동일한 표현식이다.
• \s - 화이트스페이스(whitespace) 문자와 매치된다. [\t\n\r\f\v]와 동일한 표현식이다. 맨 앞의 빈칸은 공백 문자(space)를 의미한다.
• \S - 화이트스페이스 문자가 아닌 것과 매치된다. [^ \t\n\r\f\v]와 동일한 표현식이다.
• \w - 문자+숫자(alphanumeric)와 매치된다. [a-zA-Z0-9_]와 동일한 표현식이다.
• \W - 문자+숫자(alphanumeric)가 아닌 문자와 매치된다. [^a-zA-Z0-9_]와 동일한 표현식이다.

() 문자 - 그룹핑

특정 문자열이 계속해서 반복되는지 조사하는 정규식을 작성하고 싶을 때 사용할 수 있는 것이 바로 그룹핑(grouping) 입니다.

(ABC)+

그룹을 만들어 주는 메타 문자가 바로 () 입니다.

p = re.compile('(ABC)+')
m = p.search('ABCABCABC OK?')
print(m)
<re.Match object; span=(0, 9), match='ABCABCABC'>

print(m.group())
ABCABCABC

예시 - 전화번호

다음 예시로는 이름 + " " + 전화번호 형태의 문자열을 찾는 정규식을 작성해보면, 다음과 같이 작성할 수 있습니다.

p = re.compile("(\w+)\s+(\d+[-]\d+[-]\d+)")
m = p.search("park 010-1234-1234")

print(m.group(0))
# 출력: park 010-1234-1234

print(m.group(1))
# 출력: park

print(m.group(2))
# 출력: 010-1234-1234

예시 - 이름 지정

아래 예시 처럼 그룹에 이름을 지정해 줄 수도 있습니다.

(?P<그룹명>...)
(\w+) → (?P<name>\w+)

p = re.compile(r"(?P<name>\w+)\s+(?P<phone>\d+[-]\d+[-]\d+)")
m = p.search("park 010-1234-1234")

print(m.group("name"))
print(m.group("phone"))

.(dot) 문자 - \n을 제외한 모든 문자

.(dot) 메타 문자는 줄바꿈 문자인 \n을 제외한 모든 문자와 매치됩니다.

정규식을 작성할 때 re.DOTALL 옵션을 주면 .(dot) 문자와 \n 문자도 매치된다.

import re
p = re.compile("a.b")

해석은 "a + 모든 문자 + b"입니다. 즉, a와 b 사이에 어떤 문자가 들어가도 모두 매치된다는 의미입니다.

* 문자 - 반복 (0, -)

import re
p = re.compile("ca*t")

* 바로 앞에 있는 문자 a가 0부터 무한대까지 반복될 수 있다는 의미입니다.

• ct - Yes
• cat - Yes
• caat - Yes

+ 문자 - 반복 (1, -)

반복을 나타내는 또 다른 메타 문자로 +가 있는데, 최소 1번 이상 반복될 때 사용합니다.

import re
p = re.compile("ca+t")

• ct - No
• cat - Yes
• caat - Yes

{} 문자 - 횟수 지정 반복

{} 메타 문자를 사용하면 반복 횟수를 지정할 수 있습니다.

import re
p = re.compile("ca{2}t")

이 정규 표현식의 의미는 'c + a를 반드시 2번 반복 + t' 으로 caat가 매치됩니다.

범위를 지정하고 싶을 때는 아래와 같이 사용할 수 있습니다.

import re

# 2-5회 반복
p = re.compile("ca{2, 5}t")

# 3회 이하 반복
p = re.compile("ca{,3}t")

# 3회 이상 반복
p = re.compile("ca{3,}t")

? 문자 - 유사 반복

반복은 아니지만 그와 유사한 기능을 하는 ? 메타 문자도 있습니다. ? 메타 문자가 의미하는 것은 {0, 1}입니다.

import re
p = re.compile("ab?c")

a와 c 사이에 b가 있어도 되고 없어도 되는 경우입니다.

| 메타 문자 - or

| 메타 문자는 or과 동일한 의미로 사용됩니다. A|B라는 정규식이 있다면 A또는 B라는 의미가 됩니다.

import re
p = re.compile('Crow|Servo')
m = p.match('CrowHello')
print(m)

# 결과
<re.Match object; span=(0, 4), match='Crow'>

^ 메타 문자 - 문자열 맨 처음

^ 메타 문자는 문자열로 시작하는 것을 의미합니다. str.startsWith 메소드와 유사합니다.

>>> re.search('^Life', 'Life is too short')
<re.Match object; span=(0, 4), match='Life'>

>>> re.search('^Life', 'My Life')
None

$ 메타 문자 - 문자열 마지막

$ 메타 문자는 ^ 메타 문자와 반대로 문자열로 끝나는 것을 의미합니다. str.endsWith 메소드와 유사합니다.

>>> re.search('short$', 'Life is too short')
<re.Match object; span=(12, 17), match='short'>

>>> re.search('short$', 'Life is too short, you need python')
None

1.2 re 모듈

파이썬에서는 정규 표현식을 지원하기 위해 re(regular expression) 모듈을 제공합니다. re 모듈은 파이썬을 설치할 때 자동으로 설치되는 표준 라이브러리입니다.

다음과 같이 사용할 수 있습니다.

import re
p = re.compile('[a-z]+')
m = p.match('python')
if m:
    print('Match found: ', m.group())
else:
    print('No match')

1. re.compile 함수를 이용하여 정규 표현식을 컴파일합니다.
2. re.compile의 리턴 값을 객체 p(컴파일된 패턴 객체)에 할당해 그 이후의 작업을 수행합니다.

1.3 문자열 검색

re.compile 메소드를 통해 컴파일된 패턴 객체를 사용하여 문자열을 검색할 수 있습니다. 패턴 객체는 다음과 같은 4가지 메소드를 제공합니다.

• match() - 문자열의 처음부터 정규식과 매치되는지 조사
• search() - 문자열 전체를 검색하여 정규식과 매치되는지 조사
• findall() - 정규식과 매치되는 모든 문자열을 리스트로 리턴
• finditer() - 정규식과 매치되는 모든 문자열을 반복 가능한 객체로 리턴

match()

match() 메소드는 문자열의 처음부터 정규식과 매치되는지 조사합니다.

p = re.compile("[a-z]+")

m = p.match("python")
# 출력: <re.Match object; span=(0, 6), match='python'>

m = p.match("3 python")
# 출력: None

python 문자열은 [a-z]+ 정규식에 부합하므로 match 객체가 리턴되지만 3 python 문자열은 처음에 나오는 문자 3이 정규식 [a-z]+에 부합하지 않으므로 None이 리턴됩니다.

search()

search() 메소드는 match() 메소드와 동일하지만 전체 문자열을 검색합니다.

p = re.compile("[a-z]+")

m = p.search("python")
# 출력: <re.Match object; span=(0, 6), match='python'>

m = p.search("3 python")
# 출력: <re.Match object; span=(2, 8), match='python'>

이렇듯 match 메서드와 search 메서드는 문자열의 처음부터 검색할지의 여부에 따라 다르게 사용해야 합니다.

findall()

findall은 패턴과 매치되는 모든 값을 찾아 리스트로 리턴합니다.

p = re.complie('[a-z]+')
result = p.findall('life is too short')
# 출력: ['life', 'is', 'too', 'short']

finditer()

finditer 메소드는 findall과 동일하지만, 그 결과를 반복 가능한 객체로 리턴합니다. 반복 가능한 객체는 match 객체입니다.

>>> result = p.finditer("life is too short")
>>> print(result)
<callable_iterator object at 0x01F5E390>

>>> for r in result: print(r)
<re.Match object; span=(0, 4), match='life'>
<re.Match object; span=(5, 7), match='is'>
<re.Match object; span=(8, 11), match='too'>
<re.Match object; span=(12, 17), match='short'>

1.4 match 객체

match 객체란 앞서 살펴본 p.match, p.search, p.finditer 메소드에 의해 리턴된 매치 객체를 의미합니다.

match 객체에서 사용할 수 있는 메소드는 다음과 같습니다.

• group(): 매치된 문자열 리턴
• start(): 매치된 문자열의 시작 위치 리턴
• end(): 매치된 문자열의 끝 위치 리턴
• span(): 매치된 문자열의 위치(시작, 끝)에 해당하는 튜플 리턴

import re
p = re.compile('[a-z]+')
m = p.match('python')

>>> print(m)
<re.Match object; span=(0, 6), match='python'>

>>> print(m.group())
'python'

>>> print(m.start())
0

>>> print(m.end())
6

>>> print(m.span())
(0, 6)

1.5 컴파일 옵션

정규식을 컴파일할 때 다음 옵션을 사용할 수 있습니다.

• DOTALL(S) - .(dot)이 줄바꿈 문자를 포함해 모든 문자와 매치될 수 있게 한다
• IGNORECASE(I) - 대소문자에 관계없이 매치될 수 있게 한다
• MULTILINE(M) - 여러 줄과 매치될 수 있게 한다. ^, $ 메타 문자와 관련 있는 옵션
• VERBOSE(X) - verbose 모드를 사용할 수 있게 한다. 정규 표현식을 보기 편하게 만들 수 있고 주석 등을 사용할 수 있게 된다.

옵션을 사용할 때는 re.DOTALL 처럼 전체 옵션 이름을 써도 되고 re.S로 사용해도 됩니다.

DOTALL, S

. 메타 문자는 줄바꿈 문자(\n)을 제외한 모든 문자와 매치되는 규칙이 있습니다. 하지만 re.DOTALL 또는 re.S 옵션을 사용해 정규식을 컴파일하면 모두 매치할 수 있습니다.

import re
p = re.comile('a.b', re.DOTALL)
m = p.match('a\nb')

>>> print(m)
<re.Match object; span=(0, 3), match='a\nb'>

IGNORECASE, I

re.IGNORECASE 또는 re.I 옵션은 대소문자 구별 없이 매치를 수행할 때 사용하는 옵션입니다.

import re
p = re.compile("[a-z]+", re.I)

>>> p.match('python')
<re.Match object; span=(0, 6), match='python'>
>>> p.match('Python')
<re.Match object; span=(0, 6), match='Python'>
>>> p.match('PYTHON')
<re.Match object; span=(0, 6), match='PYTHON'>

MULTILINE, M

re.MULTILINE 또는 re.M 옵션은 문자열 전체의 처음이 아니라 각 라인의 처음으로 인식시킬 때 사용합니다.

import re

data = """python one
life is too short
python two
you need python
python three"""

>>> p = re.compile("^python\s\w+")
>>> p.findall(data)
['python one']

>>> p = re.compile("^python\s\w+", re.MULTILINE)
>>> p.findall(data)
['python one', 'python two', 'python three']

즉, re.MULTILINE 옵션은 ^, $ 메타 문자를 문자열의 각 줄마다 적용해 주는 것입니다.

VERBOSE, X

이해하기 어려운 정규식을 주석 또는 줄 단위로 구분할 수 있다면 얼마나 보기 좋고 이해하기 쉬울까요?

이 경우에 re.VERBOSE 또는 re.X 옵션을 사용하면 됩니다.

re.compile(r"""
    (?P<name>\w+)\s+     # 이름
    (?P<phone>            # 전화번호
        \d+[-]\d+[-]\d+
    )
""", re.X)

2. 문제 풀이

문제

https://school.programmers.co.kr/learn/courses/30/lessons/133499

머쓱이는 태어난 지 11개월 된 조카를 돌보고 있습니다. 조카는 아직 "aya", "ye", "woo", "ma" 네 가지 발음과 네 가지 발음을 조합해서 만들 수 있는 발음밖에 하지 못하고 연속해서 같은 발음을 하는 것을 어려워합니다. 문자열 배열 babbling이 매개변수로 주어질 때, 머쓱이의 조카가 발음할 수 있는 단어의 개수를 return하도록 solution 함수를 완성해주세요.

해결책

import re
def solution(babbling):
    count = 0
    words = ["aya", "ye", "woo", "ma"]
    pattern = re.compile('^(aya|ye|woo|ma)+$')

    for word in babbling:
        if pattern.match(word) and not any(word.count(w*2) for w in words):
            count += 1

    return count

💎 References

• 파이썬 Docs - 8장 정규 표현식

이번 포스팅은 3차 실업인정으로 워크넷 심리검사 중에서도 IT직무 역량검사를 실시하고, 실업인정을 신청하는 절차에 대해 기술하였습니다!

1. 직업심리검사

🔍 직업심리검사란?

개인의 능력과 흥미, 성격 등 다양한 심리적 특성을 객관적으로 측정하여 자신에 대한 이해를 돕고 개인의 특성에 보다 적합한 진로분야를 선택할 수 있도록 분석해주는 검사입니다.

⚡ 워크넷 사이트 접속

우선, 워크넷 사이트에 접속합니다.

https://www.work.go.kr/seekWantedMain.do

워크넷에 접속하면 고용24 사이트로 들어가서 고용24를 사용할건지 워크넷을 사용할건지 물어보는데요, 아직 심리검사는 서비스가 넘어오지 않은 건지 이용할 수 없었습니다.

워크넷으로 이동하기를 클릭합니다

메인 사이트에서 직업심리검사 버튼을 클릭합니다.

성인 심리검사 바로가기 버튼을 클릭해주세요

💕 심리검사 목록

성인 대상 심리검사 목록입니다. 생각보다 다양한 검사들이 있었습니다

⭐ IT 직무 기본역량검사

기본 직업선호도 검사는 의미가 없을 거같아 IT직무 기본역량검사를 실시했습니다.

그러고는 역량검사를 선택한 것이 급 후회... 진짜 90분 가량이 소요

거의 NCS 수준으로 검사했습니다🤣

대망의 회로도 찾기.. 이것이 집중력 검사입니까.. 집중력 교란 검사입니까😢

그래도 검사결과 대부분 높은 편에 속해서 만족스러웠습니다🤗

2. 실업인정 신청

검사결과 저장

검사결과를 PDF로 저장합니다.

실업인정 인터넷 신청

고용24 홈페이지에 접속하여 실업인정 신청 페이지로 이동합니다

구직활동내역에 직업심리검사를 선택하고 세부내역을 작성합니다.

이때 저장한 검사결과를 첨부합니다!

완료-⭐

이번 포스팅에서는 크롤링과 BeautifulSoup와 Selenium 모듈에 대해 공부하면서 포스팅을 작성해보고자 합니다.

1. Crawling

1.1 Crawling Definition

크롤링(Crawling)이란 웹 상의 정보들을 탐색하고 수집하는 작업을 의미합니다.

흔히들 크롤링이 불법이라고 알려져 있지만, 완전히 맞는 말은 아닙니다. 그 이유는 Google의 검색 방식 또한 크롤링을 기반으로 만들어졌기 때문입니다.

하지만, 허가 없이 데이터를 탐색하여 상업적으로 활용하는 것이 불법입니다.

사례. 잡코리아와 사람인

• 잡코리아와 사람인HR: 구인·구직 플랫폼을 운영하는 회사
• 사람인HR이 잡코리아 웹사이트에 게재된 채용정보를 웹크롤링해 무단으로 수집한 후 그대로 자신의 웹사이트에 활용
• 사람인HR 측은 웹크롤링이 보편적인 IT기술이며 인터넷 관련 업계에서 널리 통용되는 영업 수단, 잡코리아의 권리를 침해한 사실이 없다고 주장

이에 법원은 아래와 같이 판결했습니다.

• 잡코리아의 웹사이트가 저작권법상 데이터베이스에 해당(저작권법 제2조 제19호)
• 이를 제작하고 유지하는 데 상당한 투자를 한 잡코리아는 데이터베이스 제작자의 권리(저작권법 제93조)

사람인HR 주장과 달리, 공개된 정보에 대한 웹크롤링이 영업 수단으로 제한 없이 허용되는 것은 아니라는 것입니다.

웹사이트에서 누구나 확인할 수 있더라도 웹사이트 운영자가 상당한 시간과 노력을 들여 데이터베이스화한 정보를 특히나 경쟁업체에서 무단으로 수집·이용하는 행위는 허용되지 않는다는 취지로 풀이됩니다.

출저: 웹크롤링 판례 (1) 사람인HR의 잡코리아 채용정보 무단복제 사건, 동아닷컴

1.2 Robots.txt

그렇다면 어떻게 허가된 데이터를 알 수 있을까요? 바로 robots.txt를 통해 알수 있습니다.

robots.txt 파일은 크롤러가 사이트에서 액세스할 수 있는 URL을 검색엔진 크롤러에게 알려줍니다.

웹사이트에서 url 뒤에 robots.txt를 넣으면 사이트에서 수집 가능한 정보를 알 수 있습니다.

1.3 Scraping VS Crawling

웹 스크래핑과 크롤링은 흔히 크롤링으로 혼용되어 사용되는 용어입니다. 두 용어의 공통점은 특정 웹사이트에서 데이터를 추출하는 것입니다.

주요 차이점은 URL로 해결할 수 없는 동적 데이터를 크롤링을 통해 추출할 수 있다는 점입니다. URL을 통해 HTML을 한번에 다운받느냐,

1.4 언제 막힐 지 모르는 Crawling

크롤링은 사실 언제 동작이 안될지 모릅니다. 그 이유는 HTML을 기반으로 소스가 조금씩만 수정되도, 크롤링에서 지원하지 않을 지도 모르기 때문이죠.

2. Python Module

2.1 BeautifulSoup

Beautiful Soup

웹페이지에서 정보를 쉽게 스크랩할 수 있게 해주는 모듈입니다.

이는 HTML 또는 XML 파서 위에 위치하며 구문 분석 트리를 반복, 검색 및 수정하기 위한 Python 관용어를 제공합니다.

출저: beautifulsoup4 4.12.3

BeautifulSoup는 스크래핑 도구입니다. URL을 통해 받아온 HTML 코드를 분석하는 도구입니다.

크롤링 시에도 사용되는데, 엄밀히 말하면 직접 크롤링을 하는 주체가 아니라 크롤링해온 데이터를 HTML 객체로 파싱해주는 파싱 도구입니다.

2.2 Selenium

Selenium

Selenium WebDriver를 Python 언어로 제작된 모듈로, 웹 브라우저와의 상호작용을 자동화하기 위해 사용됩니다.

Chrome, Firefox, Internet Explorer 등 여러 브라우저 및 드라이버를 지원합니다. 출저: selenium 4.22.0

2.3 Requirements.txt

프로젝트 내에 requirements.txt 파일을 추가해주고, 라이브러리 종속성을 넣어줍니다.

requests
beautifulsoup4
selenium
webdriver_manager

이미 프로젝트가 생성되어 라이브러리가 설치된 후라면 freeze, list 명령어를 통해 requirements.txt를 생성할 수 있습니다.

# freeze 명령어 사용 시
pip freeze > requirements.txt

# list 명령어 사용시
pip list --format=freeze > requirements.txt

혹은 이미 requirements.txt가 있는 경우에, IDE가 지원해주지 않는다면 install 명령어를 통해 라이브러리를 설치할 수 있습니다.

pip install -r requirements.txt

PyCharm에서 requirements.txt를 추가해주면, 아래와 같이 설치 여부를 물어봅니다.

3. BeautifulSoup

3.1 기본 구조

beautifulsoup의 사용 방법은 아래와 같습니다.

1. 스크랩핑할 웹사이트 URL 지정
2. URL을 통해 html을 받아와서 BeautifulSoup 객체로 변환
3. bs 객체를 통해 데이터 파싱

import requests
from bs4 import BeautifulSoup, Tag

# 1. URL 지정
url = 'https://news.naver.com/section/105'

# 2.1 데이터 받아오기
response = requests.get(url)

if response.status_code == 200:
    html = response.text

    # 2.2 BS 객체로 변환
    soup = BeautifulSoup(html, 'html.parser')
    print(soup)

    # 3. 파싱
else:
    print(response.status_code)

BeutifulSoup는 find() 및 findAll() 메소드를 통해 간편하게 HTML의 정보를 가져올 수 있습니다.

3.2 네이버 뉴스 스크랩핑

위의 코드를 확장하여 네이버 뉴스를 스크랩핑 해보고자 합니다.

문서 구조 파악

우선, 데이터를 파싱하기 위해서는 문서의 구조를 잘 알고 있어야합니다.

웹 사이트에서 수집할 데이터를 분석하고, F12를 통해 개발자 모드를 켜서 해당 데이터를 가져올 부분의 구조를 파악하여 합니다.

저는 뉴스 기사 목록을 뽑아내볼 생각입니다.

객체로 파싱하기

우선, 기사를 담을 Article 객체를 정의하였습니다.

class Article:
    def __init__(self, title, desc, url, image_url):
        self.title = title
        self.description = desc
        self.url = url
        self.image_url = image_url

    def __str__(self):
        return f"Article [ \n\t Title: {self.title} 
            \n\t Description: {self.description}
            \n\t URL: {self.url}
            \n\t Image URL: {self.image_url}\n]"

그런 다음, 데이터를 파싱하여 Article 객체로 변환하였습니다.

def parse(element: Tag):
    try:
        a_obj = element.find('a')
        img_obj = element.find('img')
        desc_obj = element.find('div', 'sa_text_lede')

        return Article(img_obj.attrs['alt'], 
                    desc_obj.text,
                    a_obj.attrs['href'],
                    img_obj.attrs['data-src'])
    except AttributeError:
        return None

위의 기본 구조에서 파싱 단계를 추가하였습니다.

if response.status_code == 200:
    html = response.text
    soup = BeautifulSoup(html, 'html.parser')

    arr = list(map(lambda x: parse(x),
                soup.find_all("li", {"class": "sa_item"})))
    for article in arr:
        print(article)
else:
    print(response.status_code)

결과 화면

기사 목록이 객체로 아주 예쁘게 뽑힌 것을 볼 수 있습니다.😊

4. Selenium

일반적인 정적 웹페이지는 https 모듈로 데이터를 뽑을 수 있지만, 동적인 기능이 들어가면 (ex. 로그인, 검색, 버튼 클릭 등) 동작이 불가능합니다.

4.1 기본 구조

우선 Selenium을 사용하는 방법은 다음과 같습니다.

1. WebDriver 로딩
2. WebDriver로 동적 행위 (로그인, 검색 등)
3. 현재 html을 받아와서 파싱해서 처리

import time
from bs4 import BeautifulSoup
from selenium import webdriver
from selenium.webdriver.chrome.options import Options
from selenium.webdriver.chrome.service import Service
from selenium.webdriver.ie.webdriver import WebDriver
from webdriver_manager.chrome import ChromeDriverManager

def crawler(url, seconds=1) -> WebDriver:
    service = Service(ChromeDriverManager().install())
    chrome_options = Options()

    chrome_options.add_experimental_option("detach", True)
    driver = webdriver.Chrome(service=service, options=chrome_options)
    driver.get(url)

    time.sleep(seconds)
    return driver


def get_bs(html) -> BeautifulSoup:
    return BeautifulSoup(html, 'html.parser')

if __name__ == '__main__':
    url = 'https://www.google.com'

    # 1. 드라이버 로딩
    driver = crawler(url)

드라이버를 통해 url을 로딩하면 아래와 같이 자동으로 웹페이지가 뜹니다.

4.2 구글링 구현하기

구글 홈페이지를 띄워두고, 키워드를 넣어 검색한 페이지의 목록을 가져오는 코드를 작성해보려고 합니다. 위의 코드를 확장하여 구글링을 구현해보도록 하겠습니다.

동적 행위

우선, 구글 홈페이지를 켜고 검색 영역을 분석합니다.

class Post:
    def __init__(self, platform, url, title, content):
        self.platform = platform
        self.url = url
        self.title = title
        self.content = content

    def __str__(self):
        return f"""Post [\n\tplatform: {self.platform}
        \n\t url: {self.url}
        \n\t title: {self.title}
        \n\t content: {self.content}\n]"""


def parse(element: Tag):
    try:
        platform = element.find('span', {'class': 'VuuXrf'}).text
        url = element.find('a').attrs['href']
        title = element.find('h3').text
        content = element.find('div', {'class': 'VwiC3b'}).text
        return Post(platform, url, title, content)
    except AttributeError:
        return None


if __name__ == '__main__':
    url = 'https://www.google.com'
    keyword = 'Python Selenium'
    driver = crawler(url)

    # 1. 검색 영역을 찾아 키워드를 넣고 검색
    # By.ID, By.TAG_NAME, By.NAME, By.CSS_SELECTOR, By.CLASS_NAME, By.XPATH
    input_box = driver.find_element(By.CSS_SELECTOR, "textarea.gLFyf")
    input_box.send_keys(keyword)
    input_box.submit()
    driver.implicitly_wait(10)

    # 2. 검색한 데이터를 Post 객체로 파싱
    soup = get_bs(driver.page_source)
    container = soup.find_all('div', class_='MjjYud')
    arr = list(map(lambda x: parse(x), container))
    for i in arr:
        print(i)
    driver.close()

input 영역을 찾아 키워드를 넣고 제출합니다. 검색 버튼이 따로 없기 때문에 submit 메소드로 검색합니다.

4.3 결과 화면

Post [
    platform: 위키독스
    url: https://wikidocs.net/91474
    title: 2.8 사이트 자동화하기 - selenium 사용법(1)
    content: 코딩 실력 향상 100% 보장, 실전 파이썬 데이터 수집 강의 (도움 안되면 환불가능) ... Selenium 라이브러리를 사용하는 이유는 다음과 같습니다. 1. 자바스크립트 ...
]
Post [
    platform: 티스토리
    url: https://spectrum20.tistory.com/entry/python-Selenium-%ED%81%AC%EB%A1%AC-%EB%B8%8C%EB%9D%BC%EC%9A%B0%EC%A0%80
    title: [python] Selenium chrome에서 시작하기 (+ 크롬 브라우저 ...
    content: 2023. 10. 15. — [python] Selenium chrome에서 시작하기 (+ 크롬 브라우저, element, driver, alert 다루기) · 크롬드라이버 설치 · 코드. 파이썬 환경에 필요한 ...
]
Post [
    platform: 티스토리
    url: https://thecho7.tistory.com/entry/Python%EA%B3%BC-Selenium%EC%9D%84-%ED%99%9C%EC%9A%A9%ED%95%9C-%EC%9B%B9-%ED%81%AC%EB%A1%A4%EB%A7%81-%EC%8B%A4%EC%8A%B5-1
    title: Python과 Selenium을 활용한 웹 크롤링 실습 - 1 1 - 조연 블로그
    content: 2023. 8. 28. — Python과 Selenium을 활용한 웹 크롤링 실습 - 1 1 · Selenium 설치 · 브라우저 시작 · 웹사이트 탐험하는 방법 · Selenium 기본 기능 · 관련글 · 댓글.
]

5. Image 다운로드

5.1 urlretrieve

# Test URL
url = "https://www.residentadvisor.net/images/events/flyer/2017/7/no-0713-986042-front.jpg"

def download_image(url, filename):
    urlretrieve(url, filename)

if __name__ == "__main__":
    download_image(url, "testPhytonImg.jpg");

5.2 403 Forbidden

403 Forbidden

작동중인 서버에 클라이언트의 요청이 도달했으나, 서버가 클라이언트의 접근을 거부할 때 반환하는 HTTP 응답 코드이자 오류 코드다.

출저 - Wiki

Image 다운로드하는데 403 에러가 뜬다. 이유는 User-Agent 정보가 없어서 그렇습니다.

User-Agent

user agent는 HTTP 요청을 보내는 디바이스와 브라우저 등 사용자 소프트웨어의 식별 정보를 담고 있는 request header의 한 종류이다.

• 형태: Mozilla 정보/버전 + 운영체제 정보 + 렌더링 엔진 정보 + 브라우저

출저 - User-agent 정확하게 해석하기

User-Agent는 쉽게 말해 접속하는 장치(브라우저, 디바이스)의 정보인데, request 라이브러리를 통해 요청할 경우 로봇(크롤러)라 판단하여 접속을 막는 것입니다. 쉽게 말해, 보안 조치라고 생각하면 됩니다.

코드를 조금 수정하여 header에 User Agent를 추가하여 요청해면 데이터를 다운받을 수 있습니다. (이렇게 수집된 데이터를 활용해서는 안됩니다)

import urllib.request

# Test URL
url = "https://www.residentadvisor.net/images/events/flyer/2017/7/no-0713-986042-front.jpg"

def download_image(url, filename):
    headers = {
        'User-Agent': 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) 
                        AppleWebKit/537.36 (KHTML, like Gecko) Chrome/71.0.3578.98 Safari/537',
    }
    req = urllib.request.Request(url, None, headers)
    res = urllib.request.urlopen(req)

    f = open(filename, 'wb')
    f.write(res.read())
    f.close()

 if __name__ == "__main__":
    download_image(url, "testPhytonImg.jpg");

출저 - Stack Overflow

💎 Reference

• 2.6 사이트 정보 추출하기 - beautifulsoup 사용법 (1)
• 동적 웹크롤링 - selenium 소개 및 기초사용법
• pip 패키지 목록 requirements.txt 생성 및 설치 방법

이번 포스팅에서는 Pelican에 플러그인 추가하면서 삽질을 많이 해서 플러그인 추가하는 방법과 제가 사용했던 플러그인들을 공유해볼까 합니다.

1. Pelican Plugin

1.1 Official Repository

주소: https://github.com/getpelican/pelican-plugins

위의 주소로 들어가면 공식 plugin 목록들을 볼수 있습니다.

1.2 Install

official repository를 다운받습니다.

git clone --recursive https://github.com/getpelican/pelican-plugins

원하는 플러그인들을 프로젝트안에 넣습니다.

설정 파일인 pelicanconf.py에 아래 항목을 채워넣습니다.

PLUGIN_PATHS = ['path/to/pelican-plugins'] # 플로그인 상위 경로
PLUGINS = ['assets', 'sitemap', 'gravatar'] # 사용하려는 플러그인 목록

저는 테마 폴더 안에 플러그인을 내장해놔서 아래와 같이 구성했습니다.

아래와 같은 플러그인들을 사용했습니다.

• sitemap
• representative_image
• share_posts
• neighbors
• custom_article_urls

제가 사용했던 플러그인을 소개해볼까합니다.

2. Pelican Plugins

플러그인을 설치하면 해당 플러그인의 md 파일에서 설정하는 방법에 대해 상세하게 알려줍니다.

2.1 sitemap

Sitemap을 생성해주는 플러그인입니다.

Usage

해당 플러그인을 설치하면 url/sitemap.xml 경로로 사이트맵을 볼 수 있습니다. 예시: https://twinklekhj.xyz/blog/sitemap.xml

Settings

pelicanconf.py에 아래와 같이 플러그인 목록에 추가해줍니다.

PLUGINS=['sitemap']

SITEMAP의 기본적인 세팅은 다음과 같습니다.

SITEMAP = {
    'format': 'xml'
}

자세한 설정은 Sitemap GitHub Repository에서 보실 수 있습니다.

Sitemap Definition

💡 Sitemap

웹에서 특정 단어를 검색하게 되면, 검색엔진을 통해서 원하는 정보를 찾을 수 있게 해줍니다.

이때, 검색엔진은 크롤러라고 불리는 로봇을 이용하여 다양한 웹 정보를 수집합니다. 크롤러가 웹사이트들을 방문하여 웹 사이트 내의 여러 페이지들과 정보에 대해 수집하는데, 이때 도움을 주는 것이 바로 사이트 맵입니다.

사이트맵(sitemap)은 웹사이트의 구조를 크롤러가 찾기 쉽도록 정리한 XML 형식의 파일입니다.

사이트맵이라는 단어는 사이트와 맵의 합성어로, 웹사이트의 지도라는 뜻입니다. 사이트맵은 크롤러에게 웹사이트의 구조와 목차를 설명해 주고 보다 쉽게 정보를 수집해갈 수 있도록 하는 역할을 합니다.

출저: 사이트맵(sitemap)을 알아보자

2.2 Representative Image

Article의 대표 이미지를 설정해주는 플러그인입니다. 해당 플러그인을 설정하면 아래와 같이 article에 대표 이미지를 설정할 수 있습니다.

pelicanconf.py에 아래와 같이 플러그인 목록에 추가해줍니다.

PLUGINS = ['representative_image']

이제 template 파일에서 아래와 같이 사용할 수 있습니다.

{% for article in articles_page.object_list %}
    {% if article.featured_image %}
        {# Representation Image Plugin Start #}
            <img src="{{ article.featured_image }}" 
                 alt="{{ article.title|capitalize }} Preview Image">
        {# Representation Image Plugin End #}
    {% else %}
{% else %}

2.3 Share Posts

작성한 Article을 소셜 미디어에 공유할 수 있는 플러그인입니다. 해당 플러그인을 설정하면 Article에 아래와 같이 추가하여 사용할 수 있습니다.

pelicanconf.py에 아래와 같이 플러그인 목록을 추가해줍니다.

PLUGINS = ['share_posts']

이제 템플릿에서 아래와 같이 사용할 수 있습니다.

{# Share Post Plugin Start #}
{% if article.share_post %}
<ul>
<li>
  <a href="{{ article.share_post['email'] }}"
     target="_blank" title="Share via Email">Email</a>
</li>
<li>
  <a href="{{ article.share_post['twitter'] }}"
     target="_blank" title="Share on Twitter">Twitter</a>
</li>
<li>
  <a href="{{ article.share_post['facebook'] }}"
     target="_blank" title="Share on Facebook">Facebook</a>
</li>
<li>
  <a href="{{ article.share_post['linkedin'] }}"
     target="_blank" title="Share on LinkedIn">LinkedIn</a>
</li>
{% endif %}
{# Share Post Plugin End #}

저는 한국에서 사용할 만한 Social을 추가했는데 공식적으로는 facebook, email, twitter, diaspora, linkedin, hacker-news, reddit 항목들을 지원합니다.

아쉬운 점은 Pelican 레퍼런스가 외국이다 보니 한국에서 보통 많이 사용하는 소셜 미디어(Instagram, KakaoTalk 등)가 없다는 점입니다.😢 그래도 없는 것보단 나으니 추가해주었습니다.

2.4 Custom Article URL

작성한 article의 경로를 바꿀수 있는 플러그인입니다.

기존에는 root에 생성되던 파일에 카테고리로 구분할 수 있는 경로를 추가해주었습니다.

• 기존: https://localhost:8000/create-pelican-site.html
• 변경: https://localhost:8000/posts/pelican/create-pelican-site.html

pelicanconf.py에 아래와 같이 플러그인 목록을 추가해줍니다.

PLUGINS = ['custom_article_urls']

Custom Article URL 설정은 다음과 같습니다.

# PLUGIN - custom_article_urls
CUSTOM_ARTICLE_URLS = {
    'Category 1': {
        'URL': '{category}/{slug}.html',
        'SAVE_AS': '{category}/{slug}.html'
    }
}

2.5 neighbors

작성한 Article의 이전/다음 포스트를 알려주는 플러그인입니다.

pelicanconf.py에 아래와 같이 플러그인 목록을 추가해줍니다.

PLUGINS = ['neighbors']

이제 템플릿에서 아래와 같이 사용할 수 있습니다.

<ul>
    {% if article.prev_article %}
        <li>
            <a href="{{ SITEURL }}/{{ article.prev_article.url}}">
                {{ article.prev_article.title }}
            </a>
        </li>
    {% endif %}
    {% if article.next_article %}
        <li>
            <a href="{{ SITEURL }}/{{ article.next_article.url}}">
                {{ article.next_article.title }}
            </a>
        </li>
    {% endif %}
</ul>
<ul>
    {% if article.prev_article_in_category %}
        <li>
            <a href="{{ SITEURL }}/{{ article.prev_article_in_category.url}}">
                {{ article.prev_article_in_category.title }}
            </a>
        </li>
    {% endif %}
    {% if article.next_article_in_category %}
        <li>
            <a href="{{ SITEURL }}/{{ article.next_article_in_category.url}}">
                {{ article.next_article_in_category.title }}
            </a>
        </li>
    {% endif %}
</ul>

💎 References

• Pelican Plugin - Sitemap
• Pelican Plugin - share_post
• Pelican Plugin - representative_image
• Pelican Plugin - custom_article_urls
• Pelican Plugin - neighbors

💎 마치며

Pelican에 대해 알아보면서 많이 사용되는 프로그램은 아니다보니 레퍼런스가 많이 없다는 것을 실감하면서 아쉬웠습니다.😢

그래도 Plugin을 추가하면 기능이 풍부해져 필요한 기능이 있으면 공식 레포에서 찾아보면서 추가하면 좋을 거 같습니다.🤗

이상으로 Pelican Plugin 소개를 마치겠습니다.🙌

자체 제작 테마가 완성되었습니다~!🙌🙌 테마를 만들면서 경험했던 내용을 공유하고자 합니다.

테마를 만들어 GitHub에 Public Repo로 공유하고 있습니다.💖 제가 만든 테마는 하위 링크에서 소스 및 데모페이지를 보실 수 있습니다.😎

• 소스: https://github.com/twinklekhj/pelican-twinkle
• 데모: https://twinklekhj.xyz/blog/

이번 포스팅에서는 Pelican의 구조와 템플릿 만드는 방법, 템플릿 별 설명 및 구현 화면, 커스텀 템플릿 추가 등 테마에 커스텀할 수 있는 것들에 대해 설명해볼까합니다.

1. Pelican Structure

1.1 File Structure

테마를 개발하기 위해서는 아래의 파일 구조를 따라야합니다.

├── static
│   ├── css
│   └── images
└── templates
    ├── archives.html         // to display archives
    ├── article.html          // processed for each article
    ├── author.html           // processed for each author
    ├── authors.html          // must list all the authors
    ├── categories.html       // must list all the categories
    ├── category.html         // processed for each category
    ├── index.html            // the index (list all the articles)
    ├── page.html             // processed for each page
    ├── period_archives.html  // to display time-period archives
    ├── tag.html              // processed for each tag
    └── tags.html             // must list all the tags. Can be a tag cloud.

• static 폴더: css, js 등 정적 리소스
• templates 폴더: 콘텐츠 생성에 사용될 템플릿 목록들

템플릿

템플릿은 Pelican에서 직접 만들어주는 페이지로, 해당 페이지에 [1.2] Pelican 변수를 사용할 수 있습니다.

• 템플릿 파일이 꼭 있을 필요는 없습니다.
• 또, html을 추가한다고 해서 템플릿으로 생성되는 것은 아닙니다.

중요도에 따라 템플릿을 정리해보면 다음과 같습니다.

템플릿 목록

• index: (필수) 메인 페이지 (포스트 목록)
• article: (필수) 포스트 별 내부 페이지
• categories: 카테고리 목록 보여주는 화면
• category: 카테고리 별 페이지 (포스트 목록)
• tags: 태그 목록 보여주는 화면
• tag: 태그 별 페이지 (포스트 목록)
• archives: date 순 포스트 목록 페이지 (포스트 목록)
• period_archives: 기간별 포스트 목록 페이지 (포스트 목록)

1.2 Pelican Variable

Pelican Template에서 사용할 수 있는 변수 목록들입니다. Pelican Docs에서 자세히 볼 수 있습니다.

변수는 너무 많고, 설명이 부족해서 이해안되는 부분들이 많아서 최대한 이해하고 사용해보고, 다른 테마들의 소스 코드를 참고하였습니다.😂

Jekyll이나 기술처럼 알려지지 않았다보니 레퍼런스가 거의 없는게 아쉬웠습니다..

Common Variable

모든 템플릿에서 사용할 수 있는 변수 목록들입니다.

Page Variable

Pagination이 활성화 되어있다면, 아래와 같은 변수를 쓸 수 있습니다.

1.3 Pelican Objects

Article

Article에 담긴 정보입니다.

Author / Category / Tag

1.4 Template Extension

Jinja의 핵심은 상속에 있습니다. 상위 템플릿을 상속받아 하위 템플릿을 구성합니다.

Base Template

base.html 파일을 생성하고, 모든 템플릿에서 이 파일을 상속받도록 했습니다.

<!DOCTYPE html>
<html lang="{{ DEFAULT_LANG }}">
<head>
    {% block head %}
        <title>{% block title %}{{ SITENAME }}{% endblock title %}</title>
        {% block include %}
            {% include "components/_include.html" %}
        {% endblock %}
    {% endblock head %}
</head>
<body>
{# Header #}
{% block header %}
    {% include "components/_header.html" %}
{% endblock %}
<main>
    {# Sidebar #}
    {% block sidebar %}
        {% include "components/_sidebar.html" %}
    {% endblock %}

    {# Content #}
    <section>{% block content %}{% endblock %}</section>
</main>

{# Footer #}
{% block footer %}
    {% include "components/_footer.html" %}
{% endblock %}
</body>
</html>

block 구문을 이용하여 위와 같이 템플릿을 구성했습니다. 아래 영역들은 어느 템플릿 엔진을 쓰던간에 제가 주로 지정하는 영역들입니다.🤗

템플릿 영역

• head: head 영역
• include: include 영역; static 파일 import 영역
• header: 헤더 영역; <header> tag
• footer: 푸터 영역; <footer> tag
• sidebar: 메뉴 링크 영역; <aside> tag
• content: 실제 페이지 마다 내용이 삽입되는 영역

Sub Template

하위 템플릿 페이지에서 아래와 같이 작성합니다. 아래는 authors.html 템플릿 예시입니다.

{% extends "base.html" %}
{% block content %}
    <ul>
        {% for author, articles in authors %}
            <li><a href="{{ SITEURL }}/{{ author.url }}">
              {{ author.name }} ({{ articles|length }})
            </a></li>
        {% endfor %}
    </ul>
{% endblock %}

하위 템플릿에서 block 구문을 이용하면 간편하게 상위 템플릿인 base.html에서 사용한 block 영역을 대체할 수 있습니다.

2. Template Implementation

저는 아래와 같은 페이지들을 구현했습니다.

구현한 템플릿

• index: (필수) 메인 페이지 (포스트 목록)
• article: (필수) 포스트 별 내부 페이지
• categories: 카테고리 목록 보여주는 화면
• category: 카테고리 별 페이지 (포스트 목록)
• tags: 태그 목록 보여주는 화면
• tag: 태그 별 페이지 (포스트 목록)
• archives: date 순 포스트 목록 페이지 (포스트 목록)

겹치는 페이지는 index, category, tag, archives는 포스트 목록을 보여주는 페이지기 때문에 화면이 거의 유사하여 따로 설명하지 않겠습니다.

아래는 주요 구현한 화면들입니다.

2.1 index.html

index.html은 블로그의 초기 페이지입니다.

'/'로 들어오는 메인페이지기 때문에 가장 핵심⭐ 페이지입니다.

Header, Sidebar, Content, Footer 영역을 조합하여 아래와 같이 페이지를 구성하였습니다.

Header 영역의 우측 아이콘을 클릭하면 Dark 모드로도 전환할 수 있습니다.

2.2 article.html

article.html은 게시글 상세 페이지입니다. content 폴더 밑에 작성한 게시글(.rst, .md 파일들)을 보여주는 화면입니다.

주요 기능은 스타일링 + 플러그인을 이용하여 아래와 같이 구현하였습니다.

주요 기능

• 게시글 상세
• 코드 블럭 (맥 스타일, Syntax Highlighting)
• 공유 기능
• 이전/다음 포스트 이동 기능
• 코멘트 기능

Light	Dark

2.3 categories.html

categories.html은 카테고리 목록을 보여주는 화면입니다.

Category 목록은 이미 사이드바에 있기 때문에 다른 화면이 필요했고, velog의 시리즈 기능을 모티브로 categories 화면을 구상하였습니다.

2.4 tags.html

tags.html은 태그 목록을 보여주는 화면입니다.

Tag 목록도 이미 사이드바에 있기 때문에, Highcharts 라이브러리를 이용하여 Bubble 형태의 차트로 화면을 구상하였습니다.

Highcharts

아래 코드를 참고했습니다.

!codepen[twinklekhj/embed/MWRrmKY?Cresult&theme-id=light&height=300]

3. Custom Template

블로그 테마를 만들다보니 문득 궁금해졌습니다.

• 포스트 목록외에는 경로를 내맘대로 지정할 수는 없는건가?
• html 파일을 추가하면 나만의 홈페이지 경로를 추가할 수는 없는건가?

콘텐츠에 메타 정보를 이용해서 커스텀 템플릿을 만들 수 있습니다.

3.1 md 파일 생성

content 폴더에 md 파일을 생성하여 원하는 커스텀 정보로 수정합니다.

수정할 메타 정보

• url: 접근할 url
• save_as: content 파일 생성 경로
• template: 사용할 템플릿 파일

저는 drafts 목록을 볼수 있도록 커스텀 페이지를 추가로 만들었습니다.

Title: Drafts
Slug: drafts
Date: 2024-04-02
url: drafts/
Save_as: drafts/index.html
Template: custom/drafts

3.2 Template 파일 생성

template 메타 정보에 적은 파일을 생성합니다.

<!-- 파일 위치: templates/custom/drafts.html -->
{% extends "template/base.html" %}
{% block title %}{{ super() }} - Drafts{% endblock %}
{% block content_title %}
    <h6 class="desc">Drafts</h6>
    <h3 class="title">Posts</h3>
{% endblock %}
{% block content %}
    <ol class="post-list">
        {% for article in drafts %}
            {{ section(article) }}
        {% endfor %}
    </ol>
{% endblock content %}

3.3 Demo

이제 커스텀 url로 접근하면 렌더링한 페이지를 볼 수 있습니다.

http://localhost:8000/drafts/

💎 References

• Pelican Docs - Themes

💎 마치며

Insights

만들다보니 여러가지 추가적인 인사이트를 얻을 수 있었습니다.

정적 사이트 동작원리

당연하게도 정적 사이트 생성기 프로그램을 분석했으니, 대강의 흐름을 알 수 있었습니다.

• 형식에 맞춰 포스팅 작성
• 빌드 & 실행 &배포
• 커스터마이징하는 방법

아마 유사한 프로그램인 Jekyll을 파보다보면 비슷할 거 같다는 느낌을 받았습니다.😁

RSS Feed

RSS라는 것을 전혀 몰랐는데 사이트에 RSS 기능 추가해보고, 다른 사이트 RSS 구해보기도 하고 굉장히 신선한 기술을 알게되었습니다.

velog도 RSS를 지원하구요. 현재 블로그 RSS: https://api.velog.io/atom/@developer_khj/

Store 기능 Vanilla로 구현하기

theme 기능을 구현하면서 전역 상태 관리가 필요해졌습니다. 요즘에 react를 쓰면서 전역상태 관리를 redux로 했더니, 없이 하려니까 없인 못살겠다 싶었습니다 🤦‍♀️

Vailla JS에서 순수 Store를 만들면서 redux가 얼마나 편리한 라이브러리인지, 어떤 원리로 동작하는지 조금 더 깨닫게 되는 계기가 되었습니다

Conclusion

갑자기 신기술에 꽂혀 목매고 있는 나 자신... velog에 포스팅을 하면서 블로그를 만드는 나 자신...

GitHub Blog는 개발자의 숙원이라 불릴 만큼 대단한 일이라고 생각하며, 열심히 기술을 연마해보았습니다. 기술 분석에 대한 스킬이 한층 더 업그레이드 된 기분입니다.🤗

지난 포스팅까지는 테마를 만드는 것 대해 간단히 생각했습니다.

레이아웃 적당한 테마를 하나 골라서 CSS만 변경하면 끝~!

딱 원하는 구성이 있는 테마를 찾기도 어려울 뿐더러, 레이아웃 적당한 테마를 골랐더니 CSS가 엉망이라 다뜯어고치게 생겼으니😣😣

궁금한게 생기면 결판을 지을때까지 생각이 드는 성격이라, 결론은 테마 개발의 A-Z까지 알아야겠다는 생각이 들었습니다. 🔥🔥

커스텀 테마 개발에 대해 본격적으로 공부해가며 포스팅해보고자 합니다. 🤗

우선, Pelican은 Jinja Template Engine을 기반으로 작동하기 때문에 Jinja에 대해 알필요가 있습니다.

1. Template

본격적으로 테마를 개발하기에 앞서 템플릿의 구조에 대해 살펴보겠습니다 🙌

1.1 Template Engine

Template Engine

A template processor (also known as a template engine or template parser) is software designed to combine templates with data (defined by a data model) to produce resulting documents or programs.

출저 - Wiki: Template processor

Template Engine이란, 지정된 템플릿 양식과 데이터가 합쳐져 HTML 문서를 출력하는 소프트웨어입니다.

쉽게 말해, 웹사이트 화면을 어떤 형태로 만들지 도와주는 양식입니다.

1.2 Jinja

Definition

Jinja

Jinja is a web template engine for the Python programming language.

It was created by Armin Ronacher and is licensed under a BSD License.

Jinja is similar to the Django template engine but provides Python-like expressions while ensuring that the templates are evaluated in a sandbox.

It is a text-based template language and thus can be used to generate any markup as well as source code. 출저 - Wiki: Jinja

Jinja는 Python언어를 위한 템플릿 엔진입니다. Armin Ronacher가 개발, BSD 라이센스를 두고 있습니다. 파이써닉한 문법을 갖고있으며, 템플릿 언어로 마크업을 만들어냅니다.

Jinja에 대한 추가적인 정보는 Jinja Docs에서 보실 수 있습니다.

Version

Pelican을 설치하면 dependency로 자동으로 Jinja가 설치됩니다.

Version Info

• Pelican: 4.9.1
• Jinja: 3.1.2

2. Jinja Syntax

Jinja의 문법을 간략하게 정리해보면 아래와 같습니다.

• Statements: 제어 구조, {% ... %}
• Expressions: 표현식, {{ ... }}
• Comments: 주석, {# ... #}

2.1 Statements

Statements는 제어 구조를 가지는 문법입니다.

제어 구조에는 조건문(if), 반복문(for), 매크로(macro), 블록(block) 등 프로그램의 흐름을 제어하는 모든 것을 나타냅니다.

syntax

{% ... %}

if

if-elif-else 예시입니다.

{% if kenny.sick %}
    Kenny is sick.
{% elif kenny.dead %}
    You killed Kenny!  You bastard!!!
{% else %}
    Kenny looks okay --- so far
{% endif %}

인라인 구조도 가질 수 있습니다.

{{ "[{}]".format(page.title) if page.title }}

for

루프 필터링을 사용한 for문 예시입니다.

<ul>
{% for user in users %}
    <li>{{ user.username|e }}</li>
{% else %}
    <li><em>no users found</em></li>
{% endfor %}
</ul>

macro

매크로는 함수와 유사한 기능을 합니다

{% macro input(name, value='', type='text', size=20) -%}
    <input type="{{ type }}" name="{{ name }}" value="{{
        value|e }}" size="{{ size }}">
{%- endmacro %}

<p>{{ input('username') }}</p>
<p>{{ input('password', type='password') }}</p>

filter

filter 구문을 이용하면 Jina 정규 Filter를 이용할 수 있습니다.

{% filter upper %}
    This text becomes uppercase
{% endfilter %}

혹은 Expressions에서 아래와 같이 사용할 수 있습니다.

{{ name|upper }}

set

set 구문을 이용하면 변수를 할당할 수 있습니다.

{% set navigation = [('index.html', 'Index'), ('about.html', 'About')] %}

block

block은 상속에 사용되며 동시에 자리 표시자 및 대체 역할을 합니다.

base.html으로 템플릿을 만들고 하위 템플릿에서 상속받습니다.

상위 템플릿 예시

<!DOCTYPE html>
<html>
<head>
    {% block head %}
        <title>{% block title %}{{ SITENAME }}{% endblock title %}</title>
    {% endblock head %}
</head>
<body>
    {% block content %}
    {% endblock %}
</body>
</html>

하위 템플릿 예시 - categories.html

{% extends "template/base.html" %}
{% block title %}
    {{ super() + '- Categories' }}
{% endblock %}

{% block content %}
    <dl id="tag_list">
        <ul>
        {% for category, articles in categories %}
            <li><a href="{{ SITEURL }}/{{ category.url }}">{{ category }}</a></li>
        {% endfor %}
        </ul>
    </dl>
{% endblock %}

include

include는 다른 템플릿을 렌더링하고 결과를 현재 템플릿에 출력합니다.

{% include 'header.html' %}
Body goes here.
{% include 'footer.html' %}

2.2 Expressions

Expressions 문은 값을 표현하는데 사용됩니다.

syntax

{{ ... }}

• 리터럴(literal) 값 - Python 객체(str, int, float, list,tuple, dict)
• 사칙 연산(+, -, *, /, %, *, **)
• 비교 연산(==, !=, >, >=, <, <=)
• 논리 연산(and, or, not)
• 기타 연산(in, is: 테스트 수행, |: 필터적용, ~: 문자연결, (): 콜러블 호출, ./[]: 객체 속성 가져옴,)

2.3 Comments

주석문을 표현하는데 사용됩니다.

{# note: commented-out template because we no longer use this
    {% for user in users %}
        ...
    {% endfor %}
#}

💎 Rerferences

• Pelican Docs - Themes
• Jinja Docs - Template

💎 마치며

지금까지 Jinja Template Engine에 대해 살펴보았습니다. 확실히 문법을 알게되니 템플릿 개발에 있어 한층 이해도가 올라가는 거 같습니다. 😎

코딩테스트 연습겸 Python을 시작하였는데, 레퍼런스를 찾다보니 Pelican이란 신기한걸 발견하여 츄라이~해보면서 소개해보고자 포스팅을 작성하게 되었습니다.

참고로, Pelican은 GitHub Pages로 블로그를 만드는 프로그램으로 유명한 Jekyll과 유사한 프로그램입니다.

최종 목표는 coding test 코드를 작성하면 blog에 자동으로 포스팅을 해주는 것인데,, 가능할런지*^^* ...

이번 포스팅에서는 Pelican과 GitHub Pages로 Blog를 만드는 방법에 대해 소개합니다. 😊

깃허브 링크

혹여나 참고하실 분을 위해 깃허브 링크를 남겨두었습니다.

• Repository: https://github.com/hjkim1004/pelican-demo/
• GitHub Pages: https://twinklekhj.xyz/pelican-demo/

1. Pelican

1.1 Definition

Pelican

Static site generator powered by Python “Pelican” is an anagram of calepin, which means “notebook” in French.

Pelican은 Python 기반 정적 사이트 생성기 입니다.

왜 이름이 Pelican일까? Pelican은 프랑스어로 notebook을 의미한다고 합니다. 노트, 블로그 같은 느낌으로 이름을 지은것이 아닐런지요 ㅎㅎ

Pelican 공식 사이트를 보시면 다양한 정보를 얻을 수 있습니다.

1.2 Install Dependencies

💡 Prerequisites

pelican은 python 기반 프로그램이기 때문에 python이 설치되어 있어야합니다. 다음과 같은 명령이 실행되야합니다

• python
• pip

# 기본 설치
pip install pelican

# 추가 설치: markdown
# markdown 형식으로 글을 쓰려면 패키지를 추가로 설치해주세요.
pip install markdown

# 추가 설치: typogrify
# typographically-improved HTML 향상된 HTML을 이용하려면 추가로 설치해주세요.
pip install typogrify

pelican을 설치하면 아래 종속 패키지가 자동으로 설치됩니다.

• feedgenerator: Atom feeds 생성기
• jinja2: Template 엔진
• pygments: syntax highlighting
• docutils: reStructuredText as an input format
• blinker: an object-to-object and broadcast signaling system
• unidecode: for ASCII transliterations of Unicode text utilities
• MarkupSafe: for a markup-safe string implementation
• python-dateutil: date metadata 해석

1.3 New Project

pelican-quickstart 명령어를 통해 skeleton 프로젝트를 생성할 수 있습니다.

mkdir [projectname]
cd [projectname]

pelican-quickstart

저는 pelican-demo이라는 프로젝트를 생성하였습니다.

mkdir pelican-demo
cd pelican-demo
pelican-quickstart

pelican-quickstart
Welcome to pelican-quickstart v4.9.1.

This script will help you create a new Pelican-based website.

Please answer the following questions so this script can generate the files
needed by Pelican.


> Where do you want to create your new web site? [.]
> What will be the title of this web site? Pelican Demo
> Who will be the author of this web site? Heejeong Kim
> What will be the default language of this web site? [Korean]
> Do you want to specify a URL prefix? e.g., https://example.com   (Y/n) n
> Do you want to enable article pagination? (Y/n) y
> How many articles per page do you want? [10]
> What is your time zone? [Europe/Rome]
> Do you want to generate a tasks.py/Makefile to automate generation and publishing? (Y/n) y
> Do you want to upload your website using FTP? (y/N) n
> Do you want to upload your website using SSH? (y/N) n
> Do you want to upload your website using Dropbox? (y/N) n
> Do you want to upload your website using S3? (y/N) n
> Do you want to upload your website using Rackspace Cloud Files? (y/N) n
> Do you want to upload your website using GitHub Pages? (y/N) y
> Is this your personal page (username.github.io)? (y/N) n
Done. Your new project is available at D:\Git\pelican-demo

아래와 같은 스크립트가 실행되면서 Pelican 프로젝트가 생성됩니다.

1.4 Pelican Structure

pelican-quickstart로 프로젝트를 생성하면 다음과 같은 구조로 생성됩니다.

yourproject/
├── content                # 포스팅 디렉터리
│   └── (pages)
├── output                # build 디렉터리
├── tasks.py            # 실행 관련 설정 파일
├── Makefile            # build 파일
├── pelicanconf.py        # 주요 환경 설정 파일
└── publishconf.py        # Settings to use when ready to publish

1.5 Build & Run

build

아래 명령어로 pelican 홈페이지를 빌드할 수 있습니다.

pelican content

run

아래 명령어로 서버를 실행할 수 있습니다.

pelican --listen

기본 포트는 8000번으로, tasks.py에서 수정할 수 있습니다. http://localhost:8000 에서 접속하실 수 있습니다.

초기 프로젝트 실행화면은 다음과 같습니다.

2. Write Content

Pelican은 기본적으로 HTML 태그 지원을 활성화하기 위해 reStructuredText에 대한 확장을 구현합니다. 하지만 markdown 패키지를 설치하면 markdown 형식으로 포스팅할 수 있습니다.

하지만 저는 markdown을 이용할 것입니다🤣

2.1 Sample

Markdown 게시물의 메타데이터 구문은 다음 패턴을 따라야 합니다.

Title: My super title
Date: 2024-03-27 22:14
Modified: 2024-03-27 22:14
Category: Pelican
Tags: python, pelican
Slug: create pelican site
Authors: Heejeong Kim
Summary: Pelican Posts

This is the content of my super blog post.

Pelican은 Markdown에 기재한 메타데이터와 본문으로 HTML을 생성합니다.

<html>
    <head>
        <title>My super title</title>
        <meta name="tags" content="thats, awesome" />
        <meta name="date" content="2024-03-27 20:14" />
        <meta name="modified" content="2024-03-27 20:14" />
        <meta name="category" content="yeah" />
        <meta name="authors" content="Alexis Métaireau, Conan Doyle" />
        <meta name="summary" content="Short version for index and feeds" />
    </head>
    <body>
        This is the content of my super blog post.
    </body>
</html>

2.2 Metadata

Meta Data 목록은 다음과 같습니다.

2.3 Link static files

블로그 글에는 역시 사진이 같이 있어야 좋겠죠? 하지만 이미지를 사용하려면 경로 문제가 생기기 때문에 추가적으로 설정해주어야 합니다.

Settings

pelicanconf.py 파일에 아래 항목을 붙여넣습니다.

# 파일 위치: pelicanconf.py

# path-specific metadata
EXTRA_PATH_METADATA = {
    "extra/robots.txt": {"path": "robots.txt"},
}

# static paths will be copied without parsing their contents
STATIC_PATHS = [
    "images",
    "extra/robots.txt",
]

content 폴더에 images와 extra 폴더를 생성합니다.

Usage

md 파일 내부에서 아래와 같이 사용합니다.

![Pelican Logo]({static}/path/to/image.png)

3. GitHub Pages

3.1 Repository Settings

Create Repository

Pages로 올릴 Repository를 생성합니다.

workflow key 세팅

Repository Secrets 세팅에서 workflow에서 사용할 키를 등록해줍니다.

3.2 CI/CD with GitHub Actions

GitHub Actions Marketplace에 등록된 Pelican Action를 이용하여 CI/CD를 구축했습니다.

GitHub Pages Pelican Build Action

https://github.com/marketplace/actions/github-pages-pelican-build-action?version=0.2.0

• action version: 0.2.0
• python version: python:3.12-slim

requirements.txt 생성

pelican
Markdown
typogrify

requirements.txt 파일을 생성하고, 다운로드할 라이브러리들을 적어줍니다.

pelican===4.9.1

위와 같이 버전도 명시할 수 있습니다.

Workflow 생성

프로젝트 안에 .github/workflows 폴더를 만들고, pelican.yml 파일을 생성해주고 아래 내용을 복사해 붙여넣습니다. (파일명은 변경하셔도 상관없습니다.)

# 파일 위치: .github/workflows/pelican.yml

name: Pelican CI/CD

on:
  # Trigger the workflow on push or pull request,
  # but only for the master branch
  push:
    branches:
      - master

jobs:
  build:

    runs-on: ubuntu-latest

    steps:
    - uses: actions/checkout@v2
    - uses: nelsonjchen/gh-pages-pelican-action@0.2.0
      env:
        # GH_PAGES_BRANCH: gh-pages
        # GH_PAGES_CNAME: custom domain
        # PELICAN_CONFIG_FILE: pelicanconf.py
        PELICAN_CONFIG_FILE: publishconf.py
        # PELICAN_CONTENT_FOLDER: content
        # PELICAN_THEME_FOLDER: package.json
        # GITHUB_TOKEN: ${{secrets.GITHUB_TOKEN}}
        GITHUB_TOKEN: ${{ secrets.GH_ACTIONS_TOKEN }}

Additional Setting

추가적으로 환경설정을 해주었습니다.

1. SITEURL

# 파일명: publishconf.py
SITEURL = "https://twinklekhj.xyz/coding/"

저는 기본 [username].github.io가 아닌 레포 이름으로 추가할 거라 publishconf.py 파일에 SITEURL 항목을 추가해주었습니다.

2. TIMEZONE

# 파일명: pelicanconf.py
TIMEZONE = 'Asia/Seoul'

프로젝트를 처음 생성하면 TIMEZONE이 Europe/Rome으로 생성되는데, 한국으로 변경해주었습니다.

3. DEFAULT_LANG

# 파일명: pelicanconf.py
DEFAULT_LANG = 'en'

프로젝트를 처음 생성하면 DEFAULT_LANG이 Korea로 생성되는데, 콘솔에서 자꾸 WARNING이 떠서 en으로 변경해주었습니다. (기본 언어를 한국으로 하실 분은 ko로 변경하시면 됩니다.)

3.3 Upload Project

만든 프로젝트를 올려줍니다.

💡 주의

content 폴더 아래의 하나의 포스팅이 꼭 있어야합니다.

# 깃 세팅 방법
git init
git add README.md
git commit -m "first commit"
git branch -M master
git remote add origin [깃 주소]
git push -u origin master

프로젝트 안에 workflow 가 있으니 프로젝트를 올리면 Action이 자동으로 수행됩니다.

GitHub Pages 를 세팅해준적이 없는데, 알아서 세팅이 되었습니다.🙌 친절한 깃허브씨..😍

3.4 Demo Page

workflow가 잘 실행되어 아래와 같은 화면을 띄웠습니다. 오예~~!!😎

혹여나 참고하실 분을 위해 상단에 깃허브 링크를 남겨두었습니다.

3.5 Trouble Shooting

환경세팅을 따라한답시고, 열심히 했는데 약 3시간동안 지속된 path 에러로 골머리를 썩었습니다. 혹시나 저와 같은 문제를 겪으실 까봐 공유합니다.😢

CRITICAL Exception: You need to specify a path __init__.py:666
containing the content (see pelican --help for more information)

역시나 프로그램은 거짓말을 하지 않더군요 무엇이 이상한가 싶으면 내 코드가 문제니라.. 🤦‍♀️

튜토리얼을 따라해 content 폴더에 아무것도 없어서 문제가 발생한 것이었습니다. 이 짓을 3시간이나 했다니... 타오른 시간🔥🤗

4. Pelican Theme

4.1 Official Theme

아무래도 기본적으로 제공해주는 화면은 매우 매우 불편합니다. 그래서 테마를 적용해보려고 합니다.😊

펠리칸 공식 테마는 아래에서 찾을 수 있습니다.

• Pelican 테마 공식 홈페이지: https://github.com/getpelican/pelican-themes
• Preview 페이지: https://pelicanthemes.com/

4.2 Apply Theme

저는 SVBTLE 테마를 다운받아 적용하였습니다. ⇒ Link: https://github.com/wting/pelican-svbtle

theme 추가

themes 폴더를 하나 생성하고, 폴더 밑에 다운받은 테마를 추가합니다.

pelicanconf.py 수정

pelicanconf.py 파일에서 THEME의 경로와 THEME_STATIC_PATHS 경로를 지정해줍니다.

# THEME settings
# THEME = 'path/to/theme'
THEME = "themes/svbtle"
THEME_STATIC_DIR = 'theme'

4.3 Demo Page

짜잔~! 완성-⭐ 테마까지 완벽히 적용되었습니다.💖 감격의 눈물이😂😂

4.4 Custom Theme

Pelican 공식 문서를 참고하시면 나만의 테마를 개발할 수 있습니다. 하지만 그것은 FM! 정석!

쉬운 방법은 그냥 레이아웃 적당한 테마를 하나 골라서 CSS만 변경하면 끝~! (그래도 필요한 변수들은 공식 문서에서 찾을 수 있습니다)

💎 References

• Pelican Docs
• Pelican Theme - svbtle

💎 마치며

약 12시간동안 Pelican 이란 것에 꽂혀 주구장창 하다보니 어느새 숙달되어버려서 Pelican이란 단어가 귀여워보이네요🤣

다음은 테마 개발을 해볼까합니다🤗🤗 모두 해피 코딩하세요.💖

혼자 나만의 페이지 만들기 프로젝트를 하기 위해 도메인을 사놓고 약 1년을 방치해두었습니다. 🤣 방치되어 있는 도메인을 적극 활용하기 위해 GitHub Pages에 연결해보려고 합니다.

이번 포스팅에서는 만든 GitHub Pages에 커스텀 도메인을 연결하는 방법을 소개합니다.😊

1. 도메인이란?

1.1 도메인 관련 용어

도메인(Domain)

도메인은 인터넷에 연결된 컴퓨터의 IP를 사람이 기억하기 어렵기 때문에 이를 위해서 각 IP에 사람이 기억하기 쉬운 별칭을 붙인 것입니다.

도메인 체계

도메인은 “.”또는 루트(root)라 불리는 도메인 이하에 아래 그림과 같이 역트리(Inverted tree)구조로 구성되어 있으며, 아래와 같이 3단계로 구분됩니다.

• 1단계: 1단계 도메인 또는 최상위 도메인(TLD: Top Level Domain)
• 2단계: 2단계 도메인(SLD: Second Level Domain)

도메인 종류

도메인의 종류에는 일반 도메인(gTLD)과 국가 도메인(ccTLD)이 있습니다.

네임서버(DNS)

네임서버(DNS: Domain Name Server)는 대표적으로 IP 주소와 도메인 주소를 연결해주는 역할을 합니다.

인터넷 주소창에 도메인을 입력할 때, 도메인 등록시 지정된 네임서버를 통해 해당 도메인과 연결된 IP주소를 확인하여 연결하게 됩니다.

따라서 도메인 등록시에 네임서버를 지정하고, 해당 네임서버에 연결 설정을 해야 정상 이용하 가능합니다.

1.2 도메인 구매 업체 선정

도메인을 연결하려면 먼저 도메인이 있어야겠죠? 도메인은 전문 업체를 통해 구매할 수 있습니다.

도메인 전문 업체를 선정할 때는 도메인 가격, 도메인 등록업체의 안정성 및 편의성, 편의성 및 부가서비스 등등 여러가지를 고려해야합니다.

한국인터넷진흥원 공인 등록대행사에 등록된 업체가 안정성으로 좋다고 하네요.

너무나 많은 고려사항이 있는데, 아래 블로그에 잘 정리되어 있어 확인해보시면 좋을 것같습니다. 참조 - 도메인 비교 및 추천, 구매 전 고려사항(호스팅 등)

Top 2를 꼽자면, 호스팅케이알과 가비아가 가장 인기있는데요. 더이상 고민하는건 머리가 아프니... 가장 많이 들어보고 규모가 크다고 생각되는 가비아로 선정했습니다.

2. 가비아 (Gabia)

2.1 도메인 구매

가비아 홈페이지에 들어가서 원하는 도메인명을 입력합니다. 도메인을 클릭하여 신청하기를 클릭하면 구매 홈페이지로 이동합니다.

2.2 도메인 연결

DNS 관리

My 페이지에서 DNS 관리툴 버튼을 클릭하시면 DNS 관리 사이트로 이동합니다.

도메인 설정

DNS 설정에서 도메인 설정을 눌러주세요

DNS 설정 수정하여 아래 레코드를 추가해줍니다.

• A 레코드를 만들어 아래 IP 목록을 추가해주세요.
• CNAME 레코드를 만들어 github 주소를 추가해주세요.

185.199.108.153
185.199.109.153
185.199.110.153
185.199.111.153

만약, 접속이 안된다면 GitHub Pages IP가 변경되었을 수 있습니다. GitHub Docs에서 IP정소를 확인할 수 있습니다.

3. GitHub 세팅

레포지토리 세팅에 들어가서 Pages 메뉴를 엽니다.

Custom domain 입력란에 구매한 도메인을 입력해줍니다.

도메인을 클릭하면, 자동으로 DNS check 프로세스가 진행됩니다.

설정이 완료되었다면, 위와 같이 성공 메시지가 나타납니다. 이제 기존 [username].github.io로 접속하던 url을 커스텀 도메인으로 접속할 수 있습니다.

• https://hjkim1004.github.io
• https://twinklekhj.xyz

완성-⭐

4. gh-pages 추가 설정

4.1 문제 발생 🤢

GitHub Actions으로 빌드배포 자동화를 구성했는데, 푸쉬했더니 커스텀 도메인이 풀리는 현상이 발견되었습니다.

위와 같이 workflow는 성공적으로 마쳤지만, 실제 사이트에 접속해보면 아래와 같이 404 페이지가 뜨는 것을 볼수 있습니다.

그렇다고 CI/CD 구축해놓고 배포할 때마다 Custom Domain을 설정해주는 것은 용납못함.😣

4.2 해결방안

build option 수정

// 파일 위치: package.json

"scripts": {
    "deploy": "echo '도메인주소' > ./build/CNAME && gh-pages -d build",
}

서칭 결과 빌드 옵션을 수정하면 된다고 하네요. 하지만 뭔가 하드 코딩인거 같아서 좀더 서칭해봤습니다.

cname-webpack-plugin 플러그인 설치

webpack을 사용한다면, cname-webpack-plugin을 설치하면 깔끔하게 해결됩니다.

npm i cname-webpack-plugin -D

// 파일 위치: webpack.config.js
const CnameWebpackPlugin = require('cname-webpack-plugin');

plugins: [
    new CnameWebpackPlugin({
        domain: '도메인명',
        // domain: 'twinklekhj.xyz',
    }),
]

4.3 원리 분석

도메인을 찾는 기준이 무엇인가?

CNAME 파일을 만드는 것입니다.

// 파일명: CNAME

twinkle.xyz

확장자가 없는 파일로, CNAME 파일을 생성하여 안에 도메인명을 붙여넣습니다.

4.4 결과

gh-pages workflow 결과 확인시, 도메인 네임이 추가된 것을 볼수 있었습니다.🤗🔥

이슈 트래킹까지 완벽🙆‍♀️

💎 References

• 한국 인터넷정보센터 - 도메인이란?
• GitHub Docs - GitHub Pages 사이트의 사용자 지정 도메인 관리
• GitHub Pages 배포 시 Custom Domain이 초기화 될 때
• cname-webpack-plugin

이번 포스팅에서는 Spring Initializer를 통해 새 프로젝트를 생성하면서 프로젝트를 세팅하는 과정을 공유해보고자 합니다.

1. 프로젝트 생성

1.1 새 프로젝트

Spring Initializer를 통해 새 프로젝트를 생성합니다.

이 때 우리는 또 한번의 선택을 거쳐야 하는데요, 바로 프로젝트 기술 환경 설정입니다. 프로젝트 이름부터 사용할 언어, 빌드 툴, JDK 버전, 패키징 타입까지 선택해줍니다.

💡 Check List

• Project Name, Group, Artifact
• Language: Java or Kotlin or ex
• JDK, Java Version: 8 or 11 or 17
• Build Tool: Gradle or Maven
• Packing: jar or war
• Spring Boot version

블로그 작성용 프로젝트이지만 나름 기술 선택에 있어 의의가 있습니다.

• project 이름: Test용이라 spring이 정해준 대로 (demo...ㅋ)
• group id: github에 작성용으로 올릴거라 내 아이디 경로로
• language: 아직 코푸링을 할 자신이 없어 Java 선택
• Build Tool: Gradle, Maven 둘다 써봤지만 느낀점: Gradle이 레퍼런스가 더 많고, Maven은 익숙. 보통 Maven 선택, 이번엔 Gradle 선택해봄
• Java Version: 주로 Java 8 버전을 선택했지만, 신기술 도입(공부)를 위해 17로 선택
• Packing: Spring Boot는 내장 톰캣이기 때문에 주로 jar로 패키징 하는 편

Spring Boot 버전을 선택하고, 사용할 라이브러리들(dependencies)을 선택합니다.

💡 Spring Boot Version

Spring Boot 버전을 선택할 때는 신중히 선택해야합니다.

• Java 버전에 따라 가용한 Boot 버전
• Boot 버전에 따라 관련 라이브러리들 자동 다운로드, 기존에 돌아가던 코드 안돌아갈 수 있음

가장 큰 예시로는 Spring Boot 2 => 3 Migration시 발생하는 문제들입니다.

• javax 패키지 ⇒ jarkata 패키지
• Spring Security 5 ⇒ Spring Security 6

1.2 기술 고민에 관한 고찰

직접 기술을 선택해보지 않았다면 기술을 선택하면서 기존에 쓰던데로 쓰면 되지, 이걸 왜 고민해? 하실 수는 있겠지만, 이는 새로운 기술을 도입(도전)하느냐 마느냐의 차이입니다.

• 기존에 Java-Spring 스택을 Kotlin-Spring으로 변경해볼까?
• 기존에 Java 8만 썼는데, 17로 해볼까?
• 기존에 Maven만 고집했는데, 요즘에 Gradle을 많이 쓴다는데 써볼까?

많은 회사 혹은 개발자들은 이런 고민을 하죠

• 요기요 - 요기요는 Kotlin을 어떻게 적용했나?
• 배달의 민족 - Spring Boot Kotlin Multi Module로 구성해보는 헥사고날 아키텍처

백엔드 개발자들은 프로젝트를 처음 구성할 때 사용할 기술에 관해 많은 고민을 합니다.

• 우리 데이터베이스(DB)로 CockroachDB가 요즘 흥한다던데 이걸 사용해 보는 건 어떨까?
• HTTP 클라이언트로 Retrofit이 좋을까 Feign을 사용하는 것이 좋을까?
• MySQL은 좀 진부하지 않아? 새로운 걸 좀 해볼까?

이 과정은 짧게는 개발자들 사이의 갑론을박에서 길게는 윗선의 결정까지 적지 않은 시간적 비용이 소모됩니다.

문제는 이렇게 어려운 선택들이 프로젝트를 성공적으로 이끌게 되었는가? 물론 그럴 때도 있겠지만 프로젝트 중후반에서야 "아.. 이거 OO를 사용하면 안 되는 거였는데.."라는 후회(?)를 하게 되는 경우가 적지 않게 있고, 이미 선정된 기술들이 이것 저곳 비즈니스 코드들 깊이 뿌리내려 있는 상황이라 이러지도 저러지도 못하는 상황에서 힘들게 프로젝트를 마무리하게 되는 것을 심심치 않게 보았습니다.

출저 - Spring Boot Kotlin Multi Module로 구성해보는 헥사고날 아키텍처 일부 발췌

2. Configuration

2.1 Package 생성

우선, 프로젝트의 큰 뼈대를 잡기 위해 Package들을 생성합니다.

💡 왜 패키지를 미리 정의할까?

사실 이 Package 구조는 언제든 변할 수 있습니다. 저는 규칙을 정하는 것을 좋아하기에 무엇을 어디에 저장할 지 미리 구조를 정의해두면, 클래스가 이리저리 튀는 것을 방지할 수 있습니다.

이 패키지들은 제가 주로 사용하는 구조입니다.

• annotation: 커스텀 어노테이션 클래스 모음
• aop: AOP와 관련된 클래스(Aspect, ExceptionHandler, 등) 모음
• api: API 작업과 관련된 클래스(RestController, Service, VO, 등) 모음
• config: 전역 빈들을 관리하기 위한 클래스 모음
• dao: DB 작업과 관련된 클래스(Entity, Repository, 등) 모음
• utils: 기타 static 작업 유틸 클래스 모음

2.2 Bean Configuration

Spring Bean

Spring에서는 Spring의 IoC Container에 의해 관리되는 POJO(Plain Old Java Object)를 Bean이라고 부르며, 이러한 Bean들은 Spring을 구성하는 핵심 요소입니다.

Spring Bean

• POJO(Plain Old Java Object)로써 Spring 애플리케이션을 구성하는 핵심 객체
• Spring IoC 컨테이너(또는 DI 컨테이너)에 의해 생성 및 관리
• class, id, scope, constructor-arg 등을 주요 속성

스프링은 컴포넌트 스캔을 통해 스프링 IoC 컨테이너에서 사용할 빈들을 등록합니다.

스프링에서 사용하는 컴포넌트(빈)에는 @Component, @Controller, @Service, @Repository, @Configuration 들이 있습니다.

• @Component : 컴포넌트 스캔에서 사용
• @Controlller : 스프링 MVC 컨트롤러에서 사용. 스프링 MVC 컨트롤러로 인식
• @Service : 스프링 비즈니스 로직에서 사용. 사실 @Service 는 특별한 처리를 하지 않는다. 대신 개발자들이 '핵심 비즈니스 로직이 여기에 있겠구나.' 라고 비즈니스 계층을 인식하는데 도움이 된다.
• @Repository : 스프링 데이터 접근 계층에서 사용. 스프링 데이터 접근 계층으로 인식하고, 데이터 계층의 예외를 스프링 예외로 변환해준다.
• @Configuration : 스프링 설정 정보에서 사용. 스프링 설정 정보로 인식하고, 스프링 빈이 싱글톤을 유지하도록 추가 처리를 한다.

이러한 어노테이션을 POJO에 등록하면, Spring은 시작과 동시에 아래와 같이 지정된 basePackages의 하위 패키지들을 탐색하여 Spring Container에 등록합니다.

@SpringBootApplication
@ComponentScan(basePackages = "io.github.twinklekhj.demo")
public class DemoApplication {

    public static void main(String[] args) {
        SpringApplication.run(DemoApplication.class, args);
    }
}

최상위 경로를 입력하면 아래와 같은 경고 메시지가 뜨는데요, 이는 이미 내장하고 있기 때문에 쓸 필요없다는 것입니다.

Redundant declaration: @SpringBootApplication already applies given @ComponentScan

즉, 프로젝트가 인지하는 최상위 경로라면 사용할 필요없고, 그 외 다른 경로를 지정하고자 하면 basePackages를 따로 지정해야된다는 의미입니다.

설정 Bean 생성하기

패키지를 생성한 뒤에는 config 패키지에서 @Configuration, @Bean 어노테이션을 이용하여 전역적으로 사용할 Bean들을 생성합니다.

@Configuration, @Bean 어노테이션은 언제 사용할까?

이러한 어노테이션은 수동으로 빈을 직접 등록해줘야만 하는 상황일 때 사용합니다.

1. 개발자가 직접 제어가 불가능한 라이브러리를 활용할 때
2. 애플리케이션 전범위적으로 사용되는 클래스를 등록할 때
3. 다형성을 활용하여 여러 구현체를 등록해주어야 할 때

예를 들면 아래와 같은 설정들이 있습니다.

• DB 설정
• RestTemplate 설정
• WebMvcConfig 설정
• Spring Security 설정
• QueryDSL 설정

3. Spring Security 설정

Spring Boot 3를 이용하면 자동으로 Spring Security가 설정됩니다. 특히 가장 골치 썩는것은 CSRF 설정이죠

import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.ComponentScan;
import org.springframework.context.annotation.Configuration;
import org.springframework.security.config.annotation.web.builders.HttpSecurity;
import org.springframework.security.config.annotation.web.configuration.EnableWebSecurity;
import org.springframework.security.web.SecurityFilterChain;
import org.springframework.security.web.csrf.CookieCsrfTokenRepository;

@Configuration
@EnableWebSecurity
@ComponentScan(basePackages = "io.github.twinklekhj")
public class SecurityConfig {
    @Bean
    public SecurityFilterChain filterChain(HttpSecurity http) throws Exception {
        http
                .authorizeHttpRequests(registry -> {
                    registry
                            .requestMatchers("/**").permitAll()
                            .requestMatchers("/api/**").permitAll()
                            .requestMatchers("/static/**").permitAll();
                })
                .csrf(configurer -> {
                    configurer.csrfTokenRepository(CookieCsrfTokenRepository.withHttpOnlyFalse());
                })
                .exceptionHandling(configurer -> {
                    configurer.accessDeniedPage("/error");
                });

        return http.build();
    }
}

4. Thymeleaf 설정

화면을 만들기 위해서 Template Engine인 Thymeleaf를 추가해주었습니다.

Spring Boot에서도 JSP를 사용할 수 있지만, 굳이 Spring에서도 빼고싶어하는 거를 넣고 싶지 않았기에 사뿐히 Thymeleaf로 갈아탔습니다.

Thymealeaf 설정은 간단합니다.

4.1 Dependency 추가

Maven

<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>

Gradle

implementation 'org.springframework.boot:spring-boot-starter-thymeleaf'

4.2 application.yml 수정

Thymeleaf는 기본적으로 application.properties 혹은 application.yml에서 설정 가능합니다. 아래는 기본적으로 많이 사용하는 설정 내용입니다.

# Spring Configuration
# - thymeleaf
spring:
  thymeleaf:
    suffix: .html
    prefix: classpath:/templates/
    enabled: true
    cache: false    # 개발중 false, 배포시 true

사실 이 설정은 Spring Auto Configure 기능에 의해 자동으로 설정됩니다.

4.3 View Controller 및 템플릿 파일 생성

HomeController

화면을 그릴 Controller를 생성합니다.

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;

@Controller
public class HomeController {
    @GetMapping("/")
    public String home(){
        return "index";
    }
}

Thymeleaf Fragment

Thymeleaf의 Fragment 기능을 이용하여 html을 분해하여 조각 조각 붙일 수 있습니다.

기존에 Tiles를 이용하여 Template을 만들던 저에겐 코드 복붙이란 있을 수 없는 일이었죠. 아쉽게도 Thymeleaf에는 Tiles는 없지만 Fragment 기능을 활용하여 코드를 분리할 수 있습니다.

<html lang="en" xmlns:th="http://www.thymeleaf.org">

<header th:fragment="header">
    header
</header>

나누고자 하는 th:fragment 속성을 사용하여 fragment를 선언합니다.

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<body>
    <th:block th:replace="~{components/_header::header}"></th:block>
    <th:block th:replace="~{components/_side::sidebar}"></th:block>
    <main>
        Body
    </main>
    <th:block th:replace="~{components/_footer::footer}"></th:block>
</body>
</html>

<th:block> 태그를 이용하여 Fragment를 불러옵니다.

완성-⭐

💎 References

• QueryDsl SpringBoot 3.0의 gradle 설정을 공유합니다.
• [Spring] 빈 등록을 위한 어노테이션 @Bean, @Configuration, @Component 차이 및 비교 - (1/2)

💎 마치며

이번 포스팅에서는 시저 암호에 대해 다뤄보고자 합니다.

시저 암호

시저 암호(Caesar cipher)

시저 암호(Caesar cipher) 또는 카이사르 암호는 암호학에서 다루는 간단한 치환암호의 일종이다.

실제로 로마의 황제 카이사르는 이 카이사르 암호를 사용하기도 했다. 카이사르 암호는 암호화하고자 하는 내용을 알파벳별로 일정한 거리만큼 밀어서 다른 알파벳으로 치환하는 방식이다. 예를 들어 3글자씩 밀어내는 카이사르 암호로 'COME TO ROME'을 암호화하면 'FRPH WR URPH'가 된다.

카이사르 암호는 약 기원전 100년경에 만들어져 로마의 장군인 카이사르가 동맹군들과 소통하기 위해 만든 암호이다.

시저 암호는 암호학에서 다루는 간단한 치환암호입니다. 암호화하고자 하는 내용을 알파벳별로 일정한 거리만큼 밀어서 다른 알파벳으로 치환하는 방식입니다.

💡 문제

1. 시저암호

시저암호

문제 링크: https://school.programmers.co.kr/learn/courses/30/lessons/12926

2. 둘만의 암호

시저암호

문제 링크: https://school.programmers.co.kr/learn/courses/30/lessons/155652

🔍 해결법

• 암호 리스트를 정의합니다.
• 밀려나는 숫자 만큼 더해줍니다.
• 모듈러 함수(%)를 통해 순환되도록 합니다.

def decode(str_list, e, n):
    idx = (str_list.index(e)+n) % len(str_list)
    return str_list[idx]

import string
def solution(s, n):
    return ''.join(list(map(lambda x: decode(string.ascii_lowercase. x, 5), s)))

알파벳을 5만큼 민 경우

solution("cvkkt", 5) # 결과: "happy"

알파벳 사용시에는 아래와 같이 암호 리스트를 정의하면 됩니다.

# string 모듈 사용시
import string
string.ascii_letters    # 결과: abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
string.ascii_lowercase    # 결과: abcdefghijklmnopqrstuvwxyz
string.ascii_uppercase    # 결과: ABCDEFGHIJKLMNOPQRSTUVWXYZ

# string 모듈 미사용시
lower = 'abcdefghijklmnopqrstuvwxyz'
upper = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ'

블로그 포스팅을 하면서 velog가 처음에는 커스텀 없이 이용할 수 있다는 점이 매력이었지만 시간이 지날수록 커스텀에 대한 욕심이 나날로 커지고 있습니다.

다른 블로그들을 보면서 가장 부러웠던 것은 code 블록이었습니다. 이는 서칭해보니 velog에서 이미 지원하고 있는 기능이있었습니다.

바로 Codepen과 Code Sandbox !!🙌 외에도 youtube 및 twitter 삽입도 지원합니다.😁

아무것도 안될 때보단 이정도면 양호?🤣

지금부터 velog에 여러가지 외부 서비스를 넣는 방법을 소개해보겠습니다.

🎈 외부 서비스 개체 삽입

현재 다음 서비스들에 대하여 포스트에 개체 삽입 기능이 지원되고 있습니다.

• Youtube
• Twitter
• CodeSandbox
• Codepen

지원 서비스 추가 요청은 GitHub Issue를 통해서 요청해주시길 바랍니다.

개체 삽입 Syntax는 다음과 같습니다.

![service_name](id)

• service_name: youtube, twitter, codesandbox, codepen
• id: 고유 ID 값

1. Codepen

💡 Codepen 이란?

웹 개발자들이 HTML, CSS, JavaScript를 쉽게 테스트하고 공유할 수 있는 온라인 코드 편집기 및 개발 플랫폼

코드펜은 구글링하다보면 가장 많이 볼 수 있는 플랫폼입니다. Codepen 사이트에서 회원가입 후, 코드를 저장한 뒤 공유할 수 있습니다.

공유할 코드를 작성한 뒤, 우측 하단에 있는 Embed 버튼을 클릭합니다.

Iframe 탭을 열어 아래 밑줄 친 코드를 복사하여 코드 블록에 삽입합니다.

!codepen[twinklekhj/embed/bGJqaxg?default-tab=html%2Cresult&theme-id=light&height=265]

!codepen[twinklekhj/embed/bGJqaxg?default-tab=html%2Cresult&theme-id=light&height=265]

2. Code Sandbox

Code Sandbox

온라인 IDE, 즉 CDE(Cloud Development Environment)입니다.

codesandbox 사이트에서 가입하여, 코드를 작성하고 공유할 수 있습니다. 주로 React, Vue, Angular, Node.js, Next.js 등 Javascript 단을 지원하며 그 밖에 Python, Go, PHP 등을 지원합니다.

Dev box를 생성합니다.

저는 test 용도로 velog를 생성하였습니다. share 버튼을 클릭하여 접근 권한, 수정 권한을 수정합니다.

Embed 옵션을 클릭하여 Embed 창을 열어줍니다.

embeded 코드를 복사하여 아래와 유사하게 작성해줍니다.

!codesandbox[velog-29782r?theme=dark&hidenavigation=1]

!codesandbox[velog-29782r?theme=dark&hidenavigation=1]

위와 같이 코드가 뜨면 완성-⭐

3. youtube

유투브 영상을 공유할 수 있는 기능입니다.

https://www.youtube.com/watch?v=1MAgHVs5XZE&ab_channel=OlafLyrics

유투브의 id는 url에서 찾을 수 있습니다. v 파라미터가 id 입니다.

!youtube[1MAgHVs5XZE]

!youtube[1MAgHVs5XZE]

제가 좋아하는 디즈니 플레이 리스트를 공유해보았습니다.💖

4. Twitter

twitter의 게시글을 공유할 수 있는 기능입니다.

https://twitter.com/NetflixKR/status/1770631413458415624

트위터의 id도 url에서 찾을 수 있습니다. url에서 https://twitter.com/ 을 제거한 뒤에 pathname을 붙여넣으면 됩니다.

!twitter[NetflixKR/status/1770631413458415624]

!twitter[NetflixKR/status/1770631413458415624]

💎 References

• velog 공식 블로그 - 수식 입력 및 외부 서비스 개체 삽입 기능 업데이트