친절한 영상으로 지난 온라인 수업 내용을 복습하였습니다.
MCP 앱, MCP 클라우드, 서버라는 단어들은 노트에 적어가며 이해해보려 애썼지만
여전히 생소하고, 어렵습니다. 스터디장님의 세심한 안내로 저번 수업 내용을 대충 학습하게 되었습니다.
GitHub에 가입하고 Context7을 설치하며 챗팅을 하던 중 엉겹결에 ‘Todo 앱’이라는 것을 만들게 되었습니다. 무엇을 클릭했는지조차 정확히 기억나지 않지만, 어쨌든 챗GPT의 도움을 받아가며 앱을 완성하게 되었습니다.
아래는 챗지피티의 도움을 빌러 작성한 앱 설치 과정과 시행착오입니다.
1. 프로젝트 만들기... 그런데 Vite가 뭔가요?
React 앱을 만들기 위해 터미널에 아래 명령어를 입력하려 했습니다.
bash복사편집
npm run dev
그런데 돌아온 메시지는 다음과 같았습니다.
"현재 package.json에는 'dev' 스크립트가 없어서 npm run dev 명령어가 실행되지 않습니다."
그래서 챗GPT에게 이렇게 물어봤습니다:
“이 프로젝트가 Vite 기반인지 확인해줘.”
그리고 이런 답변을 받았습니다:
프로젝트 내에 Vite 설정 파일(vite.config.js 등)이나 package.json의 vite 관련 의존성이 전혀 없습니다.
즉, 이 프로젝트는 현재 Vite 기반이 아닙니다.
따라서 개발 서버를 직접 설정해야 합니다.
가장 추천하는 방법은 Vite를 사용하는 것입니다.
그래서 제안대로 다음 명령어를 입력했습니다:
bash복사편집
npm install vite --save-dev
그리고 package.json에 아래 코드를 추가해 개발 서버를 등록했습니다:
json복사편집
"scripts": { "dev": "vite" }
이제서야 npm run dev 명령어로 개발 서버를 실행할 수 있었습니다.
2. 터미널? 명령어? 이름 바꾸기? 모두 혼돈
여기서 정말 많은 시행착오가 있었습니다.
명령어를 터미널이 아닌 챗GPT 창에 입력
파일 이름을 바꿀 때는 반드시 우클릭 → Rename을 해야 하는데,
그냥 덮어쓰기만 해서 경로 인식이 안 됨App.jsx에서 코드 작성 중 오타 발생:
js복사편집
import R { useState } from 'react'; // ❌ 잘못된 코드
정답은 아래와 같았습니다:
js복사편집
import React, { useState } from 'react';
3. index.html도 문제였다
React 앱이 브라우저에 뜨지 않아서 당황했는데,
원인은 index.html에 있었습니다.
html복사편집
<!-- 아래처럼 script 태그가 남아 있으면 안 됨 --> <script type="module" src="/src/main.jsx"></script>
위 코드는 삭제하고, 아래처럼 div만 남기면 됩니다:
html복사편집
<div id="root"></div>
Vite는 자동으로 main.jsx를 연결하기 때문에 script 태그는 필요 없습니다.
4. App.jsx 최종 코드 (작동하는 Todo 앱)
수많은 시행착오 끝에, 아래와 같은 코드로 React Todo 앱을 완성했습니다:
jsx복사편집
import React, { useState } from 'react'; export default function TodoList() { const [text, setText] = useState(''); const [todos, setTodos] = useState([]); const addTodo = () => { if (text.trim()) { setTodos([...todos, text]); setText(''); } }; return ( <> <h1>Todo List</h1> <input value={text} onChange={e => setText(e.target.value)} /> <button onClick={addTodo}>Add</button> <ul> {todos.map((todo, i) => ( <li key={i}>{todo}</li> ))} </ul> </> ); }
이 코드를 실행한 후 http://localhost:5173 (또는 자동 배정된 포트)로 접속하면
정상적으로 할 일을 입력하고 추가하는 기능이 작동했습니다.
중간에 오류가 자꾸 생겨서 시간을 많이 소비했습니다.
챗GPT가 이미 했던 작업을 자꾸 반복하라고 해서 답답했고, 그만둘까하는 생각도 여러 번 들었습니다. 하지만 과제는 제출해야 했고, 사례글도 완성해야 했기에 억지로 참으며 계속했습니다.
파일 이름을 바꾸고, 코드를 지시에 따라 몇 번이고 고쳐보았고, 크롬 창을 열었다 닫았다 하며 결과를 확인하고 또 확인했습니다.
그렇게 몇 시간을 끙끙대며 보내고 나서야 브라우저 화면에 Todo 앱이 뜨는 모습을 보고, 조금은 뿌듯한 마음이 들었습니다.돌이켜보면, 이건 단순히 앱 하나를 만든 경험이 아니라 컴퓨터와 코드 언어로 대화하는 법을 배워가는 과정이었습니다.