아현 노트북 VSCode + Codex 조합으로 웹 사이트 + 모바일 앱 개발 시스템 설정 - Codex Coding

노트북 한 대에서 VS Code + Codex를 중심으로 웹사이트와 모바일 앱을 동시에 개발하려면, 처음부터 개발환경을 정돈해서 설치하는 게 중요하다. 지금까지 사용한 환경을 고려하면 다음 조합이 가장 현실적입니다.

Windows 11 + VS Code + Codex + Git + Node.js + PHP/MySQL + React Native/Expo + Android Studio

프로젝트는 가급적 C:\Projects 로컬 SSD에 두고, NAS나 Z: 같은 네트워크/공유 드라이브에서는 직접 개발하지 않는 구성을 권장합니다.

VS Code Windows 설치 프로그램은 code 명령을 PATH에 등록할 수 있고, Codex는 현재 VS Code용 IDE 확장과 CLI를 모두 지원한다. Expo는 Android Studio 에뮬레이터와 실제 Android 기기를 모두 개발 환경으로 사용할 수 있다.

1. 전체 설치 순서

1. Windows 기본 개발 설정 ↓ 2. 프로젝트 폴더 구성 ↓ 3. Git 설치 ↓ 4. VS Code 설치 ↓ 5. Node.js 설치 ↓ 6. PowerShell 실행 정책 설정 ↓ 7. Codex 설치 및 로그인 ↓ 8. VS Code 기본 설정 ↓ 9. 웹 개발환경 설치 ├─ Node.js 웹 → 별도 서버 불필요 └─ PHP/MySQL 웹 → Laragon 권장 ↓ 10. 모바일 개발환경 설치 ├─ Expo / React Native └─ Android Studio / Emulator ↓ 11. EAS CLI 설치 ↓ 12. 테스트용 브라우저 및 API 도구 설치 ↓ 13. GitHub 연동 ↓ 14. 프로젝트별 AGENTS.md / .gitignore / .env 구성 ↓ 15. 전체 정상동작 테스트

2. Windows 기본 설정

파일 탐색기에서, '보기 → 표시 → 파일 확장명' 활성화한다.

.env .gitignore package.json app.json httpd.conf php.ini

그래야 위와 같은 파일을 잘못 만들 가능성이 줄어든다.

3. 프로젝트 기본 폴더 만들기

- Codex를 많이 사용한다면 프로젝트를 네트워크 드라이브나 NAS에서 직접 개발하지 않는 것을 권장한다.

- C:\Projects 같은 프로젝트 폴더를 만든다.

- 예전에 발생했던, '공유 드라이브 경로에서 샌드박스 프로세스가 바로 뜨지 않는 문제'를 예방할 수 있다.

- Codex가 명령을 실행하거나 샌드박스 프로세스를 생성할 때 네트워크/공유 드라이브에서는 권한, 파일 잠금, 지연, 심볼릭 링크 등의 문제가 생길 수 있다.

4. Git 설치

- 설치 사이트 : https://git-scm.com/install/windows

- 웹사이트와 앱 개발 모두 Git을 가장 먼저 설치하는 것이 좋다.

- 설치 후 정상 설치 여부 확인

</> PowerShell

git --version

- Git 기본 설정

</> PowerShell

git config --global user.name "사용자이름"
git config --global user.email "이메일주소"

- 확인

</> PowerShell

git config --global --list

- Windows/Linux 줄바꿈 충돌을 줄이려면,

</> PowerShell

git config --global core.autocrlf true

- UTF-8 파일명 처리

</> PowerShell

git config --global core.quotepath false

5. VS Code 설치

- 설치 사이트 : https://code.visualstudio.com/download?_exp_download=fb315fc982

- Windows용 VS Code를 설치한다. 설치 시 가능하면 다음 옵션을 체크한다.

□ Add "Open with Code" action □ Add to PATH □ Register Code as editor

