개발자로 살아남기

Monolithic Module Architecture

devTak — Fri, 18 Jul 2025 17:14:18 +0900

Module 관리

모듈도 하나의 프로젝트처럼 생겼는데, 어떻게 관리하는게 좋을까?

SubModule 로의 관리?

서브모듈이란,

Git 저장소 안에 다른 Git 저장소를 디렉토리로 분리해 넣는 것이 서브모듈이다. 다른 독립된 Git 저장소를 Clone 해서 내 Git 저장소 안에 포함할 수 있으며 각 저장소의 커밋은 독립적으로 관리한다.

API 프로젝트를 SubModule 로 구성하는것에 대한 장점?

MSA 구성에 앞서 프로젝트 레포지토리를 분리하는것
각 프로젝트별 강제적인 분리를 보다 직관적으로 표현
각 도메인(모듈)별 별도의 CI/CD 구성과 커밋을 관리

API 프로젝트를 SubModule 로 구성하는것에 대한 단점

MSA 구성에 앞서 프로젝트 레포지토리를 미리 분리하는것이 맞는 판단인가?
각 프로젝트별 강제적인 분리를 직관적으로 하는것이 트러블슈팅 / 유지보수등 운영에 용이한가?
각 도메인(모듈)별 별도의 CI/CD 구성과 커밋을 관리하는 것이 모놀리식 방식에 맞는것인가?
SubModule 을 구성함으로써 CI/CD 스크립트 작성 및 구성에 리소스가 들어가게 된다.
- 그렇다고 MSA 로 분리하였을 때, CI/CD 구성을 변경하지 않아도 되는가? NO!
각각의 모듈들이 MSA 구성이 아닌 환경에서 독립적으로 사용이 불가능하다.
모듈별 의존성이 있는 기능에 대해 배포를 다수 처리
각각의 모듈별로 존재할 때, 특정 모듈만 빌드하는것이 불가능
각 모듈별 시멘틱버저닝에 대한 각 모듈별 체킹이 필수적으로 필요

SubModule 방식은 적합하지 않음

무엇이 하고싶은가?

각 모듈별 의존성을 최소화하여 MSA 구성 시, 빠르게 구성할 수 있도록 하는 것

모놀리식 아키텍쳐에서 어떻게 의존성을 최소화 할 수 있는가?

1. Adapter Pattern

Interface

export interface ProductService {
  getProduct(input: getProductDto): Promise<ProductResponse>;
}

Adapter (Internal)

@Injectable()
export class LocalProductServiceImpl implements ProductService {
  constructor(private readonly repo: ProductRepository) {}

  async getProduct(input: getProductDto): Promise<ProductResponse> {
    // 내부 도메인 로직 실행
  }
}

Adapter (gRPC)

@Injectable()
export class GrpcProductServiceImpl implements ProductService {
  constructor(@Inject(GRPC_CLIENT) private client: ProductGrpcClient) {}

  async getProduct(input: getProductDto): Promise<ProductResponse> {
    return this.client.getProduct(input); // gRPC 호출
  }
}

헥사고날아키텍쳐(포트앤 어댑터)에서 영감을 받음

주문 모듈 구현체 provider 등록

// order/order.module.ts
@Module({
  providers: [
    {
      provide: ProductService,
      useClass: LocalProductServiceImpl, // 해당영역 gRPC로 수정
    },
  ],
  exports: [OrderService],
})
export class OrderModule {}

프로젝트 디렉토리 구성안

src/
├── order/
│   ├── application/
│   │   └── order.service.ts
│   ├── domain/
│   └── order.module.ts
│
├── member/
│   ├── application/
│   │   └── member.service.ts
│   └── member.module.ts
│
├── shared/
│   ├── adapters/
│   │   ├── member/
│   │   │   ├── grpc-member.service.ts
│   │   │   └── local-member.service.ts
│   │   └── order/
│   │       ├── grpc-order.service.ts
│   │       └── local-order.service.ts
│   ├── interfaces/
│   │   ├── member.service.interface.ts
│   │   └── order.service.interface.ts
│   └── domain/
│       └── proto/
│           └── order.proto

Member Module

// src/member/member.module.ts
import { Module } from '@nestjs/common';
import { MemberService } from './application/member.service';
import { OrderService } from '../shared/interfaces/order.service.interface';
import { LocalOrderService } from '../shared/adapters/order/local-order.service';
// import { GrpcOrderService } from '../shared/adapters/order/grpc-order.service';
import { OrderModule } from '../order/order.module';

@Module({
  imports: [OrderModule],
  providers: [
    MemberService,
    {
      provide: OrderService,
      useClass: process.env.USE_GRPC === 'true' ? GrpcOrderService : LocalOrderService,
    },
  ],
})
export class MemberModule {}

여기까지는 괜찮을 수 있는데, MSA 로 분리하게 된다면 어떻게 될까

Order Service MSA 분리

order-service/
├── src/
│   ├── order/
│   │   ├── order.controller.ts
│   │   ├── order.service.ts
│   │   └── ...
│   └── member/
│       ├── grpc-member.service.ts    ✅
│       └── member.service.interface.ts
├── proto/
│   └── member.proto                  ✅

???? 이건 아닌 것 같다..

공통 gRPC client SDK를 만들어 npm 패키지화..?

order-service/
├── package.json  // depends on: "@company/member-client"

대안이 될 수는 있고, 공통 로직을 SDK 화 함으로써, 각 MSA 서비스들이 불필요한 코드를 작성하지 않아도 되는 장점이 있다.

그리고 MSA 구성을 준비할 때에도 각각의 서비스별 gRPC Client 는 어찌됐던 중복되기 마련이다.

