OpenAI Codex CLI와 Google 개발자 환경 구축하기
OpenAI Codex CLI와 Google 개발자 환경 구축하기
안녕하세요, 여러분! 오늘은 개발 생산성을 획기적으로 향상시켜줄 두 가지 강력한 도구를 소개해 드리려고 합니다. 바로 OpenAI의 Codex CLI와 Google 스타일 개발 환경 구축 스크립트입니다.
두 도구 소개 및 설치 준비
OpenAI Codex CLI 설치하기
Codex CLI로 첫 프로젝트 생성하기
Google 개발자 환경 스타일 구조화 스크립트 만들기
기존 프로젝트에 Google 스타일 적용하기
두 도구 조합하여 실전 프로젝트 개발하기
문제 해결 및 고급 팁
1. 도구 소개 및 설치 준비
먼저 오늘 다룰 두 도구에 대해 간략히 소개해 드리겠습니다.
OpenAI Codex CLI는 터미널에서 직접 실행되는 AI 코딩 에이전트입니다. 자연어 명령으로 코드를 생성하고, 파일을 수정하고, 심지어 셸 명령까지 실행할 수 있습니다. 현재는 연구 프리뷰 상태이지만, 개발 생산성을 크게 향상시킬 수 있는 강력한 도구입니다.
Google 개발자 환경 스타일 구조화 스크립트는 제가 직접 만든 셸 스크립트로, Google의 표준화된 프로젝트 구조와 설정을 자동으로 생성해 줍니다. 이를 통해 일관된 코드 구조와 개발 환경을 빠르게 구축할 수 있습니다.
시작하기 전에 다음 요구사항이 필요합니다:
macOS 12+ 또는 Linux 환경 (Windows는 WSL2 필요)
Node.js 22 이상
Git 2.23 이상
OpenAI API 키
터미널 프로그램
먼저 현재 환경을 확인해 보겠습니다. 터미널을 열고 다음 명령어를 입력합니다:
node --version
git --version버전이 요구사항을 충족하지 않는다면, 각 공식 사이트에서 최신 버전을 설치해 주세요.
2. OpenAI Codex CLI 설치하기
Codex CLI를 사용하기 위해서는 OpenAI API 키가 필요합니다. OpenAI 플랫폼 사이트(platform.openai.com)에 가입하고 API 키를 발급받으세요.
https://platform.openai.com/settings/organization/api-keys
[화면: 터미널에서 Codex CLI 설치 과정]
이제 Codex CLI를 설치해 보겠습니다. 터미널에서 다음 명령어를 입력합니다:
npm install -g @openai/codex설치가 완료되면, API 키를 환경 변수로 설정해야 합니다:
export OPENAI_API_KEY="your-api-key-here"이 설정은 현재 터미널 세션에서만 유효합니다. 영구적으로 적용하려면 쉘 구성 파일에 추가해야 합니다:
echo 'export OPENAI_API_KEY="your-api-key-here"' >> ~/.zshrc
# 또는 Bash를 사용하는 경우
# echo 'export OPENAI_API_KEY="your-api-key-here"' >> ~/.bash_profile그리고 구성 파일을 다시 로드합니다:
source ~/.zshrc # zsh 사용 시
# 또는
# source ~/.bash_profile # bash 사용 시설치가 제대로 되었는지 확인해 보겠습니다:
codex --version버전 정보가 표시되면 성공적으로 설치된 것입니다!
3. Codex CLI로 첫 프로젝트 생성하기
[화면: Codex CLI 실행 및 기본 명령어 설명]
이제 Codex CLI를 사용해 보겠습니다. 가장 기본적인 방법은 그냥 codex 명령을 실행하는 것입니다:
codex대화형 모드가 시작되고, 여기서 자연어로 명령을 내릴 수 있습니다. 간단한 질문으로 시작해보겠습니다:
what can u help me
보시다시피, Codex는 코드 작성, 버그 수정, 리팩토링 등 다양한 개발 작업을 도울 수 있다고 응답합니다.
Codex CLI는 세 가지 자동화 수준을 제공합니다:
suggest 모드(기본값): 모든 파일 변경과 명령 실행에 승인 필요
auto-edit 모드: 파일 변경은 자동, 명령 실행은 승인 필요
full-auto 모드: 모든 것이 자동으로 실행
지금부터는 full-auto 모드를 사용해 Todo 앱을 만들어보겠습니다:
codex --approval-mode full-auto "Todo 앱 프로젝트 생성하기"
보시다시피, Codex가 작업을 자동으로 수행하고 있습니다:
todo-app 디렉토리 생성
HTML, CSS, JavaScript 파일 작성
README.md 작성
Git 저장소 초기화 및 커밋
이제 생성된 프로젝트를 살펴보겠습니다:
cd todo-app
ls -la
cat index.html
cat style.css
cat app.js
이제 브라우저에서 index.html을 열어 결과를 확인해 보겠습니다. 완전히 작동하는 Todo 앱이 생성되었네요! 할 일을 추가, 완료 표시, 삭제하는 기능이 모두 구현되어 있습니다.
이처럼 Codex CLI는 단 한 줄의 명령으로 완전한 웹 애플리케이션을 생성할 수 있습니다.
4. Google 개발자 환경 스타일 구조화 스크립트 만들기
[화면: Google 스타일 프로젝트 구조 다이어그램]
이제 Google 개발자 환경 스타일로 프로젝트를 구조화하는 스크립트를 만들어 보겠습니다. 이 스크립트는 다음과 같은 표준화된 구조를 자동으로 생성해 줍니다:
src/ (소스 코드)
main/ (메인 코드)
test/ (테스트 코드)
docs/ (문서)
scripts/ (유틸리티 스크립트)
build/ (빌드 결과물)
config/ (구성 파일)
그 외 다양한 설정 파일
먼저 텍스트 에디터로 스크립트 파일을 생성합니다:
nano google_dev_structure.sh[화면: 스크립트 코드 작성 과정]
다음 코드를 파일에 붙여넣습니다:
#!/bin/bash
# Google 개발자 환경 스타일로 프로젝트 구조화 스크립트
# 사용법: ./google_dev_structure.sh [프로젝트_디렉토리]
set -e
PROJECT_DIR="${1:-.}"
cd "$PROJECT_DIR"
CURRENT_DIR=$(pwd)
echo "🚀 '$CURRENT_DIR' 디렉토리를 Google 개발자 환경 스타일로 구조화합니다..."
# 주요 디렉토리 생성
mkdir -p src
mkdir -p src/main
mkdir -p src/test
mkdir -p docs
mkdir -p scripts
mkdir -p config
mkdir -p build
mkdir -p third_party
mkdir -p .github/workflows
# 기본 문서 생성
if [ ! -f "README.md" ]; then
cat > README.md << 'EOL'
# 프로젝트 이름
## 개요
이 프로젝트에 대한 간략한 설명을 작성하세요.
## 시작하기
설치 및 설정 방법을 설명합니다.
## 사용법
기본 사용법을 설명합니다.
## 개발 가이드
개발자를 위한 가이드를 작성하세요.
## 기여 방법
프로젝트에 기여하는 방법을 설명합니다.
## 라이센스
이 프로젝트의 라이센스 정보를 제공합니다.
EOL
echo "✅ README.md 생성됨"
fi
# 코드 스타일 설정 파일 생성
cat > .eslintrc.json << 'EOL'
{
"extends": ["google", "prettier"],
"parserOptions": {
"ecmaVersion": 2021,
"sourceType": "module"
},
"rules": {
"valid-jsdoc": 2,
"require-jsdoc": ["error", {
"require": {
"FunctionDeclaration": true,
"MethodDefinition": true,
"ClassDeclaration": true,
"ArrowFunctionExpression": false,
"FunctionExpression": false
}
}]
}
}
EOL
echo "✅ ESLint 설정 생성됨"
cat > .prettierrc << 'EOL'
{
"printWidth": 80,
"tabWidth": 2,
"useTabs": false,
"semi": true,
"singleQuote": true,
"trailingComma": "es5",
"bracketSpacing": true,
"arrowParens": "avoid"
}
EOL
echo "✅ Prettier 설정 생성됨"
# 기본 .gitignore 생성
cat > .gitignore << 'EOL'
# 빌드 결과물
build/
dist/
out/
# 의존성
node_modules/
vendor/
.gradle/
# 로그
*.log
npm-debug.log*
# 런타임 데이터
.DS_Store
.env
.env.local
.env.development.local
.env.test.local
.env.production.local
# IDE 설정
.idea/
.vscode/
*.iml
*.ipr
*.iws
.classpath
.project
.settings/
# 캐시
.npm
.eslintcache
.cache/
EOL
echo "✅ .gitignore 생성됨"
# CI/CD 설정
cat > .github/workflows/ci.yml << 'EOL'
name: CI
on:
push:
branches: [ main ]
pull_request:
branches: [ main ]
jobs:
build:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v2
- name: Setup environment
uses: actions/setup-node@v2
with:
node-version: '16'
- name: Install dependencies
run: npm ci
- name: Lint
run: npm run lint
- name: Test
run: npm test
- name: Build
run: npm run build
EOL
echo "✅ GitHub Actions CI 워크플로우 생성됨"
# 기존 소스 파일이 있으면 정리
if [ "$(find . -maxdepth 1 -name "*.js" | wc -l)" -gt 0 ] || \
[ "$(find . -maxdepth 1 -name "*.ts" | wc -l)" -gt 0 ] || \
[ "$(find . -maxdepth 1 -name "*.jsx" | wc -l)" -gt 0 ] || \
[ "$(find . -maxdepth 1 -name "*.tsx" | wc -l)" -gt 0 ]; then
echo "🔍 소스 파일을 src 디렉토리로 이동합니다..."
find . -maxdepth 1 -name "*.js" -o -name "*.ts" -o -name "*.jsx" -o -name "*.tsx" | xargs -I{} mv {} src/main/ 2>/dev/null || true
echo "✅ 소스 파일 이동 완료"
fi
# package.json이 있으면 업데이트
if [ -f "package.json" ]; then
echo "📦 package.json에 스크립트를 추가합니다..."
# 복잡한 JSON 수정은 jq를 사용하는 것이 좋지만, 기본 설치되어 있지 않을 수 있어 간단한 방법 사용
TMP_FILE=$(mktemp)
cat package.json |
sed '/"scripts":/,/}/{ s/"test": ".*"/"test": "jest",/g; s/"scripts": {/"scripts": {\n "lint": "eslint src",\n "format": "prettier --write \'src\/\/**\/*.{js,jsx,ts,tsx}\'",\n "build": "tsc",\n "start": "node build\/main\/index.js",/g }' > "$TMP_FILE"
cat "$TMP_FILE" > package.json
rm "$TMP_FILE"
echo "✅ package.json 업데이트 완료"
fi
# 기본 에디터 설정
cat > .editorconfig << 'EOL'
root = true
[*]
charset = utf-8
indent_style = space
indent_size = 2
end_of_line = lf
insert_final_newline = true
trim_trailing_whitespace = true
[*.md]
trim_trailing_whitespace = false
EOL
echo "✅ .editorconfig 생성됨"
# 개발 환경 설정을 위한 스크립트
cat > scripts/setup-dev.sh << 'EOL'
#!/bin/bash
# 개발 환경 설정 스크립트
# 필요한 도구 설치 여부 확인
command -v node >/dev/null 2>&1 || { echo "❌ Node.js가 필요합니다"; exit 1; }
command -v npm >/dev/null 2>&1 || { echo "❌ npm이 필요합니다"; exit 1; }
# 패키지 설치
npm install
# Git hooks 설정
if [ -d ".git" ]; then
npx husky install
npx husky add .husky/pre-commit "npm run lint && npm run test"
chmod +x .husky/pre-commit
echo "✅ Git hooks 설정 완료"
fi
echo "✅ 개발 환경 설정 완료"
EOL
chmod +x scripts/setup-dev.sh
echo "✅ 개발 환경 설정 스크립트 생성됨"
# 프로젝트 문서 구조
cat > docs/CONTRIBUTING.md << 'EOL'
# 기여 가이드
## 코드 스타일
- Google JavaScript 스타일 가이드 준수
- ESLint와 Prettier를 사용하여 코드 스타일 통일
- 모든 공개 API에 JSDoc 주석 작성
## 개발 워크플로우
1. 이슈 생성 또는 기존 이슈 선택
2. 브랜치 생성 (feature/issue-number-short-description)
3. 변경 사항 구현
4. 테스트 작성 및 실행
5. PR 제출
6. 코드 리뷰 진행
7. 코드 리뷰 피드백 반영
8. main 브랜치에 머지
## 커밋 메시지 규칙
- feat: 새로운 기능 추가
- fix: 버그 수정
- docs: 문서 변경
- style: 코드 포맷팅, 세미콜론 누락 등
- refactor: 코드 리팩토링
- test: 테스트 코드 추가
- chore: 빌드 프로세스나 보조 도구 변경
## 테스트
- 모든 PR은 테스트를 포함해야 함
- 기존 테스트 스위트를 통과해야 함
EOL
echo "✅ 기여 가이드 문서 생성됨"
cat > docs/CODE_REVIEW.md << 'EOL'
# 코드 리뷰 가이드
## 코드 리뷰의 목적
- 코드 품질 향상
- 버그 발견
- 지식 공유
- 일관된 코드베이스 유지
## 리뷰어 가이드
- 친절하고 건설적인 피드백 제공
- 문제뿐만 아니라 해결책도 제안
- 코드의 맥락 고려
- 스타일보다 로직에 집중
## 작성자 가이드
- 변경 사항의 컨텍스트 제공
- 작은 PR 유지
- 피드백 받기 전에 자체 리뷰
- 구현 의도 명확하게 설명
EOL
echo "✅ 코드 리뷰 가이드 문서 생성됨"
# 기본 소스 파일 구조 생성 (src/main이 비어 있는 경우)
if [ -z "$(ls -A src/main 2>/dev/null)" ]; then
mkdir -p src/main/utils
mkdir -p src/main/services
mkdir -p src/main/models
mkdir -p src/main/controllers
cat > src/main/index.js << 'EOL'
/**
* 애플리케이션 진입점
* @fileoverview 애플리케이션의 주요 진입점입니다.
*/
'use strict';
/**
* 애플리케이션을 초기화하고 시작합니다.
*/
function main() {
console.log('애플리케이션이 시작되었습니다.');
}
if (require.main === module) {
main();
}
module.exports = { main };
EOL
cat > src/main/utils/logger.js << 'EOL'
/**
* 로깅 유틸리티
* @fileoverview 애플리케이션 로깅을 위한 유틸리티 함수들입니다.
*/
'use strict';
/**
* 로그 레벨 정의
* @enum {number}
*/
const LogLevel = {
DEBUG: 0,
INFO: 1,
WARN: 2,
ERROR: 3,
};
/**
* 현재 로그 레벨
* @type {LogLevel}
*/
let currentLogLevel = LogLevel.INFO;
/**
* 로그 레벨을 설정합니다.
* @param {LogLevel} level - 설정할 로그 레벨
*/
function setLogLevel(level) {
currentLogLevel = level;
}
/**
* 로그 메시지를 출력합니다.
* @param {LogLevel} level - 로그 레벨
* @param {string} message - 로그 메시지
* @param {Object=} data - 추가 데이터 (선택 사항)
*/
function log(level, message, data) {
if (level >= currentLogLevel) {
const timestamp = new Date().toISOString();
const levelName = Object.keys(LogLevel).find(key => LogLevel[key] === level);
const logData = {
timestamp,
level: levelName,
message,
...(data && { data }),
};
console.log(JSON.stringify(logData));
}
}
/**
* 디버그 로그를 출력합니다.
* @param {string} message - 로그 메시지
* @param {Object=} data - 추가 데이터 (선택 사항)
*/
function debug(message, data) {
log(LogLevel.DEBUG, message, data);
}
/**
* 정보 로그를 출력합니다.
* @param {string} message - 로그 메시지
* @param {Object=} data - 추가 데이터 (선택 사항)
*/
function info(message, data) {
log(LogLevel.INFO, message, data);
}
/**
* 경고 로그를 출력합니다.
* @param {string} message - 로그 메시지
* @param {Object=} data - 추가 데이터 (선택 사항)
*/
function warn(message, data) {
log(LogLevel.WARN, message, data);
}
/**
* 오류 로그를 출력합니다.
* @param {string} message - 로그 메시지
* @param {Object=} data - 추가 데이터 (선택 사항)
*/
function error(message, data) {
log(LogLevel.ERROR, message, data);
}
module.exports = {
LogLevel,
setLogLevel,
debug,
info,
warn,
error,
};
EOL
echo "✅ 기본 소스 파일 구조 생성됨"
fi
# 테스트 디렉토리 기본 구조 생성
if [ -z "$(ls -A src/test 2>/dev/null)" ]; then
cat > src/test/index.test.js << 'EOL'
/**
* 애플리케이션 진입점 테스트
* @fileoverview 메인 진입점 함수 테스트
*/
'use strict';
const { main } = require('../main/index');
describe('Main application', () => {
test('main function should execute without errors', () => {
// 원래 console.log를 저장
const originalConsoleLog = console.log;
// Mock console.log
console.log = jest.fn();
// 테스트할 함수 실행
main();
// 함수가 호출되었는지 확인
expect(console.log).toHaveBeenCalledWith('애플리케이션이 시작되었습니다.');
// console.log 원래대로 복원
console.log = originalConsoleLog;
});
});
EOL
echo "✅ 기본 테스트 파일 생성됨"
fi
echo "
🎉 완료! '$CURRENT_DIR' 디렉토리가 Google 개발자 환경 스타일로 구조화되었습니다.
구조:
├── src/ # 소스 코드
│ ├── main/ # 메인 소스 코드
│ └── test/ # 테스트 코드
├── docs/ # 문서
├── scripts/ # 유틸리티 스크립트
├── config/ # 구성 파일
├── build/ # 빌드 결과물
├── third_party/ # 서드파티 의존성
├── .github/ # GitHub 관련 설정
├── README.md # 프로젝트 설명
└── 기타 구성 파일
시작하려면:
1. scripts/setup-dev.sh 스크립트를 실행하여 개발 환경을 설정하세요.
2. 소스 코드는 src/main 디렉토리에, 테스트는 src/test 디렉토리에 작성하세요.
3. 변경 사항을 커밋하기 전에 'npm run lint' 및 'npm test'를 실행하세요.
"
# 완료
echo "✅ Google 개발자 환경 스타일로 구조화가 완료되었습니다."
파일을 저장하고 실행 권한을 부여합니다:
chmod +x google_dev_structure.sh이제 스크립트가 준비되었습니다!
5. Google 스타일 적용하기
이제 새 프로젝트에 Google 스타일을 적용해 보겠습니다:
mkdir my_new_project
./google_dev_structure.sh my_new_project스크립트가 실행되면서 다양한 디렉토리와 파일이 생성됩니다. 결과를 확인해 보겠습니다:
cd my_new_project
ls -la이제 개발 환경을 설정해 보겠습니다:
cd my_new_project && scripts/setup-dev.sh
(미리 만들어둔 폴더가 있었다)
필요한 패키지가 설치되고 Git 훅이 설정되었습니다. 이제 기본적인 린트와 테스트를 실행해 볼 수 있습니다:
npm run lint
npm test
오류가 발생했군요! 이는 package.json에 필요한 의존성이 누락되었기 때문입니다. 이를 수정해 보겠습니다:
# package.json 수정
nano package.json다음과 같이 package.json을 수정합니다:
{
"name": "my_new_project",
"version": "1.0.0",
"description": "",
"main": "src/main/index.js",
"scripts": {
"lint": "eslint src",
"test": "jest",
"build": "echo \"No build step defined\""
},
"devDependencies": {
"eslint": "*",
"eslint-config-google": "*",
"eslint-config-prettier": "*",
"prettier": "*",
"jest": "*"
}
}그리고 의존성을 설치합니다:
npm install이제 린트와 테스트를 다시 실행해 보겠습니다:
npm run lint && npm test && npm run build성공적으로 실행되었습니다!
6. 두 도구 조합하여 실전 프로젝트 개발하기
** 여기부터는 제가 백엔드에 대한 지식이 너무 없어서 설명이 어렵습니다.
클로드가 생성해준 내용과 제가 시도했던 스크린샷으로 대신하겠습니다.
이제 두 도구를 조합하여 실전 프로젝트를 개발해 보겠습니다. 먼저 Codex CLI로 프로젝트 기본 구조를 생성한 다음, Google 스타일을 적용해 보겠습니다.
mkdir combined_project
cd combined_project
git init
codex --approval-mode full-auto "React와 Express를 사용하는 간단한 메모 앱 API 서버 코드 생성해줘"
Codex가 React 클라이언트와 Express 서버 코드를 생성하고 있습니다. 완료되면 생성된 파일 구조를 확인해 보겠습니다:
ls -la
이제 Google 스타일을 적용해 보겠습니다:
cd ..
./google_dev_structure.sh combined_project이제 combined_project 디렉토리로 이동하여 결과를 확인해 보겠습니다:
cd combined_project
ls -la보시다시피, Codex CLI로 생성한 코드가 Google 스타일 구조로 재구성되었습니다. 이제 개발 환경을 설정해 보겠습니다:
scripts/setup-dev.sh이제 프로젝트를 시작할 수 있습니다. 예를 들어, 서버를 실행해 보겠습니다:
node src/main/server.js
서버가 성공적으로 실행되었습니다! 이제 Codex CLI를 사용하여 기능을 추가해 보겠습니다:
codex "src/main/server.js 파일에 메모 삭제 API 엔드포인트를 추가해 주세요"
Codex가 코드를 수정했습니다. 변경 사항을 확인해 보겠습니다:
cat src/main/server.js
이처럼 Codex CLI와 Google 스타일 구조화 스크립트를 함께 사용하면, AI의 코드 생성 능력과 표준화된 프로젝트 구조의 장점을 모두 활용할 수 있습니다.
7. 문제 해결 및 고급 팁
마지막으로, 두 도구를 사용하면서 발생할 수 있는 일반적인 문제와 해결책, 그리고 몇 가지 고급 팁을 소개해 드리겠습니다.
Codex CLI 관련 팁
API 키 오류: OPENAI_API_KEY 환경 변수가 올바르게 설정되어 있는지 확인하세요.
**자동화 수준 선자동화 수준 선택: 중요한 프로젝트에서는
suggest모드로 시작하여 도구의 동작을 익힌 후 점진적으로 자동화 수준을 높이세요.명확한 프롬프트 작성: 구체적이고 명확한 지시를 제공할수록 더 좋은 결과를 얻을 수 있습니다.
Git 기반 작업: Codex CLI는 Git 저장소에서 더 효과적으로 작동합니다. 항상 Git 초기화 후 사용하세요.
Google 스타일 구조화 관련 팁
의존성 오류: 스크립트 실행 후
npm install전에 package.json을 확인하고 필요한 의존성을 추가하세요.기존 프로젝트 적용: 기존 프로젝트에 적용할 때는 파일 이동에 주의하세요. 먼저 백업을 만들고 적용하는 것이 안전합니다.
커스터마이징: 프로젝트 요구사항에 맞게 스크립트를 수정하여 사용하세요.
고급 활용 예시
CI/CD 파이프라인 통합:
# GitHub Actions 워크플로우에서
export OPENAI_API_KEY="${{ secrets.OPENAI_KEY }}"
codex --approval-mode auto-edit --quiet "CHANGELOG.md 파일을 최신 커밋 내용으로 업데이트해주세요"코드 리뷰 자동화:
codex "이 PR의 코드를 검토하고 개선점을 제안해주세요"모노레포 구조화:
# 각 서브 프로젝트에 Google 스타일 적용
find . -type d -name "packages/*" -exec ./google_dev_structure.sh {} \;결론
오늘 우리는 OpenAI Codex CLI와 Google 개발자 환경 스타일 구조화 스크립트라는 두 가지 강력한 도구를 살펴보았습니다. 이 도구들은 각각 다음과 같은 장점을 제공합니다:
Codex CLI: AI 기반 코드 생성 및 자동화를 통한 개발 속도 향상
Google 스타일 구조화: 표준화된 프로젝트 구조와 개발 환경을 통한 유지보수성 및 협업 효율성 향상
두 도구를 함께 사용함으로써 빠른 개발과 체계적인 코드 관리라는 두 마리 토끼를 모두 잡을 수 있습니다.
코드 예시 모음
1. OpenAI Codex CLI 설치
# Codex CLI 설치
npm install -g @openai/codex
# API 키 설정 (현재 세션)
export OPENAI_API_KEY="your-api-key-here"
# API 키 영구 설정 (zsh 사용 시)
echo 'export OPENAI_API_KEY="your-api-key-here"' >> ~/.zshrc
source ~/.zshrc
# API 키 영구 설정 (bash 사용 시)
echo 'export OPENAI_API_KEY="your-api-key-here"' >> ~/.bash_profile
source ~/.bash_profile2. Todo 앱 생성 명령
# 기본 모드
codex "Todo 앱 프로젝트 설명해줘"
# 자동 편집 모드
codex --approval-mode auto-edit "Todo 앱 프로젝트 생성해줘"
# 풀 자동 모드
codex --approval-mode full-auto "Todo 앱 프로젝트 생성하기"3. Google 개발자 환경 구조화 스크립트 실행
# 스크립트에 실행 권한 부여
chmod +x google_dev_structure.sh
# 새 프로젝트에 적용
mkdir my_new_project
./google_dev_structure.sh my_new_project
# 기존 프로젝트에 적용
./google_dev_structure.sh existing_project
# 현재 디렉토리에 적용
./google_dev_structure.sh .4. 개발 환경 설정
# 개발 환경 설정 스크립트 실행
cd my_new_project
scripts/setup-dev.sh
# 패키지 설치
npm install
# 린트 및 테스트 실행
npm run lint
npm test
npm run build5. 두 도구 조합 예시
# 1. 새 프로젝트 디렉토리 생성 및 Git 초기화
mkdir combined_project
cd combined_project
git init
# 2. Codex CLI로 코드 생성
codex --approval-mode full-auto "React와 Express를 사용하는 메모 앱 생성해줘"
# 3. Google 스타일 구조화 적용
cd ..
./google_dev_structure.sh combined_project
# 4. 개발 환경 설정
cd combined_project
scripts/setup-dev.sh
# 5. Codex CLI로 기능 추가
codex "src/main/server.js 파일에 메모 삭제 API 엔드포인트를 추가해 주세요"자동화 수준 선택: 중요한 프로젝트에서는
suggest모드로 시작하여 도구의 동작을 익힌 후 점진적으로 자동화 수준을 높이세요.명확한 프롬프트 작성: 구체적이고 명확한 지시를 제공할수록 더 좋은 결과를 얻을 수 있습니다.
Git 기반 작업: Codex CLI는 Git 저장소에서 더 효과적으로 작동합니다. 항상 Git 초기화 후 사용하세요.
Google 스타일 구조화 관련 팁
의존성 오류: 스크립트 실행 후
npm install전에 package.json을 확인하고 필요한 의존성을 추가하세요.기존 프로젝트 적용: 기존 프로젝트에 적용할 때는 파일 이동에 주의하세요. 먼저 백업을 만들고 적용하는 것이 안전합니다.
커스터마이징: 프로젝트 요구사항에 맞게 스크립트를 수정하여 사용하세요.
고급 활용 예시
CI/CD 파이프라인 통합:
# GitHub Actions 워크플로우에서
export OPENAI_API_KEY="${{ secrets.OPENAI_KEY }}"
codex --approval-mode auto-edit --quiet "CHANGELOG.md 파일을 최신 커밋 내용으로 업데이트해주세요"코드 리뷰 자동화:
codex "이 PR의 코드를 검토하고 개선점을 제안해주세요"모노레포 구조화:
# 각 서브 프로젝트에 Google 스타일 적용
find . -type d -name "packages/*" -exec ./google_dev_structure.sh {} \;결론
오늘 우리는 OpenAI Codex CLI와 Google 개발자 환경 스타일 구조화 스크립트라는 두 가지 강력한 도구를 살펴보았습니다. 이 도구들은 각각 다음과 같은 장점을 제공합니다:
Codex CLI: AI 기반 코드 생성 및 자동화를 통한 개발 속도 향상
Google 스타일 구조화: 표준화된 프로젝트 구조와 개발 환경을 통한 유지보수성 및 협업 효율성 향상
두 도구를 함께 사용함으로써 빠른 개발과 체계적인 코드 관리라는 두 마리 토끼를 모두 잡을 수 있습니다.
여러분도 이 도구들을 직접 시도해보고, 여러분의 개발 워크플로우를 혁신해 보세요!
코드 예시 모음
1. OpenAI Codex CLI 설치
# Codex CLI 설치
npm install -g @openai/codex
# API 키 설정 (현재 세션)
export OPENAI_API_KEY="your-api-key-here"
# API 키 영구 설정 (zsh 사용 시)
echo 'export OPENAI_API_KEY="your-api-key-here"' >> ~/.zshrc
source ~/.zshrc
# API 키 영구 설정 (bash 사용 시)
echo 'export OPENAI_API_KEY="your-api-key-here"' >> ~/.bash_profile
source ~/.bash_profile2. Todo 앱 생성 명령
# 기본 모드
codex "Todo 앱 프로젝트 설명해줘"
# 자동 편집 모드
codex --approval-mode auto-edit "Todo 앱 프로젝트 생성해줘"
# 풀 자동 모드
codex --approval-mode full-auto "Todo 앱 프로젝트 생성하기"3. Google 개발자 환경 구조화 스크립트 실행
# 스크립트에 실행 권한 부여
chmod +x google_dev_structure.sh
# 새 프로젝트에 적용
mkdir my_new_project
./google_dev_structure.sh my_new_project
# 기존 프로젝트에 적용
./google_dev_structure.sh existing_project
# 현재 디렉토리에 적용
./google_dev_structure.sh .4. 개발 환경 설정
# 개발 환경 설정 스크립트 실행
cd my_new_project
scripts/setup-dev.sh
# 패키지 설치
npm install
# 린트 및 테스트 실행
npm run lint
npm test
npm run build5. 두 도구 조합 예시
# 1. 새 프로젝트 디렉토리 생성 및 Git 초기화
mkdir combined_project
cd combined_project
git init
# 2. Codex CLI로 코드 생성
codex --approval-mode full-auto "React와 Express를 사용하는 메모 앱 생성해줘"
# 3. Google 스타일 구조화 적용
cd ..
./google_dev_structure.sh combined_project
# 4. 개발 환경 설정
cd combined_project
scripts/setup-dev.sh
# 5. Codex CLI로 기능 추가
codex "src/main/server.js 파일에 메모 삭제 API 엔드포인트를 추가해 주세요"
