Contoso 아웃도어 컴파니의 마케팅 팀에서는 제품 홍보를 위한 마이크로 소셜 미디어 웹사이트를 빠르게 론칭하고 싶어 합니다. 개발팀의 JavaScript 개발자인 당신은 GitHub Codespaces 안에서 GitHub Copilot을 이용해 간단한 프론트엔드 웹 UI를 React 기반으로 만들어 달라는 요청을 받았습니다.
README 문서를 참조하여 개발 환경을 준비합니다.
-
GitHub Copilot이 현재 에이전트모드인지 확인합니다. 모델은
Claude 3.7 Sonnet을 선택하세요. -
React 앱을 스캐폴딩(프로젝트 기본 구조 자동 생성)합니다. 아래와 같은 프롬프트를 이용해 보세요.
`javascript` 폴더 안에 React를 사용한 프론트엔드 앱을 구성하려합니다. 패키지매니저는 `npm`, 빌드 툴은 `vite`, 언어는 JavaScript를 사용할 예정이고 AI를 사용한 빠른 마크업 개발을 위해 CSS 프레임워크론 Tailwind CSS를 사용할 예정입니다. 새로운 폴더를 만들지 말고 `javascript` 폴더에 React 앱 스캐폴딩을 시작해주세요. -
스캐폴딩이 잘 마무리 되었는지 확인합니다.
React 개발 서버를 실행해 애플리케이션이 잘 작동하는지 확인해주세요. -
프로젝트에 필요한
.gitignore파일을 추가합니다.`.gitignore`같은 필수 파일이 빠져있으니 추가해주세요.
-
이제 Contoso 아웃도어 컴파니의 제품 홍보를 위한 마이크로 소셜 미디어 웹사이트의 기능을 구현합니다. 백엔드와 연동 전 먼저 UI 작업을 시작합니다. (API 스키마를 컨택스트로 주입)
백엔드 개발자에게 전달받은 API 스키마 정보를 바탕으로 구현 가능한 기능을 스스로 판단하여 UI를 먼저 구현해주세요. 반응형 디자인으로 모바일과 데스크탑 모두를 지원해야하고, TailwindCSS를 활용해 깔끔하고 현대적인 UI를 구현해주세요. 모든 작업은 `javascript`폴더 안에서 진행되어야 합니다. -
백엔드 port 정보를 받아 실제 백엔드 연동을 진행합니다.
백엔드 엔지니어에게 받은 포트 번호는 `8000`이야. 우리는 모노레포로 작업중이니까 포트번호만 변경해서 실제 연동을 진행해줘.
축하합니다! JavaScript 앱 개발 실습이 끝났습니다. 이제 STEP 03: Java 앱 개발 단계로 넘어가세요.