그럼.. 이렇게 진행하는 것이 맞을까?

결론 : MSA 분리를 위해 모놀리틱서비스의 장점을 해치고, 코드 복잡도가 지나치게 높아진다.

NestJS 에서 제공하는 Resource 구조로 구현

import { Module } from '@nestjs/common';
import { TestCommerceService } from './test-commerce.service';
import { TestCommerceController } from './test-commerce.controller';

@Module({
  controllers: [TestCommerceController],
  providers: [TestCommerceService], // 각 타 모듈 서비스 주입
})
export class TestCommerceModule {}

순환참조

https://docs.nestjs.com/fundamentals/circular-dependency

선택적 SDK 구성

MSA 구성을 대비해 각 서비스 모듈 별 공통 처리를 위한 패키지는 SDK로 관리한다.
EX ) HttpClient, Redis Connector, 등

Langchain 과 Few-Shot 프롬프트 엔지니어링 (feat. OpenAI)

devTak — Mon, 29 Jul 2024 14:50:48 +0900

FewShow(퓨샷) 프롬프트 엔지니어링이란?

LLM 모델에 원하는 예제를 제공하는 프롬프트 엔지니어링 방식

종류

제로 샷(0 Shot) : LLM 모델에게 예제를 제공하지 않는 방식
원 샷(1 Shot) : LLM 모델에게 한개의 예제를 제공하는 방식
퓨 샷(Few Shot) : LLM 모델에게 2개 이상의 예제를 제공하는 방식

RAG(Retrieval-Augmented Generation) 와의 차이점

RAG 는 LLM 모델에게 질의할 일종의 템플릿(가이드북)을 제공하는 형태로, RAG 데이터를 우선시하여, 질의에 대한 답변을 진행하는 방식
RAG 데이터와 달리, FewShot 은, 응답 데이터에 대한 Example 을 제공함으로써, 데이터 규격 형태의 대한 처리에 도움을 주는 방식

단점

Fewshot 은 다양한 예시를 전달하는 방법이지만, 그 한계가 있기 때문에 정확한 예시가 아니라면 만족할만한 응답값을 기대하기 어렵다.

예제코드

Example 데이터 준비

from langchain.prompts.few_shot import FewShotPromptTemplate
from langchain.prompts.prompt import PromptTemplate
from langchain.prompts.example_selector import SemanticSimilarityExampleSelector
from langchain_community.vectorstores import  Chroma
from langchain_openai import OpenAIEmbeddings
from langchain_openai import ChatOpenAI
from langchain_core.prompts import ChatPromptTemplate
from langchain_core.output_parsers import StrOutputParser
from langchain_openai import OpenAI

import sys
sys.path.append('/Users/jinwook/Documents/langchain/quick_start/')
from langchain_const import *

# 유저 인풋 값
user_input_text = "재료: 닭, 토마토, 우유, 밀가루, 팔각"

# 예제
examples = [
  {
    "input": "재료: 닭고기, 소금, 후추, 마늘",
    "output": "진욱 AI가 알려주는 레시피!!: 닭고기를 작은 조각으로 자릅니다. 소금과 후추로 간을 하고, 팬에 기름을 둘러 마늘을 볶습니다.마늘이 노릇해 지면 닭고기를 넣고 익을 때까지 볶습니다. 완성된 닭고기를 접시에 담아 냅니다."
  },
  {
    "input": "재료: 쌀, 당근",
    "output":"진욱 AI가 알려주는 레시피!!: 쌀을 불려서, 당근이랑 같이 볶아요"
  },
  {
    "input": "재료: 소고기, 토마토, 당근, 소금, 후추, 고추가루",
    "output":"진욱 AI가 알려주는 레시피!!: 소고기를 망치로 두드린다음, 얇게 펴서 후추를 뿌리고, 당근과 토마토를 다져서 고추가루와 함께 볶아요"
  },
  {
    "input": "재료: 레몬, 바닐라, 밀가루",
    "output":"진욱 AI가 알려주는 레시피!!: 밀가루를 반죽해서 빵으로 만든 다음, 레몬과 바닐라를 넣고 오븐에 구우면 완벽"
  },
  {
    "input": "재료: 닭고기, 파, 양파, 대추, 감자, 한약재",
    "output":"진욱 AI가 알려주는 레시피!!: 닭고기를 한번 물에 데친다음, 파, 양파를 반으로 잘라서 준비하고, 대추랑 감자를 넣고 푹 삶아주세요"
  },
]

예제 임베딩 : 좀 더 연관성이 있는 예제를 추출하기 위한 임베딩

from langchain.prompts.few_shot import FewShotPromptTemplate
from langchain.prompts.prompt import PromptTemplate
from langchain.prompts.example_selector import SemanticSimilarityExampleSelector
from langchain_community.vectorstores import  Chroma
from langchain_openai import OpenAIEmbeddings
from langchain_openai import ChatOpenAI
from langchain_core.prompts import ChatPromptTemplate
from langchain_core.output_parsers import StrOutputParser
from langchain_openai import OpenAI

import sys
sys.path.append('/Users/jinwook/Documents/langchain/quick_start/')
from langchain_const import *

# 예제 임베딩
example_selector = SemanticSimilarityExampleSelector.from_examples(
    # 선택한 example들 설정
    examples,
    # 유사한 임베딩값을 찾기 위한 임베딩 모델 설정
    OpenAIEmbeddings(openai_api_key=OPENAI_KEY),
    # vector store 설정
    Chroma,
    # 몇개의 가장 유사한 embedding을 찾을 것인지를 설정
    k=2
)

