(구) VS Code + 코덱스 조합으로 웹 사이트 + 모바일 앱 개발 환경 구축 - Codex Coding

노트북에서 VSCode + Codex 로 웹사이트와 모바일앱을 개발하려면 어떤 프로그램 설치와 어떤 설정이 필요한지 알아보았다.

Windows 노트북 + VS Code + Codex + 웹사이트 + 모바일앱 개발 환경은 “필수 설치 → 계정/로그인 → 웹 개발 → 모바일앱 개발 → Codex/VS Code 설정 → 추천 폴더 구조” 순서로 정리한다.

웹사이트는 Laragon (로컬 개발) → Git으로 백업 → NAS에 업로드, 모바일앱은 Expo로 개발 → EAS로 APK 빌드 흐름이 가장 편하고 좋다. 각각의 프로그램을 클릭하면 다운로드 페이지로 이동한다.

[필수]

- Git for Windows

- Node.js LTS

- VS Code : 개발 메인 툴

- Codex VS Code Extension

- Codex CLI

- Android Studio

- Expo / EAS CLI

[웹 개발]

- Laragon 또는 XAMPP

- PHP Intelephense

- Live Server

- phpMyAdmin

[모바일앱 개발]

- Expo Go

- Android Studio SDK

- adb

- EAS CLI

[관리]

- GitHub 계정

- GitHub Desktop 선택

- Postman 또는 Insomnia

- FileZilla 또는 WinSCP

1. 필수 설치 프로그램 

프로그램 제목 클릭 시, 다운로드 페이지로 이동한다.

- 코드 편집기 - : 개발 메인 툴

- 버전관리 - Git for Windows : 소스 백업, GitHub 연동, Codex 작업 추적

- 실행환경 - Node.js LTS React, Expo : 프론트엔드, npm 실행

- AI 개발도구 - Codex VS Code Extension : VS Code 오른쪽 패널에서 Codex 사용

- 터미널 Codex - Codex CLI : 터미널에서 Codex 실행

- 모바일 개발 - Android Studio : 안드로이드 SDK, 에뮬레이터, adb

- 모바일 빌드 - Expo / EAS CLI Expo : 앱 실행, APK/AAB 빌드

2. 설치 순서

1) Git for Windows

2) Node.js LTS

3) Visual Studio Code

4) VS Code 확장 프로그램들

5) Codex VS Code Extension

6) Codex CLI

7) Android Studio

8) Expo / EAS CLI

설치 후 PowerShell을 새로 열고 아래 명령으로 확인한다. 정상이라면 각각 버전이 출력된다.

PowerShell > git --version
PowerShell > node -v
PowerShell > npm -v
PowerShell > code --version

3. Git 기본 설정

Git 설치 후 처음 한 번만 설정하면 된다.

GitHub를 쓸 거면 GitHub Desktop도 깔아도 되지만, VS Code + 터미널만으로도 충분하다.

PowerShell > git config --global user.name "이름"
PowerShell > git config --global user.email "이메일@example.com"
PowerShell > git config --global init.defaultBranch main
PowerShell > git config --global core.autocrlf true

4. VS Code 확장 프로그램

VS Code 왼쪽 확장 프로그램에서 아래를 설치한다.

[ 공통 필수 ]

Codex

GitLens

ESLint

Prettier

Error Lens

Korean Language Pack for Visual Studio Code

[ 웹 개발용 ]

HTML CSS Support

IntelliSense for CSS class names

Auto Rename Tag

Path Intellisense

Live Server

PHP Intelephense

PHP/Apache/NAS 웹사이트 개발의 경우 PHP Intelephense 설치를 하는 게 좋다.

[ React / Expo / 모바일 앱용]

ES7+ React/Redux/React-Native snippets

React Native Tools

Expo Tools

npm Intellisense

5. Codex 설정

1) VS Code 오른쪽 패널에서 사용

Codex IDE 확장은 VS Code 안에서 Codex를 사이드바로 열어 코드 읽기, 수정, 실행을 도와주는 방식이다.

설치 후 VS Code 오른쪽 사이드바에서 Codex가 열리고, 안 보이면 VS Code를 재시작하면 된다.

설정 흐름은,

VS Code 실행

→ Extensions에서 Codex 설치

→ VS Code 재시작

→ 오른쪽 Codex 패널 열기

→ ChatGPT 계정 로그인

→ 작업할 폴더 열기

→ Codex에게 수정 요청

중요한 점은 터미널의 Codex 로그인과 VS Code 확장 프로그램의 로그인은 따로 놀 수 있다.

터미널에서 로그아웃해도 VS Code 오른쪽 Codex 패널은 계속 로그인되어 있을 수 있다

2) PowerShell 터미널에서 Codex CLI 사용

Codex CLI는 로컬 터미널에서 실행하는 OpenAI 코딩 에이전트로 선택한 폴더 안의 코드를 읽고 수정 및 명령을 실행할 수 있다.

Codex CLI는 Windows에서도 사용할 수 있고, Windows에서는 네이티브 실행 또는 WSL2 방식이 가능하다.

설치 후에는 프로젝트 폴더에서 아래 명령을 입력한다.

처음 실행하면 로그인하라고 나오고, ChatGPT 계정 또는 API Key 방식으로 인증하면 된다.

PowerShell > cd C:\Projects\my-web
PowerShell > codex

6. 웹사이트 개발 환경

