# 02: JavaScript 앱 개발

## 시나리오

Contoso 아웃도어 컴파니의 마케팅 팀에서는 제품 홍보를 위한 마이크로 소셜 미디어 웹사이트를 빠르게 론칭하고 싶어 합니다. 개발팀의 JavaScript 개발자인 당신은 GitHub Codespaces 안에서 GitHub Copilot을 이용해 간단한 프론트엔드 웹 UI를 React 기반으로 만들어 달라는 요청을 받았습니다.

## 사전 준비사항

[README](../README.md) 문서를 참조하여 개발 환경을 준비합니다.

## 순서

- [개발 과정 프롬프트](#개발-과정-프롬프트)
  - [React 앱 프로젝트 준비](#react-앱-프로젝트-준비)
  - [React 앱 프로젝트 구축](#react-앱-프로젝트-구축)

## 개발 과정 프롬프트

### React 앱 프로젝트 준비

1. GitHub Copilot이 현재 에이전트모드인지 확인합니다. 모델은 `Claude 3.7 Sonnet`을 선택하세요.

1. React 앱을 스캐폴딩(프로젝트 기본 구조 자동 생성)합니다. 아래와 같은 프롬프트를 이용해 보세요.

    ```text
    `javascript` 폴더 안에 React를 사용한 프론트엔드 앱을 구성하려합니다. 패키지매니저는 `npm`, 빌드 툴은 `vite`, 언어는 JavaScript를 사용할 예정이고 AI를 사용한 빠른 마크업 개발을 위해 CSS 프레임워크론 Tailwind CSS를 사용할 예정입니다. 새로운 폴더를 만들지 말고 `javascript` 폴더에 React 앱 스캐폴딩을 시작해주세요.
    ```

1. 스캐폴딩이 잘 마무리 되었는지 확인합니다.

    ```text
    React 개발 서버를 실행해 애플리케이션이 잘 작동하는지 확인해주세요.
    ```

1. 프로젝트에 필요한 `.gitignore` 파일을 추가합니다.

    ```text
    `.gitignore`같은 필수 파일이 빠져있으니 추가해주세요.
    ```

### React 앱 프로젝트 구축

1. 이제 Contoso 아웃도어 컴파니의 제품 홍보를 위한 마이크로 소셜 미디어 웹사이트의 기능을 구현합니다. 백엔드와 연동 전 먼저 UI 작업을 시작합니다. (API 스키마를 컨택스트로 주입)

    ```text
    백엔드 개발자에게 전달받은 API 스키마 정보를 바탕으로 구현 가능한 기능을 스스로 판단하여 UI를 먼저 구현해주세요. 반응형 디자인으로 모바일과 데스크탑 모두를 지원해야하고, TailwindCSS를 활용해 깔끔하고 현대적인 UI를 구현해주세요.

    모든 작업은 `javascript`폴더 안에서 진행되어야 합니다.
    ```

2. 백엔드 port 정보를 받아 실제 백엔드 연동을 진행합니다.

    ```text
    백엔드 엔지니어에게 받은 포트 번호는 `8000`이야. 우리는 모노레포로 작업중이니까 포트번호만 변경해서 실제 연동을 진행해줘. 
    ```

---

축하합니다! **JavaScript 앱 개발** 실습이 끝났습니다. 이제 [STEP 03: Java 앱 개발](./03-java.md) 단계로 넘어가세요.