# 예제 연관성 조회
selected_examples = example_selector.select_examples({"input": user_input_text})

# 프롬프트 생성
example_prompt = PromptTemplate(
    input_variables=["input", "output"], 
    template="Input: {input}\nOutput: {output}"
)

임베딩된 예제 fewshot Template 생성

from langchain.prompts.few_shot import FewShotPromptTemplate
from langchain.prompts.prompt import PromptTemplate
from langchain.prompts.example_selector import SemanticSimilarityExampleSelector
from langchain_community.vectorstores import  Chroma
from langchain_openai import OpenAIEmbeddings
from langchain_openai import ChatOpenAI
from langchain_core.prompts import ChatPromptTemplate
from langchain_core.output_parsers import StrOutputParser
from langchain_openai import OpenAI

import sys
sys.path.append('/Users/jinwook/Documents/langchain/quick_start/')
from langchain_const import *

# Few Shot 프롬프트 구성
prompt = FewShotPromptTemplate(
    examples=selected_examples, 
    example_prompt=example_prompt,
    suffix="Input : {input}",
    input_variables=["input"],
)

LLM 질의

from langchain.prompts.few_shot import FewShotPromptTemplate
from langchain.prompts.prompt import PromptTemplate
from langchain.prompts.example_selector import SemanticSimilarityExampleSelector
from langchain_community.vectorstores import  Chroma
from langchain_openai import OpenAIEmbeddings
from langchain_openai import ChatOpenAI
from langchain_core.prompts import ChatPromptTemplate
from langchain_core.output_parsers import StrOutputParser
from langchain_openai import OpenAI

import sys
sys.path.append('/Users/jinwook/Documents/langchain/quick_start/')
from langchain_const import *

llm = OpenAI(api_key=OPENAI_KEY)

# Output Parser
parser = StrOutputParser()

# Chaining
chain = prompt | llm | parser

print(chain.invoke({"input": user_input_text}))

Langchain 과 OpenAI 를 이용한 데이터 임베딩과 RAG(Retrieval-Augmented Generation)

devTak — Fri, 5 Jul 2024 10:23:56 +0900

임베딩이란?

자연어처리에서 사람이 쓰는 자연어를 기계가 이해할 수 있도록 숫자형태인 Vector로 바꾸는 과정 혹은 일련의 전체 과정을 의미한다.

One-Hot Enconding

단어 집합의 크기를 벡터의 차원으로 하고, 표현하고 싶은 단어의 인덱스에 1의 값을 부여하고, 다른 인덱스에는 0을 부여하는 단어의 벡터 표현 방식이다.

아이폰	1	0	0	0	0
갤럭시	0	1	0	0	0
애플워치	0	0	1	0	0
맥북	0	0	0	1	0
갤럭시북	0	0	0	0	1

위와같은 형태의 벡터 데이터를 가질 수 있다.

One-Hot Encoding 의 단점

위와 같은 벡터데이터에는 각 데이터의 크기와 상관없이 데이터 할당량 자체가 특정 사이즈로 고정되어있어 데이터크기 측면에서 불리한 점이 있다. 희소 벡터(Sparse vector)가 생긴다는 문제
단어의 개수가 늘어나면 벡터의 차원이 한없이 커진다는 단점을 가지고 있다.
단순히 0, 1 의 조합으로 단어를 벡터로 표현이 되었기 때문에 각 단어간 유사성을 판단할 근거가 없다.
- ex) 위 표와 같이 아이폰, 애플워치, 맥북은 애플제품으로써 유사성을 가지고 갤럭시와 갤럭시북은 삼성제품으로써 유사성을 가지지만 0,1 만으로 데이터 유사성을 판단할 수 없는 단점이 있다.

Data Embedding

데이터 임베딩 처리는 기존 One-hot 인코딩 방식의 단점을 보완하는 벡터표현방식
0,1 로만 구성되어있는 벡터를 다양한 데이터벡터로 상대적으로 ont-hot 인코딩보다 저차원의 형태로 데이터를 구성

2차원 그래프에서 연관성을 표현

2차원의 형태에서도 유사성 체크가 가능하나, 데이터양이 많아질 수록 더 정교한 유사성을 비교하기위해 N차원의 데이터 형태로 구성
one-hot 인코딩과는 다르게 더 적은 차원으로 데이터를 구성할 수 있기 때문에 데이터의 밀집도가 향상되고 더 빽빽한 데이터 형태(Dense Representation)로 구성
데이터 임베딩 모델
- Word2vec(by Google), FastText(by Facebook), BERT(by Google)

RAG (Retrieval-Augmented Generation) 처리 과정

Source 및 Load 단계 : 원천이되는 데이터 소스를 가져오거나 주입한다.

from langchain_community.document_loaders import PyPDFLoader
loader = PyPDFLoader("https://snuac.snu.ac.kr/2015_snuac/wp-content/uploads/2015/07/asiabrief_3-26.pdf")

Transform 단계 : 로드한 데이터를 특정 기준에 맞게 Splitter 를 통한 Transform 을 진행한다.

from langchain.text_splitter import RecursiveCharacterTextSplitter
textSplitter = RecursiveCharacterTextSplitter(chunk_size=50, chunk_overlap=0)

Embed 단계 : Splitter 로 쪼갠 데이터를 위에서 설명한 데이터 임베딩 처리

from langchain_openai import OpenAIEmbeddings

embeddingsModel = OpenAIEmbeddings(openai_api_key=OPENAI_KEY)
embeddings = embeddingsModel.embed_documents(documents)

print(embeddings[0])

