개발 환경 설정

트랙별 런타임·가상환경·실행 위치·비밀값을 확인하고 첫 실습을 재현하기

자기 트랙의 환경부터 준비하기

공통으로 코드 편집기·Git·브라우저가 필요합니다. 기획·디자인은 Figma 계정과 팀 파일 접근 권한을, 개발 트랙은 아래 런타임을 준비합니다. 사용하지 않는 모든 언어·DB·도구를 한 번에 설치하지 않습니다.

트랙시작 환경첫 확인
기획·디자인Figma, 브라우저파일 생성·프레임 링크 공유
프론트엔드Node.js 지원 LTS, npmnode -v, npm -v
DjangoPython 3.12, 프로젝트별 venvpython --version
SpringJDK 21, Java 편집 환경java -version, javac -version

위 Python·Java 버전은 이 교재의 재현 기준입니다. 프론트엔드는 생성하려는 Vite 버전의 Node 요구사항을 확인하고 맞는 지원 LTS를 사용합니다. 이미 있는 팀 프로젝트는 package.json·lockfile·README의 버전을 우선 확인하며 임의 업그레이드하지 않습니다.

공통: 폴더·Git·편집기

프로젝트마다 별도 폴더를 만들고 터미널의 현재 위치를 확인합니다. 명령을 실행하는 기준은 보통 package.json, manage.py, build.gradle이 있는 폴더입니다. 파일 확장자가 숨겨져 index.html.txt가 되지 않았는지 확인합니다.

Shell
git --versiongit status

아직 Git 저장소가 아닌 새 폴더에서 git status가 실패하는 것은 설치 오류와 다릅니다. 첫 프로젝트 문서에서 init 또는 clone을 진행합니다. 편집기는 UTF-8로 저장하고 프로젝트가 정한 들여쓰기·포매터 설정을 사용합니다.

프론트엔드 환경

Node.js 공식 배포의 지원 LTS를 설치한 뒤 새 터미널에서 버전을 확인합니다. 기존 프로젝트의 npm·pnpm·yarn 중 lockfile과 팀 안내에 맞는 하나를 사용합니다. 같은 프로젝트에서 설치 도구를 섞어 lockfile 여러 개를 만들지 않습니다.

React를 시작하는 5주에는 새 폴더에서 다음을 실행합니다. 1–2주는 HTML·CSS 문서의 작은 HTTP 서버로 충분하며 3–4주는 JavaScript 문서의 Vite vanilla 환경을 사용합니다.

Shell
npm create vite@latest lion-react -- --template reactcd lion-reactnpm installnpm run dev

터미널에 출력된 실제 주소로 접속합니다. 포트가 이미 사용 중이면 다른 포트가 배정될 수 있습니다. package.json의 scripts에 없는 npm test를 당연히 실행 가능한 명령으로 가정하지 않습니다. 새 Vite 예제의 기본 검증은 npm run build와 제공된 lint 스크립트, 문서의 동작 검사입니다.

Python과 가상환경

새 Python 프로젝트 폴더에서 실행합니다.

Shell
python -m venv .venv

macOS/Linux: source .venv/bin/activate. Windows PowerShell: .\.venv\Scripts\Activate.ps1. 실행 정책에 막히면 전역 보안 정책을 바꾸는 대신 .\.venv\Scripts\python.exe -m pip ...처럼 가상환경 실행 파일을 직접 사용할 수 있습니다.

Shell
python -c "import sys; print(sys.executable)"python -m pip --version

출력 경로가 지금 프로젝트의 .venv를 가리키는지 확인합니다. Django 설치와 프로젝트 생성은 4주 문서에서 진행합니다. 1–3주의 Python 표준 라이브러리 실습에는 Django 설치가 필요하지 않습니다.

Java와 Gradle Wrapper

JDK에는 javac가 포함됩니다. 실행 환경만 설치되어 javac가 없다면 JDK 설치를 확인합니다. IDE의 프로젝트 SDK와 터미널의 java가 같은 주요 버전인지 비교합니다.

Spring Initializr로 만든 프로젝트에는 Gradle Wrapper가 있습니다. macOS/Linux에서는 ./gradlew test, Windows에서는 .\gradlew.bat test로 실행합니다. Wrapper 파일과 설정은 팀이 공유하는 실행 도구이므로 소스와 함께 관리합니다. IDE에서 빌드 도구 프로젝트로 열어 의존성을 불러옵니다.

비밀값과 예제 파일

.env·DB 비밀번호·비공개 API 키는 커밋하지 않습니다. .env.example에는 필요한 변수 이름과 가상 값만 적습니다. Vite의 VITE 변수와 Next.js의 NEXTPUBLIC_ 변수는 클라이언트에 전달될 수 있으므로 서버 비밀값을 넣지 않습니다. Supabase publishable key와 서버 secret의 차이는 해당 문서에서 확인합니다.

Git 제외 대상은 트랙별로 .venv/, __pycache__/, node_modules/, dist/, build/, 로컬 DB와 비밀 환경 파일 등입니다. lockfile·migration·Gradle Wrapper처럼 재현에 필요한 파일까지 무조건 지우지 않습니다.

세션 전 진단과 완료 기준

권장 준비 30–60분입니다. 설치가 길어지면 본 세션 전에 도움을 요청할 수 있도록 아래 정보를 남깁니다.

문제확인 순서
명령을 찾지 못함설치 여부 → 새 터미널 → PATH
패키지를 찾지 못함현재 폴더 → 선택한 런타임 → 해당 환경에 설치됐는지
포트 충돌이미 실행 중인 서버 → 다른 포트 → 접속 주소
팀원과 결과가 다름런타임 버전 → lockfile → 환경변수 이름 → 명령
권한 거절저장 위치·계정 권한·파일 공유 범위 확인

완료 기준은 자기 트랙의 버전 출력, 첫 예제 실행 또는 Figma 파일 공유, 비밀값 없는 환경 메모입니다. 오류 공유 시 토큰·쿠키·개인정보를 가리고 전체 화면 대신 필요한 오류와 실행 명령을 제공해도 됩니다.

공식 설치·시작 문서