PHP + Apache + MariaDB/MySQL 의 경우 노트북에서는 아래 중 하나로 구성하는 게 좋다.

1) 쉬운 방식 - XAMPP

- Apache

- PHP

- MariaDB

- phpMyAdmin

장점은 설치가 쉽고, 로컬에서 바로 PHP 사이트 테스트가 가능하다.

예시 폴더

C:\xampp\htdocs\zalnas

C:\xampp\htdocs\cozylab

실행 주소

http://localhost/zalnas

http://localhost/cozylab

2) 더 실무적인 방식 - Laragon

PHP 개발은 개인적으로 Laragon도 추천한다.

Apache, PHP, MySQL/MariaDB 관리가 XAMPP보다 깔끔하고, 가상 도메인 잡기가 편하다.

예시 : C:\laragon\www\zalnas

접속 : http://zalnas.test

NAS Apache 설정이 가능하면, 노트북 개발용은 Laragon으로 하고 실제 운영은 NAS에 올리는 방식이 제일 편할 수 있다.

7. 모바일 앱 개발 환경

Expo / EAS 구조가 좋다. 설치는 다음과 같다.

PowerShell > npm install -g expo
PowerShell > npm install -g eas-cli

EAS CLI는 Expo Application Services를 터미널에서 다루는 도구이고, 설치 명령은 'npm install --global eas-cli' 다.

로그인은 eas login, 로그인 확인은 eas whoami 로 한다.

PowerShell > npx expo --version
PowerShell > eas --version
PowerShell > eas whoami

[[ 새 Expo 앱 만들기 ]]

실제 폰에 Expo Go를 설치하고 QR을 찍으면 바로 테스트 가능하므로 실제 기기로 개발하는 것이 좋다.

Expo Go는 빠른 테스트용이지만 실제 서비스용 프로젝트는 development build가 더 적합하다.

PowerShell > cd C:\Projects
PowerShell > npx create-expo-app appTNA
PowerShell > cd appTNA
PowerShell > npx expo start

[[ APK 빌드 ]]

EAS Build는 Expo/React Native 프로젝트의 Android/iOS 앱 바이너리를 만들어주는 호스팅 빌드 서비스다.

PowerShell > eas login
PowerShell > eas build:configure
PowerShell > eas build -p android --profile preview

[[ 일반 안드로이드 빌드 ]]

PowerShell > eas build --platform android

8. Android Studio 설정

모바일앱에서 에뮬레이터나 adb를 쓰려면 Android Studio가 필요하다.

설치 후 Android Studio에서 아래를 확인한다

More Actions
→ SDK Manager
→ Android SDK 설치
→ Android SDK Platform-Tools 설치
→ Android Emulator 설치

roid Studio는 Windows, macOS, Linux에 설치 가능하다.

Windows에서는 EXE 설치 파일 실행 후 Setup Wizard에서 권장 SDK 패키지를 설치하면 된다

환경 변수는 아래처럼 잡아둔다.

PowerShell > ANDROID_HOME = C:\Users\USER\AppData\Local\Android\Sdk

Path 에도 추가하고 확인한다.

%ANDROID_HOME%\platform-tools

%ANDROID_HOME%\emulator

PowerShell > adb version

9. 프로젝트 폴더 구조 추천

웹, NAS, 모바일앱을 같이 하면 프로젝트를 한 폴더에 다 섞지 말고 web, mobile, server를 나누는 게 좋다.

C:\Projects
 ├─ web
 │   ├─ zalnas
 │   ├─ cozy-saju
 │   └─ company-homepage
 │
 ├─ mobile
 │   ├─ appTNA
 │   ├─ music-player-app
 │   └─ push-test-app
 │
 ├─ server
 │   ├─ apache-config
 │   ├─ mysql-backup
 │   └─ nas-scripts
 │
 └─ test
     ├─ api-test
     └─ codex-test

10. VS Code 기본 설정 추천

VS Code에서 Ctrl + Shift + P → Preferences: Open User Settings (JSON) 열고 아래 정도 넣어두면 편하다.

JSON
{
  "editor.formatOnSave": true,
  "editor.tabSize": 2,
  "files.autoSave": "afterDelay",
  "files.autoSaveDelay": 1000,
  "terminal.integrated.defaultProfile.windows": "PowerShell",
  "explorer.confirmDelete": false,
  "explorer.confirmDragAndDrop": false,
  "emmet.includeLanguages": {
    "javascript": "javascriptreact",
    "typescript": "typescriptreact",
    "php": "html"
  }
}

Prettier도 설치했다면 프로젝트별로 .prettierrc를 만든다.

JSON
{
  "semi": true,
  "singleQuote": true,
  "tabWidth": 2,
  "printWidth": 100
}

11. Codex 작업 프롬프트 추천 방식

Codex에게 바로 “전체 만들어줘”라고 하면 파일이 많이 바뀌어서 헷갈릴 수 있으니 다음의 방식으로 시키는 게 좋다.

이 프로젝트 구조를 먼저 읽고,
어떤 파일이 어떤 역할인지 요약해줘.
아직 수정하지 말고 설명만 해줘.

그 다음,

로그인 페이지 오류를 찾아줘.
수정 전에는 어떤 파일을 바꿀지 먼저 알려줘.

그리고 수정 후,

수정한 파일 목록과 변경 이유를 정리해줘.
테스트 방법도 알려줘.

순서로 하는 게 좋다.