# output
[-0.00743497050557687,
 -0.01563150953761078,
 0.0015626668057332756,
 -0.019168283291034625,
 -0.018213096531648893,
 0.014663413716354573,
 -0.008596684559761767,
 0.004595224625870433,
 -0.005343885021779546,
 -0.0034141486086942847,
 0.011862392228291914,....]

임베딩 쿼리 질의

from langchain_openai import OpenAIEmbeddings

embeddings_model = OpenAIEmbeddings(openai_api_key=OPENAI_KEY)
embeddings_query = embeddings_model.embed_query("안녕!")

print(len(embeddings_query))
print(embedded_query[:5])

#output
1536
[-0.00743497050557687, -0.01563150953761078, 0.0015626668057332756, -0.019168283291034625, -0.018213096531648893]

Store 단계 : Embedding 한 데이터를 벡터스토어에 저장

sample_texts = [
    "안녕!",
    "빨간색 공",
    "파란색 공",
    "붉은색 공",
    "푸른색 공",
]

documents = []
for item in range(len(sample_texts)):
    page = Document(page_content=sample_texts[item])
    documents.append(page)

db = Chroma.from_documents(documents=documents, embedding=embeddings_model)

query = "레드"
docs = db.similarity_search(query)
print(docs[0].page_content)

# output : 빨간색 공

query = "인사"
docs = db.similarity_search(query)
print(docs[0].page_content)

# output : 안녕!

Retrieve 단계 : VectorStores 에 저장된 Embedding 데이터를 Prompt 에 추가하여 AI 질의

import sys
sys.path.append('/Users/jinwook/Documents/langchain/quick_start/')
from langchain_community.document_loaders import PyPDFLoader
from langchain.text_splitter import RecursiveCharacterTextSplitter
from langchain_community.vectorstores import Chroma
from langchain_openai import OpenAIEmbeddings
from chat_pdf_template import *
from langchain_openai import ChatOpenAI
from langchain.schema.runnable import RunnablePassthrough

from langchain_const import *

loader = PyPDFLoader("https://snuac.snu.ac.kr/2015_snuac/wp-content/uploads/2015/07/asiabrief_3-26.pdf")

# PDF 를 로드하고 일정 기준으로 스플릿한다.
pages = loader.load_and_split()

# 스플릿한 데이터를 추가적으로 스플릿한다.
text_splitter = RecursiveCharacterTextSplitter(chunk_size=50, chunk_overlap=0)
splits = text_splitter.split_documents(pages)

# 임베딩을 통한 벡터데이터 저장
vectorstore = Chroma.from_documents(documents=splits, embedding=OpenAIEmbeddings(openai_api_key=OPENAI_KEY)) # text-embedding-ada-002
retriever = vectorstore.as_retriever()

llmChatOpenAi = ChatOpenAI(model_name=GPT_MODEL, temperature=0, api_key=OPENAI_KEY)

# RunnablePassThrough 공부하기
ragChain = {"ragContext": retriever, "question": RunnablePassthrough()} | ragPromptCustom | llmChatOpenAi

print(ragChain.invoke('한국의 저출산 원인이 뭐야?'))

docker-compose 로컬 PHP 개발 환경 구성하기

devTak — Fri, 24 May 2024 15:11:27 +0900

시스템 구성도

GIT Branch 관리 및 개발 편의성을 위해 실제 개발 프로젝트는 윈도우 로컬환경에 구성해둔다.
Docker Container 와 개발 프로젝트의 Volume 를 mount 하여 관리한다.

Docker-compose 파일 관리

Compose.yml

version: '3.8'
services:
  php:
    build:
      context: .
      dockerfile: Dockerfile
    container_name: my-laravel-app
    working_dir: /var/www
    volumes:
      - C:\project\laravelProject:/var/www #마운트
    networks:
      - laravel-network
  nginx:
    image: nginx:alpine
    container_name: my-laravel-nginx
    ports:
      - "80:80"
    volumes:
      - ./nginx/default.conf:/etc/nginx/conf.d/default.conf
      - C:\project\laravelProject:/var/www #마운트
    networks:
      - laravel-network
    depends_on:
      - php
    extra_hosts:
      - "test.co.kr:100.000.00.000" #필요한 호스트 등록
  mariadb:
    image: mariadb:10.4.21
    container_name: my-laravel-mariadb
    restart: unless-stopped
    environment:
      MYSQL_DATABASE: laravel
      MYSQL_USER: laraveluser
      MYSQL_PASSWORD: secret
      MYSQL_ROOT_PASSWORD: secret
    volumes:
      - dbdata:/var/lib/mysql
    ports:
      - "3306:3306"
    networks:
      - laravel-network
  redis:
    image: redis:alpine
    container_name: my-laravel-redis
    ports:
      - "6379:6379"  # 호스트의 포트 3306을 컨테이너의 포트 3306에 매핑합니다.
    networks:
      - laravel-network
networks:
  laravel-network:
volumes:
  dbdata:

시스템 구성도에서의 mount 는 php 와 nginx service 영역의 volume 을 통해 마운트를 진행한다.
hosts 등록이 필요한 경우 nginx service 영역에 extra_hosts 로 등록한다.
포트 지정은 각 service 별로 ports 로 구성한다.
네트워크 구성은 각 형태에 따라 구성한다. (networks)

PHP Dockerfile

FROM php:7.4-fpm
# Install system dependencies
RUN apt-get update && apt-get install -y \
    build-essential \
    libpng-dev \
    libjpeg-dev \
    libfreetype6-dev \
    locales \
    zip \
    jpegoptim optipng pngquant gifsicle \
    vim \
    unzip \
    git \
    curl
