공홈 권장 세팅 폴더구조
1) JavaScript (브라우저 순수)
# 설치 명령 불필요(브라우저 런타임 직접 실행)
# index.html과 script 파일만 만들면 시작 가능
# 공식: 별도 설치 지침 없음(브라우저가 곧 런타임)vanilla-web/
├─ index.html # 진입점(브라우저가 직접 연다)
└─ src/
└─ main.js # <script type="module">로 로드되는 JS2) Node.js (런타임 설치 + 프로젝트 초기화)
# (공식) 패키지 매니저로 Node 설치 예시(배포처 문서에 OS별 가이드 수록)
# macOS(Homebrew) 등 OS별 명령은 문서 표 참고
# https://nodejs.org/en/download/package-manager/all
# 프로젝트 초기화:
mkdir my-node && cd my-node
npm init -y # package.json 생성(공식 CLI)my-node/
├─ package.json # npm init -y로 생성
└─ (원하는 구조)
└─ src/
└─ index.js출처: Node.js “Installing via Package Managers” (Node.js), npm init 문서 (npm 문서)
3) React (공식 권장: 프레임워크로 시작)
# (공식) 새 프로젝트는 프레임워크로 시작 권장(예: Next.js)
npx create-next-app@latest my-react-app
# 또는 빌드툴로 시작하려면 Vite(React 템플릿)
npm create vite@latest my-react-vite -- --template react
cd my-react-vite && npm install && npm run dev# Vite(React) 템플릿 기준 기본 구조
my-react-vite/
├─ package.json
├─ index.html
├─ src/
│ ├─ App.jsx
│ └─ main.jsx
├─ public/ # [확실하지 않음] 템플릿/버전에 따라 없을 수 있음
└─ vite.config.js|ts # [확실하지 않음] 생성 옵션에 따라 다름출처: React 공식 “Creating a React App”(프레임워크/빌드툴 안내) (react.dev), Vite 가이드(스캐폴딩) (vitejs)
4) Next.js
# (공식) 가장 빠른 설치
npx create-next-app@latest my-next-appmy-next-app/
├─ package.json
├─ next.config.(js|mjs|ts) # [확실하지 않음] 파일 형식 선택 가능
├─ tsconfig.json # TS 선택 시
├─ public/
└─ app/ or src/app/ # App Router 디렉터리(프롬프트 선택에 따름)
├─ layout.tsx
├─ page.tsx
└─ globals.css출처: Next.js “Automatic installation (create-next-app)” (Next.js)
5) Vite (Vanilla)
npm create vite@latest my-app
cd my-app
npm install
npm run devmy-app/
├─ package.json
├─ index.html
├─ src/
│ ├─ main.js
│ └─ style.css
└─ vite.config.ts|js # [확실하지 않음] 버전/옵션에 따라 유무 다름출처: Vite “Scaffolding Your First Vite Project” (vitejs)
6) Spring Boot (Spring Initializr 권장)
# A) HTTP API로 ZIP 생성(의존성 예: web)
curl -G https://start.spring.io/starter.zip \
-d type=maven-project \
-d language=java \
-d dependencies=web \
-o my-spring.zip
unzip my-spring.zip -d my-spring && cd my-spring
./mvnw spring-boot:run # Maven Wrapper로 실행
# B) Spring Boot CLI 사용 시
# (CLI 설치 후)
spring init --dependencies=web --build=maven my-spring
cd my-spring && ./mvnw spring-boot:runmy-spring/
├─ pom.xml
├─ mvnw, mvnw.cmd
├─ .mvn/wrapper/ # Maven Wrapper
└─ src/
├─ main/
│ ├─ java/.../DemoApplication.java
│ └─ resources/
│ ├─ application.properties|yml
│ └─ static|templates/ # [확실하지 않음] 선택적
└─ test/
└─ java/.../DemoApplicationTests.java출처: Spring Initializr 레퍼런스 (Home), Spring Boot CLI ‘init’ 문서 (Home)
7) JSP (Maven Webapp Archetype)
mvn -B archetype:generate \
-DarchetypeGroupId=org.apache.maven.archetypes \
-DarchetypeArtifactId=maven-archetype-webapp \
-DgroupId=com.example \
-DartifactId=my-jsp-app \
-DinteractiveMode=falsemy-jsp-app/
├─ pom.xml # packaging war
└─ src/
└─ main/
└─ webapp/
├─ WEB-INF/
│ └─ web.xml
└─ index.jsp출처: Apache Maven Webapp Archetype 페이지(구조 예시 포함) (Apache Maven)
8) Rust
# (공식 권장) rustup으로 설치
curl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs | sh
# 새 바이너리 프로젝트 생성
cargo new my-rust-appmy-rust-app/
├─ Cargo.toml
└─ src/
└─ main.rs출처: Rust 공식 설치(rustup) (rust-lang.org)
9) Tauri
# (공식) 스캐폴딩 유틸
npm create tauri-app@latest my-tauri
cd my-tauri
# 프롬프트에 따라 React/Vite 등 선택 → 설치 후 dev 실행my-tauri/
├─ package.json # 프런트엔드(예: Vite+React)
├─ src/… # 프런트 코드(템플릿에 따라 다름)
├─ index.html # Vite 엔트리[확실하지 않음: 프레임워크에 따라 다름]
└─ src-tauri/
├─ tauri.conf.json
├─ Cargo.toml
└─ src/
└─ main.rs출처: Tauri v2 “Create a Project” (Tauri), create-tauri-app 사용법(공식 레포/NPM) (GitHub)
10) Electron (Electron Forge 권장)
# (공식) Electron Forge 스캐폴딩
npx create-electron-app@latest my-electron
cd my-electron
npm start
# 템플릿 예: --template=vite / --template=webpack 등my-electron/
├─ package.json
├─ src/ # Forge 템플릿 기준
│ ├─ main.(js|ts) # 메인 프로세스
│ ├─ preload.(js|ts) # [확실하지 않음] 브릿지(옵션)
│ └─ renderer/ # 렌더러(브라우저 창)
│ ├─ index.html
│ └─ renderer.(js|ts|tsx)
└─ forge.config.js|package.json의 config.forge # [확실하지 않음] 템플릿에 따라 다름출처: Electron Forge Getting Started/Docs (electronforge.io)
치킨강정