노트북 한 대에서 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 설치
- 웹사이트와 앱 개발 모두 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 설치
- 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 설치
- 웹 프론트엔드와 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,
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
14. PHP CLI PATH 설정
- Codex가 PHP 문법 검사 등을 하려면 PHP CLI가 PATH에 있어야 한다.
- 예를 들어 'C:\laragon\bin\php\php-8.x.x' 경로를 환경변수 PATH에 추가한다.
- 확인,
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,
시스템
→ 고급 시스템 설정
→ 환경 변수
- 사용자 변수 생성,
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 폰 테스트
- 휴대폰에서