# Install PHP extensions
RUN apt-get update && apt-get install -y \
    libonig-dev \
    build-essential \
    && apt-get clean && rm -rf /var/lib/apt/lists/*
RUN apt-get update && apt-get install -y \
    && apt-get clean && rm -rf /var/lib/apt/lists/*
RUN apt-get update && apt-get install -y \
    locales \
    zip \
    jpegoptim \
    optipng \
    pngquant \
    gifsicle \
    && apt-get clean && rm -rf /var/lib/apt/lists/*
RUN apt-get update && apt-get install -y \
    vim \
    git \
    curl \
    && apt-get clean && rm -rf /var/lib/apt/lists/*
RUN apt-get update && docker-php-ext-install \
        mbstring \
    && docker-php-ext-enable \
        mbstring
RUN apt-get update && docker-php-ext-install \
        exif \
    && docker-php-ext-enable \
        exif
RUN apt-get update && docker-php-ext-install \
        pcntl \
    && docker-php-ext-enable \
        pcntl
RUN apt-get update && docker-php-ext-install \
        bcmath \
    && docker-php-ext-enable \
        bcmath
RUN apt-get update && docker-php-ext-install \
        gd \
    && docker-php-ext-enable \
        gd
RUN apt-get install -y \
        libzip-dev \
        zip \
  && docker-php-ext-install zip
RUN apt-get update
# 필요한 패키지 설치
RUN apt-get update && apt-get install -y \
    curl \
    && apt-get clean \
    && rm -rf /var/lib/apt/lists/*
RUN apt-get update && apt-get install -y \
    && docker-php-ext-install pdo_mysql \
    && docker-php-ext-enable pdo_mysql
# RUN curl -sS https://getcomposer.org/installer | php -- --install-dir=/usr/local/bin --filename=composer
# Install Composer
COPY --from=composer:latest /usr/bin/composer /usr/bin/composer
# Set working directory
WORKDIR /var/www
# Expose port 9000 and start php-fpm server
EXPOSE 9000
CMD ["php-fpm"]

각 Extension 별로 enable 과 install 을 해준다.
해당 과정에서 서비스 에러가 발생할 경우 (ex. not found extension) 에러 구문에 맞는 패키지 설치가 필요하다.

Nginx Default.conf

server {
    listen 80;
    index index.php index.html;
    server_name localhost;
    root /var/www/public;
    location / {
        try_files $uri $uri/ /index.php?$query_string;
    }
    location ~ \.php$ {
        include fastcgi_params;
        fastcgi_pass php:9000;
        fastcgi_index index.php;
        fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;
    }
    location ~ /\.ht {
        deny all;
    }
}

nginx 에서 사용할 config 정보를 입력한다.

실행방법

// docker-compose 파일 내
docker-compose-up -d

My-laravel-app 터미널 접속

composer install
php artisan migrate

로컬 구축의 장단점

장점

인터넷 환경에 구애받지 않는 개발 가능
개발 및 서버 스테이지 환경과 관계없이 개발 가능
sync 방식의 업로드 형태가 아님에 따른 분리 개발 가능
서버 이슈와 무관한 개발 가능
서버 리소스 최소화

단점

해당 프로젝트와 연관있는 API 통신의 방화벽 정책을 수립해야함
개발 세팅 리소스 및 러닝커브 발생
git branch 운용방식의 변화가 필요

도커 커맨드 TIPs

// 도커 내리기
docker-compose down
// 도커 올리기
docker-compose up -d
// 도커 볼륨삭제
docker-compose down --volumes --remove-orphans
// 도커 이미지 강제 삭제
docker image prune --all --force
// 도커 컨테이너 목록
docker ps
// 도커 재빌드
docker-compose build
// 도커 특정 서비스 재시작
docker-compose restart {service}

Flutter - 자주 사용하는 위젯 & 클래스

devTak — Thu, 18 Jan 2024 09:47:00 +0900

페이지 이동 - Forward

// push 를 하게되면 state 위젯을 init 부터 새로 생성한다.
Navigator.of(context).push<int>(
	MaterialPageRoute(builder: (BuildContext context) {
		return "스크린위젯명";
	})
)

페이지 이동 - Backward

// pop 을 하게되면 이전 페이지로 이동하고 현재 stateFul 클래스는 dispose 된다.
Navigator.of(context).pop();

패딩 - Padding

Padding(
	padding: EdgeInsets.{option},
	child: Cloumn()..
)

컬럼 / 로우 - Column Row

Column(
	// 세로 children 들의 여백 옵션
	mainAsixAlignment: MainAsixAlignment.{option},
	// 가로 children 들의 여백 옵션
	crossAxisAlignment : CrossAsixAlignment.{option}, // row mainAsixAlignment(stretch)
	children: []
)

Row(
	// 가로 children 들의 여백 옵션
	mainAsixAlignment: MainAsixAlignment.{option},
	// 세로 children 들의 여백 옵션
	crossAxisAlignment : CrossAsixAlignment.{option}, // cloumn mainAsixAlignment
	children: []
)

클라이언트 기기 안전패딩 - SafeArea

SafeArea(
	// 아래쪽은 적용하지 않음
	botton: false,
	child: ..
)

슬라이드 - Slider

Slider(
	value: ..,
	min: ..,
	max: ..,

	// 콜백 함수은 ValueChanged<double>?
	onChanged: () {
		...
	}
)

버튼 - ElevatedButton

ElevatedButton(
	// 콜백 함수은 VoidCallback
	onPressed: () {
		...
	}
	style: ElevatedButton.StyleForm(
		primary: Color();
	),
)

버튼 - IconButton

IconButton(
	// 콜백 함수은 VoidCallback
	onPressed: () {
		...
	},
	iconSize: 60.0,
	icon: Icon(
		Icons.{option},
		color: Color(),
	),
)

사이즈 최대확장 - Expanded

Expanded(
	child: Column(
		...
	)
)

캔버스 - Scaffold

Scaffold(
	backgroundColor: Color(),
	body: ..{}
)

영역그룹핑 - Container

Container(
	child: ..
)

클라이언트 환경정보(추측) - MediaQuery

MediaQuery.of(context).{}

Asset 이미지 - Image

Image.asset('asset/img/test.png');

Flutter Basic Widget Structure

devTak — Wed, 17 Jan 2024 10:06:05 +0900

Flutter 기본 위젯 골격 구조

// Scaffold : 화이트 캔버스의 역할
return Scaffold(
	// 화이트 캔버스 상단 바를 생성함
	appBar: AppBar(
		title: 'Test APP',
	),
	// 캔버스의 전역적인 배경 색상
	backgroundColor: Colors.pink[100],
	// SafeArea : 모바일 기기의 전반적인 사용 공간을 잡아주는 역할
	body: SafeArea(
	// SafeArea 에서 bottom 영역은 제외
	bottom: false,
	// Container : html 에서 Div와 같은 역할로 생각
	child: Container(
	  // MediaQuery.of : 요청기기의 Spec을 가져올 수 있는 듯
	  width: MediaQuery.of(context).size.width,
	  // Column : 감싸져 있는 위젯을 세로형으로 영역을 나눌 수 있는 위젯
	  child: Column(
	    //column children의 간격을 지정해 줄 수 있는 기능
	    mainAxisAlignment: MainAxisAliment.spaceBetween,
        
	    // Column & Row 는 Children 을 기본적으로 사용할 수 있음
	    children: [
	        // colums 의 비율을 전체적으로 가져갈 수 있도록 해주는 위젯
	        Expanded: (
	            child: _TopPart(
	                selectedDate: selectedDate,
	                onPressed: onHeartPressed,
	            ),
	        ),
	        _BottomPart(),
	    ],
	  ),
	),
));

mainAxisAlignment - 주축정렬(전체를 잡아둔다)

start : 시작
end : 끝
center : 가운데
spaceBetween : 위젯과 위젯의 사이가 동일하게 배치
spaceEvenly : 위젯을 같은 간격으로 배치하지만 끝과 끝에도 빈간격으로 시작
spaceAround : 위젯을 같은 간격으로 배치하지만 끝과 끝의 간격은 반간격으로 시작

CrossAxisAlignment - 반대축 정렬(기본값은 center)

stretch : 최대한으로 늘린다.

MediaQuery.*of*(context) 는 클라이언트 정보를 가져오는듯

MainAxisSize - 주축크기

max : 최대
min : 최소

Expanded / Flexible - Row 나 Column Children 위젯에서만 사용가능한 속성

Expended - 남아있는 공간을 전부 먹어버린다.

flex : 남아 있는 공간을 비율로 나눌 수 있다. - 기본값 1

Flexible - 남는 공간은 모두 버리고, 설정한 값으로만 세팅한다

Flutter 지원 클래스 / Stateless, Stateful Life Cycle

devTak — Tue, 16 Jan 2024 09:12:07 +0900

Flutter 다양한 객체 및 옵션 설명

SafeArea : 화면 전체에 대한 기본 area를 지정할 수 있음

SafeArea(
        bottom: false,
        child: Container(

mainAxisAlignment - 주축정렬(전체를 잡아둔다)

start : 시작
end : 끝
center : 가운데
spaceBetween : 위젯과 위젯의 사이가 동일하게 배치
spaceEvenly : 위젯을 같은 간격으로 배치하지만 끝과 끝에도 빈간격으로 시작
spaceAround : 위젯을 같은 간격으로 배치하지만 끝과 끝의 간격은 반간격으로 시작

CrossAxisAlignment - 반대축 정렬(기본값은 center)

stretch : 최대한으로 늘린다.

MediaQuery.*of*(context) 는 클라이언트 정보를 가져오는 객체

MainAxisSize - 주축크기

max : 최대
min : 최소

Expanded / Flexible - Row 나 Column Children 위젯에서만 사용가능한 속성

Expended - 남아있는 공간을 전부 먹어버린다.

flex : 남아 있는 공간을 비율로 나눌 수 있다. - 기본값 1

Flexible - 남는 공간은 모두 버리고, 설정한 값으로만 세팅한다

StatefulWidget

위젯 이론
- 위젯은 모두 불변의 법칙을 갖고있다.
- 하지만 위젯의 값을 변경해야할때가 있다.
- 변경이 필요하면 기존 위젯을 삭제해버리고 완전 새로운 위젯으로 대체한다
StatelessWidget Life Cycle
- Constructor로 생성이되고 생성이 되자마자 build 함수가 실행된다.
- 이전 Container 예제와 마찬가지로 변경이 필요하면 새로운 위젯을 만들어버린다.
- 하나의 StatelessWidget은 라이프 사이클동안 단 한번만 build 함수를 실행한다.
StatefulWidget Life Cycle
- Constructor 가 불린다.
- CreateState를 만듬 (최초 1회)
- State.initStatus 를 부름 (1회)
- State.dudChangeDependencies 를 부름
- State.dirty → State.build → State.clean
  - 삭제 : deactivate → dispose
  - 생성 : setState
  - 수정 : didUpdateWidget
- State 객체는 체이닝처럼 기존 State를 재활용한다.
- StateWidget 자체는 무조건 삭제되고 새로 생성된다.
- StateFulWidget 은 결국은 내부 프로퍼티 데이터들이 유지된다.
  - Why : 상태 프로퍼티를 관리하는 것은 State 객체 이므로 State 객체는 재활용됨에 따른 내부 상태 프로퍼티들을 유지할 수 있다.
예제코드

import 'package:flutter/material.dart';

class HomeScreen extends StatefulWidget {
  const HomeScreen({required this.color, Key? key}) : super(key: key);

  final Color color;

  @override
  State<HomeScreen> createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {
  @override
  Widget build(BuildContext context) {
    return Container(
      width: 50.0,
      color: widget.color,
    );
  }
}

SpringBoot + Thymleaf + H2Database 프로젝트 세팅

devTak — Thu, 4 May 2023 15:57:57 +0900

출처 : https://spring.io/

세팅

Spring Guide : https://spring.io/guides

스프링 공식 튜토리얼: https://spring.io/guides/gs/serving-web-content/
스프링부트 메뉴얼: https://docs.spring.io/spring-boot/docs/2.1.6.RELEASE/reference/html/

Project Generate

geneate : Spring-Initializr

3.0 버전 이후 사용

필수 Dependencies 설치

Spring Web : 스프링을 사용하는데 기본적인 디펜던시 패키지 모음
Thymeleaf : BladeTemplate 처럼 요즘 Spring 기반의 프로젝트에서 많이 쓰는 템플릿엔진
Spring Data JPA : Spring 에서 ORM 으로 데이터를 조작할 수 있는 기술
1. Java Persistent API : 구현을 가능하게 하는 코어 기술
2. Hibernate : 코드측면에서 사용가능하게 하는 기술
H2Database : Mysql 보다 스터디나 토이프로젝트에 적합한 DBMS
Lombok : 스프링에 Annotation 확장 기능
Validation : Test 코드에서 validation 을 쉽게 해주는 패키지

Spring Data JPA

Lombok

Thymeleaf

Spring 을 위한 기능들이 지원
Natural templates
1. markup을 깨지 않고 쓸 수 있다.

thymeleaf 공식 사이트: https://www.thymeleaf.org/

스프링 부트 thymeleaf viewName 매핑

resources:templates/ +{ViewName}+ .html

@Controller
public class HelloController {
    @GetMapping("hello")
    public String hello(Model model) {
        model.addAttribute("data", "hello!!");
        return "hello";
    }
}

/Resource/templates

<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head>
 <title>Hello</title>
 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<body>
<p th:text="'안녕하세요. ' + ${data}" >안녕하세요. 손님</p>
</body>
</html>

Spring Boot DevTools

스프링부트를 사용하면서, 개발환경에서 개발할 때 용이한 패키지

캐시초기화
파일에 대한 서버 재시작 없이 컴파일 가능

devtools 를 사용하면 특정 파일만 재컴파일 가능하게 제공해준다.

>Build > Recompile “hello.html”

IDE Package Build

인텔리제이

인텔리제이 실행
generate 한 패키지 세팅 압축해제
인텔리제이 오픈 후 패키지 build.gradle 오픈
package initialize 자동 실행
settings 에 들어가서 annotation processor 에 enable annotation processing 을 체크해준다

Vscode

Extension Pack for Java 설치
Debugger for Java 설치
Gradle for Java 설치
Lombok Annotations Support for VS Code
프로젝트 빌드 및 실행
package initialize 자동 실행

H2 Database

개발이나 테스트 용도로 가볍고 편리한 DB, 웹화면 제공

INFO

https://www.h2database.com
다운로드 및 설치(버전 : 2.1.214)
데이터베이스 파일 생성 방법
- http://localhost:8082 접속
- jdbc:h2:~/{packageName ex. jinwook}(최초 한번, 세션키 유지한 상태로 실행)
- ~/jpashop.mv.db 파일 생성됨 확인 (사용자디렉토리 내)
- 이후 부터는 jdbc:h2:tcp://localhost/~/{packageName ex. jinwook}으로 접속

JPA 와 DB 설정, 동작확인

선행조건

java 설치 (H2는 java 환경에서 돌아감)
h2.bat 실행

최초 123.234.535.243:8082 와 같은 랜덤 아이피로 실행되는데, 최초 실행
sessionId를 유지한 상태에서 localhost 로 변경

Resource JPA H2 연결

resources → properties 보다 yml 이 깔끔함

spring:
  datasource:
    url: jdbc:h2:tcp://localhost/~/jpashop;
    username: sa
    password:
    driver-class-name: org.h2.Driver

  jpa:
    hibernate:
      ddl-auto: create
    properties:
      hibernate:
#        show_sql: true
        format_sql: true

logging:
  level:
    org.hibernate.sql: debug

이슈발생 참고링크

https://atoz-develop.tistory.com/entry/H2-Database-%EC%84%A4%EC%B9%98-%EC%84%9C%EB%B2%84-%EC%8B%A4%ED%96%89-%EC%A0%91%EC%86%8D-%EB%B0%A9%EB%B2%95

https://abcdefgh123123.tistory.com/331

Cypress - 클라이언트 테스트 자동화란? + env 동적 전달

devTak — Thu, 20 Apr 2023 12:13:36 +0900

출처(https://docs.cypress.io/)

설치

Requirement

NPM >= 5.2.0

Ubuntu / Debian

apt-get install libgtk2.0-0 libgtk-3-0 libgbm-dev libnotify-dev libgconf-2-4 libnss3 libxss1 libasound2 libxtst6 xauth xvfb

CentOS

yum install -y xorg-x11-server-Xvfb gtk2-devel gtk3-devel libnotify-devel GConf2 nss libXScrnSaver alsa-lib

>_ npm install

cd /your/project/path

npm install cypress --save-dev

실행

Browser Mode

./node_modules/cypress/bin/cypress open

Browser install (ubuntu)

wget https://dl.google.com/linux/direct/google-chrome-stable_current_amd64.deb
sudo apt install ./google-chrome-stable_current_amd64.deb

Command Line Interface Mode

npx cypress run

CLI Arguments 전달

./node_modules/cypress/bin/cypress open --env test={test},test1={test1}

코드에 Agrs 들을 전달하는 방식

vi cypress.config.js

const { defineConfig } = require('cypress')
const fs = require('fs-extra')
const path = require('path')

async function getConfigurationByFile(test, test1) {

    const pathToConfigFile = path.resolve('/cypress', 'config', `${file}.json`);

    let readJson =  await fs.readJson(pathToConfigFile).then((config) => {
        config.env.test = test;
        config.env.test1 = test1;
        
        return config;
    });
    
    return readJson;
}

module.exports = defineConfig({
    e2e: {
        experimentalSessionAndOrigin: true,
        setupNodeEvents(on, config) {
            const test = config.env.test;
            const test1 = config.env.test1;
            return getConfigurationByFile(test, test1);
        },
        video: false,
        screenshotOnRunFailure: false,
    },
})

module.exports = defineConfig에서 setupNodeEvents 함수 내 config 데이터를 통해 args 값 GET
getConfigurationByFile 함수를 통해 args 값 전달

// 전달 받은 args 값 TEST 에서 사용할 수 있도록 env 세팅
let readJson =  await fs.readJson(pathToConfigFile).then((config) => {
    config.env.test = test;
    // 전달할 env 값에 args 세팅 ..add
    return config;
});

전달받은 Args 테스트에서 사용

describe('############# { 즐거운 테스트 } #############', () => {
    it('TEST', () => {
        cy.request({
            method: 'GET',
            url: 'localhost/',
            headers: {
                'accept': 'application/json;charset=UTF-8',  
                'authorize': 'TEST '+Cypress.env('test'),
            },
            ...
    });
});

Cypress.env('test') 처럼 Cypress 객체를 통해 env 값 사용

TEST TIP

FailOnStatusCode

describe('############# { 즐거운 테스트 } #############', () => {
    it('TEST', () => {
        cy.request({
            method: 'GET',
            url: 'localhost/',
            headers: {
                'accept': 'application/json;charset=UTF-8',  
                'authorize': 'TEST '+Cypress.env('test'),
            },
            failOnStatusCode:false, // 값을 false 로 준다.
            ...
    }).then((response) => {
        expect(response.body.status).to.eq('422');
    });
});

해당 값을 false 로 주지 않으면, 4xx error 관련 then 으로 넘어오지 않아 Debugging 이 어려움
따라서 false 를 주면 then 으로 넘어와 error response 를 확인할 수 있다.

SpringBoot APM - Prometheus 란?

devTak — Thu, 20 Apr 2023 11:57:17 +0900

APM 이란?

Application Perfomance Manager
성능관리모니터링 시스템이라고 할 수 있다.

APM OpenSource

	maven repo	github star	구글 검색 결과
pinpoint	237	12,700	약 226,000
scouter	16	1,900	약 77,900
prometheus	532	47,400	약 721,000
elasticAPM	0	314	약 485,000

Prometheus(프로메테우스)

오픈 소스 시스템 모니터링 및 경고 ToolKit
Exporter 로 부터 데이터를 수집하여 데이터를 시각화한다.
Pull 방식의 Metric 데이터를 수집한다.
PromQL 방식의 시계열 쿼리 및 집계한다.

출처(프로메테우스 공식 홈페이지)

Setting

# my global config
global:
  scrape_interval: 15s # Set the scrape interval to every 15 seconds. Default is every 1 minute.
  evaluation_interval: 15s # Evaluate rules every 15 seconds. The default is every 1 minute.
  # scrape_timeout is set to the global default (10s).

# Alertmanager configuration
alerting:
  alertmanagers:
    - static_configs:
        - targets:
          # - alertmanager:9093

# Load rules once and periodically evaluate them according to the global 'evaluation_interval'.
rule_files:
  # - "first_rules.yml"
  # - "second_rules.yml"

# A scrape configuration containing exactly one endpoint to scrape:
# Here it's Prometheus itself.
scrape_configs:
  # The job name is added as a label `job=<job_name>` to any timeseries scraped from this config.
  - job_name: "prometheus"
    metrics_path: '/v1/actuator/prometheus'
    scrape_interval: 5s

    # metrics_path defaults to '/metrics'
    # scheme defaults to 'http'.

    static_configs:
      - targets: ["localhost:8082"]

scrpe_configs : 스크랩할 서버(Exporter) 설정 정보
sarape_interval : 메트릭 정보 스크랩 수집 간격

GUI

메트릭 정보

Metric Type

Counter
Guage
Histogram
Summary

Counter

0부터 시작하여, 증가할 수 있는 누적 메트릭
EX : 요청 수 및 완료 된 작업 수

Guage

단일 숫자 값을 나타내는 메트릭
현재 메모리 사용량, 동시 요청 수 등 증감이 가능

Histogram

구간별 데이터 취합에 특화되어있는 메트릭
EX : 히트맵, 구간별 분포 그래프

Summary

히스토그램과 유사하나, 정확한 계산 비용이 발생
EX : 분위수 단위 계산 값을 볼 때 사용