- VS Code 설치 프로그램은 PATH 등록을 지원하므로 설치 후 새 터미널에서 code .로 현재 폴더를 열 수 있다.

- 확인

</> PowerShell

code --version

- 프로젝트 실행

</> PowerShell

cd C:\Projects\pyeonan
code .

6. Node.js 설치 

- 설치 사이트 : https://nodejs.org/en/download

- 웹 프론트엔드와 Expo/React Native 모두 Node.js가 필요하다.

- Node.js는 LTS 계열을 사용하는 것이 안정적입니다. Node.js는 Current와 LTS 릴리스 주기를 별도로 운영한다.

- 설치 후 VS Code와 터미널을 완전히 종료 후 다시 실행한다.

- 확인 : 세 명령 모두 버전이 출력되어야 한다.

</> PowerShell

node -v
npm -v
npx -v

7. PowerShell 실행 정책 설정

npx.ps1 파일을 로드할 수 없습니다. 이 시스템에서 스크립트를 실행할 수 없습니다.

- 위 문제를 예방하려면,

</> PowerShell

Set-ExecutionPolicy -Scope CurrentUser RemoteSigned

- 질문이 나오면 'Y' 입력

</> PowerShell

Get-ExecutionPolicy -List

- 확인 시, CurrentUser , RemoteSigned 이면 된다.

8. Codex 설치

- Codex는 현재 크게 두 방식으로 사용할 수 있다.

VS Code Codex Extension + Codex CLI

- 둘 다 설치하는 것을 권장한다.

- VS Code에서는 IDE 확장을 지원하며, CLI를 로컬 터미널 기반 개발에 사용할 수 있도록 제공힌다

VS Code Codex Extension

- VS Code 실행 후, Extensions 에서 공식 OpenAI Codex 확장을 설치한다.

- 그 후 ChatGPT 계정으로 로그인한다.

- VS Code 우측에 Codex 패널이 표시된다.

9. Codex CLI 설치

- Codex CLI는 로컬 프로젝트 파일을 대상으로 분석·수정·명령 실행 작업을 수행하는 개발용 에이전트이다.

- 터미널에서

</> PowerShell

npm install -g @openai/codex

- 설치 후 확인

</> PowerShell

codex --version

- 프로젝트 폴더에서 실행

</> PowerShell

cd C:\Projects\pyeonan
codex

- 또는 지원되는 실행 방식에 따라

</> PowerShell

codex .

10. VS Code 필수 Extensions

- 확장을 너무 많이 설치하면 VS Code 자체가 무거워질 수 있으므로 필요한 것만 설치하는 게 좋다.

- 필수

OpenAI Codex Prettier ESLint GitLens Error Lens

- 웹 개발

PHP Intelephense HTML CSS Support Auto Rename Tag DotENV

- React / React Native

ES7+ React/Redux/React-Native snippets React Native Tools

- 선택

Docker REST Client Thunder Client Markdown All in One

11. 한글 깨짐을 원천적으로 줄이는 VS Code 설정

- VS Code,

Ctrl + Shift + P

- 입력

Preferences: Open User Settings (JSON)

- 다음과 같이 설정한다.

</> JSON

{
  "files.encoding": "utf8",
  "files.autoGuessEncoding": true,
  "terminal.integrated.defaultProfile.windows": "PowerShell",
  "terminal.integrated.env.windows": {
    "PYTHONUTF8": "1"
  },
  "editor.formatOnSave": true,
  "files.eol": "\n"
}

- Windows 터미널 UTF-8 설정

</> PowerShell

chcp 65001

- PowerShell 프로필에 영구 적용하려면 필요에 따라,

</> PowerShell

$PROFILE

- 프로필 파일을 만들어 UTF-8 설정을 추가할 수도 있다.

- 프로젝트 파일 자체는 항상 UTF-8 로 저장하는 것을 원칙으로 한다.

12. 웹사이트 개발환경 선택

- 아래의 내용을 모두 다루기 때문에 Laragon 설치를 권장한다.

