바이브 코딩 어떻게 하는건가요?

바이브코딩을 어떻게 시작할지 모르는 사람들을 위해 글을 남깁니다. 

 

회사에 들어갔는데 이사님이 제 옆에 와서 물어보더라구요.

바이브코딩이 뭐냐고 

바이브코딩은 뭐 AI가 만들어 주는 코딩을 토대로 코딩을 하는 것 뿐입니다. 

 

그럼 시작을 하기에 앞서 무료로 사용하는 툴 위주로 알려드릴게요.

일단 코딩을 할려면 기본적으로 컴퓨터는 다룰줄 알아야 합니다. 

 

https://code.visualstudio.com/ 

Visual Studio Code - Code Editing. Redefined

 

 일단 여기서 비주얼스튜디오 코드를 설치하세요.

 

그냥 다음다음 눌러주시고 설치하시면 됩니다.

 

 

아 영어라서 당황스럽죠?

처음 뜨는거 무시하고 컨트롤키+쉬프트키+X키를 동시에 눌러 확장탭을 엽시다.

 

그럼 왼쪽에 이런 탭이 생깁니다. 

그럼 왼쪽 EXTENSIONS 밑의 검색창에 한국어를 입력하면

 

한국어 랭귀지팩이 나오는데요 이걸 인스톨 해줍시다. 

 

 

저기 버튼을 눌러 재시작을 해줍니다.

한국어가 나오니 보기 편해졌을거에요.

기본적으로 코파일럿이 깔려있지만 우린 무료인 제미나이를 써볼겁니다.

다시 확장탭을 열어서 gemini code를 입력해서 설치해 주세요.

그럼 왼쪽에 저렇게 나올건데요. sign in을 눌러 구글계정과 연동합시다.

 

 

한국어로 진행해줘 하면 한국어로 진행을 합니다. 

제미나이무료는 개인정보보호법에 따라 현재 진행상태를 저장하지 않기때문에 이점 알고서 사용하세요. 

 

 

저는 일단 리액트로 웹페이지를 만들어 보고싶어 나의할일을 만들어 볼까? 

라고 치니까 저렇게 막 말을 합니다. 

근데 

3. 실행하기

이제 터미널에서 npm start 또는 yarn start 명령어를 실행하면 브라우저에 방금 만든 '나의 할 일' 앱이 나타날 것입니다.

이 예제를 통해 React의 가장 중요한 개념인 컴포넌트(Component), 상태(State), 속성(Props), 그리고 **이벤트 처리(Event Handling)**에 대해 경험해보실 수 있습니다.

이제 직접 코드를 수정해보면서 기능을 추가해보세요! 예를 들어, 할 일 수정 기능이나 로컬 저장소(localStorage)를 이용해 데이터가 새로고침해도 사라지지 않게 만드는 기능을 구현해볼 수 있습니다.

궁금한 점이 있다면 언제든지 다시 질문해주세요!

 

이렇게 말을 해요

npm start가 뭔지 모르겠죠?

 

• npm (Node Package Manager) npm은 Node.js의 기본 패키지 관리자입니다. React 같은 라이브러리나 다른 개발자들이 만들어 놓은 유용한 코드 뭉치(패키지)들을 쉽게 설치하고 관리할 수 있게 해주는 도구입니다. 또한, npm은 프로젝트에 필요한 명령어들을 실행하는 역할도 합니다.

node.js를 설치를 해야합니다.

리액트는 node.js기반의 라이브러리이기 때문에 필수에요.

 

설치 방법

1. Node.js 공식 웹사이트에 접속합니다.
2. LTS (Long-Term Support) 버전을 다운로드하여 설치합니다. LTS 버전은 장기적으로 안정적인 지원이 보장되므로 대부분의 사용자에게 권장됩니다.
3. 설치가 완료되면, 터미널(Windows의 경우 cmd 또는 PowerShell, macOS의 경우 Terminal)을 열고 아래 명령어를 입력하여 설치가 잘 되었는지 확인할 수 있습니다.각각 v18.18.0 와 같이 버전 번호가 출력된다면 성공적으로 설치된 것입니다.
4. bash# Node.js 버전 확인 node -v # npm 버전 확인 npm -v
5.  

Node.js를 설치하신 후에 create-react-app으로 프로젝트를 생성하고 npm start를 실행하시면 됩니다.

 

이렇게 설명을 해줍니다. 

그럼 진행하죠

 

https://nodejs.org/ko/download

 

 

본인의 운영체제에 맞게 비트수를 고르고 다운받아서 설치를 합시다.

그냥 next 다음 눌러서 진행하시면 됩니다.

설치를 다 하셨으면 

