심심한 개발자의 취미생활
# 3. 블로그 만들기 외전 - 외부 빌드 스크립트 만들기 (ver.2)

•

## 바이브 코딩

•

### 과정

•

### 준비

•

### 과정

•

## 마무리

•

3. 블로그 만들기 외전 - 외부 빌드 스크립트 만들기 (ver.2)

  • 이전에 블로그 포스팅의 빌드를 위한 스크립트에 관련하여 포스팅을 했었다. 해당 버전을 안정적으로 사용해왔고 큰 불편함은 없었는데 최근 티스토리에도 함께 포스팅을 진행하게 되며 티스토리 버전의 빌드 시스템이 필요해졌다.
  • 기존에는 작성되어 있는 모든 포스팅을 변환하면 되었지만 티스토리의 경우에는 선택된 포스팅 하나만 빌드를 진행하고 빌드 진행시 생성되는 HTML 코드도 기존과 다르게 나와야 된다.
  • 빌드 기능에 대해서는 추후 티스토리 스킨 제작관련하여 포스팅을 올릴 계획이니 여기서는 스크립트 제작에 관련해서만 작성한다.

바이브 코딩

  • 사실 이번 스크립트는 내가 제작하지 않았다. 최근 개발씬에서는 바이브 코딩이 큰 관심사이고 나 역시 개발이나 다양한 작업에서 AI 를 사용하고 있다. 또한 AI를 활용한 바이브 코딩을 통해 개발 프로젝트를 진행하기 위해 다양한 테스트를 진행하고 있는데 이번에 간단하게 AI에게 스크립트 제작을 요청했다.

과정

  • AI의 성능이 높아지며 요구사항에 맞는 코드를 작성해주는 일은 AI에게 이젠 어렵지 않게 되었다. 하지만 단순히 대화를 통해 이거 해줘, 저거 해줘, 요거 만들어줘를 계속 진행하다 보니 코드의 복잡도가 높아 질수록 결과물의 퀄리티가 급격히 하락하게 된다.
  • 그래서 이번에는 조금 더 현장과 유사하게 명세서를 작성하여 이를 기반으로 요청을 해보았다.

준비

  1. AI 에이전트 - GEMINI CLI

    • 나는 주로 개발을 진행할때는 GEMINI CLI 모델을 사용한다.
    • 다른 AI 사용 해본 경험이 적은것도 있지만 터미널에서 동작하며 무료이지만 높은 성능과 사용 편의성이 높고 토큰 제한량이 크다는 점이 장점이다.

  2. 명세서

    • 아래와 같이 마크다운으로 작업의 목적과 예시, 원하는 작업 방향에 대하여 작성하였다.
# deploy.sh 파일 수정 명세서

## 1차 개선 작업

### 목적
1. 기존 기능을 동일하게 수행하면서 새로운 tistory 포스트 배포를 위한 기능 추가
1. argument 기반의 모듈화로 리팩토링 작업

### 기존 사용 명령어 예시
1. `./deploy.sh`
    - Target 경로 npm script의 `npm run app:dev` 실행
1. `./deploy.sh 100`
    - Target 경로 npm script의 `npm run app:dev` 실행 후 Target 경로의 `_dist/post/100.html` 파일 Open
1. `./deploy.sh dev`
    - Target 경로 npm script의 `npm run app:dev` 실행 후 Target 경로의 `_dist/index.html` 파일 Open 여부 질의
1. `./deploy.sh build`
    - Target 경로 npm script의 `npm run app:build` 실행 후 추가적으로 `npm run app:deploy` 명령어 실행 여부 질의

### 개선될 사용 명령어 예시
1. `./deploy.sh`
    - Target 경로 npm script의 `npm run app:dev` 실행
1. `./deploy.sh 100`
    - Target 경로 npm script의 `npm run app:dev` 실행 후 Target 경로의 `_dist/post/100.html` 파일 Open
1. `./deploy.sh build`
    - Target 경로 npm script의 `npm run app:build` 실행 후 추가적으로 `npm run app:deploy` 명령어 실행 여부 질의
1. `./deploy.sh tistory`
    - Target 경로 npm script의 `npm run app:tistory` 실행
1. `./deploy.sh tistory 100`
    - Target 경로 npm script의 `npm run app:tistory` 실행 후 Target 경로의 `_dist/post/100.html` 파일의 내용을 clipboard에 복사

### 코드 개선 방향
1. `./deploy.sh` 뒤에 나오는 argument 별로 코드 모듈화 작업
    - `./deploy.sh` 뒤에 추가 적인 arg가 없거나 정수가 나오는 경우 정리
    - `./deploy.sh` 뒤에 arg가 `build`인 경우의 코드 분리
    - `./deploy.sh` 뒤에 arg가 `tistory`인 경우의 코드 분리
1. 기능이 추가될 경우 유연하게 코드 수정이 가능하도록 코드 정리
1. 코드 별로 한글 주석을 정리


## 2차 개선
### 코드 개선 방향
- `./deploy.sh tistory 100`
    - Target 경로 npm script의 `npm run app:tistory -- 100` 실행 후 Target 경로의 `_dist/post/100.html` 파일의 내용을 clipboard에 복사