PHP MySQL/MariaDB Apache Node.js React

13. Laragon 설치

- 설치 사이트 : https://laragon.org/download
- Laragon 하나로 로컬에서 - Apache, PHP, MySQL, MariaDB, phpMyAdmin - 등을 쉽게 관리할 수 있다.

14. PHP CLI PATH 설정

- Codex가 PHP 문법 검사 등을 하려면 PHP CLI가 PATH에 있어야 한다.

- 예를 들어 'C:\laragon\bin\php\php-8.x.x' 경로를 환경변수 PATH에 추가한다.

- 확인,

</> PowerShell

php -v

15. MySQL CLI PATH 설정

- Laragon MySQL 은 'C:\laragon\bin\mysql\mysql-8.x.x-winx64\bin'

- MariaDB 는 'C:\laragon\bin\mysql\mariadb-xx.x.x-winx64\bin'

- 위 2개 경로에서 필요한 경로를 환경변수 PATH에 추가한다.

</> PowerShell

mysql --version

16. PHP Composer 설치

- PHP 패키지 관리를 위해 Composer도 설치하는 것이 좋다.

</> PowerShell

composer --version

- Composer를 사용하면 아래 사항 등을 할 수 있다.

</> PowerShell

composer install
composer update

- Laravel을 사용하지 않더라도 PHP 라이브러리 관리에 유용하다.

17. 모바일 개발환경 설치

- 아래 구조를 권장한다.

React Native + Expo + EAS

- Expo는 Android/iOS/web을 하나의 React Native 코드베이스에서 개발할 수 있는 흐름을 제공한다.

18. Expo 설치 방식

- 전역 설치

</> PowerShell

npm install -g expo-cli

19. Android Studio 설치

- Android 앱 테스트를 위해 설치한다.

- Android Studio는 Android 공식 IDE이며 SDK, Emulator, AVD 관리 등을 제공한다.

- 설치 시 최소는 아래 요소가 필요하다.

Android SDK Android SDK Platform Android SDK Build-Tools Android Emulator Android SDK Platform-Tools

20. Android SDK 설정

- Android Studio,

Settings
→ Languages & Frameworks
→ Android SDK

- 또는,

More Actions → SDK Manager

- SDK 위치 확인 시, 일반적으로 C:\Users\USER\AppData\Local\Android\Sdk 경로이다.

21. 환경변수 ANDROID_HOME 설정

- Windows,

시스템 → 고급 시스템 설정 → 환경 변수

- 사용자 변수 생성,

ANDROID_HOME

- 값,

C:\Users\USER\AppData\Local\Android\Sdk

- PATH 에 추가,

%ANDROID_HOME%\platform-tools %ANDROID_HOME%\emulator

- 필요 시 추가,

%ANDROID_HOME%\cmdline-tools\latest\bin

- 확인

</> PowerShell

adb --version

- 그리고,

</> PowerShell

emulator -list-avds

- AVD 이름이 출력되면 정상이다.

23. Android Emulator 생성

- Android Studio,

Device Manager
→ Create Virtual Device

- 권장,

Pixel 8 또는 Pixel 8a

- System Image는 프로젝트/Expo SDK에 맞는 안정적인 최신 API를 선택한다.

- Google Play 포함 이미지를 선택하면 실제 앱 테스트가 더 편하다.

- 가상화가 켜져 있어야 성능이 좋다.

- BIOS 에서 아래 기능 활성화

Intel VT-x AMD-V / SVM

- Windows에서는 필요한 경우 아래 사항 확인

Windows Hypervisor Platform

23. Expo 앱 실행 테스트

- Emulator 실행 후,

</> PowerShell

cd C:\Projects\myapp
npx expo start

- 그 다음 'a' 입력하면, Android Emulator에서 앱이 실행되어야 한다.

- 또는,

</> PowerShell

npx expo start --android

24. 실제 Android 폰 테스트

- 휴대폰에서