IDE(Integrated Development Environment)

쉬운 설명

AI가 “src 폴더의 App 파일을 수정한 뒤 실행해 보세요”라고 하면, 파일은 어디서 찾고 실행은 어디서 해야 할지 막막할 수 있어요. IDE에서는 프로젝트의 파일을 찾고, 코드를 고치고, 실행 결과를 한곳에서 확인할 수 있어요. AI가 코드를 대신 써 주더라도 어떤 파일이 바뀌었는지 살펴볼 때 이 화면을 사용하게 돼요.

export default function App() {
  return (
    <button>신청하기</button>
  );
}

실제로는 이렇게 만나요

스터디 신청 버튼의 문구를 바꾸는 상황이라면, AI가 알려 준 파일을 목록에서 열어 수정 내용을 확인합니다. 파일을 저장하고 안내된 방식으로 앱을 실행한 다음 브라우저에서 바뀐 문구를 확인합니다.

• 이런 거 할 때 나와요 스터디 안내에서 “IDE로 프로젝트를 열어 주세요”라고 하거나 AI가 특정 파일 수정을 요청할 때 만납니다.
• 이렇게 생겼어요 프로젝트 파일 목록, 파일 내용을 수정하는 편집기, 실행 결과나 오류를 확인하는 패널이 함께 보입니다.
• 나오는 화면 예시 프로젝트 폴더를 연 개발 도구의 파일 목록과 편집 화면

헷갈리기 쉬운 점

이름이 같은 프로젝트 폴더를 여러 개 열어 두면 다른 사본을 수정할 수 있습니다. 실행 중인 프로젝트와 편집 중인 폴더가 같은지 확인합니다.

왜 알아두면 좋을까요?

AI에게 맡긴 작업의 결과를 직접 확인하려면 수정된 파일과 실행 결과를 찾아야 합니다. 화면의 역할을 구분하면 필요한 부분을 찾아 질문할 수 있습니다.

공식 문서로 더 알아보기

• VS Code 공식 문서: 화면 구성