cmd 명령어를 실행해하거나 터미널에서 node -v를 쳐보면 되는데 

 

여기서 쳐보도록 하죠

 

 

잘 설치가 됐습니다. 

자 그럼 이제 본격적으로 나의 할일을 만들어 볼차례입니다. 

 

파일의 작업영역에 폴더추가를 하시고 새폴더를 만들어서 추가하시면 됩니다. 

전 test 폴더를 만들고 작업 영역에 추가했어요.

 

이 놈이 하기도 전에 저렇게 파일을 먼저 만들어 버렸네요. 

그럼 저 순서대로 터미널에 입력을 하면 됩니다. 

 

 

그럼 설치가 될거에요. 

저기서 봐야할게 npx create-react-app my-todo-list 입니다.

 

 

미리 만들어준 파일들을 src 폴더로 드래그해서 이동해 줍시다.

 

그리고 보니 뭔가 이상해서 다시 요청을 했어요 ---form.js 3개를 제외하고 실질적으로 필요한 app.js 와 app.css 파일이 

수정이 안됐어서 다시 요청을 했습니다.

 

 

그러면 이렇게 수정을 해줍니다. 

 

 

저걸 눌러서 다 변경 시켜주세요.

그리고 http://localhost:3000/ 로 웹페이지에서 확인해봅시다. 

엥? 안뜨네요? 

다시 확인해 달라고 요청을 합시다. 

안뜨네요?

네  버전이 불일치 한다고 하네요. 하라는대로 해줍시다.

2. node_modules 삭제 및 재설치

버전 충돌을 확실하게 해결하기 위해, 기존에 설치된 패키지들을 모두 지우고 다시 설치해야 합니다.

1. 프로젝트 폴더(my-todo-list)에서 node_modules 폴더와 package-lock.json 파일을 삭제해 주세요.
2. 터미널에서 아래 명령어를 실행하여 패키지를 다시 설치합니다.
3. npm install

3. 애플리케이션 재시작

패키지 설치가 완료되면, 다시 개발 서버를 시작합니다.

bash

 

npm start

이제 http://localhost:3000으로 접속하시면 할 일 리스트가 정상적으로 보일 것입니다!

이처럼 라이브러리 버전 간의 호환성은 예상치 못한 문제의 원인이 될 수 있습니다. 문제가 해결되었기를 바라며, 또 궁금한 점이 생기시면 언제든지 다시 질문해 주세요!

 

예 완성했습니다. 

 

이런식으로 리액트로 나의 할일 리스트를 만들어 봤네요. 

일단 제미나이가 알려준대로 하다보면 저렇게 오류가 나도 물어보면 고쳐주니까 그 점 참고하시고

파일을 만드실때 실제 폴더의 위치와 제미나이가 알려준 폴더의 경로가 맞는지 확인을 하셔야 합니다.

기본적인 제미나이를 사용해서 바이브코딩을 하는 법을 오늘 진행해봤습니다.

점점 사용하셔서 익숙해시길 바랍니다!!

  

아 참고로 저건 가장 기본적인 것이에요. 리액트의 프레임워크는 다양하니 최신 트렌드를 검색해서 

구조를 재요청하시고 따라하면 됩니다.

보통 요새는 next.js를 사용하고 또 이걸 설치하면 라우팅(페이징매핑) 이런 것들을 설명해주니 

AI를 통해 배우면서 바이브코딩을 하시면 됩니다.

 

요런식으로 천천히 하나하나씩 공부하면서 해보시면 됩니다!

 

저는 보통 next.js 와 라우터로 페이징 디자인쪽은 잼병이라 MUI로 디자인을 구성합니다.

prisma는 디비를 쉽게 만들어주는 건데 사실 몰라도 상관은 없어요

기본적으로 DB를 활용하실수 있게 되면 사용하시면 됩니다. 

 

사실 비전공자인 사람이 갑자기 시대에 늦쳐지니 바이브코딩을 해야한다? 

막막하실수 있습니다.

그래도 천천히 AI 에이전트를 통해 배우다 보면 언젠가는 쉽게 따라하실수 있을겁니다.

기본적으로 리액트는 사용자에게 화면을 보여주기 위해 사용하는거구요(프론트엔드)

 

화면에서 요청한 프로세스 로직을 수행하기 위해서 스프링부트(자바)로 개발을 합니다. 

또 그 정보를 입력하고 저장하기 위해 DB는 postgreSQL를 많이 사용합니다.

이렇게 뒤에서 사용자가 안보이는 곳에서 처리하는 곳을 백엔드라고 합니다.

 

저는 레거시 위주인 정부프로젝트에 참여만 해서 요새 AI를 통해 리엑트를 배우고 있습니다.