룸이피 개발을 시작하려면 먼저 프로젝트를 설정해야 하는데, 리액트를 사용하기 때문에 아주 간단합니다. 특히, 비트를 이용해서 간단한 리액트 애플리케이션을 만들 거예요.

와, 보세요. 새롭게 디자인된 랜딩 페이지가 있네요. 정말 산뜻해 보입니다. 여기서 설치 명령어를 바로 복사할 수 있고, 여러분은 텍스트 에디터나 IDE를 열 수 있습니다.

이 경우에는 WebStorm을 사용할 거예요. 최근에 비상업적인 용도로 완전히 무료로 사용할 수 있게 되어서 선택하게 됐습니다. 예전에는 굉장히 비싸고 강력한 IDE였는데, 이제는 이것으로 개발할 수도 있게 됐죠.

물론, 강력한 AI 기능들도 함께 제공되는데요. 특히 JetBrains에서 만든 코딩 에이전트인 Juni가 있습니다. 이 과정에서 Juni를 어떻게 활용하실 수 있는지 보여드리겠습니다.

생산성을 향상시키기 위해 필요합니다. 인공지능을 활용한 코딩은 더 이상 간과할 수 없는 부분이 되었습니다.

이 과정에서는 제가 모든 코드를 직접 작성할 텐데, 몇 가지 경우에는 인공지능의 도움을 받아 수동 작업 과정을 더욱 빠르게 할 수 있는 방법을 알려드리겠습니다.

혹시 제 화면을 보면서 따라 하고 싶으시다면, WebStorm과 Junie를 다운로드 받아 주세요.

새로운 프로젝트를 만들게요. 제 바탕 화면에 빈 프로젝트로 만들고, Roomify라고 이름 붙이겠습니다. 열어보시면, 통합 터미널도 함께 열 수 있습니다.

그리고 거기서 방금 복사한 vid 명령어를 붙여넣을 수 있습니다. 하지만 저는 끝에 점 슬래시를 추가해서 애플리케이션이 현재 저장소에 생성되도록 할 거예요.

create vid 설치 프로그램을 설치할지 물어볼 거예요. 저는 그냥 진행하라고 할 겁니다.

아무것도 아니라고 말해도 괜찮습니다. 그 안에 있는 모든 것을 제거한 후에 계속 진행할 수 있습니다. 물론 React로 만들 거고, 변형을 위해선 실제로 내려가서 React를 사용할 겁니다.

라우터 V7을 선택하신 후 Enter 키를 누르세요.

그리고 곧 나올 비테 최신 버전도 사용할 수 있습니다. 그리고 Create React Router도 설치했어요. 지금은 새 Git 저장소를 초기화할 필요는 없어요. 곧 함께 할 테니까요.

이제 필요한 모든 의존성들을 설치하실 수 있습니다. 저희 앱이 설정되는 동안 pewter.com으로 이동하셔서 '시작하기'를 클릭해주세요. 그리고 페이지 상단으로 이동하여 여기를 클릭하시면 계정을 생성하실 수 있습니다.

그러니 좋아하시는 것으로 진행하시고, 이메일 주소와 비밀번호를 입력해 주세요.

그리고 계정을 만드세요. 계정을 만드신 후에 끝입니다. 로그인되셨어요. 그런데 정확히 여기서 무슨 일이 일어나고 있고, 왜 가상 데스크톱 안에 있는 걸까요?

음, 이 프로젝트의 모든 백엔드 AI는 Pewter를 이용해서 처리할 거예요. 그리고 제가 지금까지 사용해본 것과 완전히 다르기 때문에, 어떻게 사용하는지 가르쳐 드리기로 결정했어요.

먼저, 시작하는 데는 완전히 무료입니다. 방금 보셨듯이 신용카드도 필요 없고, 만료되는 평가판 기간도 없습니다. 또한 Pewter.js Docs에 방문하시면 더 자세한 내용을 알 수 있습니다.

기본적으로 백엔드 코드나 API 키 없이도 서버리스, 클라우드, 그리고 인공지능 기능을 프론트엔드에 직접 적용할 수 있게 해줍니다.

단지 그들의 NPM 모듈을 설치하시고, 스크립트를 추가하시면 모든 기능에 접근하실 수 있습니다.

하지만, 실제로 어떻게 그런 게 가능할까요? 사용자 페이 모델 페이지에서 자세히 설명하고 있습니다. 즉, 사용자들이 클라우드 및 AI 사용 비용을 부담하게 되는 방식이랍니다.

개발자님께서 서버나 API 사용료를 직접 부담하실 필요 없이, S3 스토리지, Vercel 호스팅, Supabase 데이터베이스, 그리고 OpenAI AI 같은 서비스들을 예를 들어, Pewter가 서버리스 환경을 제공해 드립니다.

컴퓨팅 작업 인력, 데이터의 키-값 저장, 영구 파일 호스팅, 그리고 인공지능 활용에 필요한 인력들을 찾고 있습니다.

