코드 탭에서 앱 코드 읽고 편집하기
핵심 요약코드 탭에는 앱의 모든 파일이 폴더 트리로 나오고, 옆에 편집기가 있습니다. 파일을 클릭해 읽고, 입력해서 고치고, 저장(또는 ⌘S / Ctrl+S)을 누르세요. 저장할 때마다 돌아갈 수 있는 버전이 됩니다. 앱은 TanStack Start, React, TypeScript로 만들어집니다. 코드는 내 것입니다. 프로젝트 설정 → 내보내기에서 다운로드하거나 GitHub에 보관하세요.
코드를 열어 볼 필요는 전혀 없습니다. MonstarX가 대신 쓰고 고치기 때문입니다. 하지만 직접 보거나 함께 일하는 개발자가 보고 싶을 때를 위해 모든 코드가 그대로 공개되어 있습니다. 코드 탭에는 앱의 모든 파일이 나오고, 직접 고칠 수도 있습니다.
코드 탭에는 무엇이 나오나요?
섹션 제목: “코드 탭에는 무엇이 나오나요?”왼쪽에는 앱의 모든 파일이 담긴 폴더 트리가, 오른쪽에는 고른 파일이 코드 색상과 줄 번호와 함께 나옵니다.
휴대폰에서는 위쪽의 파일 이름을 탭하면 트리가 시트로 열립니다.
무엇이 어디에 있나요?
섹션 제목: “무엇이 어디에 있나요?”몰라도 되지만, 코드를 따라 읽을 때 도움이 됩니다.
| 폴더 또는 파일 | 들어 있는 것 |
|---|---|
src/routes/ | 페이지마다 파일 하나. index.tsx는 홈페이지, pricing.tsx는 /pricing입니다. |
src/components/ | 헤더와 푸터처럼 여러 페이지에서 쓰는 부품 |
src/server/ | 서버에서 실행되는 코드. 예약 저장, 시간표 읽기 등 |
src/db/ | 앱 데이터의 구조 |
migrations/ | 데이터베이스 테이블을 만들고 바꾸는 단계 |
public/ | 아이콘처럼 그대로 제공되는 파일 |
src/styles.css | 색상, 글꼴 등 스타일 |
내 앱은 어떤 기술로 만들어지나요?
섹션 제목: “내 앱은 어떤 기술로 만들어지나요?”MonstarX가 만드는 앱은 다음 기술로 만든 최신 웹 앱입니다.
- TypeScript: 앱이 실행되기 전에 실수를 잡아 주는 검사 기능이 더해진 JavaScript입니다.
- React: 웹 화면을 만드는 데 가장 널리 쓰이는 방식입니다.
- TanStack Start: React 페이지를 서버가 있는 완전한 앱으로 만들어 주는 프레임워크입니다. 페이지가 빨리 열리고 데이터는 서버에 안전하게 보관됩니다.
- Tailwind CSS: 색상, 여백, 레이아웃을 위한 스타일 도구입니다.
프로젝트 페이지의 카드에도 TanStack Start · React · TypeScript처럼 표시됩니다. 가져온 앱은 원래 쓰던 기술을 그대로 유지합니다.
파일은 어떻게 직접 편집하나요?
섹션 제목: “파일은 어떻게 직접 편집하나요?”-
코드 탭을 열고 트리에서 파일을 클릭하세요.
-
편집기를 클릭하고 내용을 고치세요. 위쪽에 저장되지 않음이 나타나고, 버리기와 저장 버튼이 생깁니다.
-
저장을 클릭하거나 ⌘S(Mac) 또는 Ctrl+S(Windows)를 누르세요. 미리보기가 바로 업데이트됩니다.
저장할 때마다 파일 경로 뒤에 ‘편집’이 붙은 이름(예: ‘src/routes/schedule.tsx 편집’)으로 버전이 남으므로, 잘못되면 되돌아갈 수 있습니다. 프로젝트가 GitHub에 연결되어 있고 자동 푸시가 켜져 있으면(기본값) 변경 사항이 GitHub에도 푸시됩니다. MonstarX는 다음에 요청을 보낼 때 내가 고친 내용을 확인합니다.
버리기를 누르면 저장하지 않은 변경 사항이 사라집니다.
편집할 수 없을 때는 언제인가요?
섹션 제목: “편집할 수 없을 때는 언제인가요?”- MonstarX가 앱을 수정하는 동안: 작업이 끝날 때까지 파일은 읽기 전용입니다. ‘MonstarX가 앱을 수정하고 있습니다. 작업이 끝날 때까지 파일은 읽기 전용입니다.’라고 표시됩니다.
- 편집을 시작한 뒤 파일이 바뀌었을 때: 그사이 MonstarX나 다른 사람이 파일을 저장했다면 ‘편집을 시작한 후 이 파일이 변경되었습니다.’라는 문구가 나오고 저장이 비활성화됩니다. 작성 중인 내용은 직접 버릴 때까지 남아 있으므로, 비교한 뒤 버리고 다시 고치면 됩니다.
- MonstarX가 관리하는 파일: MonstarX가 만드는 앱에서 설정 파일(
package.json, Vite·TypeScript 설정 등)과 계정, 데이터베이스, 이메일, 파일 저장소, AI용 기본 서비스는 MonstarX가 관리합니다. 트리에는 없지만, 내보내기로 받는 zip 파일에는 들어 있습니다. - 보기 전용 권한: 보기 및 댓글 가능 권한으로 프로젝트를 공유받은 사람에게는 ‘보기 전용: 코드를 읽을 수 있지만 수정할 수 없습니다.’라고 나옵니다. 편집 가능 권한이 있는 사람은 나처럼 파일을 편집하고 저장할 수 있습니다.
코드를 다운로드할 수 있나요?
섹션 제목: “코드를 다운로드할 수 있나요?”네. 코드는 내 것입니다. MonstarX로 만든 것은 MonstarX가 쓴 코드를 포함해 모두 내 소유입니다. 코드를 가져가는 방법은 두 가지입니다.
- zip으로 다운로드: 작업 공간의 설정내보내기에서 .zip 다운로드를 누르세요. 내 컴퓨터에서 실행되는 독립 프로젝트를 받습니다. 앱 내보내기를 참고하세요.
- GitHub에 보관: 저장소를 연결하면 모든 변경 사항이 커밋이 됩니다. GitHub을 참고하세요.
자주 묻는 질문
섹션 제목: “자주 묻는 질문”MonstarX를 쓰려면 코딩을 할 줄 알아야 하나요?
아니요. 코드 탭은 보고 싶을 때를 위해 있는 것입니다. 모든 일은 대화창에서 원하는 것을 설명하는 것만으로 할 수 있습니다.
내가 고친 내용을 MonstarX가 되돌리나요?
아니요. 다음 요청을 보낼 때 내가 고친 내용을 포함해 파일을 있는 그대로 읽습니다. 왜 고쳤는지 알려 주고 싶다면 대화창에 적어 주세요.
코드 탭에서 새 파일을 추가할 수 있나요?
코드 탭은 기존 파일만 편집합니다. 새 페이지나 파일은 대화창에서 MonstarX에게 만들어 달라고 요청하세요.
패키지나 라이브러리는 어떻게 추가하나요?
대화창에서 요청하세요. 예: “예약 양식에 날짜 선택 라이브러리를 써 주세요”. MonstarX가 패키지를 추가합니다.
MonstarX가 쓴 코드는 누구의 소유인가요?
내 소유입니다. MonstarX 이용약관에 따라 프롬프트, 파일, 코드, 앱은 모두 사용자의 소유이며, 언제든 내보낼 수 있습니다.