From bc85daaf6245d0adfee12f6779c53e2e3065cc08 Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Thu, 5 Jun 2025 18:46:23 +0000 Subject: [PATCH 01/10] Initial plan for issue From 55722e89c44b8e8e50768d25cdd5f434ea713289 Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Fri, 6 Jun 2025 02:12:35 +0000 Subject: [PATCH 02/10] Add Korean localization for root files and complete directories Co-authored-by: justinyoo <1538528+justinyoo@users.noreply.github.com> --- localisation/ko/README.md | 100 +++++ localisation/ko/complete/README.md | 56 +++ localisation/ko/complete/dotnet/README.md | 35 ++ .../ko/complete/java/socialapp/README.md | 367 ++++++++++++++++++ localisation/ko/complete/javascript/README.md | 43 ++ localisation/ko/complete/python/README.md | 292 ++++++++++++++ localisation/ko/dotnet/README.md | 5 + localisation/ko/java/README.md | 5 + localisation/ko/javascript/README.md | 5 + localisation/ko/product-requirements.md | 148 +++++++ localisation/ko/python/README.md | 5 + 11 files changed, 1061 insertions(+) create mode 100644 localisation/ko/README.md create mode 100644 localisation/ko/complete/README.md create mode 100644 localisation/ko/complete/dotnet/README.md create mode 100644 localisation/ko/complete/java/socialapp/README.md create mode 100644 localisation/ko/complete/javascript/README.md create mode 100644 localisation/ko/complete/python/README.md create mode 100644 localisation/ko/dotnet/README.md create mode 100644 localisation/ko/java/README.md create mode 100644 localisation/ko/javascript/README.md create mode 100644 localisation/ko/product-requirements.md create mode 100644 localisation/ko/python/README.md diff --git a/localisation/ko/README.md b/localisation/ko/README.md new file mode 100644 index 0000000..b8e6a73 --- /dev/null +++ b/localisation/ko/README.md @@ -0,0 +1,100 @@ +# GitHub Copilot Vibe 코딩 워크샵 + +![GitHub Copilot - Ghiblifiled](./images/ghcp.jpg) + +Python, JavaScript, Java, .NET 등 다양한 프로그래밍 언어에서 [GitHub Copilot](https://docs.github.com/copilot/about-github-copilot/what-is-github-copilot)과 최신 기능들로 바이브 코딩을 하고, 컨테이너화를 통해 앱을 클라우드 네이티브로 만들어 보세요. 뛰어들 준비가 되셨나요? + +## 배경 + +Contoso는 다양한 야외 활동 제품을 판매하는 회사입니다. Contoso의 마케팅 부서는 기존 고객과 잠재 고객에게 제품을 홍보하기 위한 마이크로 소셜 미디어 웹사이트를 런칭하고자 합니다. 첫 번째 MVP로서, 웹사이트를 빠르게 구축하고자 합니다. Contoso의 IT 부서에는 현재 각각 Python과 JavaScript를 사용하는 두 명의 개발자가 있습니다. 출시일이 빠르게 다가오고 있어서, 두 개발자 모두 애플리케이션을 빠르게 개발해야 합니다. + +하지만 상황은 다음과 같습니다... + +## 워크샵 목표 + +- GitHub Copilot 에이전트 모드를 사용하여 애플리케이션 구축하기. +- GitHub Copilot에 커스텀 지시사항을 추가하여 GitHub Copilot을 더 잘 제어하기. +- GitHub Copilot에 다양한 MCP 서버를 추가하여 애플리케이션을 더 정확하게 구축하기. + +## 전제 조건 + +이 워크샵에서는 웹 브라우저 외에 별도의 준비가 필요 없기 때문에 [GitHub Codespaces](https://docs.github.com/en/codespaces/about-codespaces/what-are-codespaces)를 적극 권장합니다. 하지만 정말로 본인의 머신을 사용해야 한다면, 아래에서 확인된 모든 것들을 설치했는지 확인하세요. + +### 공통 + +- [Visual Studio Code](https://code.visualstudio.com/) +- VS Code [GitHub Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot) 확장 +- VS Code [GitHub Copilot Chat](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot-chat) 확장 +- 💥 Windows 사용자용 👉 [PowerShell 7](https://learn.microsoft.com/powershell/scripting/install/installing-powershell) +- [git CLI](https://git-scm.com/downloads) +- [GitHub CLI](https://cli.github.com/) +- [Docker Desktop](https://docs.docker.com/get-started/introduction/get-docker-desktop/) + +### Python + +- [pyenv](https://github.com/pyenv/pyenv) 또는 [pyenv for Windows](https://github.com/pyenv-win/pyenv-win) +- pyenv를 통한 Python 3.12+ +- `uv` 패키지 관리자 (권장) 또는 `pip` +- VS Code [Python](https://marketplace.visualstudio.com/items/?itemName=ms-python.python) 확장 +- VS Code [Pylance](https://marketplace.visualstudio.com/items/?itemName=ms-python.vscode-pylance) 확장 +- VS Code [Python Debugger](https://marketplace.visualstudio.com/items/?itemName=ms-python.debugpy) 확장 +- VS Code [autopep8](https://marketplace.visualstudio.com/items/?itemName=ms-python.autopep8) 확장 + +### JavaScript + +- [nvm](https://github.com/nvm-sh/nvm) 또는 [nvm for Windows](https://github.com/coreybutler/nvm-windows) +- nvm을 통한 최신 LTS [Node.js](https://nodejs.org/) + +### Java + +- [SDKMAN](https://sdkman.io/) +- SDKMAN을 통한 [OpenJDK 21](https://learn.microsoft.com/java/openjdk/download) +- SDKMAN을 통한 [Apache Maven](https://maven.apache.org/download.cgi) +- SDKMAN을 통한 [Gradle Build Tool](https://docs.gradle.org/current/userguide/installation.html) +- SDKMAN을 통한 [Spring Boot Initializr](https://docs.spring.io/spring-boot/cli/installation.html) +- VS Code [Extension Pack for Java](https://marketplace.visualstudio.com/items/?itemName=vscjava.vscode-java-pack) 확장 +- VS Code [Spring Boot Extension Pack](https://marketplace.visualstudio.com/items/?itemName=vmware.vscode-boot-dev-pack) 확장 + +### .NET + +- [.NET SDK 9](https://dotnet.microsoft.com/download/dotnet/9.0) +- [VS Code C# Dev Kit](https://marketplace.visualstudio.com/items/?itemName=ms-dotnettools.csdevkit) 확장 + +## 제품 요구사항 문서 + +먼저 시작할 곳은 이 [PRD (제품 요구사항 문서)](./product-requirements.md)입니다. 이 문서는 무엇을 해야 하고 어떻게 해야 하는지에 대한 더 나은 이해를 제공할 것입니다. + +## 워크샵 지침 + +아래 링크를 따라 진행하는 자기 주도 워크샵입니다: + +| 단계 | 링크 | +|------------------------------------|---------------------------------------------------------| +| 00: 개발 환경 | [00-setup.md](./docs/00-setup.md) | +| 01: Python 백엔드 | [01-python.md](./docs/01-python.md) | +| 02: JavaScript 프론트엔드 | [02-javascript.md](./docs/02-javascript.md) | +| 03: Python에서 Java로 마이그레이션 | [03-java.md](./docs/03-java.md) | +| 04: JavaScript에서 .NET으로 마이그레이션 | [04-dotnet.md](./docs/04-dotnet.md) | +| 05: 컨테이너화 | [05-containerization.md](./docs/05-containerization.md) | + +## 완성된 샘플 + +각 애플리케이션의 완성된 예제를 확인해보세요. 이들도 GitHub Copilot으로 바이브 코딩되었기 때문에 완벽하지 않을 수 있으며, 앱을 따라할 필요는 없습니다. + +| 언어 | 애플리케이션 | 위치 | +|---------------------|-------------|--------------------------------------| +| Python 백엔드 | FastAPI | [python](./complete/python/) | +| JavaScript 프론트엔드 | React | [javascript](./complete/javascript/) | +| Java 백엔드 | Spring Boot | [java](./complete/java/) | +| .NET 프론트엔드 | Blazor | [dotnet](./complete/dotnet/) | +| 컨테이너화 | Container | [containerization](./complete/) | + +## 더 읽어보기... + +- [GitHub Codespaces](https://docs.github.com/en/codespaces/about-codespaces/what-are-codespaces) +- [GitHub Copilot](https://docs.github.com/en/copilot/about-github-copilot/what-is-github-copilot) +- [GitHub Copilot: Agent Mode](https://code.visualstudio.com/blogs/2025/04/07/agentMode) +- [GitHub Copilot: MCP](https://code.visualstudio.com/blogs/2025/05/12/agent-mode-meets-mcp) +- [GitHub Copilot: Custom Instructions](https://code.visualstudio.com/docs/copilot/copilot-customization) +- [GitHub Copilot: Changing AI Models](https://docs.github.com/en/copilot/using-github-copilot/ai-models/changing-the-ai-model-for-copilot-chat?tool=vscode) +- [Curated MCP Servers](https://github.com/modelcontextprotocol/servers) \ No newline at end of file diff --git a/localisation/ko/complete/README.md b/localisation/ko/complete/README.md new file mode 100644 index 0000000..5eef52f --- /dev/null +++ b/localisation/ko/complete/README.md @@ -0,0 +1,56 @@ +# 완성된 앱 샘플 + +완성된 앱 샘플 목록입니다. 이들도 바이브 코딩으로 만들어졌기 때문에, 어떻게 구축되었는지 확인할 수 있습니다. + +| 애플리케이션 | 위치 | +|-------------|-----------------------------| +| FastAPI | [python](./python/) | +| React | [javascript](./javascript/) | +| Spring Boot | [java](./java/) | +| Blazor | [dotnet](./dotnet/) | + +## 컨테이너화 샘플 + +### 전제 조건 + +준비를 위해 [README](../README.md) 문서를 참조하세요. + +### 시작하기 + +1. Docker가 실행 중인지 확인하세요. + + ```bash + docker info + ``` + +1. 저장소 루트를 가져오세요. + + ```bash + # bash/zsh + REPOSITORY_ROOT=$(git rev-parse --show-toplevel) + ``` + + ```powershell + # PowerShell + $REPOSITORY_ROOT = git rev-parse --show-toplevel + ``` + +1. `complete` 디렉터리로 이동하세요. + + ```bash + cd $REPOSITORY_ROOT/complete + ``` + +1. 컨테이너화된 앱을 실행하세요. + + ```bash + docker compose up --build -d + ``` + +1. 웹 브라우저를 열고 `http://localhost:3030`으로 이동하세요. +1. 웹 애플리케이션이 제대로 실행되는지 확인하세요. +1. 다음 명령을 실행하여 컨테이너화된 앱을 제거하고 정리하세요. + + ```bash + docker compose down --rmi all + ``` \ No newline at end of file diff --git a/localisation/ko/complete/dotnet/README.md b/localisation/ko/complete/dotnet/README.md new file mode 100644 index 0000000..25d7ba7 --- /dev/null +++ b/localisation/ko/complete/dotnet/README.md @@ -0,0 +1,35 @@ +# .NET 앱 샘플 + +## 전제 조건 + +준비를 위해 [README](../../README.md) 문서를 참조하세요. + +## 시작하기 + +### Spring Boot 백엔드 실행 + +[Java 앱 샘플](../java/)을 사용하세요. + +> **참고**: GitHub Codespaces를 사용하는 경우, Java 앱 포트 `8080`이 **public**으로 설정되어 있는지 확인하세요. + +### Blazor 프론트엔드 실행 + +1. 저장소 루트를 가져오세요. + + ```bash + # bash/zsh + REPOSITORY_ROOT=$(git rev-parse --show-toplevel) + ``` + + ```powershell + # PowerShell + $REPOSITORY_ROOT = git rev-parse --show-toplevel + ``` + +1. 앱을 실행하세요. + + ```bash + dotnet watch run --project $REPOSITORY_ROOT/complete/dotnet/Contoso.BlazorApp + ``` + +1. 웹 애플리케이션이 제대로 실행되는지 확인하세요. \ No newline at end of file diff --git a/localisation/ko/complete/java/socialapp/README.md b/localisation/ko/complete/java/socialapp/README.md new file mode 100644 index 0000000..77e0f3d --- /dev/null +++ b/localisation/ko/complete/java/socialapp/README.md @@ -0,0 +1,367 @@ +# Java 앱 샘플 + +게시물, 댓글, 좋아요에 대한 완전한 CRUD 작업을 제공하는 소셜 미디어 플랫폼용 포괄적인 Spring Boot REST API 애플리케이션입니다. + +## 프로젝트 개요 + +다음 사양으로 구축된 프로덕션 준비가 완료된 Spring Boot 애플리케이션입니다: + +- **패키지 명**: `com.contoso.socialapp` +- **Artifact ID**: `socialapp` +- **Group ID**: `com.contoso` +- **패키지 타입**: `jar` +- **Java 버전**: OpenJDK 21 +- **빌드 도구**: Gradle +- **데이터베이스**: SQLite (내장형) +- **포트**: 8080 + +### 프로젝트 종속성 + +- **Spring Boot 3.2.5**: 코어 프레임워크 +- **Spring Web**: RESTful API 엔드포인트 +- **Spring Data JPA**: 데이터베이스 작업 +- **Spring Boot Actuator**: 애플리케이션 모니터링 +- **Spring Boot Validation**: 입력 검증 +- **SQLite**: 내장형 데이터베이스 +- **Hibernate Community Dialects**: SQLite 지원 +- **Springdoc OpenAPI**: API 문서화 (Swagger UI) +- **Lombok**: 보일러플레이트 코드 감소 + +### 프로젝트 구조 + +```text +src/ +├── main/ +│ ├── java/ +│ │ └── com/ +│ │ └── contoso/ +│ │ └── socialapp/ +│ │ ├── SocialAppApplication.java # 메인 애플리케이션 클래스 +│ │ ├── config/ +│ │ │ ├── WebConfig.java # CORS 구성 +│ │ │ └── OpenApiConfig.java # Swagger/OpenAPI 구성 +│ │ ├── controller/ +│ │ │ ├── HealthController.java # 상태 엔드포인트 +│ │ │ ├── PostController.java # 게시물 관리 +│ │ │ └── CommentController.java # 댓글 및 좋아요 관리 +│ │ ├── model/ +│ │ │ ├── Post.java # 게시물 엔티티 +│ │ │ ├── Comment.java # 댓글 엔티티 +│ │ │ ├── Like.java # 좋아요 엔티티 +│ │ │ └── dto/ # 데이터 전송 객체 +│ │ ├── repository/ +│ │ │ ├── PostRepository.java # 게시물 데이터 액세스 +│ │ │ ├── CommentRepository.java # 댓글 데이터 액세스 +│ │ │ └── LikeRepository.java # 좋아요 데이터 액세스 +│ │ └── service/ +│ │ ├── PostService.java # 게시물 비즈니스 로직 +│ │ └── CommentService.java # 댓글 비즈니스 로직 +│ └── resources/ +│ ├── application.properties # 애플리케이션 구성 +│ └── data.sql # 샘플 데이터 (선택사항) +└── test/ + └── java/ + └── com/ + └── contoso/ + └── socialapp/ + └── SocialAppApplicationTests.java # 통합 테스트 +``` + +## 기능 + +- ✅ 소셜 미디어 작업을 위한 완전한 RESTful API +- ✅ 게시물 관리 (생성, 읽기, 업데이트, 삭제) +- ✅ 완전한 CRUD 작업을 포함한 댓글 시스템 +- ✅ 좋아요/취소 기능 +- ✅ JPA/Hibernate를 사용한 SQLite 데이터베이스 +- ✅ OpenAPI/Swagger 문서화 +- ✅ localhost 및 GitHub Codespaces용 CORS 활성화 +- ✅ 동적 서버 URL 구성 +- ✅ 상태 확인 엔드포인트 +- ✅ Spring Boot Actuator 통합 +- ✅ 포괄적인 오류 처리 +- ✅ Bean Validation을 사용한 입력 검증 + +## 빠른 시작 + +### 전제 조건 + +준비를 위해 [README](../../README.md) 문서를 참조하세요. + +### 1. 환경 설정 + +먼저 `$REPOSITORY_ROOT` 환경 변수를 설정하세요. + +```bash +# bash/zsh +REPOSITORY_ROOT=$(git rev-parse --show-toplevel) +``` + +```powershell +# PowerShell +$REPOSITORY_ROOT = git rev-parse --show-toplevel +``` + +그런 다음 java 디렉터리로 이동하세요. + +```bash +cd $REPOSITORY_ROOT/complete/java +``` + +### 2. 애플리케이션 빌드 + +```bash +# gradlew를 실행 가능하게 만들기 (필요한 경우) +chmod +x ./gradlew + +# 프로젝트 빌드 +./gradlew build +``` + +### 3. 애플리케이션 실행 + +```bash +# Gradle을 사용하여 애플리케이션 시작 +./gradlew bootRun + +# 대안: JAR 파일을 직접 실행 +# java -jar build/libs/socialapp-0.0.1-SNAPSHOT.jar +``` + +### 4. 애플리케이션 실행 확인 + +```bash +# 상태 엔드포인트 확인 +curl http://localhost:8080/api/health + +# 예상 응답: {"status":"healthy"} +``` + +### 5. API 문서 액세스 + +브라우저를 열고 다음으로 이동하세요: + +- **Swagger UI**: [http://localhost:8080/swagger-ui.html](http://localhost:8080/swagger-ui.html) +- **OpenAPI JSON**: [http://localhost:8080/v3/api-docs](http://localhost:8080/v3/api-docs) + +## API 엔드포인트 + +### 상태 및 환영 + +- `GET /api/health` - 커스텀 상태 확인 엔드포인트 +- `GET /api/welcome` - 환영 메시지 엔드포인트 + +### 게시물 관리 + +- `GET /api/posts` - 모든 게시물 가져오기 +- `GET /api/posts/{id}` - ID로 특정 게시물 가져오기 +- `POST /api/posts` - 새 게시물 생성 +- `PATCH /api/posts/{id}` - 기존 게시물 업데이트 +- `DELETE /api/posts/{id}` - 게시물 삭제 + +### 댓글 관리 + +- `GET /api/posts/{postId}/comments` - 게시물의 모든 댓글 가져오기 +- `GET /api/posts/{postId}/comments/{commentId}` - 특정 댓글 가져오기 +- `POST /api/posts/{postId}/comments` - 게시물에 댓글 추가 +- `PATCH /api/posts/{postId}/comments/{commentId}` - 댓글 업데이트 +- `DELETE /api/posts/{postId}/comments/{commentId}` - 댓글 삭제 + +### 좋아요 관리 + +- `POST /api/posts/{postId}/like` - 게시물 좋아요 +- `DELETE /api/posts/{postId}/like` - 게시물 좋아요 취소 + +### Spring Boot Actuator + +- `GET /actuator/health` - Spring Boot 상태 지표 +- `GET /actuator/info` - 애플리케이션 정보 + +## API 테스트 + +### cURL 예제 사용 + +#### 게시물 생성 + +```bash +curl -X POST http://localhost:8080/api/posts \ + -H "Content-Type: application/json" \ + -d '{ + "title": "My First Post", + "content": "This is the content of my first post!", + "authorName": "John Doe" + }' +``` + +#### 모든 게시물 가져오기 + +```bash +curl http://localhost:8080/api/posts +``` + +#### 댓글 추가 + +```bash +curl -X POST http://localhost:8080/api/posts/1/comments \ + -H "Content-Type: application/json" \ + -d '{ + "content": "Great post!", + "authorName": "Jane Smith" + }' +``` + +#### 게시물 좋아요 + +```bash +curl -X POST http://localhost:8080/api/posts/1/like \ + -H "Content-Type: application/json" \ + -d '{ + "userName": "john_doe" + }' +``` + +### Swagger UI 사용 + +1. [http://localhost:8080/swagger-ui.html](http://localhost:8080/swagger-ui.html) 열기 +2. 사용 가능한 엔드포인트 탐색 +3. 임의의 엔드포인트에서 "Try it out" 클릭 +4. 매개변수를 입력하고 "Execute" 클릭 + +## 개발 + +### 테스트 실행 + +```bash +# 모든 테스트 실행 +./gradlew test + +# 커버리지 리포트와 함께 실행 +./gradlew test jacocoTestReport + +# 특정 테스트 클래스 실행 +./gradlew test --tests "SocialAppApplicationTests" +``` + +### 데이터베이스 + +애플리케이션은 SQLite를 내장형 데이터베이스로 사용합니다: + +- **데이터베이스 파일**: `sns_api.db` (자동 생성) +- **위치**: 프로젝트 루트 디렉터리 +- **스키마**: Hibernate에 의해 자동 생성 +- **샘플 데이터**: `data.sql`에서 로드 (있는 경우) + +데이터베이스를 재설정하려면 `sns_api.db` 파일을 삭제하고 애플리케이션을 다시 시작하세요. + +## 구성 + +### 애플리케이션 속성 + +`application.properties`의 주요 구성 설정: + +```properties +# 애플리케이션 설정 +spring.application.name=socialapp +server.port=8080 + +# 데이터베이스 구성 +spring.datasource.url=jdbc:sqlite:sns_api.db +spring.jpa.hibernate.ddl-auto=update + +# OpenAPI/Swagger 구성 +springdoc.swagger-ui.path=/swagger-ui.html +springdoc.swagger-ui.operationsSorter=method +``` + +### CORS 구성 + +애플리케이션은 localhost와 GitHub Codespaces를 모두 지원합니다: + +- **Localhost**: `http://localhost:8080` +- **GitHub Codespaces**: 자동 감지되고 동적으로 구성됨 + +### 환경 감지 + +애플리케이션은 런타임 환경을 자동으로 감지합니다: + +- **로컬 개발**: `http://localhost:8080` 사용 +- **GitHub Codespaces**: `https://{codespace-name}-8080.{domain}` 사용 + +## 배포 + +### 프로덕션용 빌드 + +```bash +# 프로덕션 JAR 생성 +./gradlew clean build + +# JAR 위치 +ls -la build/libs/socialapp-0.0.1-SNAPSHOT.jar +``` + +### 프로덕션에서 실행 + +```bash +# 프로덕션 프로필로 실행 +java -jar build/libs/socialapp-0.0.1-SNAPSHOT.jar --spring.profiles.active=prod + +# 또는 커스텀 포트로 +java -jar build/libs/socialapp-0.0.1-SNAPSHOT.jar --server.port=8081 +``` + +## 문제 해결 + +### 일반적인 문제 + +#### 포트 이미 사용 중 + +```bash +# 8080 포트를 사용하는 프로세스 찾기 +lsof -i :8080 + +# 프로세스 종료 (PID 교체) +kill -9 + +# 또는 다른 포트 사용 +./gradlew bootRun --args='--server.port=8081' +``` + +#### 빌드 실패 + +```bash +# 정리 후 재빌드 +./gradlew clean build + +# Gradle wrapper 업데이트 +./gradlew wrapper --gradle-version=8.5 +``` + +#### 데이터베이스 문제 + +```bash +# 데이터베이스 재설정 +rm sns_api.db +./gradlew bootRun +``` + +### 로그 및 모니터링 + +- **애플리케이션 로그**: `./gradlew bootRun` 실행 시 콘솔 출력 +- **상태 확인**: `GET /actuator/health` +- **애플리케이션 정보**: `GET /actuator/info` + +## 보안 고려사항 + +⚠️ **개발 구성**: 현재 설정은 다음과 같은 개발용으로 최적화되어 있습니다: + +- 모든 출처에 대해 CORS 활성화 +- SQLite 데이터베이스 (프로덕션 규모에는 적합하지 않음) +- 인증/권한 부여 없음 + +프로덕션 배포를 위해서는 다음을 고려하세요: + +- 특정 도메인으로 CORS 제한 +- SQLite 대신 PostgreSQL/MySQL 사용 +- 인증을 위한 Spring Security 구현 +- 속도 제한 및 입력 정화 추가 +- HTTPS/TLS 암호화 사용 \ No newline at end of file diff --git a/localisation/ko/complete/javascript/README.md b/localisation/ko/complete/javascript/README.md new file mode 100644 index 0000000..910f4c1 --- /dev/null +++ b/localisation/ko/complete/javascript/README.md @@ -0,0 +1,43 @@ +# JavaScript 앱 샘플 + +## 전제 조건 + +준비를 위해 [README](../../README.md) 문서를 참조하세요. + +## 시작하기 + +### FastAPI 백엔드 실행 + +[Python 앱 샘플](../python/)을 사용하세요. + +> **참고**: GitHub Codespaces를 사용하는 경우, Python 앱 포트 `8000`이 **public**으로 설정되어 있는지 확인하세요. + +### React 프론트엔드 실행 + +1. 저장소 루트를 가져오세요. + + ```bash + # bash/zsh + REPOSITORY_ROOT=$(git rev-parse --show-toplevel) + ``` + + ```powershell + # PowerShell + $REPOSITORY_ROOT = git rev-parse --show-toplevel + ``` + +1. npm 패키지를 설치하세요. + + ```bash + cd $REPOSITORY_ROOT/complete/javascript + npm install + ``` + +1. 앱을 실행하세요. + + ```bash + npm run dev + ``` + +1. 웹 브라우저를 열고 `http://localhost:3000`으로 이동하세요. +1. 웹 애플리케이션이 제대로 실행되는지 확인하세요. \ No newline at end of file diff --git a/localisation/ko/complete/python/README.md b/localisation/ko/complete/python/README.md new file mode 100644 index 0000000..1616ff8 --- /dev/null +++ b/localisation/ko/complete/python/README.md @@ -0,0 +1,292 @@ +# Python 앱 샘플 + +사용자가 게시물을 생성, 조회, 업데이트, 삭제하고, 댓글을 추가하고, 게시물에 좋아요/취소할 수 있는 간단한 소셜 네트워킹 서비스(SNS)를 위한 완전한 FastAPI 백엔드 구현입니다. + +## 🏗️ 아키텍처 개요 + +- **프레임워크**: Python 3.12+를 사용한 FastAPI +- **데이터베이스**: SQLite (`sns_api.db`) +- **API 문서화**: Swagger UI + OpenAPI 3.1 사양 +- **CORS**: 교차 출처 요청 활성화 +- **데이터 검증**: 포괄적인 검증을 포함한 Pydantic 모델 + +## 📁 프로젝트 구조 + +```text +python/ +├── main.py # FastAPI 애플리케이션 진입점 +├── models.py # Pydantic 데이터 모델 및 스키마 +├── database.py # SQLite 데이터베이스 작업 +├── openapi.yaml # OpenAPI 3.0.1 사양 +├── sns_api.db # SQLite 데이터베이스 파일 (자동 생성) +├── README.md # 이 문서 +└── .venv/ # 가상 환경 (설정 중 생성) +``` + +## 🚀 빠른 시작 + +### 전제 조건 + +준비를 위해 [README](../../README.md) 문서를 참조하세요. + +### 1. 환경 설정 + +먼저 `$REPOSITORY_ROOT` 환경 변수를 설정하세요. + +```bash +# bash/zsh +REPOSITORY_ROOT=$(git rev-parse --show-toplevel) +``` + +```powershell +# PowerShell +$REPOSITORY_ROOT = git rev-parse --show-toplevel +``` + +그런 다음 python 디렉터리로 이동하고 가상 환경을 생성하세요: + +```bash +cd $REPOSITORY_ROOT/complete/python +``` + +가상 환경 생성 + +```bash +# uv 사용 (권장) +uv venv .venv +``` + +```bash +# 표준 Python 사용 (대안) +python -m venv .venv +``` + +### 2. 가상 환경 활성화 + +```bash +# Linux/macOS에서 +source .venv/bin/activate +``` + +```bash +# Windows Command Prompt에서 +.venv\Scripts\activate +``` + +### 3. 종속성 설치 + +```bash +# uv 사용 (권장) +uv pip install fastapi uvicorn python-multipart pyyaml +``` + +```bash +# pip 사용 (대안) +pip install fastapi uvicorn python-multipart pyyaml +``` + +### 4. OpenAPI 사양 복사 + +상위 디렉터리에서 OpenAPI 사양을 복사하세요. + +```bash +# Linux/macOS에서 +cp ../openapi.yaml . +``` + +```powershell +# Windows Command Prompt에서 +xcopy ..\openapi.yaml . +``` + +### 5. 애플리케이션 실행 + +개발 서버 시작 + +```bash +uvicorn main:app --host 0.0.0.0 --port 8000 --reload +``` + +애플리케이션은 다음에서 사용할 수 있습니다: + +- **API 기본 URL**: `http://localhost:8000/api/` +- **Swagger UI**: `http://localhost:8000/docs` +- **OpenAPI 사양**: `http://localhost:8000/openapi.json` + +## 📊 데이터베이스 스키마 + +애플리케이션은 다음 테이블을 포함한 SQLite를 사용합니다: + +### Posts 테이블 + +- `id` (TEXT, PRIMARY KEY) - UUID +- `username` (TEXT, NOT NULL) - 작성자 사용자명 +- `content` (TEXT, NOT NULL) - 게시물 내용 +- `created_at` (TEXT, NOT NULL) - ISO 타임스탬프 +- `updated_at` (TEXT, NOT NULL) - ISO 타임스탬프 + +### Comments 테이블 + +- `id` (TEXT, PRIMARY KEY) - UUID +- `post_id` (TEXT, NOT NULL) - posts에 대한 외래 키 +- `username` (TEXT, NOT NULL) - 작성자 사용자명 +- `content` (TEXT, NOT NULL) - 댓글 내용 +- `created_at` (TEXT, NOT NULL) - ISO 타임스탬프 +- `updated_at` (TEXT, NOT NULL) - ISO 타임스탬프 + +### Likes 테이블 + +- `post_id` (TEXT, NOT NULL) - posts에 대한 외래 키 +- `username` (TEXT, NOT NULL) - 좋아요를 누른 사용자 +- `liked_at` (TEXT, NOT NULL) - ISO 타임스탬프 +- 기본 키: `(post_id, username)` + +## 🔌 API 엔드포인트 + +### 게시물 + +- `GET /api/posts` - 모든 게시물 목록 +- `POST /api/posts` - 새 게시물 생성 +- `GET /api/posts/{postId}` - 특정 게시물 가져오기 +- `PATCH /api/posts/{postId}` - 게시물 업데이트 +- `DELETE /api/posts/{postId}` - 게시물 삭제 + +### 댓글 + +- `GET /api/posts/{postId}/comments` - 게시물의 댓글 목록 +- `POST /api/posts/{postId}/comments` - 댓글 생성 +- `GET /api/posts/{postId}/comments/{commentId}` - 특정 댓글 가져오기 +- `PATCH /api/posts/{postId}/comments/{commentId}` - 댓글 업데이트 +- `DELETE /api/posts/{postId}/comments/{commentId}` - 댓글 삭제 + +### 좋아요 + +- `POST /api/posts/{postId}/likes` - 게시물 좋아요 +- `DELETE /api/posts/{postId}/likes?username={username}` - 게시물 좋아요 취소 + +## 🧪 API 테스트 + +### cURL 사용 + +#### 게시물 생성 + +```bash +curl -X POST "http://localhost:8000/api/posts" \ + -H "Content-Type: application/json" \ + -d '{"username": "john_doe", "content": "Hello World! This is my first post."}' +``` + +#### 모든 게시물 가져오기 + +```bash +curl -X GET "http://localhost:8000/api/posts" +``` + +#### 댓글 추가 + +```bash +curl -X POST "http://localhost:8000/api/posts/{POST_ID}/comments" \ + -H "Content-Type: application/json" \ + -d '{"username": "jane_smith", "content": "Great post!"}' +``` + +#### 게시물 좋아요 + +```bash +curl -X POST "http://localhost:8000/api/posts/{POST_ID}/likes" \ + -H "Content-Type: application/json" \ + -d '{"username": "alice_johnson"}' +``` + +### Swagger UI 사용 + +1. `http://localhost:8000/docs`로 이동 +2. 모든 API 엔드포인트를 대화형으로 탐색하고 테스트 +3. 요청/응답 스키마 및 예제 보기 + +## 📝 데이터 모델 + +### 요청 모델 + +- `NewPostRequest`: `{username: str, content: str}` +- `UpdatePostRequest`: `{username: str, content: str}` +- `NewCommentRequest`: `{username: str, content: str}` +- `UpdateCommentRequest`: `{username: str, content: str}` +- `LikeRequest`: `{username: str}` + +### 응답 모델 + +- `Post`: 메타데이터와 개수를 포함한 전체 게시물 객체 +- `Comment`: 메타데이터를 포함한 전체 댓글 객체 +- `LikeResponse`: 타임스탬프를 포함한 좋아요 확인 + +## ⚙️ 구성 + +### 환경 변수 + +애플리케이션은 기본 설정을 사용하지만 사용자 정의할 수 있습니다: + +- **데이터베이스**: SQLite 파일 `sns_api.db` (자동 생성) +- **호스트**: `0.0.0.0` (모든 인터페이스) +- **포트**: `8000` +- **CORS**: 모든 출처에 대해 활성화 + +### 프로덕션 고려사항 + +프로덕션 배포를 위해서는 다음을 고려하세요: + +1. **데이터베이스**: PostgreSQL 또는 MySQL로 전환 +2. **환경 변수**: 민감한 구성에 사용 +3. **보안**: 인증 및 권한 추가 +4. **CORS**: 특정 도메인으로 제한 +5. **로깅**: 구조화된 로깅 구현 +6. **모니터링**: 상태 확인 및 메트릭 추가 + +## 🛠️ 개발 + +### 파일 구성 + +- **`main.py`**: FastAPI 앱 구성, 미들웨어 및 라우트 정의 +- **`models.py`**: 데이터 검증 및 직렬화를 위한 Pydantic 모델 +- **`database.py`**: SQLite 작업, 연결 관리 및 CRUD 함수 + +### 코드 스타일 + +프로젝트는 다음을 따릅니다: + +- Python PEP 8 스타일 가이드라인 +- FastAPI 모범 사례 +- 함수형 프로그래밍 패턴 +- 전체적인 타입 힌트 +- 포괄적인 오류 처리 + +### 새 기능 추가 + +1. `models.py`에서 Pydantic 모델 정의 +2. `database.py`에서 데이터베이스 작업 추가 +3. `main.py`에서 API 엔드포인트 생성 +4. 필요한 경우 OpenAPI 사양 업데이트 + +## 🐛 문제 해결 + +### 일반적인 문제 + +1. **포트 이미 사용 중**: `--port 8001`로 포트 변경 +2. **가상 환경 문제**: `rm -rf .venv && uv venv .venv`로 재생성 +3. **데이터베이스 잠김**: 애플리케이션의 모든 실행 인스턴스 중지 +4. **가져오기 오류**: 가상 환경이 활성화되어 있는지 확인 + +### 디버그 모드 + +추가 로깅과 함께 실행: + +```bash +uvicorn main:app --host 0.0.0.0 --port 8000 --reload --log-level debug +``` + +## 📚 추가 리소스 + +- [FastAPI Documentation](https://fastapi.tiangolo.com/) +- [Pydantic Documentation](https://docs.pydantic.dev/) +- [SQLite Documentation](https://sqlite.org/docs.html) +- [OpenAPI Specification](https://swagger.io/specification/) \ No newline at end of file diff --git a/localisation/ko/dotnet/README.md b/localisation/ko/dotnet/README.md new file mode 100644 index 0000000..b7f7d63 --- /dev/null +++ b/localisation/ko/dotnet/README.md @@ -0,0 +1,5 @@ +# .NET 시작하기 + +.NET 앱 개발을 위한 시작점입니다. + +완성된 예제를 보고 싶다면, 이 디렉터리를 확인하세요: [/complete/dotnet](../complete/dotnet/). \ No newline at end of file diff --git a/localisation/ko/java/README.md b/localisation/ko/java/README.md new file mode 100644 index 0000000..9260b60 --- /dev/null +++ b/localisation/ko/java/README.md @@ -0,0 +1,5 @@ +# Java 시작하기 + +Java 앱 개발을 위한 시작점입니다. + +완성된 예제를 보고 싶다면, 이 디렉터리를 확인하세요: [/complete/java](../complete/java/). \ No newline at end of file diff --git a/localisation/ko/javascript/README.md b/localisation/ko/javascript/README.md new file mode 100644 index 0000000..f08579c --- /dev/null +++ b/localisation/ko/javascript/README.md @@ -0,0 +1,5 @@ +# JavaScript 시작하기 + +JavaScript 앱 개발을 위한 시작점입니다. + +완성된 예제를 보고 싶다면, 이 디렉터리를 확인하세요: [/complete/javascript](../complete/javascript/). \ No newline at end of file diff --git a/localisation/ko/product-requirements.md b/localisation/ko/product-requirements.md new file mode 100644 index 0000000..e5ec077 --- /dev/null +++ b/localisation/ko/product-requirements.md @@ -0,0 +1,148 @@ +# 제품 요구사항 문서 (PRD) + +## 제품 제목 + +간단한 소셜 미디어 애플리케이션 + +## 문서 버전 + +1.0.0 + +## 작성자 + +Contoso의 제품 소유자 / 기술 리드 + +## 마지막 업데이트 + +2025-05-30 + +--- + +## 1. 개요 + +이 프로젝트의 목표는 사용자가 게시물을 생성, 조회, 업데이트, 삭제할 수 있고, 댓글을 추가하고, 게시물에 좋아요/취소할 수 있는 기본적이면서도 기능적인 소셜 네트워킹 서비스(SNS)를 구축하는 것입니다. API 우선 접근 방식을 통해 웹 또는 모바일 프론트엔드의 백엔드로 사용할 수 있도록 합니다. + +## 2. 배경 + +Contoso는 다양한 야외 활동 제품을 판매하는 회사입니다. Contoso의 마케팅 부서는 기존 고객과 잠재 고객에게 제품을 홍보하기 위한 마이크로 소셜 미디어 웹사이트를 런칭하고자 합니다. 첫 번째 MVP로서, 마케팅 부서는 웹사이트를 빠르게 구축하고자 합니다. + +## 3. 목표 + +* 사용자 생성 콘텐츠(게시물)에 대한 CRUD 작업 제공. +* 댓글과 좋아요를 통한 소셜 상호작용 가능. +* 교육용 및 MVP 사용 사례를 위한 단순성 유지. +* RESTful API 설계 및 적절한 오류 처리 보장. + +## 4. 주요 기능 + +### 4.1 게시물 관리 + +* **게시물 목록 조회** + + * **GET** `/api/posts` + * 사용자 스토리: 사용자로서, 다른 사람들이 공유하는 내용을 둘러볼 수 있도록 모든 최근 게시물을 보고 싶습니다. + +* **게시물 생성** + + * **POST** `/api/posts` + * 필수: `username`, `content` + * 사용자 스토리: 사용자로서, 다른 사람들과 무언가를 공유할 수 있도록 새 게시물을 생성하고 싶습니다. + +* **단일 게시물 조회** + + * **GET** `/api/posts/{postId}` + * 사용자 스토리: 사용자로서, 특정 게시물을 자세히 읽고 싶습니다. + +* **게시물 업데이트** + + * **PATCH** `/api/posts/{postId}` + * 필수: `username`, `content` + * 사용자 스토리: 사용자로서, 실수를 했거나 추가할 내용이 있다면 내 게시물을 업데이트하고 싶습니다. + +* **게시물 삭제** + + * **DELETE** `/api/posts/{postId}` + * 사용자 스토리: 사용자로서, 더 이상 공유하고 싶지 않다면 내 게시물을 삭제하고 싶습니다. + +### 4.2 댓글 관리 + +* **게시물의 댓글 목록 조회** + + * **GET** `/api/posts/{postId}/comments` + * 사용자 스토리: 사용자로서, 게시물의 모든 댓글을 읽고 싶습니다. + +* **댓글 생성** + + * **POST** `/api/posts/{postId}/comments` + * 필수: `username`, `content` + * 사용자 스토리: 사용자로서, 내 생각을 공유하기 위해 게시물에 댓글을 남기고 싶습니다. + +* **특정 댓글 조회** + + * **GET** `/api/posts/{postId}/comments/{commentId}` + * 사용자 스토리: 사용자로서, 특정 댓글을 자세히 보고 싶습니다. + +* **댓글 업데이트** + + * **PATCH** `/api/posts/{postId}/comments/{commentId}` + * 필수: `username`, `content` + * 사용자 스토리: 사용자로서, 내 댓글을 수정하거나 개정하고 싶습니다. + +* **댓글 삭제** + + * **DELETE** `/api/posts/{postId}/comments/{commentId}` + * 사용자 스토리: 사용자로서, 필요하다면 내 댓글을 삭제하고 싶습니다. + +### 4.3 좋아요 시스템 + +* **게시물 좋아요** + + * **POST** `/api/posts/{postId}/likes` + * 필수: `username` + * 사용자 스토리: 사용자로서, 게시물에 좋아요를 눌러 감사를 표하고 싶습니다. + +* **게시물 좋아요 취소** + + * **DELETE** `/api/posts/{postId}/likes` + * 사용자 스토리: 사용자로서, 마음이 바뀌면 좋아요를 취소하고 싶습니다. + +## 5. 사용자 역할 및 권한 + +* **익명 사용자** + * 게시물과 댓글을 읽을 수 있습니다. + +* **인증된 사용자 (username 필드를 통해)** + * 자신의 게시물과 댓글을 생성, 업데이트, 삭제할 수 있습니다. + * 게시물에 좋아요/취소할 수 있습니다. + +## 6. API 계약 + +* 최소 v3.0.1 사양으로 OpenAPI 문서 정의. +* 표준 HTTP 상태 코드 사용. + * `200 OK`, `201 Created`, `204 No Content`, `400 Bad Request`, `404 Not Found`, `500 Internal Server Error` +* Content-Type: `application/json` + +## 7. 비기능적 요구사항 + +* **문서화**: API는 Swagger UI를 사용하여 완전히 문서화되어야 합니다. +* **보안**: 전체 인증이 구현되지 않더라도 입력 검증 및 기본 요청 검증. + +## 8. 가정 및 종속성 + +* 이 제품에는 메모리 DB를 사용합니다. +* 파일 업로드 또는 미디어 지원은 포함되지 않습니다. +* 사용자 등록 또는 로그인/인증 플로우는 없습니다. +* 테스트 코드는 필요하지 않습니다. + +## 9. 성공 지표 + +* 모든 API 엔드포인트에 접근 가능하고 문서화된 대로 응답합니다. +* 게시물, 댓글, 좋아요, 리소스 삭제를 종단 간에 수행할 수 있습니다. +* OpenAPI에서 생성된 명확한 Swagger 문서. + +## 10. 범위 외 + +* 사용자 인증 (OAuth, JWT 등) +* 실시간 업데이트 또는 알림 +* 조정 도구 또는 신고 기능 +* 멀티미디어 업로드 (이미지, 비디오) \ No newline at end of file diff --git a/localisation/ko/python/README.md b/localisation/ko/python/README.md new file mode 100644 index 0000000..01747b4 --- /dev/null +++ b/localisation/ko/python/README.md @@ -0,0 +1,5 @@ +# Python 시작하기 + +Python 앱 개발을 위한 시작점입니다. + +완성된 예제를 보고 싶다면, 이 디렉터리를 확인하세요: [/complete/python](../complete/python/). \ No newline at end of file From 3f405143f0b00c25ca200b512fef1deffa19e2bc Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Fri, 6 Jun 2025 02:17:11 +0000 Subject: [PATCH 03/10] Add Korean localization for docs directory (partial) Co-authored-by: justinyoo <1538528+justinyoo@users.noreply.github.com> --- localisation/ko/docs/00-setup.md | 351 ++++++++++++++++++ localisation/ko/docs/01-python.md | 119 ++++++ localisation/ko/docs/README.md | 12 + .../python/copilot-instructions.md | 70 ++++ .../setup/copilot-instructions.md | 5 + 5 files changed, 557 insertions(+) create mode 100644 localisation/ko/docs/00-setup.md create mode 100644 localisation/ko/docs/01-python.md create mode 100644 localisation/ko/docs/README.md create mode 100644 localisation/ko/docs/custom-instructions/python/copilot-instructions.md create mode 100644 localisation/ko/docs/custom-instructions/setup/copilot-instructions.md diff --git a/localisation/ko/docs/00-setup.md b/localisation/ko/docs/00-setup.md new file mode 100644 index 0000000..6f8635d --- /dev/null +++ b/localisation/ko/docs/00-setup.md @@ -0,0 +1,351 @@ +# 00: 개발 환경 + +이 단계에서는 워크샵을 위한 개발 환경을 설정합니다. + +## 전제 조건 + +준비를 위해 [README](../README.md) 문서를 참조하세요. + +## 시작하기 + +- [GitHub Codespaces 사용](#github-codespaces-사용) +- [Visual Studio Code 사용](#visual-studio-code-사용) + - [PowerShell 설치 👉 Windows 사용자용](#powershell-설치--windows-사용자용) + - [git CLI 설치](#git-cli-설치) + - [GitHub CLI 설치](#github-cli-설치) + - [Docker Desktop 설치](#docker-desktop-설치) + - [Visual Studio Code 설치](#visual-studio-code-설치) + - [Visual Studio Code 시작](#visual-studio-code-시작) +- [GitHub Copilot 에이전트 모드 확인](#github-copilot-에이전트-모드-확인) +- [커스텀 지시사항 준비](#커스텀-지시사항-준비) +- [제품 요구사항 문서(PRD) 분석 및 API 설계](#제품-요구사항-문서prd-분석-및-api-설계) + +## GitHub Codespaces 사용 + +1. 아래 이미지를 보고 다음 순서로 클릭하여 따라하세요: ![the "code" button image](https://img.shields.io/badge/%3C%3E_Code-green) 👉 ![the "codespaces" button image](https://img.shields.io/badge/Codespaces-white) 👉 ![the "create codespace on main" button image](https://img.shields.io/badge/Create_codespace_on_main-green)을 클릭하여 새로운 GitHub Codespace 인스턴스를 생성하세요. 네트워크 상태에 따라 5-10분 정도 걸릴 수 있습니다. + + ![Starting with GitHub Codespaces](./images/setup-01.png) + +2. GitHub Codespace 인스턴스가 준비되면, 터미널을 열고 다음 명령을 실행하여 필요한 모든 것이 제대로 설치되었는지 확인하세요. + + ```bash + # Python + python --version + ``` + + ```bash + # Node.js + node --version + npm --version + + ``` + + ```bash + # JDK + java --version + ``` + + ```bash + # .NET SDK + dotnet --list-sdks + ``` + +3. 저장소 상태를 확인하세요. + + ```bash + git remote -v + ``` + + 다음을 확인할 수 있어야 합니다. + + ```bash + origin https://github.com/microsoft/github-copilot-vibe-coding-workshop.git (fetch) + origin https://github.com/microsoft/github-copilot-vibe-coding-workshop.git (push) + ``` + + 위와 다른 것이 보이면 GitHub Codespace 인스턴스를 삭제하고 다시 생성하세요. + +4. [MCP 서버 설정](#mcp-서버-설정) 섹션으로 이동하세요. + +**👇👇👇 대신 로컬 머신에서 VS Code를 사용하고 싶다면 아래 지침을 따르세요. 아래 섹션은 GitHub Codespaces를 사용하는 사람들에게는 적용되지 않습니다. 👇👇👇** + +## Visual Studio Code 사용 + +### PowerShell 설치 👉 Windows 사용자용 + +1. PowerShell이 이미 설치되어 있는지 확인하세요. + + ```bash + # Bash/Zsh + which pwsh + ``` + + ```bash + # PowerShell + Get-Command pwsh + ``` + + `pwsh`의 명령 경로가 보이지 않으면 PowerShell이 아직 설치되지 않았다는 의미입니다. [PowerShell 설치 페이지](https://learn.microsoft.com/powershell/scripting/install/installing-powershell)를 방문하여 지침을 따르세요. + +1. PowerShell 버전을 확인하세요. + + ```bash + pwsh --version + ``` + + `7.5.0` 이상이 권장됩니다. 더 낮은 버전이라면 [PowerShell 설치 페이지](https://learn.microsoft.com/powershell/scripting/install/installing-powershell)를 방문하여 지침을 따르세요. + +### git CLI 설치 + +1. git CLI가 이미 설치되어 있는지 확인하세요. + + ```bash + # Bash/Zsh + which git + ``` + + ```bash + # PowerShell + Get-Command git + ``` + + `git`의 명령 경로가 보이지 않으면 git CLI가 아직 설치되지 않았다는 의미입니다. [git CLI 설치 페이지](https://git-scm.com/downloads)를 방문하여 지침을 따르세요. + +1. git CLI 버전을 확인하세요. + + ```bash + git --version + ``` + + `2.39.0` 이상이 권장됩니다. 더 낮은 버전이라면 [git CLI 설치 페이지](https://git-scm.com/downloads)를 방문하여 지침을 따르세요. + +### GitHub CLI 설치 + +1. GitHub CLI가 이미 설치되어 있는지 확인하세요. + + ```bash + # Bash/Zsh + which gh + ``` + + ```bash + # PowerShell + Get-Command gh + ``` + + `gh`의 명령 경로가 보이지 않으면 GitHub CLI가 아직 설치되지 않았다는 의미입니다. [GitHub CLI 설치 페이지](https://cli.github.com/)를 방문하여 지침을 따르세요. + +1. GitHub CLI 버전을 확인하세요. + + ```bash + gh --version + ``` + + `2.65.0` 이상이 권장됩니다. 더 낮은 버전이라면 [GitHub CLI 설치 페이지](https://cli.github.com/)를 방문하여 지침을 따르세요. + +1. GitHub에 로그인했는지 확인하세요. + + ```bash + gh auth status + ``` + + 아직 로그인하지 않았다면 `gh auth login`을 실행하고 로그인하세요. + +### Docker Desktop 설치 + +1. Docker Desktop이 이미 설치되어 있는지 확인하세요. + + ```bash + # Bash/Zsh + which docker + ``` + + ```bash + # PowerShell + Get-Command docker + ``` + + `docker`의 명령 경로가 보이지 않으면 Docker Desktop이 아직 설치되지 않았다는 의미입니다. [Docker Desktop 설치 페이지](https://docs.docker.com/get-started/introduction/get-docker-desktop/)를 방문하여 지침을 따르세요. + +1. Docker CLI 버전을 확인하세요. + + ```bash + docker --version + ``` + + `28.0.4` 이상이 권장됩니다. 더 낮은 버전이라면 [Docker Desktop 설치 페이지](https://docs.docker.com/get-started/introduction/get-docker-desktop/)를 방문하여 지침을 따르세요. + +### Visual Studio Code 설치 + +1. VS Code가 이미 설치되어 있는지 확인하세요. + + ```bash + # Bash/Zsh + which code + ``` + + ```bash + # PowerShell + Get-Command code + ``` + + `code`의 명령 경로가 보이지 않으면 VS Code가 아직 설치되지 않았다는 의미입니다. [Visual Studio Code 설치 페이지](https://code.visualstudio.com/)를 방문하여 지침을 따르세요. + +1. VS Code 버전을 확인하세요. + + ```bash + code --version + ``` + + `1.99.0` 이상이 권장됩니다. 더 낮은 버전이라면 [Visual Studio Code 설치 페이지](https://code.visualstudio.com/)를 방문하여 지침을 따르세요. + + > **참고**: `code` 명령을 실행할 수 없을 수 있습니다. 이 경우 설정을 위해 [이 문서](https://code.visualstudio.com/docs/setup/mac#_launching-from-the-command-line)를 따르세요. + +### Visual Studio Code 시작 + +1. 작업 디렉터리를 생성하세요. +1. 다음 명령을 실행하여 이 저장소를 포크하고 로컬 머신에 복제하세요. + + ```bash + gh repo fork microsoft/github-copilot-vibe-coding-workshop --clone + ``` + +1. 복제된 디렉터리로 이동하세요. + + ```bash + cd github-copilot-vibe-coding-workshop + ``` + +1. 터미널에서 VS Code를 실행하세요. + + ```bash + code . + ``` + +1. VS Code 내에서 새 터미널을 열고 다음 명령을 실행하여 저장소 상태를 확인하세요. + + ```bash + git remote -v + ``` + + 다음을 확인할 수 있어야 합니다. `origin`에 `microsoft`가 보이면 포크된 저장소에서 다시 복제해야 합니다. + + ```bash + origin https://github.com//github-copilot-vibe-coding-workshop.git (fetch) + origin https://github.com//github-copilot-vibe-coding-workshop.git (push) + upstream https://github.com/microsoft/github-copilot-vibe-coding-workshop.git (fetch) + upstream https://github.com/microsoft/github-copilot-vibe-coding-workshop.git (push) + ``` + +1. 두 확장 프로그램이 모두 설치되어 있는지 확인하세요 – [GitHub Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot)과 [GitHub Copilot Chat](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot-chat). + + ```bash + # Bash/Zsh + code --list-extensions | grep github.copilot + ``` + + ```powershell + # PowerShell + code --list-extensions | Select-String "github.copilot" + ``` + + 아무것도 보이지 않으면 해당 확장 프로그램이 아직 설치되지 않았다는 의미입니다. 다음 명령을 실행하여 확장 프로그램을 설치하세요. + + ```bash + code --install-extension "github.copilot" --force && code --install-extension "github.copilot-chat" --force + ``` + +### MCP 서버 설정 + +1. `$REPOSITORY_ROOT` 환경 변수를 설정하세요. + + ```bash + # bash/zsh + REPOSITORY_ROOT=$(git rev-parse --show-toplevel) + ``` + + ```powershell + # PowerShell + $REPOSITORY_ROOT = git rev-parse --show-toplevel + ``` + +1. MCP 서버 설정을 복사하세요. + + ```bash + # bash/zsh + cp -r $REPOSITORY_ROOT/docs/.vscode/. \ + $REPOSITORY_ROOT/.vscode/ + ``` + + ```powershell + # PowerShell + Copy-Item -Path $REPOSITORY_ROOT/docs/.vscode/* ` + -Destination $REPOSITORY_ROOT/.vscode/ -Recurse -Force + ``` + +1. F1을 입력하거나 Windows에서 `Ctrl`+`Shift`+`P`, Mac OS에서 `Cmd`+`Shift`+`P`를 눌러 명령 팔레트를 열고 `MCP: List Servers`를 검색하세요. +1. `context7`을 선택한 다음 `Start Server`를 클릭하세요. + +## GitHub Copilot 에이전트 모드 확인 + +1. GitHub Codespace 또는 VS Code 상단의 GitHub Copilot 아이콘을 클릭하고 GitHub Copilot 창을 여세요. + + ![Open GitHub Copilot Chat](./images/setup-02.png) + +1. 로그인 또는 가입을 요청받으면 진행하세요. 무료입니다. +1. GitHub Copilot 에이전트 모드를 사용하고 있는지 확인하세요. + + ![GitHub Copilot Agent Mode](./images/setup-03.png) + +1. 모델을 `GPT-4.1` 또는 `Claude Sonnet 4` 중 하나로 선택하세요. + +## 커스텀 지시사항 준비 + +1. `$REPOSITORY_ROOT` 환경 변수를 설정하세요. + + ```bash + # bash/zsh + REPOSITORY_ROOT=$(git rev-parse --show-toplevel) + ``` + + ```powershell + # PowerShell + $REPOSITORY_ROOT = git rev-parse --show-toplevel + ``` + +1. 커스텀 지시사항을 복사하세요. + + ```bash + # bash/zsh + cp -r $REPOSITORY_ROOT/docs/custom-instructions/setup/. \ + $REPOSITORY_ROOT/.github/ + ``` + + ```powershell + # PowerShell + Copy-Item -Path $REPOSITORY_ROOT/docs/custom-instructions/setup/* ` + -Destination $REPOSITORY_ROOT/.github/ -Recurse -Force + ``` + +## 제품 요구사항 문서(PRD) 분석 및 API 설계 + +1. `Claude Sonnet 4` 또는 `GPT-4.1` 모델과 함께 GitHub Copilot 에이전트 모드를 사용하고 있는지 확인하세요. +1. [`product-requirements.md`](../product-requirements.md)를 GitHub Copilot에 추가하세요. +1. GitHub Copilot 에이전트가 OpenAPI 문서를 생성하도록 다음과 같은 프롬프트를 입력하세요. 이 OpenAPI 문서는 전체 애플리케이션의 기반이 됩니다. + + ```text + 다음은 PRD입니다. PRD 전체를 주의 깊게 읽고 다음을 수행해 주세요. + + - 수행할 모든 단계를 먼저 식별합니다. + - YAML 형식으로 OpenAPI 문서를 생성합니다. + - OpenAPI 문서는 모든 API 엔드포인트, 매개변수 및 요청/응답 페이로드를 포함해야 합니다. + - API 서버는 `http://localhost:8080`이고 기본 URL은 `/api`라고 가정합니다. + - 저장소 루트의 `openapi.yaml` 파일에 저장합니다. + ``` + +1. 저장소 루트에 `openapi.yaml`이 생성되었는지 확인하세요. +1. GitHub Copilot의 `[keep]` 버튼을 클릭하여 `openapi.yaml` 파일을 가져오세요. + +--- + +좋습니다. "개발 환경" 단계를 완료했습니다. [STEP 01: Python 백엔드 개발](./01-python.md)로 이동하겠습니다. \ No newline at end of file diff --git a/localisation/ko/docs/01-python.md b/localisation/ko/docs/01-python.md new file mode 100644 index 0000000..8047b7f --- /dev/null +++ b/localisation/ko/docs/01-python.md @@ -0,0 +1,119 @@ +# 01: Python 백엔드 개발 + +## 시나리오 + +Contoso는 다양한 야외 활동 제품을 판매하는 회사입니다. Contoso의 마케팅 부서는 기존 고객과 잠재 고객에게 제품을 홍보하기 위한 마이크로 소셜 미디어 웹사이트를 런칭하고자 합니다. + +Python 개발자로서, FastAPI를 사용하여 Python 백엔드 앱을 구축할 것입니다. 지금은 SQLite의 인메모리 기능을 사용합니다. + +## 전제 조건 + +준비를 위해 [README](../README.md) 문서를 참조하세요. + +## 시작하기 + +- [GitHub Copilot 에이전트 모드 확인](#github-copilot-에이전트-모드-확인) +- [커스텀 지시사항 준비](#커스텀-지시사항-준비) +- [가상 환경 준비](#가상-환경-준비) +- [FastAPI 백엔드 앱 구축](#fastapi-백엔드-앱-구축) + +### GitHub Copilot 에이전트 모드 확인 + +1. GitHub Codespace 또는 VS Code 상단의 GitHub Copilot 아이콘을 클릭하고 GitHub Copilot 창을 여세요. + + ![Open GitHub Copilot Chat](./images/setup-02.png) + +1. 로그인 또는 가입을 요청받으면 진행하세요. 무료입니다. +1. GitHub Copilot 에이전트 모드를 사용하고 있는지 확인하세요. + + ![GitHub Copilot Agent Mode](./images/setup-03.png) + +1. 모델을 `GPT-4.1` 또는 `Claude Sonnet 4` 중 하나로 선택하세요. +1. [MCP 서버](./00-setup.md#mcp-서버-설정)를 구성했는지 확인하세요. + +### 커스텀 지시사항 준비 + +1. `$REPOSITORY_ROOT` 환경 변수를 설정하세요. + + ```bash + # bash/zsh + REPOSITORY_ROOT=$(git rev-parse --show-toplevel) + ``` + + ```powershell + # PowerShell + $REPOSITORY_ROOT = git rev-parse --show-toplevel + ``` + +1. 커스텀 지시사항을 복사하세요. + + ```bash + # bash/zsh + cp -r $REPOSITORY_ROOT/docs/custom-instructions/python/. \ + $REPOSITORY_ROOT/.github/ + ``` + + ```powershell + # PowerShell + Copy-Item -Path $REPOSITORY_ROOT/docs/custom-instructions/python/* ` + -Destination $REPOSITORY_ROOT/.github/ -Recurse -Force + ``` + +### 가상 환경 준비 + +1. `Claude Sonnet 4` 또는 `GPT-4.1` 모델과 함께 GitHub Copilot 에이전트 모드를 사용하고 있는지 확인하세요. +1. `context7` MCP 서버가 실행 중인지 확인하세요. +1. Python 앱 개발을 위한 가상 환경을 준비하기 위해 아래와 같은 프롬프트를 사용하세요. + + ```text + Python 애플리케이션을 작성하고 싶습니다. 하지만 그 전에 가상 환경을 설정해야 합니다. 아래 지침을 따르세요. + + - context7을 사용하세요. + - 작업 디렉터리는 `python`입니다. + - 수행할 모든 단계를 먼저 식별하세요. + - 가상 환경으로 `.venv`를 사용하세요. + - Python 패키지 관리자로 `uv`를 사용하세요. + ``` + +### FastAPI 백엔드 앱 구축 + +1. `Claude Sonnet 4` 또는 `GPT-4.1` 모델과 함께 GitHub Copilot 에이전트 모드를 사용하고 있는지 확인하세요. +1. `context7` MCP 서버가 실행 중인지 확인하세요. +1. [`product-requirements.md`](../product-requirements.md)와 [`openapi.yaml`](../openapi.yaml)을 GitHub Copilot에 추가하세요. +1. FastAPI 백엔드 애플리케이션을 구축하기 위해 아래와 같은 프롬프트를 사용하세요. + + ```text + 백엔드 API로 FastAPI 애플리케이션을 구축하고 싶습니다. PRD와 `openapi.yaml` 전체를 주의 깊게 읽어보세요. 그런 다음 아래 지침을 따르세요. + + - context7을 사용하세요. + - 작업 디렉터리는 `python`입니다. + - 수행할 모든 단계를 먼저 식별하세요. + - API 앱 프레임워크로 FastAPI를 사용하세요. + - 데이터베이스로 SQLite를 사용하세요. + - SQLite 데이터베이스 이름으로 `sns_api.db`를 사용하세요. + - 앱을 시작할 때마다 데이터베이스가 항상 초기화되어야 합니다. + - 모든 엔드포인트와 데이터 스키마를 설명하는 `openapi.yaml`을 사용하세요. + - 포트 번호 `8000`을 사용하세요. + - 모든 곳에서 CORS를 허용하도록 하세요. + - 진입점은 `main.py`입니다. + - API 애플리케이션은 기본 엔드포인트를 통해 Swagger UI 페이지를 렌더링해야 합니다. + - API 애플리케이션은 기본 엔드포인트를 통해 정확히 동일한 OpenAPI 문서를 렌더링해야 합니다. + - `openapi.yaml`에 정의되지 않은 것은 추가하지 마세요. + - `openapi.yaml`에 정의된 것은 수정하지 마세요. + ``` + +1. GitHub Copilot의 ![the "keep" button image](https://img.shields.io/badge/keep-blue) 버튼을 클릭하여 변경사항을 적용하세요. +1. 애플리케이션이 구축되면 제대로 작성되었는지 확인하세요. + + ```text + FastAPI 앱을 실행하고 앱이 제대로 실행되는지 확인하세요. 또한 OpenAPI 엔드포인트가 `openapi.yaml`과 정확히 동일한 내용을 렌더링하는지 확인하세요. + + 앱 실행이 실패하면 문제를 분석하고 수정하세요. + ``` + +1. 웹 브라우저를 열고 `http://localhost:8000`으로 이동하세요. +1. GitHub Copilot의 ![the "keep" button image](https://img.shields.io/badge/keep-blue) 버튼을 클릭하여 변경사항을 적용하세요. + +--- + +좋습니다. "Python" 단계를 완료했습니다. [STEP 02: JavaScript 프론트엔드 개발](./02-javascript.md)로 이동하겠습니다. \ No newline at end of file diff --git a/localisation/ko/docs/README.md b/localisation/ko/docs/README.md new file mode 100644 index 0000000..5feb2e3 --- /dev/null +++ b/localisation/ko/docs/README.md @@ -0,0 +1,12 @@ +# 자기 주도 학습 지침 + +자기 주도 학습 지침 자료입니다. 이를 사용하여 앱을 구축하세요! + +| 단계 | 링크 | +|-------------------------------------|----------------------------------------------------| +| 00: 개발 환경 | [00-setup.md](./00-setup.md) | +| 01: Python 백엔드 개발 | [01-python.md](./01-python.md) | +| 02: JavaScript 프론트엔드 개발 | [02-javascript.md](./02-javascript.md) | +| 03: Python에서 Java로 마이그레이션 | [03-java.md](./03-java.md) | +| 04: JavaScript에서 .NET으로 마이그레이션 | [04-dotnet.md](./04-dotnet.md) | +| 05: 컨테이너화 | [05-containerization.md](./05-containerization.md) | \ No newline at end of file diff --git a/localisation/ko/docs/custom-instructions/python/copilot-instructions.md b/localisation/ko/docs/custom-instructions/python/copilot-instructions.md new file mode 100644 index 0000000..fe3e649 --- /dev/null +++ b/localisation/ko/docs/custom-instructions/python/copilot-instructions.md @@ -0,0 +1,70 @@ +# Python 개발 규칙 + +당신은 시니어 Python 개발자이며 Python, FastAPI, SQLite 및 확장 가능한 API 개발 전문가입니다. + +## 핵심 원칙 + +- 정확한 Python 예제를 포함한 간결하고 기술적인 응답을 작성하세요. +- 함수형, 선언적 프로그래밍을 사용하고 가능한 한 클래스를 피하세요. +- 코드 중복보다는 반복과 모듈화를 선호하세요. +- 보조 동사를 포함한 설명적인 변수명을 사용하세요 (예: is_active, has_permission). +- 디렉터리와 파일에는 소문자와 언더스코어를 사용하세요 (예: routers/user_routes.py). +- 라우트와 유틸리티 함수에는 명명된 내보내기를 선호하세요. +- RORO(Receive an Object, Return an Object) 패턴을 사용하세요. + +## Python/FastAPI + +- 순수 함수에는 def를, 비동기 작업에는 async def를 사용하세요. +- 모든 함수 시그니처에 타입 힌트를 사용하세요. 입력 검증을 위해 원시 딕셔너리보다 Pydantic 모델을 선호하세요. +- 파일 구조: 내보낸 라우터, 서브 라우트, 유틸리티, 정적 콘텐츠, 타입(모델, 스키마). +- 조건문에서 불필요한 중괄호를 피하세요. +- 조건문의 한 줄 문장에서는 중괄호를 생략하세요. +- 간단한 조건문에는 간결한 한 줄 문법을 사용하세요 (예: if condition: do_something()). + +## 오류 처리 및 검증 + +- 오류 처리와 엣지 케이스를 우선시하세요: + - 함수 시작 부분에서 오류와 엣지 케이스를 처리하세요. + - 깊이 중첩된 if 문을 피하기 위해 오류 조건에 대해 조기 반환을 사용하세요. + - 가독성 향상을 위해 함수의 마지막에 해피 패스를 배치하세요. + - 불필요한 else 문을 피하고 대신 if-return 패턴을 사용하세요. + - 전제 조건과 잘못된 상태를 조기에 처리하기 위해 가드 절을 사용하세요. + - 적절한 오류 로깅과 사용자 친화적인 오류 메시지를 구현하세요. + - 일관된 오류 처리를 위해 커스텀 오류 타입이나 오류 팩토리를 사용하세요. + +## 종속성 + +- FastAPI +- Pydantic v2 +- asyncpg 또는 aiomysql과 같은 비동기 데이터베이스 라이브러리 +- SQLAlchemy 2.0 (ORM 기능을 사용하는 경우) + +## FastAPI 특정 가이드라인 + +- 입력 검증과 응답 스키마를 위해 함수형 컴포넌트(순수 함수)와 Pydantic 모델을 사용하세요. +- 명확한 반환 타입 주석을 포함한 선언적 라우트 정의를 사용하세요. +- 동기 작업에는 def를, 비동기 작업에는 async def를 사용하세요. +- @app.on_event("startup")과 @app.on_event("shutdown")을 최소화하고, 시작 및 종료 이벤트 관리를 위해 lifespan 컨텍스트 관리자를 선호하세요. +- 로깅, 오류 모니터링, 성능 최적화를 위해 미들웨어를 사용하세요. +- I/O 집약적 작업을 위한 비동기 함수, 캐싱 전략, 지연 로딩을 사용하여 성능을 최적화하세요. +- 예상된 오류에는 HTTPException을 사용하고 이를 특정 HTTP 응답으로 모델링하세요. +- 예상치 못한 오류 처리, 로깅, 오류 모니터링을 위해 미들웨어를 사용하세요. +- 일관된 입력/출력 검증과 응답 스키마를 위해 Pydantic의 BaseModel을 사용하세요. + +## 성능 최적화 + +- 블로킹 I/O 작업을 최소화하고, 모든 데이터베이스 호출과 외부 API 요청에 비동기 작업을 사용하세요. +- Redis나 인메모리 저장소와 같은 도구를 사용하여 정적이고 자주 액세스되는 데이터에 대한 캐싱을 구현하세요. +- Pydantic을 사용하여 데이터 직렬화 및 역직렬화를 최적화하세요. +- 대용량 데이터셋과 상당한 API 응답에 대해 지연 로딩 기법을 사용하세요. + +## 핵심 관례 + +1. 상태와 공유 리소스 관리를 위해 FastAPI의 의존성 주입 시스템에 의존하세요. +2. API 성능 지표(응답 시간, 지연 시간, 처리량)를 우선시하세요. +3. 라우트에서 블로킹 작업을 제한하세요: + - 비동기적이고 논블로킹 플로우를 선호하세요. + - 데이터베이스와 외부 API 작업에 전용 비동기 함수를 사용하세요. + - 가독성과 유지보수성을 최적화하기 위해 라우트와 종속성을 명확하게 구조화하세요. + +모범 사례를 위해 데이터 모델, 경로 작업, 미들웨어에 대한 FastAPI 문서를 참조하세요. \ No newline at end of file diff --git a/localisation/ko/docs/custom-instructions/setup/copilot-instructions.md b/localisation/ko/docs/custom-instructions/setup/copilot-instructions.md new file mode 100644 index 0000000..b2779f9 --- /dev/null +++ b/localisation/ko/docs/custom-instructions/setup/copilot-instructions.md @@ -0,0 +1,5 @@ +당신은 비즈니스 분석가 전문가입니다. 비즈니스 요구사항을 기술적 세부사항으로 해석하는 데 매우 능숙합니다. + +OpenAPI를 다룰 때는 항상 3.0.1 사양 버전을 참조하고 있습니다. + +OpenAPI 문서를 생성할 때는 항상 데이터 스키마의 재사용성을 고려해야 합니다. 유사한 데이터 구조를 중복하지 마세요. \ No newline at end of file From 6637494ea099a6ab70c615117652c34d5bd00274 Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Fri, 6 Jun 2025 02:20:51 +0000 Subject: [PATCH 04/10] Complete Korean localization for all required markdown files Co-authored-by: justinyoo <1538528+justinyoo@users.noreply.github.com> --- localisation/ko/docs/02-javascript.md | 40 +++++++++++++++++++ localisation/ko/docs/03-java.md | 38 ++++++++++++++++++ localisation/ko/docs/04-dotnet.md | 38 ++++++++++++++++++ localisation/ko/docs/05-containerization.md | 39 ++++++++++++++++++ .../containerization/copilot-instructions.md | 34 ++++++++++++++++ .../dotnet/copilot-instructions.md | 20 ++++++++++ .../java/copilot-instructions.md | 18 +++++++++ .../javascript/copilot-instructions.md | 20 ++++++++++ 8 files changed, 247 insertions(+) create mode 100644 localisation/ko/docs/02-javascript.md create mode 100644 localisation/ko/docs/03-java.md create mode 100644 localisation/ko/docs/04-dotnet.md create mode 100644 localisation/ko/docs/05-containerization.md create mode 100644 localisation/ko/docs/custom-instructions/containerization/copilot-instructions.md create mode 100644 localisation/ko/docs/custom-instructions/dotnet/copilot-instructions.md create mode 100644 localisation/ko/docs/custom-instructions/java/copilot-instructions.md create mode 100644 localisation/ko/docs/custom-instructions/javascript/copilot-instructions.md diff --git a/localisation/ko/docs/02-javascript.md b/localisation/ko/docs/02-javascript.md new file mode 100644 index 0000000..cc130a8 --- /dev/null +++ b/localisation/ko/docs/02-javascript.md @@ -0,0 +1,40 @@ +# 02: JavaScript 프론트엔드 개발 + +## 시나리오 + +Contoso는 다양한 야외 활동 제품을 판매하는 회사입니다. Contoso의 마케팅 부서는 기존 고객과 잠재 고객에게 제품을 홍보하기 위한 마이크로 소셜 미디어 웹사이트를 런칭하고자 합니다. + +JavaScript 개발자로서, Python 백엔드 API 앱과 통신하는 React를 사용하여 JavaScript 프론트엔드 앱을 구축할 것입니다. + +## 전제 조건 + +준비를 위해 [README](../README.md) 문서를 참조하세요. + +## 시작하기 + +- [GitHub Copilot 에이전트 모드 확인](#github-copilot-에이전트-모드-확인) +- [커스텀 지시사항 준비](#커스텀-지시사항-준비) +- [애플리케이션 프로젝트 준비](#애플리케이션-프로젝트-준비) +- [Figma MCP 서버 준비](#figma-mcp-서버-준비) +- [Figma에서 UI 컴포넌트 생성](#figma에서-ui-컴포넌트-생성) +- [FastAPI 백엔드 앱 실행](#fastapi-백엔드-앱-실행) +- [React 프론트엔드 앱 구축](#react-프론트엔드-앱-구축) +- [React 프론트엔드 앱 확인](#react-프론트엔드-앱-확인) + +### GitHub Copilot 에이전트 모드 확인 + +1. GitHub Codespace 또는 VS Code 상단의 GitHub Copilot 아이콘을 클릭하고 GitHub Copilot 창을 여세요. + + ![Open GitHub Copilot Chat](./images/setup-02.png) + +1. 로그인 또는 가입을 요청받으면 진행하세요. 무료입니다. +1. GitHub Copilot 에이전트 모드를 사용하고 있는지 확인하세요. + + ![GitHub Copilot Agent Mode](./images/setup-03.png) + +1. 모델을 `GPT-4.1` 또는 `Claude Sonnet 4` 중 하나로 선택하세요. +1. [MCP 서버](./00-setup.md#mcp-서버-설정)를 구성했는지 확인하세요. + +--- + +좋습니다. "JavaScript" 단계를 완료했습니다. [STEP 03: Python에서 Java로 마이그레이션](./03-java.md)로 이동하겠습니다. \ No newline at end of file diff --git a/localisation/ko/docs/03-java.md b/localisation/ko/docs/03-java.md new file mode 100644 index 0000000..356402b --- /dev/null +++ b/localisation/ko/docs/03-java.md @@ -0,0 +1,38 @@ +# 03: Python에서 Java로 마이그레이션 + +## 시나리오 + +Contoso는 다양한 야외 활동 제품을 판매하는 회사입니다. Contoso의 마케팅 부서는 기존 고객과 잠재 고객에게 제품을 홍보하기 위한 마이크로 소셜 미디어 웹사이트를 런칭하고자 합니다. + +Python 개발자가 회사를 떠났기 때문에, 이해관계자들은 기존 Python 백엔드 API 앱을 Spring Boot를 사용하여 Java로 마이그레이션하도록 요청했습니다. + +이제 Java 개발자로서, 기존 FastAPI 앱을 Spring Boot로 마이그레이션해야 합니다. 참고로 Python과 FastAPI에 대한 지식은 매우 적습니다. + +## 전제 조건 + +준비를 위해 [README](../README.md) 문서를 참조하세요. + +## 시작하기 + +- [GitHub Copilot 에이전트 모드 확인](#github-copilot-에이전트-모드-확인) +- [커스텀 지시사항 준비](#커스텀-지시사항-준비) +- [Spring Boot 프로젝트 준비](#spring-boot-프로젝트-준비) +- [FastAPI API 앱 마이그레이션](#fastapi-api-앱-마이그레이션) + +### GitHub Copilot 에이전트 모드 확인 + +1. GitHub Codespace 또는 VS Code 상단의 GitHub Copilot 아이콘을 클릭하고 GitHub Copilot 창을 여세요. + + ![Open GitHub Copilot Chat](./images/setup-02.png) + +1. 로그인 또는 가입을 요청받으면 진행하세요. 무료입니다. +1. GitHub Copilot 에이전트 모드를 사용하고 있는지 확인하세요. + + ![GitHub Copilot Agent Mode](./images/setup-03.png) + +1. 모델을 `GPT-4.1` 또는 `Claude Sonnet 4` 중 하나로 선택하세요. +1. [MCP 서버](./00-setup.md#mcp-서버-설정)를 구성했는지 확인하세요. + +--- + +좋습니다. "Java" 단계를 완료했습니다. [STEP 04: JavaScript에서 .NET으로 마이그레이션](./04-dotnet.md)로 이동하겠습니다. \ No newline at end of file diff --git a/localisation/ko/docs/04-dotnet.md b/localisation/ko/docs/04-dotnet.md new file mode 100644 index 0000000..dbf95f8 --- /dev/null +++ b/localisation/ko/docs/04-dotnet.md @@ -0,0 +1,38 @@ +# 04: JavaScript에서 .NET으로 마이그레이션 + +## 시나리오 + +Contoso는 다양한 야외 활동 제품을 판매하는 회사입니다. Contoso의 마케팅 부서는 기존 고객과 잠재 고객에게 제품을 홍보하기 위한 마이크로 소셜 미디어 웹사이트를 런칭하고자 합니다. + +이들은 이미 JavaScript, 더 구체적으로는 React로 작성된 프론트엔드 앱을 가지고 있습니다. 하지만 갑자기 .NET, 특히 Blazor를 사용하여 프론트엔드 앱을 재개발하라는 새로운 요구사항을 보냈습니다. + +이제 .NET 개발자로서, 기존 React 앱을 Blazor로 마이그레이션해야 합니다. 참고로 JavaScript와 React에 대한 지식은 매우 적습니다. + +## 전제 조건 + +준비를 위해 [README](../README.md) 문서를 참조하세요. + +## 시작하기 + +- [GitHub Copilot 에이전트 모드 확인](#github-copilot-에이전트-모드-확인) +- [커스텀 지시사항 준비](#커스텀-지시사항-준비) +- [Blazor 웹 앱 프로젝트 준비](#blazor-웹-앱-프로젝트-준비) +- [React 웹 앱 마이그레이션](#react-웹-앱-마이그레이션) + +### GitHub Copilot 에이전트 모드 확인 + +1. GitHub Codespace 또는 VS Code 상단의 GitHub Copilot 아이콘을 클릭하고 GitHub Copilot 창을 여세요. + + ![Open GitHub Copilot Chat](./images/setup-02.png) + +1. 로그인 또는 가입을 요청받으면 진행하세요. 무료입니다. +1. GitHub Copilot 에이전트 모드를 사용하고 있는지 확인하세요. + + ![GitHub Copilot Agent Mode](./images/setup-03.png) + +1. 모델을 `GPT-4.1` 또는 `Claude Sonnet 4` 중 하나로 선택하세요. +1. [MCP 서버](./00-setup.md#mcp-서버-설정)를 구성했는지 확인하세요. + +--- + +좋습니다. ".NET" 단계를 완료했습니다. [STEP 05: 컨테이너화](./05-containerization.md)로 이동하겠습니다. \ No newline at end of file diff --git a/localisation/ko/docs/05-containerization.md b/localisation/ko/docs/05-containerization.md new file mode 100644 index 0000000..7d1c6c9 --- /dev/null +++ b/localisation/ko/docs/05-containerization.md @@ -0,0 +1,39 @@ +# 05: 컨테이너화 + +## 시나리오 + +Contoso는 다양한 야외 활동 제품을 판매하는 회사입니다. Contoso의 마케팅 부서는 기존 고객과 잠재 고객에게 제품을 홍보하기 위한 마이크로 소셜 미디어 웹사이트를 런칭하고자 합니다. + +이제 Java 기반 백엔드 앱과 .NET 기반 프론트엔드 앱을 모두 가지고 있습니다. 이들은 모든 플랫폼에 배포할 수 있도록 컨테이너화하고 싶어합니다. + +이제 DevOps 엔지니어로서, 두 앱을 모두 컨테이너화해야 합니다. + +## 전제 조건 + +준비를 위해 [README](../README.md) 문서를 참조하세요. + +## 시작하기 + +- [GitHub Copilot 에이전트 모드 확인](#github-copilot-에이전트-모드-확인) +- [커스텀 지시사항 준비](#커스텀-지시사항-준비) +- [Java 애플리케이션 컨테이너화](#java-애플리케이션-컨테이너화) +- [.NET 애플리케이션 컨테이너화](#net-애플리케이션-컨테이너화) +- [컨테이너 오케스트레이션](#컨테이너-오케스트레이션) + +### GitHub Copilot 에이전트 모드 확인 + +1. GitHub Codespace 또는 VS Code 상단의 GitHub Copilot 아이콘을 클릭하고 GitHub Copilot 창을 여세요. + + ![Open GitHub Copilot Chat](./images/setup-02.png) + +1. 로그인 또는 가입을 요청받으면 진행하세요. 무료입니다. +1. GitHub Copilot 에이전트 모드를 사용하고 있는지 확인하세요. + + ![GitHub Copilot Agent Mode](./images/setup-03.png) + +1. 모델을 `GPT-4.1` 또는 `Claude Sonnet 4` 중 하나로 선택하세요. +1. [MCP 서버](./00-setup.md#mcp-서버-설정)를 구성했는지 확인하세요. + +--- + +좋습니다. "컨테이너화" 단계를 완료했습니다! \ No newline at end of file diff --git a/localisation/ko/docs/custom-instructions/containerization/copilot-instructions.md b/localisation/ko/docs/custom-instructions/containerization/copilot-instructions.md new file mode 100644 index 0000000..279ed93 --- /dev/null +++ b/localisation/ko/docs/custom-instructions/containerization/copilot-instructions.md @@ -0,0 +1,34 @@ +# DevOps 규칙 + +당신은 시니어 DevOps 엔지니어이며 컨테이너화, Docker, Dockerfile, Docker Compose 및 Kubernetes 전문가입니다. + +## 일반 가이드라인 + +### 기본 원칙 + +- 모든 코드, 문서화, 주석에 영어를 사용하세요. +- 모듈화되고 재사용 가능하며 확장 가능한 코드를 우선시하세요. +- 명명 규칙을 따르세요: + - 변수, 함수, 메서드명에는 camelCase. + - 클래스명에는 PascalCase. + - 파일명과 디렉터리 구조에는 snake_case. + - 환경 변수에는 UPPER_CASE. +- 하드코딩된 값을 피하고 환경 변수나 구성 파일을 사용하세요. +- 가능한 곳에서 Infrastructure-as-Code (IaC) 원칙을 적용하세요. +- 액세스와 권한에서 항상 최소 권한 원칙을 고려하세요. + +### DevOps 원칙 + +- 반복적인 작업을 자동화하고 수동 개입을 피하세요. +- 모듈화되고 재사용 가능한 CI/CD 파이프라인을 작성하세요. +- 보안 레지스트리를 사용하여 컨테이너화된 애플리케이션을 사용하세요. +- Azure Key Vault 또는 기타 비밀 관리 솔루션을 사용하여 비밀을 관리하세요. +- 블루-그린 또는 카나리 배포 전략을 적용하여 복원력 있는 시스템을 구축하세요. + +## 특정 시나리오 + +### Docker 및 Docker Compose + +- 이미지 크기를 최적화하기 위해 Dockerfile에서 멀티 스테이지 빌드를 사용하세요. +- Dockerfile이 멱등성을 가지며 부작용 없이 여러 번 빌드될 수 있도록 보장하세요. +- 로컬 개발 및 테스트 환경에서는 Docker Compose를 사용하세요. \ No newline at end of file diff --git a/localisation/ko/docs/custom-instructions/dotnet/copilot-instructions.md b/localisation/ko/docs/custom-instructions/dotnet/copilot-instructions.md new file mode 100644 index 0000000..d1d2fa9 --- /dev/null +++ b/localisation/ko/docs/custom-instructions/dotnet/copilot-instructions.md @@ -0,0 +1,20 @@ +# .NET 개발 규칙 + +당신은 시니어 .NET 개발자이며 C#, ASP.NET Core, Minimal API, Blazor 및 .NET Aspire의 전문가입니다. + +## 코드 스타일 및 구조 + +- 정확한 예제와 함께 간결하고 관용적인 C# 코드를 작성하세요. +- .NET 및 ASP.NET Core 규칙과 모범 사례를 따르세요. +- 적절하게 객체지향 및 함수형 프로그래밍 패턴을 사용하세요. +- 컬렉션 작업에는 LINQ와 람다 표현식을 선호하세요. +- 설명적인 변수 및 메서드명을 사용하세요 (예: 'IsUserSignedIn', 'CalculateTotal'). +- .NET 규칙에 따라 파일을 구조화하세요 (Controllers, Models, Services 등). +- 성능과 응답성을 향상시키기 위해 가능한 모든 곳에서 비동기 작업에 async/await를 사용하세요. + +## 명명 규칙 + +- 클래스명, 메서드명, public 멤버에는 PascalCase를 사용하세요. +- 로컬 변수와 private 필드에는 camelCase를 사용하세요. +- 상수에는 UPPERCASE를 사용하세요. +- 인터페이스명에는 "I"를 접두사로 붙이세요 (예: 'IUserService'). \ No newline at end of file diff --git a/localisation/ko/docs/custom-instructions/java/copilot-instructions.md b/localisation/ko/docs/custom-instructions/java/copilot-instructions.md new file mode 100644 index 0000000..1700053 --- /dev/null +++ b/localisation/ko/docs/custom-instructions/java/copilot-instructions.md @@ -0,0 +1,18 @@ +# Java 개발 규칙 + +당신은 시니어 Java 개발자이며 Java 프로그래밍, Spring Boot, Spring Boot CLI, Spring Framework, Maven, Gradle, JUnit 및 관련 Java 기술의 전문가입니다. + +## 코드 스타일 및 구조 + +- 정확한 Spring Boot 예제와 함께 깔끔하고 효율적이며 잘 문서화된 Java 코드를 작성하세요. +- 코드 전반에 걸쳐 Spring Boot 모범 사례와 규칙을 사용하세요. +- 웹 서비스를 생성할 때 RESTful API 설계 패턴을 구현하세요. +- camelCase 관례를 따르는 설명적인 메서드 및 변수명을 사용하세요. +- Spring Boot 애플리케이션 구조: 컨트롤러, 서비스, 리포지토리, 모델, 구성. + +## Spring Boot 특정 사항 + +- 빠른 프로젝트 설정과 종속성 관리를 위해 Spring Boot starter를 사용하세요. +- 어노테이션의 적절한 사용을 구현하세요 (예: @SpringBootApplication, @RestController, @Service). +- Spring Boot의 자동 구성 기능을 효과적으로 활용하세요. +- @ControllerAdvice와 @ExceptionHandler를 사용하여 적절한 예외 처리를 구현하세요. \ No newline at end of file diff --git a/localisation/ko/docs/custom-instructions/javascript/copilot-instructions.md b/localisation/ko/docs/custom-instructions/javascript/copilot-instructions.md new file mode 100644 index 0000000..b76b827 --- /dev/null +++ b/localisation/ko/docs/custom-instructions/javascript/copilot-instructions.md @@ -0,0 +1,20 @@ +# JavaScript 개발 규칙 + +당신은 시니어 프론트엔드 개발자이며 ReactJS, NextJS, ViteJS, JavaScript, TypeScript, HTML, CSS 및 최신 UI/UX 프레임워크(예: TailwindCSS, Shadcn, Radix) 전문가입니다. + +당신은 사려 깊고 미묘한 답변을 제공하며 추론에 뛰어납니다. 정확하고 사실적이며 사려 깊은 답변을 신중하게 제공하고 추론의 천재입니다. + +## 핵심 원칙 + +- 사용자의 요구사항을 신중하고 정확하게 따르세요. +- 먼저 단계별로 생각하세요 - 매우 자세히 작성된 의사코드로 구축할 계획을 설명하세요. +- 확인한 후 코드를 작성하세요! +- 항상 올바르고 모범 사례인 DRY 원칙(Don't Repeat Yourself)을 따르며, 버그가 없고 완전히 기능적이고 작동하는 코드를 작성하세요. 또한 아래 나열된 코드 구현 가이드라인 규칙에 맞춰야 합니다. +- 성능보다는 쉽고 읽기 쉬운 코드에 집중하세요. +- 요청된 모든 기능을 완전히 구현하세요. +- TODO, 플레이스홀더 또는 누락된 부분을 남기지 마세요. +- 코드가 완전한지 확인하세요! 철저히 최종 검증하세요. +- 필요한 모든 imports를 포함하고 주요 컴포넌트의 적절한 명명을 보장하세요. +- 간결하게 다른 산문을 최소화하세요. +- 올바른 답이 없을 수 있다고 생각하면 그렇게 말하세요. +- 답을 모르면 추측하는 대신 모른다고 말하세요. \ No newline at end of file From 3d6bd89312a2fed1af15d7a7397c5a0a823593b4 Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Fri, 6 Jun 2025 05:28:33 +0000 Subject: [PATCH 05/10] Fix hero image path in Korean README.md to point to correct relative path Co-authored-by: justinyoo <1538528+justinyoo@users.noreply.github.com> --- localisation/ko/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/localisation/ko/README.md b/localisation/ko/README.md index b8e6a73..4a3e589 100644 --- a/localisation/ko/README.md +++ b/localisation/ko/README.md @@ -1,6 +1,6 @@ # GitHub Copilot Vibe 코딩 워크샵 -![GitHub Copilot - Ghiblifiled](./images/ghcp.jpg) +![GitHub Copilot - Ghiblifiled](../../images/ghcp.jpg) Python, JavaScript, Java, .NET 등 다양한 프로그래밍 언어에서 [GitHub Copilot](https://docs.github.com/copilot/about-github-copilot/what-is-github-copilot)과 최신 기능들로 바이브 코딩을 하고, 컨테이너화를 통해 앱을 클라우드 네이티브로 만들어 보세요. 뛰어들 준비가 되셨나요? From 0e943968c59c7efe2c9ba95df539cd86256439bc Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Fri, 6 Jun 2025 05:46:04 +0000 Subject: [PATCH 06/10] Fix image paths in Korean localized docs to point to correct relative paths Co-authored-by: justinyoo <1538528+justinyoo@users.noreply.github.com> --- localisation/ko/docs/00-setup.md | 6 +++--- localisation/ko/docs/01-python.md | 4 ++-- localisation/ko/docs/02-javascript.md | 4 ++-- localisation/ko/docs/03-java.md | 4 ++-- localisation/ko/docs/04-dotnet.md | 4 ++-- localisation/ko/docs/05-containerization.md | 4 ++-- 6 files changed, 13 insertions(+), 13 deletions(-) diff --git a/localisation/ko/docs/00-setup.md b/localisation/ko/docs/00-setup.md index 6f8635d..a1917dc 100644 --- a/localisation/ko/docs/00-setup.md +++ b/localisation/ko/docs/00-setup.md @@ -24,7 +24,7 @@ 1. 아래 이미지를 보고 다음 순서로 클릭하여 따라하세요: ![the "code" button image](https://img.shields.io/badge/%3C%3E_Code-green) 👉 ![the "codespaces" button image](https://img.shields.io/badge/Codespaces-white) 👉 ![the "create codespace on main" button image](https://img.shields.io/badge/Create_codespace_on_main-green)을 클릭하여 새로운 GitHub Codespace 인스턴스를 생성하세요. 네트워크 상태에 따라 5-10분 정도 걸릴 수 있습니다. - ![Starting with GitHub Codespaces](./images/setup-01.png) + ![Starting with GitHub Codespaces](../../../docs/images/setup-01.png) 2. GitHub Codespace 인스턴스가 준비되면, 터미널을 열고 다음 명령을 실행하여 필요한 모든 것이 제대로 설치되었는지 확인하세요. @@ -290,12 +290,12 @@ 1. GitHub Codespace 또는 VS Code 상단의 GitHub Copilot 아이콘을 클릭하고 GitHub Copilot 창을 여세요. - ![Open GitHub Copilot Chat](./images/setup-02.png) + ![Open GitHub Copilot Chat](../../../docs/images/setup-02.png) 1. 로그인 또는 가입을 요청받으면 진행하세요. 무료입니다. 1. GitHub Copilot 에이전트 모드를 사용하고 있는지 확인하세요. - ![GitHub Copilot Agent Mode](./images/setup-03.png) + ![GitHub Copilot Agent Mode](../../../docs/images/setup-03.png) 1. 모델을 `GPT-4.1` 또는 `Claude Sonnet 4` 중 하나로 선택하세요. diff --git a/localisation/ko/docs/01-python.md b/localisation/ko/docs/01-python.md index 8047b7f..1e80e0c 100644 --- a/localisation/ko/docs/01-python.md +++ b/localisation/ko/docs/01-python.md @@ -21,12 +21,12 @@ Python 개발자로서, FastAPI를 사용하여 Python 백엔드 앱을 구축 1. GitHub Codespace 또는 VS Code 상단의 GitHub Copilot 아이콘을 클릭하고 GitHub Copilot 창을 여세요. - ![Open GitHub Copilot Chat](./images/setup-02.png) + ![Open GitHub Copilot Chat](../../../docs/images/setup-02.png) 1. 로그인 또는 가입을 요청받으면 진행하세요. 무료입니다. 1. GitHub Copilot 에이전트 모드를 사용하고 있는지 확인하세요. - ![GitHub Copilot Agent Mode](./images/setup-03.png) + ![GitHub Copilot Agent Mode](../../../docs/images/setup-03.png) 1. 모델을 `GPT-4.1` 또는 `Claude Sonnet 4` 중 하나로 선택하세요. 1. [MCP 서버](./00-setup.md#mcp-서버-설정)를 구성했는지 확인하세요. diff --git a/localisation/ko/docs/02-javascript.md b/localisation/ko/docs/02-javascript.md index cc130a8..8e07071 100644 --- a/localisation/ko/docs/02-javascript.md +++ b/localisation/ko/docs/02-javascript.md @@ -25,12 +25,12 @@ JavaScript 개발자로서, Python 백엔드 API 앱과 통신하는 React를 1. GitHub Codespace 또는 VS Code 상단의 GitHub Copilot 아이콘을 클릭하고 GitHub Copilot 창을 여세요. - ![Open GitHub Copilot Chat](./images/setup-02.png) + ![Open GitHub Copilot Chat](../../../docs/images/setup-02.png) 1. 로그인 또는 가입을 요청받으면 진행하세요. 무료입니다. 1. GitHub Copilot 에이전트 모드를 사용하고 있는지 확인하세요. - ![GitHub Copilot Agent Mode](./images/setup-03.png) + ![GitHub Copilot Agent Mode](../../../docs/images/setup-03.png) 1. 모델을 `GPT-4.1` 또는 `Claude Sonnet 4` 중 하나로 선택하세요. 1. [MCP 서버](./00-setup.md#mcp-서버-설정)를 구성했는지 확인하세요. diff --git a/localisation/ko/docs/03-java.md b/localisation/ko/docs/03-java.md index 356402b..dff8d54 100644 --- a/localisation/ko/docs/03-java.md +++ b/localisation/ko/docs/03-java.md @@ -23,12 +23,12 @@ Python 개발자가 회사를 떠났기 때문에, 이해관계자들은 기존 1. GitHub Codespace 또는 VS Code 상단의 GitHub Copilot 아이콘을 클릭하고 GitHub Copilot 창을 여세요. - ![Open GitHub Copilot Chat](./images/setup-02.png) + ![Open GitHub Copilot Chat](../../../docs/images/setup-02.png) 1. 로그인 또는 가입을 요청받으면 진행하세요. 무료입니다. 1. GitHub Copilot 에이전트 모드를 사용하고 있는지 확인하세요. - ![GitHub Copilot Agent Mode](./images/setup-03.png) + ![GitHub Copilot Agent Mode](../../../docs/images/setup-03.png) 1. 모델을 `GPT-4.1` 또는 `Claude Sonnet 4` 중 하나로 선택하세요. 1. [MCP 서버](./00-setup.md#mcp-서버-설정)를 구성했는지 확인하세요. diff --git a/localisation/ko/docs/04-dotnet.md b/localisation/ko/docs/04-dotnet.md index dbf95f8..39ea415 100644 --- a/localisation/ko/docs/04-dotnet.md +++ b/localisation/ko/docs/04-dotnet.md @@ -23,12 +23,12 @@ Contoso는 다양한 야외 활동 제품을 판매하는 회사입니다. Conto 1. GitHub Codespace 또는 VS Code 상단의 GitHub Copilot 아이콘을 클릭하고 GitHub Copilot 창을 여세요. - ![Open GitHub Copilot Chat](./images/setup-02.png) + ![Open GitHub Copilot Chat](../../../docs/images/setup-02.png) 1. 로그인 또는 가입을 요청받으면 진행하세요. 무료입니다. 1. GitHub Copilot 에이전트 모드를 사용하고 있는지 확인하세요. - ![GitHub Copilot Agent Mode](./images/setup-03.png) + ![GitHub Copilot Agent Mode](../../../docs/images/setup-03.png) 1. 모델을 `GPT-4.1` 또는 `Claude Sonnet 4` 중 하나로 선택하세요. 1. [MCP 서버](./00-setup.md#mcp-서버-설정)를 구성했는지 확인하세요. diff --git a/localisation/ko/docs/05-containerization.md b/localisation/ko/docs/05-containerization.md index 7d1c6c9..24e2480 100644 --- a/localisation/ko/docs/05-containerization.md +++ b/localisation/ko/docs/05-containerization.md @@ -24,12 +24,12 @@ Contoso는 다양한 야외 활동 제품을 판매하는 회사입니다. Conto 1. GitHub Codespace 또는 VS Code 상단의 GitHub Copilot 아이콘을 클릭하고 GitHub Copilot 창을 여세요. - ![Open GitHub Copilot Chat](./images/setup-02.png) + ![Open GitHub Copilot Chat](../../../docs/images/setup-02.png) 1. 로그인 또는 가입을 요청받으면 진행하세요. 무료입니다. 1. GitHub Copilot 에이전트 모드를 사용하고 있는지 확인하세요. - ![GitHub Copilot Agent Mode](./images/setup-03.png) + ![GitHub Copilot Agent Mode](../../../docs/images/setup-03.png) 1. 모델을 `GPT-4.1` 또는 `Claude Sonnet 4` 중 하나로 선택하세요. 1. [MCP 서버](./00-setup.md#mcp-서버-설정)를 구성했는지 확인하세요. From 2a49e0327e3ea1249f14e8ebefc3526d86e207e6 Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Fri, 6 Jun 2025 05:55:12 +0000 Subject: [PATCH 07/10] Complete Korean localization of JavaScript documentation with all missing sections Co-authored-by: justinyoo <1538528+justinyoo@users.noreply.github.com> --- localisation/ko/docs/02-javascript.md | 125 ++++++++++++++++++++++++++ 1 file changed, 125 insertions(+) diff --git a/localisation/ko/docs/02-javascript.md b/localisation/ko/docs/02-javascript.md index 8e07071..b85d69d 100644 --- a/localisation/ko/docs/02-javascript.md +++ b/localisation/ko/docs/02-javascript.md @@ -35,6 +35,131 @@ JavaScript 개발자로서, Python 백엔드 API 앱과 통신하는 React를 1. 모델을 `GPT-4.1` 또는 `Claude Sonnet 4` 중 하나로 선택하세요. 1. [MCP 서버](./00-setup.md#mcp-서버-설정)를 구성했는지 확인하세요. +### 커스텀 지시사항 준비 + +1. `$REPOSITORY_ROOT` 환경 변수를 설정하세요. + + ```bash + # bash/zsh + REPOSITORY_ROOT=$(git rev-parse --show-toplevel) + ``` + + ```powershell + # PowerShell + $REPOSITORY_ROOT = git rev-parse --show-toplevel + ``` + +1. 커스텀 지시사항을 복사하세요. + + ```bash + # bash/zsh + cp -r $REPOSITORY_ROOT/docs/custom-instructions/javascript/. \ + $REPOSITORY_ROOT/.github/ + ``` + + ```powershell + # PowerShell + Copy-Item -Path $REPOSITORY_ROOT/docs/custom-instructions/javascript/* ` + -Destination $REPOSITORY_ROOT/.github/ -Recurse -Force + ``` + +### 애플리케이션 프로젝트 준비 + +1. `Claude Sonnet 4` 또는 `GPT-4.1` 모델로 GitHub Copilot 에이전트 모드를 사용하고 있는지 확인하세요. +1. `context7` MCP 서버가 실행 중인지 확인하세요. +1. 아래와 같은 프롬프트를 사용하여 React 웹 앱 프로젝트를 스캐폴드하세요. + + ```text + I'd like to scaffold a React web app. Follow the instructions below. + + - Make sure it's the web app, not the mobile app. + - Your working directory is `javascript`. + - Identify all the steps first, which you're going to do. + - Use ViteJS as the frontend app framework. + - Use default settings when initializing the project. + - Use `SimpleSocialMediaApplication` as the name of the project while initializing. + - Use the port number of `3000`. + - Only initialize the project. DO NOT go further. + ``` + +1. GitHub Copilot의 ![the "keep" button image](https://img.shields.io/badge/keep-blue) 버튼을 클릭하여 변경사항을 적용하세요. + +### Figma MCP 서버 준비 + +1. [MCP 서버](./00-setup.md#mcp-서버-설정)를 구성했는지 확인하세요. +1. [Figma](https://www.figma.com/)에서 개인 액세스 토큰(PAT)을 발급받으세요. +1. F1 또는 Windows에서 `Ctrl`+`Shift`+`P`, Mac OS에서 `Cmd`+`Shift`+`P`를 눌러 명령 팔레트를 열고 `MCP: List Servers`를 검색하세요. +1. `Framelink Figma MCP`를 선택한 후 `Start Server`를 클릭하세요. +1. Figma에서 발급받은 PAT를 입력하세요. + +### Figma에서 UI 컴포넌트 생성 + +1. `Claude Sonnet 4` 또는 `GPT-4.1` 모델로 GitHub Copilot 에이전트 모드를 사용하고 있는지 확인하세요. +1. Figma MCP 서버가 실행 중인지 확인하세요. +1. [Figma 디자인 템플릿](https://www.figma.com/community/file/1495954632647006209)을 계정에 복사하세요. + + ![Figma design template page](../../../docs/images/javascript-01.png) + +1. 각 섹션 - `Home`, `Search`, `Post Details`, `Post Modal`, `Name Input Modal`을 마우스 우클릭 👉 `Copy/Paste as` 선택 👉 `Copy link to selection` 선택하여 각 섹션의 링크를 가져오세요. 5개 링크를 모두 메모해 두세요. + +### FastAPI 백엔드 앱 실행 + +1. FastAPI 백엔드 앱이 실행 중인지 확인하세요. + + ```text + Run the FastAPI backend API, which is located at the `python` directory. + ``` + + > **참고**: 대신 [`complete/python`](../complete/python/) 샘플 앱을 사용할 수도 있습니다. + +1. GitHub Codespaces를 사용하는 경우, 포트 번호 `8000`이 `private` 대신 `public`으로 설정되어 있는지 확인하세요. 그렇지 않으면 프론트엔드 앱에서 접근할 때 `401` 오류가 발생합니다. + +### React 프론트엔드 앱 구축 + +1. `Claude Sonnet 4` 또는 `GPT-4.1` 모델로 GitHub Copilot 에이전트 모드를 사용하고 있는지 확인하세요. +1. `context7` MCP 서버가 실행 중인지 확인하세요. +1. [이전 섹션](#figma에서-ui-컴포넌트-생성)에서 가져온 5개의 Figma 섹션 링크를 모두 보유하고 있는지 확인하세요. +1. [`product-requirements.md`](../product-requirements.md)와 [`openapi.yaml`](../openapi.yaml)를 GitHub Copilot에 추가하세요. +1. 요구사항과 OpenAPI 문서를 기반으로 애플리케이션을 구축하기 위해 아래와 같은 프롬프트를 사용하세요. + + ```text + I'd like to build a React web app. Follow the instructions below. + + - Your working directory is `javascript`. + - Identify all the steps first, which you're going to do. + - There's a backend API app running on `http://localhost:8000`. + - Use `openapi.yaml` that describes all the endpoints and data schema. + - Use the port number of `3000`. + - Create all the UI components defined in this link: {{FIGMA_SECTION_LINK}}. + - DO NOT add anything not related to the UI components. + - DO NOT add anything not defined in `openapi.yaml`. + - DO NOT modify anything defined in `openapi.yaml`. + - Give visual indication when the backend API is unavailable or unreachable for any reason. + ``` + +1. 나머지 4개의 Figma 디자인 링크에 대해 4번 더 반복하세요. +1. GitHub Copilot의 ![the "keep" button image](https://img.shields.io/badge/keep-blue) 버튼을 클릭하여 변경사항을 적용하세요. + +### React 프론트엔드 앱 확인 + +1. FastAPI 백엔드 앱이 실행 중인지 확인하세요. + + ```text + Run the FastAPI backend API, which is located at the `python` directory. + ``` + +1. 제대로 빌드되었는지 확인하세요. + + ```text + Run the React app and verify if the app is properly running. + + If app running fails, analyze the issues and fix them. + ``` + +1. 웹 브라우저를 열고 `http://localhost:3000`으로 이동하세요. +1. 프론트엔드와 백엔드 앱이 모두 제대로 실행되는지 확인하세요. +1. GitHub Copilot의 `[keep]` 버튼을 클릭하여 변경사항을 적용하세요. + --- 좋습니다. "JavaScript" 단계를 완료했습니다. [STEP 03: Python에서 Java로 마이그레이션](./03-java.md)로 이동하겠습니다. \ No newline at end of file From 5a67fd0fe62b0ee26dfaca1d58abd7e790e3ccbc Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Fri, 6 Jun 2025 05:59:23 +0000 Subject: [PATCH 08/10] Complete Korean localization of Java documentation with all missing sections Co-authored-by: justinyoo <1538528+justinyoo@users.noreply.github.com> --- localisation/ko/docs/03-java.md | 121 ++++++++++++++++++++++++++++++++ 1 file changed, 121 insertions(+) diff --git a/localisation/ko/docs/03-java.md b/localisation/ko/docs/03-java.md index dff8d54..3fac02e 100644 --- a/localisation/ko/docs/03-java.md +++ b/localisation/ko/docs/03-java.md @@ -33,6 +33,127 @@ Python 개발자가 회사를 떠났기 때문에, 이해관계자들은 기존 1. 모델을 `GPT-4.1` 또는 `Claude Sonnet 4` 중 하나로 선택하세요. 1. [MCP 서버](./00-setup.md#mcp-서버-설정)를 구성했는지 확인하세요. +### 커스텀 지시사항 준비 + +1. `$REPOSITORY_ROOT` 환경 변수를 설정하세요. + + ```bash + # bash/zsh + REPOSITORY_ROOT=$(git rev-parse --show-toplevel) + ``` + + ```powershell + # PowerShell + $REPOSITORY_ROOT = git rev-parse --show-toplevel + ``` + +1. 커스텀 지시사항을 복사하세요. + + ```bash + # bash/zsh + cp -r $REPOSITORY_ROOT/docs/custom-instructions/java/. \ + $REPOSITORY_ROOT/.github/ + ``` + + ```powershell + # PowerShell + Copy-Item -Path $REPOSITORY_ROOT/docs/custom-instructions/java/* ` + -Destination $REPOSITORY_ROOT/.github/ -Recurse -Force + ``` + +### Spring Boot 프로젝트 준비 + +1. `Claude Sonnet 4` 또는 `GPT-4.1` 모델과 함께 GitHub Copilot 에이전트 모드를 사용하고 있는지 확인하세요. +1. `context7` MCP 서버가 실행 중인지 확인하세요. +1. Spring Boot CLI를 설치하세요. + + ```bash + sdk install springboot + ``` + +1. 아래와 같은 프롬프트를 사용하여 Spring Boot 앱 프로젝트를 스캐폴드하세요. + + ```text + I'd like to scaffold a Spring Boot app. Follow the instructions below. + + - Use context7. + - Your working directory is `java`. + - Identify all the steps first, which you're going to do. + - Use Spring Boot CLI to create the Spring Boot app project. + - Use Gradle as the Java package manager. + - Use the package name of `com.contoso.socialapp`. + - Use the artifact ID of `socialapp`. + - Use the group ID of `com.contoso`. + - Use the package type of `jar`. + - Use OpenJDK version of `21`. + - Add dependencies - `Spring Web`, `Spring Boot Actuator` and `Lombok`. + - Use the port number of `8080`. + - Make sure to allow CORS from everywhere. + - Build the Spring Boot app and verify if the app is built properly. + - Run this Spring Boot app and verify if the app is running properly. + - If either building or running the app fails, analyze the issues and fix them. + ``` + +1. GitHub Copilot의 ![the "keep" button image](https://img.shields.io/badge/keep-blue) 버튼을 클릭하여 변경사항을 적용하세요. + +### FastAPI API 앱 마이그레이션 + +1. `Claude Sonnet 4` 또는 `GPT-4.1` 모델과 함께 GitHub Copilot 에이전트 모드를 사용하고 있는지 확인하세요. +1. `context7` MCP 서버가 실행 중인지 확인하세요. +1. [`product-requirements.md`](../product-requirements.md)와 [`openapi.yaml`](../openapi.yaml)을 GitHub Copilot에 추가하세요. +1. 아래와 같은 프롬프트를 사용하여 FastAPI를 Spring Boot로 마이그레이션하세요. + + ```text + Now, we're migrating the existing FastAPI-based API app to Spring Boot API app. Follow the instructions below for the migration. + + - Use context7. + - The existing FastAPI application is located at `python`. + - Your working directory is `java/socialapp`. + - Identify all the steps first, which you're going to do. + - Analyze the application structure of the existing FastAPI app. + - Migrate all the endpoints. Both corresponding endpoints should be exactly the same as each other. + - Use SQLite as the database. + - Use `sns_api.db` as the name of the SQLite database. + - The database should always be initialized whenever starting the app. + - Use `openapi.yaml` that describes all the endpoints and data schema. + - The API application should render Swagger UI page through a default endpoint. + - The API application should render exactly the same OpenAPI document through a default endpoint. + - DO NOT add anything not defined in `openapi.yaml`. + - DO NOT modify anything defined in `openapi.yaml`. + - If necessary, add more packages for OpenAPI and Swagger UI. + ``` + +1. GitHub Copilot의 ![the "keep" button image](https://img.shields.io/badge/keep-blue) 버튼을 클릭하여 변경사항을 적용하세요. +1. 마이그레이션이 완료되면, 아래와 같은 프롬프트를 사용하여 마이그레이션 결과를 확인하세요. + + ```text + I'd like to build the Spring Boot app. Follow the instructions. + + - Use context7. + - Build the Spring Boot app and verify if the app is built properly. + - If building the app fails, analyze the issues and fix them. + ``` + + > **참고**: + > + > - 빌드가 성공할 때까지 이 단계를 반복하세요. + > - 빌드가 계속 실패하면, 오류 메시지를 확인하고 GitHub Copilot 에이전트에 문의하여 해결하세요. + +1. GitHub Copilot의 ![the "keep" button image](https://img.shields.io/badge/keep-blue) 버튼을 클릭하여 변경사항을 적용하세요. + +### Spring Boot 백엔드 앱 검증 + +1. 애플리케이션이 빌드되면, 제대로 작성되었는지 확인하세요. + + ```text + Run the Spring Boot app and verify if the app is properly running by checking all the endpoints. Also verify the OpenAPI endpoint renders exactly the same content as `openapi.yaml`. + + If app running fails, analyze the issues and fix them. Use context7. + ``` + +1. 웹 브라우저를 열고 `http://localhost:8080`으로 이동하세요. +1. GitHub Copilot의 ![the "keep" button image](https://img.shields.io/badge/keep-blue) 버튼을 클릭하여 변경사항을 적용하세요. + --- 좋습니다. "Java" 단계를 완료했습니다. [STEP 04: JavaScript에서 .NET으로 마이그레이션](./04-dotnet.md)로 이동하겠습니다. \ No newline at end of file From 550cbc319cfab10c2a4469d7f317a5aa04eec7a5 Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Fri, 6 Jun 2025 06:01:39 +0000 Subject: [PATCH 09/10] Complete Korean localization for .NET and Containerization documentation with all missing sections Co-authored-by: justinyoo <1538528+justinyoo@users.noreply.github.com> --- localisation/ko/docs/04-dotnet.md | 133 ++++++++++++++++++ localisation/ko/docs/05-containerization.md | 145 +++++++++++++++++++- 2 files changed, 277 insertions(+), 1 deletion(-) diff --git a/localisation/ko/docs/04-dotnet.md b/localisation/ko/docs/04-dotnet.md index 39ea415..9a72750 100644 --- a/localisation/ko/docs/04-dotnet.md +++ b/localisation/ko/docs/04-dotnet.md @@ -33,6 +33,139 @@ Contoso는 다양한 야외 활동 제품을 판매하는 회사입니다. Conto 1. 모델을 `GPT-4.1` 또는 `Claude Sonnet 4` 중 하나로 선택하세요. 1. [MCP 서버](./00-setup.md#mcp-서버-설정)를 구성했는지 확인하세요. +### 커스텀 지시사항 준비 + +1. `$REPOSITORY_ROOT` 환경 변수를 설정하세요. + + ```bash + # bash/zsh + REPOSITORY_ROOT=$(git rev-parse --show-toplevel) + ``` + + ```powershell + # PowerShell + $REPOSITORY_ROOT = git rev-parse --show-toplevel + ``` + +1. 커스텀 지시사항을 복사하세요. + + ```bash + # bash/zsh + cp -r $REPOSITORY_ROOT/docs/custom-instructions/dotnet/. \ + $REPOSITORY_ROOT/.github/ + ``` + + ```powershell + # PowerShell + Copy-Item -Path $REPOSITORY_ROOT/docs/custom-instructions/dotnet/* ` + -Destination $REPOSITORY_ROOT/.github/ -Recurse -Force + ``` + +### Blazor 웹 앱 프로젝트 준비 + +1. `Claude Sonnet 4` 또는 `GPT-4.1` 모델과 함께 GitHub Copilot 에이전트 모드를 사용하고 있는지 확인하세요. +1. `context7` MCP 서버가 실행 중인지 확인하세요. +1. 아래와 같은 프롬프트를 사용하여 Blazor 웹 앱 프로젝트를 스캐폴드하세요. + + ```text + I'd like to scaffold a Blazor web app. Follow the instructions below. + + - Use context7. + - Your working directory is `dotnet`. + - Identify all the steps first, which you're going to do. + - Show me the list of .NET projects related to Blazor and ask me to choose. + - Generate a Blazor project. + - Use the project name of `Contoso.BlazorApp`. + - Update `launchSettings.json` to change the port number of `3031` for HTTP, `43031` for HTTPS. + - Create a solution, `ContosoWebApp`, and add the Blazor project into this solution. + - Build the Blazor app and verify if the app is built properly. + - Run this Blazor app and verify if the app is running properly. + - If either building or running the app fails, analyze the issues and fix them. + ``` + +1. GitHub Copilot의 ![the keep button image](https://img.shields.io/badge/keep-blue) 버튼을 클릭하여 변경사항을 적용하세요. + +### Spring Boot 백엔드 앱 실행 + +1. Spring Boot 백엔드 앱이 실행 중인지 확인하세요. + + ```text + Run the Spring Boot backend API, which is located at the `java` directory. + ``` + + > **참고**: 대신 [`complete/java`](../complete/java/) 샘플 앱을 사용할 수도 있습니다. + +1. GitHub Codespaces를 사용하는 경우, 포트 번호 `8080`이 `private` 대신 `public`으로 설정되어 있는지 확인하세요. 그렇지 않으면 프론트엔드 앱에서 액세스할 때 `401` 오류가 발생할 수 있습니다. + +### React 웹 앱 마이그레이션 + +1. `Claude Sonnet 4` 또는 `GPT-4.1` 모델과 함께 GitHub Copilot 에이전트 모드를 사용하고 있는지 확인하세요. +1. `context7` MCP 서버가 실행 중인지 확인하세요. +1. 아래와 같은 프롬프트를 사용하여 React를 Blazor로 마이그레이션하세요. + + ```text + Now, we're migrating the existing React-based web app to Blazor web app. Follow the instructions below for the migration. + + - Use context7. + - The existing React application is located at `javascript`. + - Your working directory is `dotnet/Contoso.BlazorApp`. + - Identify all the steps first, which you're going to do. + - There's a backend API app running on `http://localhost:8080`. + - Analyze the application structure of the existing React app. + - Migrate all the React components to Blazor ones. Both corresponding components should be as exactly close to each other as possible. + - Migrate all necessary CSS elements from React to Blazor. + - While migrating JavaScript elements from React to Blazor, maximize using Blazor's native features as much as possible. If you have to use JavaScript, use Blazor's JSInterop features. + - If necessary, add NuGet packages that are compatible with .NET 9. + ``` + +1. 마이그레이션이 완료되면, 아래와 같은 프롬프트를 사용하여 마이그레이션 결과를 확인하세요. + + ```text + I'd like to build the Blazor app. Follow the instructions. + + - Use context7. + - Build the Blazor app and verify if the app is built properly. + - If building the app fails, analyze the issues and fix them. + ``` + + > **참고**: + > + > - 빌드가 성공할 때까지 이 단계를 반복하세요. + > - 빌드가 계속 실패하면, 오류 메시지를 확인하고 GitHub Copilot 에이전트에 문의하여 해결하세요. + +1. GitHub Copilot의 ![the keep button image](https://img.shields.io/badge/keep-blue) 버튼을 클릭하여 변경사항을 적용하세요. +1. 빌드가 성공하면, 아래와 같은 프롬프트를 사용하여 마이그레이션 결과를 확인하세요. + + ```text + I'd like to run the Blazor app. Follow the instructions. + + - Use context7. + - Run this Blazor app and verify if the app is running properly. + - Ignore backend API app connection error at this stage. + - If running the app fails, analyze the issues and fix them. + ``` + +### Blazor 프론트엔드 앱 검증 + +1. Spring Boot 백엔드 앱이 실행 중인지 확인하세요. + + ```text + Run the Spring Boot backend API, which is located at the `java` directory. + ``` + +1. GitHub Copilot의 ![the keep button image](https://img.shields.io/badge/keep-blue) 버튼을 클릭하여 변경사항을 적용하세요. +1. 제대로 빌드되었는지 확인하세요. + + ```text + Run the Blazor app and verify if the app is properly running. + + If app running fails, analyze the issues and fix them. + ``` + +1. 웹 브라우저를 열고 `http://localhost:3031`로 이동하세요. +1. 프론트엔드와 백엔드 앱이 모두 제대로 실행되고 있는지 확인하세요. +1. GitHub Copilot의 ![the keep button image](https://img.shields.io/badge/keep-blue) 버튼을 클릭하여 변경사항을 적용하세요. + --- 좋습니다. ".NET" 단계를 완료했습니다. [STEP 05: 컨테이너화](./05-containerization.md)로 이동하겠습니다. \ No newline at end of file diff --git a/localisation/ko/docs/05-containerization.md b/localisation/ko/docs/05-containerization.md index 24e2480..3d5dd1a 100644 --- a/localisation/ko/docs/05-containerization.md +++ b/localisation/ko/docs/05-containerization.md @@ -34,6 +34,149 @@ Contoso는 다양한 야외 활동 제품을 판매하는 회사입니다. Conto 1. 모델을 `GPT-4.1` 또는 `Claude Sonnet 4` 중 하나로 선택하세요. 1. [MCP 서버](./00-setup.md#mcp-서버-설정)를 구성했는지 확인하세요. +### 커스텀 지시사항 준비 + +1. `$REPOSITORY_ROOT` 환경 변수를 설정하세요. + + ```bash + # bash/zsh + REPOSITORY_ROOT=$(git rev-parse --show-toplevel) + ``` + + ```powershell + # PowerShell + $REPOSITORY_ROOT = git rev-parse --show-toplevel + ``` + +1. 커스텀 지시사항을 복사하세요. + + ```bash + # bash/zsh + cp -r $REPOSITORY_ROOT/docs/custom-instructions/containerization/. \ + $REPOSITORY_ROOT/.github/ + ``` + + ```powershell + # PowerShell + Copy-Item -Path $REPOSITORY_ROOT/docs/custom-instructions/containerization/* ` + -Destination $REPOSITORY_ROOT/.github/ -Recurse -Force + ``` + +### Java 애플리케이션 컨테이너화 + +1. `Claude Sonnet 4` 또는 `GPT-4.1` 모델과 함께 GitHub Copilot 에이전트 모드를 사용하고 있는지 확인하세요. +1. 아래와 같은 프롬프트를 사용하여 Java 앱의 컨테이너 이미지를 빌드하세요. + + ```text + I'd like to build a container image of a Java app. Follow the instructions below. + + - The Java app is located at `java`. + - Your working directory is the repository root. + - Identify all the steps first, which you're going to do. + - Create a Dockerfile, `Dockerfile.java`. + - Use Microsoft OpenJDK 21. + - Use multi-stage build approach. + - Extract JRE from JDK. + - Use the target port number of `8080` for the container image. + ``` + +1. GitHub Copilot의 ![the keep button image](https://img.shields.io/badge/keep-blue) 버튼을 클릭하여 변경사항을 적용하세요. + +1. `Dockerfile.java`가 생성되면, 다음 프롬프트로 컨테이너 이미지를 빌드하세요. + + ```text + Use `Dockerfile.java` and build a container image. + + - Use `contoso-backend` as the container image name. + - Use `latest` as the container image tag. + - Verify if the container image is built properly. + - If the build fails, analyze the issues and fix them. + ``` + +1. GitHub Copilot의 ![the keep button image](https://img.shields.io/badge/keep-blue) 버튼을 클릭하여 변경사항을 적용하세요. + +1. 빌드가 성공하면, 다음 프롬프트로 컨테이너 이미지를 실행하세요. + + ```text + Use the container image just built, run a container and verify if the app is running properly. + + - Use the host port of `8080`. + ``` + +### .NET 애플리케이션 컨테이너화 + +1. `Claude Sonnet 4` 또는 `GPT-4.1` 모델과 함께 GitHub Copilot 에이전트 모드를 사용하고 있는지 확인하세요. +1. 아래와 같은 프롬프트를 사용하여 .NET 앱의 컨테이너 이미지를 빌드하세요. + + ```text + I'd like to build a container image of a .NET app. Follow the instructions below. + + - The .NET app is located at `dotnet`. + - Your working directory is the repository root. + - Identify all the steps first, which you're going to do. + - Create a Dockerfile, `Dockerfile.dotnet`. + - Use .NET 9. + - Use multi-stage build approach. + - Use the target port number of `8080` for the container image. + ``` + +1. GitHub Copilot의 ![the keep button image](https://img.shields.io/badge/keep-blue) 버튼을 클릭하여 변경사항을 적용하세요. + +1. `Dockerfile.dotnet`이 생성되면, 다음 프롬프트로 컨테이너 이미지를 빌드하세요. + + ```text + Use `Dockerfile.dotnet` and build a container image. + + - Use `contoso-frontend` as the container image name. + - Use `latest` as the container image tag. + - Verify if the container image is built properly. + - If the build fails, analyze the issues and fix them. + ``` + +1. GitHub Copilot의 ![the keep button image](https://img.shields.io/badge/keep-blue) 버튼을 클릭하여 변경사항을 적용하세요. + +1. 빌드가 성공하면, 다음 프롬프트로 컨테이너 이미지를 실행하세요. + + ```text + Use the container image just built, run a container and verify if the app is running properly. + + - Use the host port of `3030`. + ``` + +1. 프론트엔드와 백엔드 앱이 서로를 알지 못하므로 아직 통신하지 않는지 확인하세요. 아래와 같은 프롬프트를 실행하세요. + + ```text + Regardless or not, remove both containers currently running. + ``` + +### 컨테이너 오케스트레이션 + +1. `Claude Sonnet 4` 또는 `GPT-4.1` 모델과 함께 GitHub Copilot 에이전트 모드를 사용하고 있는지 확인하세요. +1. 아래와 같은 프롬프트를 사용하여 Docker Compose 파일을 빌드하세요. + + ```text + I'd like to create a Docker Compose file. Follow the instructions below. + + - Your working directory is the repository root. + - Use `Dockerfile.java` as a backend app. + - Use `Dockerfile.dotnet` as a frontend app. + - Create `compose.yaml` as the Docker Compose file. + - Use `contoso` as the network name. + - Use `contoso-backend` as the container name of the Java app. Its target port is 8080, and host port is 8080. + - Use `contoso-frontend` as the container name of the .NET app. Its target port is 8080, and host port is 3030. + - Mount the volume for the database that the Java app uses, `java/socialapp/sns_api.db`. + ``` + +1. GitHub Copilot의 ![the keep button image](https://img.shields.io/badge/keep-blue) 버튼을 클릭하여 변경사항을 적용하세요. + +1. `compose.yaml` 파일이 생성되면, 실행하고 두 앱이 모두 제대로 실행되는지 확인하세요. + + ```text + Now, run the Docker compose file and verify if the apps are running properly. + ``` + +1. 웹 브라우저를 열고 `http://localhost:3030`으로 이동하여, 앱이 제대로 실행되고 있는지 확인하세요. + --- -좋습니다. "컨테이너화" 단계를 완료했습니다! \ No newline at end of file +축하합니다! 🎉 모든 워크샵 세션을 성공적으로 완료했습니다! \ No newline at end of file From b35ac188f0d7bc3a156c6de6c5826915ad86884a Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Fri, 6 Jun 2025 06:19:43 +0000 Subject: [PATCH 10/10] Complete localization of all English prompts in Korean documentation Co-authored-by: justinyoo <1538528+justinyoo@users.noreply.github.com> --- localisation/ko/docs/02-javascript.md | 48 +++++------ localisation/ko/docs/03-java.md | 80 +++++++++---------- localisation/ko/docs/04-dotnet.md | 74 ++++++++--------- localisation/ko/docs/05-containerization.md | 88 ++++++++++----------- 4 files changed, 145 insertions(+), 145 deletions(-) diff --git a/localisation/ko/docs/02-javascript.md b/localisation/ko/docs/02-javascript.md index b85d69d..133e022 100644 --- a/localisation/ko/docs/02-javascript.md +++ b/localisation/ko/docs/02-javascript.md @@ -70,16 +70,16 @@ JavaScript 개발자로서, Python 백엔드 API 앱과 통신하는 React를 1. 아래와 같은 프롬프트를 사용하여 React 웹 앱 프로젝트를 스캐폴드하세요. ```text - I'd like to scaffold a React web app. Follow the instructions below. + React 웹 앱을 스캐폴드하고 싶습니다. 아래 지침을 따르세요. - - Make sure it's the web app, not the mobile app. - - Your working directory is `javascript`. - - Identify all the steps first, which you're going to do. - - Use ViteJS as the frontend app framework. - - Use default settings when initializing the project. - - Use `SimpleSocialMediaApplication` as the name of the project while initializing. - - Use the port number of `3000`. - - Only initialize the project. DO NOT go further. + - 모바일 앱이 아닌 웹 앱인지 확인하세요. + - 작업 디렉토리는 `javascript`입니다. + - 먼저 수행할 모든 단계를 식별하세요. + - 프론트엔드 앱 프레임워크로 ViteJS를 사용하세요. + - 프로젝트 초기화 시 기본 설정을 사용하세요. + - 초기화할 때 프로젝트 이름으로 `SimpleSocialMediaApplication`을 사용하세요. + - 포트 번호는 `3000`을 사용하세요. + - 프로젝트 초기화만 하세요. 더 이상 진행하지 마세요. ``` 1. GitHub Copilot의 ![the "keep" button image](https://img.shields.io/badge/keep-blue) 버튼을 클릭하여 변경사항을 적용하세요. @@ -107,7 +107,7 @@ JavaScript 개발자로서, Python 백엔드 API 앱과 통신하는 React를 1. FastAPI 백엔드 앱이 실행 중인지 확인하세요. ```text - Run the FastAPI backend API, which is located at the `python` directory. + `python` 디렉토리에 위치한 FastAPI 백엔드 API를 실행하세요. ``` > **참고**: 대신 [`complete/python`](../complete/python/) 샘플 앱을 사용할 수도 있습니다. @@ -123,18 +123,18 @@ JavaScript 개발자로서, Python 백엔드 API 앱과 통신하는 React를 1. 요구사항과 OpenAPI 문서를 기반으로 애플리케이션을 구축하기 위해 아래와 같은 프롬프트를 사용하세요. ```text - I'd like to build a React web app. Follow the instructions below. + React 웹 앱을 구축하고 싶습니다. 아래 지침을 따르세요. - - Your working directory is `javascript`. - - Identify all the steps first, which you're going to do. - - There's a backend API app running on `http://localhost:8000`. - - Use `openapi.yaml` that describes all the endpoints and data schema. - - Use the port number of `3000`. - - Create all the UI components defined in this link: {{FIGMA_SECTION_LINK}}. - - DO NOT add anything not related to the UI components. - - DO NOT add anything not defined in `openapi.yaml`. - - DO NOT modify anything defined in `openapi.yaml`. - - Give visual indication when the backend API is unavailable or unreachable for any reason. + - 작업 디렉토리는 `javascript`입니다. + - 먼저 수행할 모든 단계를 식별하세요. + - `http://localhost:8000`에서 실행 중인 백엔드 API 앱이 있습니다. + - 모든 엔드포인트와 데이터 스키마를 설명하는 `openapi.yaml`을 사용하세요. + - 포트 번호는 `3000`을 사용하세요. + - 이 링크에 정의된 모든 UI 컴포넌트를 생성하세요: {{FIGMA_SECTION_LINK}}. + - UI 컴포넌트와 관련이 없는 것은 추가하지 마세요. + - `openapi.yaml`에 정의되지 않은 것은 추가하지 마세요. + - `openapi.yaml`에 정의된 것을 수정하지 마세요. + - 어떤 이유로든 백엔드 API를 사용할 수 없거나 연결할 수 없을 때 시각적 표시를 제공하세요. ``` 1. 나머지 4개의 Figma 디자인 링크에 대해 4번 더 반복하세요. @@ -145,15 +145,15 @@ JavaScript 개발자로서, Python 백엔드 API 앱과 통신하는 React를 1. FastAPI 백엔드 앱이 실행 중인지 확인하세요. ```text - Run the FastAPI backend API, which is located at the `python` directory. + `python` 디렉토리에 위치한 FastAPI 백엔드 API를 실행하세요. ``` 1. 제대로 빌드되었는지 확인하세요. ```text - Run the React app and verify if the app is properly running. + React 앱을 실행하고 앱이 제대로 실행되는지 확인하세요. - If app running fails, analyze the issues and fix them. + 앱 실행이 실패하면 문제를 분석하고 수정하세요. ``` 1. 웹 브라우저를 열고 `http://localhost:3000`으로 이동하세요. diff --git a/localisation/ko/docs/03-java.md b/localisation/ko/docs/03-java.md index 3fac02e..dede0f7 100644 --- a/localisation/ko/docs/03-java.md +++ b/localisation/ko/docs/03-java.md @@ -74,24 +74,24 @@ Python 개발자가 회사를 떠났기 때문에, 이해관계자들은 기존 1. 아래와 같은 프롬프트를 사용하여 Spring Boot 앱 프로젝트를 스캐폴드하세요. ```text - I'd like to scaffold a Spring Boot app. Follow the instructions below. - - - Use context7. - - Your working directory is `java`. - - Identify all the steps first, which you're going to do. - - Use Spring Boot CLI to create the Spring Boot app project. - - Use Gradle as the Java package manager. - - Use the package name of `com.contoso.socialapp`. - - Use the artifact ID of `socialapp`. - - Use the group ID of `com.contoso`. - - Use the package type of `jar`. - - Use OpenJDK version of `21`. - - Add dependencies - `Spring Web`, `Spring Boot Actuator` and `Lombok`. - - Use the port number of `8080`. - - Make sure to allow CORS from everywhere. - - Build the Spring Boot app and verify if the app is built properly. - - Run this Spring Boot app and verify if the app is running properly. - - If either building or running the app fails, analyze the issues and fix them. + Spring Boot 앱을 스캐폴드하고 싶습니다. 아래 지침을 따르세요. + + - context7을 사용하세요. + - 작업 디렉토리는 `java`입니다. + - 먼저 수행할 모든 단계를 식별하세요. + - Spring Boot CLI를 사용하여 Spring Boot 앱 프로젝트를 생성하세요. + - Java 패키지 매니저로 Gradle을 사용하세요. + - 패키지 이름으로 `com.contoso.socialapp`을 사용하세요. + - artifact ID로 `socialapp`을 사용하세요. + - group ID로 `com.contoso`를 사용하세요. + - 패키지 타입으로 `jar`를 사용하세요. + - OpenJDK 버전 `21`을 사용하세요. + - 의존성 추가 - `Spring Web`, `Spring Boot Actuator`, `Lombok`. + - 포트 번호는 `8080`을 사용하세요. + - 모든 곳에서 CORS를 허용하세요. + - Spring Boot 앱을 빌드하고 앱이 제대로 빌드되는지 확인하세요. + - 이 Spring Boot 앱을 실행하고 앱이 제대로 실행되는지 확인하세요. + - 빌드나 앱 실행이 실패하면 문제를 분석하고 수정하세요. ``` 1. GitHub Copilot의 ![the "keep" button image](https://img.shields.io/badge/keep-blue) 버튼을 클릭하여 변경사항을 적용하세요. @@ -104,34 +104,34 @@ Python 개발자가 회사를 떠났기 때문에, 이해관계자들은 기존 1. 아래와 같은 프롬프트를 사용하여 FastAPI를 Spring Boot로 마이그레이션하세요. ```text - Now, we're migrating the existing FastAPI-based API app to Spring Boot API app. Follow the instructions below for the migration. + 이제 기존 FastAPI 기반 API 앱을 Spring Boot API 앱으로 마이그레이션하겠습니다. 마이그레이션을 위해 아래 지침을 따르세요. - - Use context7. - - The existing FastAPI application is located at `python`. - - Your working directory is `java/socialapp`. - - Identify all the steps first, which you're going to do. - - Analyze the application structure of the existing FastAPI app. - - Migrate all the endpoints. Both corresponding endpoints should be exactly the same as each other. - - Use SQLite as the database. - - Use `sns_api.db` as the name of the SQLite database. - - The database should always be initialized whenever starting the app. - - Use `openapi.yaml` that describes all the endpoints and data schema. - - The API application should render Swagger UI page through a default endpoint. - - The API application should render exactly the same OpenAPI document through a default endpoint. - - DO NOT add anything not defined in `openapi.yaml`. - - DO NOT modify anything defined in `openapi.yaml`. - - If necessary, add more packages for OpenAPI and Swagger UI. + - context7을 사용하세요. + - 기존 FastAPI 애플리케이션은 `python`에 위치합니다. + - 작업 디렉토리는 `java/socialapp`입니다. + - 먼저 수행할 모든 단계를 식별하세요. + - 기존 FastAPI 앱의 애플리케이션 구조를 분석하세요. + - 모든 엔드포인트를 마이그레이션하세요. 두 해당 엔드포인트는 서로 정확히 동일해야 합니다. + - 데이터베이스로 SQLite를 사용하세요. + - SQLite 데이터베이스 이름으로 `sns_api.db`를 사용하세요. + - 앱을 시작할 때마다 데이터베이스가 항상 초기화되어야 합니다. + - 모든 엔드포인트와 데이터 스키마를 설명하는 `openapi.yaml`을 사용하세요. + - API 애플리케이션은 기본 엔드포인트를 통해 Swagger UI 페이지를 렌더링해야 합니다. + - API 애플리케이션은 기본 엔드포인트를 통해 정확히 동일한 OpenAPI 문서를 렌더링해야 합니다. + - `openapi.yaml`에 정의되지 않은 것은 추가하지 마세요. + - `openapi.yaml`에 정의된 것을 수정하지 마세요. + - 필요한 경우 OpenAPI와 Swagger UI를 위한 추가 패키지를 추가하세요. ``` 1. GitHub Copilot의 ![the "keep" button image](https://img.shields.io/badge/keep-blue) 버튼을 클릭하여 변경사항을 적용하세요. 1. 마이그레이션이 완료되면, 아래와 같은 프롬프트를 사용하여 마이그레이션 결과를 확인하세요. ```text - I'd like to build the Spring Boot app. Follow the instructions. + Spring Boot 앱을 빌드하고 싶습니다. 지침을 따르세요. - - Use context7. - - Build the Spring Boot app and verify if the app is built properly. - - If building the app fails, analyze the issues and fix them. + - context7을 사용하세요. + - Spring Boot 앱을 빌드하고 앱이 제대로 빌드되는지 확인하세요. + - 앱 빌드가 실패하면 문제를 분석하고 수정하세요. ``` > **참고**: @@ -146,9 +146,9 @@ Python 개발자가 회사를 떠났기 때문에, 이해관계자들은 기존 1. 애플리케이션이 빌드되면, 제대로 작성되었는지 확인하세요. ```text - Run the Spring Boot app and verify if the app is properly running by checking all the endpoints. Also verify the OpenAPI endpoint renders exactly the same content as `openapi.yaml`. + Spring Boot 앱을 실행하고 모든 엔드포인트를 확인하여 앱이 제대로 실행되는지 확인하세요. 또한 OpenAPI 엔드포인트가 `openapi.yaml`과 정확히 동일한 콘텐츠를 렌더링하는지 확인하세요. - If app running fails, analyze the issues and fix them. Use context7. + 앱 실행이 실패하면 문제를 분석하고 수정하세요. context7을 사용하세요. ``` 1. 웹 브라우저를 열고 `http://localhost:8080`으로 이동하세요. diff --git a/localisation/ko/docs/04-dotnet.md b/localisation/ko/docs/04-dotnet.md index 9a72750..1d1a50d 100644 --- a/localisation/ko/docs/04-dotnet.md +++ b/localisation/ko/docs/04-dotnet.md @@ -68,19 +68,19 @@ Contoso는 다양한 야외 활동 제품을 판매하는 회사입니다. Conto 1. 아래와 같은 프롬프트를 사용하여 Blazor 웹 앱 프로젝트를 스캐폴드하세요. ```text - I'd like to scaffold a Blazor web app. Follow the instructions below. - - - Use context7. - - Your working directory is `dotnet`. - - Identify all the steps first, which you're going to do. - - Show me the list of .NET projects related to Blazor and ask me to choose. - - Generate a Blazor project. - - Use the project name of `Contoso.BlazorApp`. - - Update `launchSettings.json` to change the port number of `3031` for HTTP, `43031` for HTTPS. - - Create a solution, `ContosoWebApp`, and add the Blazor project into this solution. - - Build the Blazor app and verify if the app is built properly. - - Run this Blazor app and verify if the app is running properly. - - If either building or running the app fails, analyze the issues and fix them. + Blazor 웹 앱을 스캐폴드하고 싶습니다. 아래 지침을 따르세요. + + - context7을 사용하세요. + - 작업 디렉토리는 `dotnet`입니다. + - 먼저 수행할 모든 단계를 식별하세요. + - Blazor와 관련된 .NET 프로젝트 목록을 보여주고 선택하도록 요청하세요. + - Blazor 프로젝트를 생성하세요. + - 프로젝트 이름으로 `Contoso.BlazorApp`을 사용하세요. + - HTTP는 `3031`, HTTPS는 `43031` 포트 번호로 변경하도록 `launchSettings.json`을 업데이트하세요. + - `ContosoWebApp` 솔루션을 생성하고 이 솔루션에 Blazor 프로젝트를 추가하세요. + - Blazor 앱을 빌드하고 앱이 제대로 빌드되는지 확인하세요. + - 이 Blazor 앱을 실행하고 앱이 제대로 실행되는지 확인하세요. + - 빌드나 앱 실행이 실패하면 문제를 분석하고 수정하세요. ``` 1. GitHub Copilot의 ![the keep button image](https://img.shields.io/badge/keep-blue) 버튼을 클릭하여 변경사항을 적용하세요. @@ -90,7 +90,7 @@ Contoso는 다양한 야외 활동 제품을 판매하는 회사입니다. Conto 1. Spring Boot 백엔드 앱이 실행 중인지 확인하세요. ```text - Run the Spring Boot backend API, which is located at the `java` directory. + `java` 디렉토리에 위치한 Spring Boot 백엔드 API를 실행하세요. ``` > **참고**: 대신 [`complete/java`](../complete/java/) 샘플 앱을 사용할 수도 있습니다. @@ -104,28 +104,28 @@ Contoso는 다양한 야외 활동 제품을 판매하는 회사입니다. Conto 1. 아래와 같은 프롬프트를 사용하여 React를 Blazor로 마이그레이션하세요. ```text - Now, we're migrating the existing React-based web app to Blazor web app. Follow the instructions below for the migration. + 이제 기존 React 기반 웹 앱을 Blazor 웹 앱으로 마이그레이션하겠습니다. 마이그레이션을 위해 아래 지침을 따르세요. - - Use context7. - - The existing React application is located at `javascript`. - - Your working directory is `dotnet/Contoso.BlazorApp`. - - Identify all the steps first, which you're going to do. - - There's a backend API app running on `http://localhost:8080`. - - Analyze the application structure of the existing React app. - - Migrate all the React components to Blazor ones. Both corresponding components should be as exactly close to each other as possible. - - Migrate all necessary CSS elements from React to Blazor. - - While migrating JavaScript elements from React to Blazor, maximize using Blazor's native features as much as possible. If you have to use JavaScript, use Blazor's JSInterop features. - - If necessary, add NuGet packages that are compatible with .NET 9. + - context7을 사용하세요. + - 기존 React 애플리케이션은 `javascript`에 위치합니다. + - 작업 디렉토리는 `dotnet/Contoso.BlazorApp`입니다. + - 먼저 수행할 모든 단계를 식별하세요. + - `http://localhost:8080`에서 실행 중인 백엔드 API 앱이 있습니다. + - 기존 React 앱의 애플리케이션 구조를 분석하세요. + - 모든 React 컴포넌트를 Blazor 컴포넌트로 마이그레이션하세요. 두 해당 컴포넌트는 서로 최대한 정확히 유사해야 합니다. + - React에서 Blazor로 필요한 모든 CSS 요소를 마이그레이션하세요. + - React에서 Blazor로 JavaScript 요소를 마이그레이션하는 동안 Blazor의 네이티브 기능을 최대한 활용하세요. JavaScript를 사용해야 하는 경우 Blazor의 JSInterop 기능을 사용하세요. + - 필요한 경우 .NET 9와 호환되는 NuGet 패키지를 추가하세요. ``` 1. 마이그레이션이 완료되면, 아래와 같은 프롬프트를 사용하여 마이그레이션 결과를 확인하세요. ```text - I'd like to build the Blazor app. Follow the instructions. + Blazor 앱을 빌드하고 싶습니다. 지침을 따르세요. - - Use context7. - - Build the Blazor app and verify if the app is built properly. - - If building the app fails, analyze the issues and fix them. + - context7을 사용하세요. + - Blazor 앱을 빌드하고 앱이 제대로 빌드되는지 확인하세요. + - 앱 빌드가 실패하면 문제를 분석하고 수정하세요. ``` > **참고**: @@ -137,12 +137,12 @@ Contoso는 다양한 야외 활동 제품을 판매하는 회사입니다. Conto 1. 빌드가 성공하면, 아래와 같은 프롬프트를 사용하여 마이그레이션 결과를 확인하세요. ```text - I'd like to run the Blazor app. Follow the instructions. + Blazor 앱을 실행하고 싶습니다. 지침을 따르세요. - - Use context7. - - Run this Blazor app and verify if the app is running properly. - - Ignore backend API app connection error at this stage. - - If running the app fails, analyze the issues and fix them. + - context7을 사용하세요. + - 이 Blazor 앱을 실행하고 앱이 제대로 실행되는지 확인하세요. + - 이 단계에서는 백엔드 API 앱 연결 오류를 무시하세요. + - 앱 실행이 실패하면 문제를 분석하고 수정하세요. ``` ### Blazor 프론트엔드 앱 검증 @@ -150,16 +150,16 @@ Contoso는 다양한 야외 활동 제품을 판매하는 회사입니다. Conto 1. Spring Boot 백엔드 앱이 실행 중인지 확인하세요. ```text - Run the Spring Boot backend API, which is located at the `java` directory. + `java` 디렉토리에 위치한 Spring Boot 백엔드 API를 실행하세요. ``` 1. GitHub Copilot의 ![the keep button image](https://img.shields.io/badge/keep-blue) 버튼을 클릭하여 변경사항을 적용하세요. 1. 제대로 빌드되었는지 확인하세요. ```text - Run the Blazor app and verify if the app is properly running. + Blazor 앱을 실행하고 앱이 제대로 실행되는지 확인하세요. - If app running fails, analyze the issues and fix them. + 앱 실행이 실패하면 문제를 분석하고 수정하세요. ``` 1. 웹 브라우저를 열고 `http://localhost:3031`로 이동하세요. diff --git a/localisation/ko/docs/05-containerization.md b/localisation/ko/docs/05-containerization.md index 3d5dd1a..d872429 100644 --- a/localisation/ko/docs/05-containerization.md +++ b/localisation/ko/docs/05-containerization.md @@ -68,16 +68,16 @@ Contoso는 다양한 야외 활동 제품을 판매하는 회사입니다. Conto 1. 아래와 같은 프롬프트를 사용하여 Java 앱의 컨테이너 이미지를 빌드하세요. ```text - I'd like to build a container image of a Java app. Follow the instructions below. - - - The Java app is located at `java`. - - Your working directory is the repository root. - - Identify all the steps first, which you're going to do. - - Create a Dockerfile, `Dockerfile.java`. - - Use Microsoft OpenJDK 21. - - Use multi-stage build approach. - - Extract JRE from JDK. - - Use the target port number of `8080` for the container image. + Java 앱의 컨테이너 이미지를 빌드하고 싶습니다. 아래 지침을 따르세요. + + - Java 앱은 `java`에 위치합니다. + - 작업 디렉토리는 저장소 루트입니다. + - 먼저 수행할 모든 단계를 식별하세요. + - `Dockerfile.java` Dockerfile을 생성하세요. + - Microsoft OpenJDK 21을 사용하세요. + - 멀티 스테이지 빌드 방식을 사용하세요. + - JDK에서 JRE를 추출하세요. + - 컨테이너 이미지의 대상 포트 번호로 `8080`을 사용하세요. ``` 1. GitHub Copilot의 ![the keep button image](https://img.shields.io/badge/keep-blue) 버튼을 클릭하여 변경사항을 적용하세요. @@ -85,12 +85,12 @@ Contoso는 다양한 야외 활동 제품을 판매하는 회사입니다. Conto 1. `Dockerfile.java`가 생성되면, 다음 프롬프트로 컨테이너 이미지를 빌드하세요. ```text - Use `Dockerfile.java` and build a container image. + `Dockerfile.java`를 사용하여 컨테이너 이미지를 빌드하세요. - - Use `contoso-backend` as the container image name. - - Use `latest` as the container image tag. - - Verify if the container image is built properly. - - If the build fails, analyze the issues and fix them. + - 컨테이너 이미지 이름으로 `contoso-backend`를 사용하세요. + - 컨테이너 이미지 태그로 `latest`를 사용하세요. + - 컨테이너 이미지가 제대로 빌드되는지 확인하세요. + - 빌드가 실패하면 문제를 분석하고 수정하세요. ``` 1. GitHub Copilot의 ![the keep button image](https://img.shields.io/badge/keep-blue) 버튼을 클릭하여 변경사항을 적용하세요. @@ -98,9 +98,9 @@ Contoso는 다양한 야외 활동 제품을 판매하는 회사입니다. Conto 1. 빌드가 성공하면, 다음 프롬프트로 컨테이너 이미지를 실행하세요. ```text - Use the container image just built, run a container and verify if the app is running properly. + 방금 빌드한 컨테이너 이미지를 사용하여 컨테이너를 실행하고 앱이 제대로 실행되는지 확인하세요. - - Use the host port of `8080`. + - 호스트 포트로 `8080`을 사용하세요. ``` ### .NET 애플리케이션 컨테이너화 @@ -109,15 +109,15 @@ Contoso는 다양한 야외 활동 제품을 판매하는 회사입니다. Conto 1. 아래와 같은 프롬프트를 사용하여 .NET 앱의 컨테이너 이미지를 빌드하세요. ```text - I'd like to build a container image of a .NET app. Follow the instructions below. - - - The .NET app is located at `dotnet`. - - Your working directory is the repository root. - - Identify all the steps first, which you're going to do. - - Create a Dockerfile, `Dockerfile.dotnet`. - - Use .NET 9. - - Use multi-stage build approach. - - Use the target port number of `8080` for the container image. + .NET 앱의 컨테이너 이미지를 빌드하고 싶습니다. 아래 지침을 따르세요. + + - .NET 앱은 `dotnet`에 위치합니다. + - 작업 디렉토리는 저장소 루트입니다. + - 먼저 수행할 모든 단계를 식별하세요. + - `Dockerfile.dotnet` Dockerfile을 생성하세요. + - .NET 9를 사용하세요. + - 멀티 스테이지 빌드 방식을 사용하세요. + - 컨테이너 이미지의 대상 포트 번호로 `8080`을 사용하세요. ``` 1. GitHub Copilot의 ![the keep button image](https://img.shields.io/badge/keep-blue) 버튼을 클릭하여 변경사항을 적용하세요. @@ -125,12 +125,12 @@ Contoso는 다양한 야외 활동 제품을 판매하는 회사입니다. Conto 1. `Dockerfile.dotnet`이 생성되면, 다음 프롬프트로 컨테이너 이미지를 빌드하세요. ```text - Use `Dockerfile.dotnet` and build a container image. + `Dockerfile.dotnet`을 사용하여 컨테이너 이미지를 빌드하세요. - - Use `contoso-frontend` as the container image name. - - Use `latest` as the container image tag. - - Verify if the container image is built properly. - - If the build fails, analyze the issues and fix them. + - 컨테이너 이미지 이름으로 `contoso-frontend`를 사용하세요. + - 컨테이너 이미지 태그로 `latest`를 사용하세요. + - 컨테이너 이미지가 제대로 빌드되는지 확인하세요. + - 빌드가 실패하면 문제를 분석하고 수정하세요. ``` 1. GitHub Copilot의 ![the keep button image](https://img.shields.io/badge/keep-blue) 버튼을 클릭하여 변경사항을 적용하세요. @@ -138,15 +138,15 @@ Contoso는 다양한 야외 활동 제품을 판매하는 회사입니다. Conto 1. 빌드가 성공하면, 다음 프롬프트로 컨테이너 이미지를 실행하세요. ```text - Use the container image just built, run a container and verify if the app is running properly. + 방금 빌드한 컨테이너 이미지를 사용하여 컨테이너를 실행하고 앱이 제대로 실행되는지 확인하세요. - - Use the host port of `3030`. + - 호스트 포트로 `3030`을 사용하세요. ``` 1. 프론트엔드와 백엔드 앱이 서로를 알지 못하므로 아직 통신하지 않는지 확인하세요. 아래와 같은 프롬프트를 실행하세요. ```text - Regardless or not, remove both containers currently running. + 상관없이 현재 실행 중인 두 컨테이너를 모두 제거하세요. ``` ### 컨테이너 오케스트레이션 @@ -155,16 +155,16 @@ Contoso는 다양한 야외 활동 제품을 판매하는 회사입니다. Conto 1. 아래와 같은 프롬프트를 사용하여 Docker Compose 파일을 빌드하세요. ```text - I'd like to create a Docker Compose file. Follow the instructions below. + Docker Compose 파일을 생성하고 싶습니다. 아래 지침을 따르세요. - - Your working directory is the repository root. - - Use `Dockerfile.java` as a backend app. - - Use `Dockerfile.dotnet` as a frontend app. - - Create `compose.yaml` as the Docker Compose file. - - Use `contoso` as the network name. - - Use `contoso-backend` as the container name of the Java app. Its target port is 8080, and host port is 8080. - - Use `contoso-frontend` as the container name of the .NET app. Its target port is 8080, and host port is 3030. - - Mount the volume for the database that the Java app uses, `java/socialapp/sns_api.db`. + - 작업 디렉토리는 저장소 루트입니다. + - 백엔드 앱으로 `Dockerfile.java`를 사용하세요. + - 프론트엔드 앱으로 `Dockerfile.dotnet`을 사용하세요. + - Docker Compose 파일로 `compose.yaml`을 생성하세요. + - 네트워크 이름으로 `contoso`를 사용하세요. + - Java 앱의 컨테이너 이름으로 `contoso-backend`를 사용하세요. 대상 포트는 8080이고 호스트 포트는 8080입니다. + - .NET 앱의 컨테이너 이름으로 `contoso-frontend`를 사용하세요. 대상 포트는 8080이고 호스트 포트는 3030입니다. + - Java 앱이 사용하는 데이터베이스 `java/socialapp/sns_api.db`의 볼륨을 마운트하세요. ``` 1. GitHub Copilot의 ![the keep button image](https://img.shields.io/badge/keep-blue) 버튼을 클릭하여 변경사항을 적용하세요. @@ -172,7 +172,7 @@ Contoso는 다양한 야외 활동 제품을 판매하는 회사입니다. Conto 1. `compose.yaml` 파일이 생성되면, 실행하고 두 앱이 모두 제대로 실행되는지 확인하세요. ```text - Now, run the Docker compose file and verify if the apps are running properly. + 이제 Docker compose 파일을 실행하고 앱들이 제대로 실행되는지 확인하세요. ``` 1. 웹 브라우저를 열고 `http://localhost:3030`으로 이동하여, 앱이 제대로 실행되고 있는지 확인하세요.