하나를 사용하든 백만 개를 사용하든, 애플리케이션을 실행하는 인프라 비용은 전혀 내지 않으세요. 이 모델이 정말 흥미로워서, 이 모델을 기반으로 구축하는 방법을 알려드리는 영상을 만들기로 결정했답니다.

그리고 완전히 오픈 소스예요. 혹시 그들의 깃허브 저장소에 가시면 거의 4만 개의 스타를 받을 수 있어요. 함께 조금 도와서 그 목표를 달성하도록 도와요. 아주 활발하게 유지보수되고 업데이트되고 있다는 것을 알 수 있을 거예요.

이 강좌를 다 끝낼 때쯤이면 왜 이 문제가 중요한지 정확히 이해하실 거예요. 왜냐하면, 여러분이 프로덕션 수준의 AI SaaS 애플리케이션을 배포하게 되거든요.

설정 파일을 건드릴 필요도, 신용카드 정보 입력도 필요 없이 가능합니다. 자세한 내용은 여기서 확인하실 수 있습니다. 설치가 완료되면 npm run dev를 실행하실 수 있습니다.

로컬호스트 5173에서 실행될 거예요. 거기서 기본 React 라우터 랜딩 페이지를 볼 수 있습니다. React 라우터 v7은 비교적 최신 버전이니, 공식 문서를 참고하는 것도 좋습니다.

여기서 라우팅을 어떻게 구현할 수 있는지 보여드릴게요. 곧 함께 해볼 거예요. 하지만 그 전에, 애플리케이션의 파일 및 폴더 구조를 살펴봐서 모든 것이 100% 명확하도록 할게요.

패키지 JSON부터 시작해 보겠습니다. 이 파일은 프로젝트 이름과 모듈 타입(import 문을 사용할 수 있도록), 그리고 애플리케이션을 실행하는 데 필요한 스크립트, 마지막으로 함께 실행될 의존성들을 정의합니다.

패키지 로그 JSON 파일이 있습니다. 이러한 문제를 해결하기 위해, 이 애플리케이션을 설치하는 사용자가 정확히 동일한 의존성 버전을 사용하도록 하여 '내 환경에서는 잘 작동하는데'라는 문제를 해결하고자 합니다.

tsconfig.json 파일이 있습니다. 이 파일은 주로 TypeScript가 풀스택 React 라우터 및 Vite 설정과 함께 올바르게 작동하도록 하는 역할을 합니다.

그와 같은 이유로 Vite 설정 파일도 있습니다. 이를 통해 Tailwind나 React Router와 같은 다양한 플러그인을 실행할 수 있습니다.

Dockerfile을 사용하면 재현 가능한 배포 경로를 만들 수 있습니다. 기본적으로 컨테이너를 생성하여 애플리케이션을 배포할 수 있게 해줍니다.

그리고 다른 곳에서 실행해 보세요. README 파일도 있는데, 현재는 이 비타 애플리케이션에 대한 정보와 React Router 관련 문서들이 담겨 있습니다.

물론, 앱 폴더 안쪽, 특히 루트(root.tsx) 파일 안에서 흥미로운 내용들이 나타나기 시작합니다.

링크들과 레이아웃부터 시작합니다. 그리고 앱의 HTML, 헤드, 바디를 설정합니다.

그리고 링크와 메타데이터를 불러오는데, 이들은 React Router에서 제공하는 도우미 기능들입니다. 하지만 더 중요한 건 routes.ts 파일로 넘어가보는 거예요.

이 파일은 React Router의 프레임워크 모드가 중앙 라우팅 설정을 기대하기 때문에 존재해요. 그리고 모든 것이 home.tsx에서 시작되니까, 한번 들어가서 살펴봅시다.

라우트, home.tsx 파일 안에 있을 거예요. 그곳에 몇 가지 메타데이터가 있습니다. 그리고 welcome이라는 컴포넌트가 있는데, 이것이 우리가 처음 보는 컴포넌트 중 하나예요.

이 컴포넌트는 제가 localhost 5173에서 애플리케이션을 실행했을 때 보셨던 내용을 단순히 렌더링했습니다.

그리고 tailwind와 몇몇 폰트를 불러오는 app.css도 있습니다.

환영 폴더를 완전히 삭제하고, 그 다음 routes 홈으로 이동하여 간단한 텍스트를 표시해 보겠습니다.

그래서 text-3xl, text-indigo 700, 그리고 font-extrabold 클래스 이름을 가진 h1 요소를 렌더링할 예정입니다.

테일윈드(Tailwind)가 제대로 작동하는지 확인하기 위해 몇 가지 클래스를 추가했어요. 이제 이 환영(welcome) 컴포넌트의 임포트를 제거하고 이 H1만 렌더링하고 다시 돌아가면, 'home'이라고 표시된 텍스트를 볼 수 있을 거예요.

그게 다예요. 즉, 바이트를 이용해서 Tailwind부터 React 라우팅까지 모든 걸 단일 명령으로 설정할 수 있다는 뜻입니다. 그리고 우리는 이제 애플리케이션의 첫 번째 컴포넌트인 네비바를 실행할 수 있게 됩니다.