과정

  1. 과정은 매우 간단하다. GEMINI에게 먼저 기존의 ./deploy.sh 파일 분석을 시킨다.
  2. 분석된 내용과 함께 작성된 명세서를 제공하며 개선된 버전의 ./deploy2.sh 파일 제작을 요청한다.
  3. 요청된 파일을 확인하며 추가적으로 개선이 필요한 부분은 명세서에 추가로 작성하며 해당 부분을 GEMINI에게 분석 요청을 한다.
  4. 위 과정을 거치며 원하는 결과물을 이끌어 낸다.
  5. 결과물은 포스팅 마지막에 첨부 해 놓겠다.

마무리

  • ... 밥그릇 ...?이 아니라 이제는 단순히 AI를 활용한다가 아닌 AI를 어떻게 이끌고 AI를 어떻게 활용하는지가 중요한 시대가 왔다고 생각한다.
#!/bin/bash

# ======================================================================================
# 이 스크립트는 ballboyDev.github.io 프로젝트의 빌드, 배포, 미리보기 등을 자동화합니다.
# 사용법: ./deploy.sh [명령어] [추가 인자]
#
# 명령어:
#   (없음)      : 'npm run app:dev'를 실행하여 개발용으로 빌드합니다.
#   dev         : 'npm run app:dev' 실행 후, 결과물(index.html)을 브라우저에서 열지 묻습니다.
#   [숫자]      : 'npm run app:dev' 실행 후, 해당 번호의 포스트를 브라우저에서 엽니다.
#   build       : 'npm run app:build' 실행 후, 배포 여부를 묻습니다.
#   tistory     : 'npm run app:tistory'를 실행합니다.
#   tistory [숫자]: 'npm run app:tistory' 실행 후, 해당 포스트의 내용을 클립보드에 복사합니다.
# ======================================================================================

# --- 변수 정의 ---

# 프로젝트 경로
TARGET_DIR="~/ballboyDev.github.io/"
# 첫번째, 두번째 인자
ARG1="$1"
ARG2="$2"


# --- 함수 정의 ---

# 기능: 빌드 및 배포 처리
# 호출: ./deploy.sh build
function handle_build() {
    echo "프로덕션 빌드를 시작합니다..."
    npm --prefix "${TARGET_DIR}" run app:build

    read -p "빌드 결과물을 배포하시겠습니까? (y/n): " answer
    if [[ "$answer" == [Yy]* ]]; then
        echo "배포를 시작합니다..."
        npm --prefix "${TARGET_DIR}" run app:deploy
    fi
}

# 기능: 티스토리 포스트 생성 및 클립보드 복사
# 호출: ./deploy.sh tistory [포스트 번호]
function handle_tistory() {
    echo "티스토리용 빌드를 시작합니다..."

    if [[ -n "$ARG2" ]]; then
        # 두 번째 인자(포스트 번호)가 있으면 npm 스크립트에 인자로 전달
        npm --prefix "${TARGET_DIR}" run app:tistory -- "$ARG2"
        
        local POST_FILE="${TARGET_DIR}_dist/post/${ARG2}.html"
        if [[ -f "$POST_FILE" ]]; then
            pbcopy < "$POST_FILE"
            echo "${POST_FILE} 파일의 내용을 클립보드에 복사했습니다."
        else
            echo "오류: 포스트 파일(${POST_FILE})을 찾을 수 없습니다."
        fi
    else
        # 두 번째 인자가 없으면 기존처럼 인자 없이 실행
        npm --prefix "${TARGET_DIR}" run app:tistory
    fi
}

# 기능: 개발 서버 실행 및 인덱스 페이지 열기
# 호출: ./deploy.sh dev
function handle_dev() {
    echo "개발용 빌드를 시작합니다..."
    npm --prefix "${TARGET_DIR}" run app:dev

    read -p "빌드된 페이지를 브라우저에서 여시겠습니까? (y/n): " answer
    if [[ "$answer" == [Yy]* ]]; then
        echo "인덱스 페이지를 엽니다."
        open "${TARGET_DIR}_dist/index.html"
    fi
}

# 기능: 특정 포스트 미리보기
# 호출: ./deploy.sh [포스트 번호]
function handle_numeric_preview() {
    echo "개발용 빌드를 시작합니다..."
    npm --prefix "${TARGET_DIR}" run app:dev
    echo "${ARG1}번 포스트를 브라우저에서 엽니다."
    open "${TARGET_DIR}_dist/post/${ARG1}.html"
}


# --- 메인 로직 ---

# 인자가 없는 경우, 기본 'app:dev' 실행
if [[ -z "$ARG1" ]]; then
    echo "기본 개발 빌드를 시작합니다..."
    npm --prefix "${TARGET_DIR}" run app:dev
    echo "완료."
    exit 0
fi

# 첫번째 인자에 따른 기능 분기
case "$ARG1" in
    build)
        handle_build
        ;;
    tistory)
        handle_tistory
        ;;
    dev)
        handle_dev
        ;;
    *)
        # 인자가 숫자인지 정규식으로 확인
        if [[ "$ARG1" =~ ^[0-9]+$ ]]; then
            handle_numeric_preview
        else
            echo "오류: 알 수 없는 명령어 '$ARG1'입니다."
            echo "사용법: $0 [dev|build|tistory|POST_NUMBER]"
            exit 1
        fi
        ;;
esac

echo "완료."