How to Connect Replit and Cursor for Simple, Fast Deployments - ko

안녕하세요, 저는 Matt입니다. 오늘은 커서와 반복을 연결하는 방법을 보여드리겠습니다.

이는 많은 수요가 있었던 기능입니다. 지난주에 이 기능을 정확히 수행하는 방법에 대한 튜토리얼을 공유한 X의

사용자 중 한 명에게 큰 감사를 표하고 싶습니다. 이 튜토리얼은 제가 보여드릴 튜토리얼의 많은 영감을 주었습니다.

하지만 이 두 가지 기술을 연결하는 것 이상을

설명하겠습니다. 왜 이것이 중요한지, 이를

가능하게 하는 개발 흐름 유형에 대해 이야기하고 마지막

으로 이 프로세스를 최대한 활용하는 데 도움이 될 수 있는 제가 발견한 몇 가지 팁과 요령을 공유하겠습니다. 그리고 시작하기

전에 한 가지 알려드리고 싶은 것은 이것이 커서나 vs 코드에만 국한되지 않는다는 것입니다.

SSH를 통한 연결을 지원하는 모든 편집기에서 활성화됩니다. 즉, 모든 터미널에서

원하는 터미널을 열고 reppel에 연결할 수 있으므로 기다리게 하고 싶지 않습니다.

바로 시작해 보겠습니다. 단계별 프로세스이므로

reple을 만드는 것으로 시작하겠습니다. 아마도 repet 홈페이지에 익숙할 것입니다.

빈 reppel을 만들고 SSH 튜토리얼이라고 부를 것입니다. 음

물론 이것은 모든 repple에서 작동합니다. 음 사용하는 언어는 중요하지 않습니다.

이 비디오에서 구성과 정확히 무슨 일이 일어나고 있는지에 대해 많이 이야기하겠습니다. 음 하지만 이것은 기본 페이지입니다.

새 탭을 열어서 시작할 것입니다. 여기에는 SSH 탭이 있습니다. 음 그리고

볼 수 있듯이 실제로 vs 코드 또는 커서에 대한 원클릭 연결을 위한 버튼을 추가했습니다.

실제로 이 버튼을 클릭하기 전에 해야 할 약간의 설정이 있습니다.

먼저 키로 이동하겠습니다. 페인트와

이미 키가 있지만 그것을 삭제하고

스크랩에서 시작할 것입니다. 또한 이 연결을 구성하는 내 컴퓨터의 모든 파일을 제거했습니다.

음 그래서 뭔가를 놓쳤다는 걱정은 없어야 합니다.

그래서 새 키를 만들고 레이블을 추가할 것입니다. 라벨은

이상적으로 연결하는 장치를 식별해야 합니다. Matt의 MVP

MacBook Pro에서 SSH 키를 생성해야 합니다.

여기에는 키를 생성하는 방법에 대한 몇 가지 지침이 있습니다. 저는 Mac을 사용하고

Mac에서 키를 생성하는 방법은 다음과 같습니다. 다른 장치에서도 동일하다고 생각합니다.

하지만 이 비디오에 링크된 설명서 페이지도 있습니다. 자세한 지침을 읽거나 이런 것에 대해 자세히 알아볼 수 있지만

GitHub 저장소를 구성하거나 로컬 컴퓨터에 연결하도록 git을 구성한 적이 있다면 아마도

비슷한 작업을 했을 것입니다. 이 프로세스도 마찬가지입니다. 이제

커서로 이동하여 새 터미널을 열고 이 터미널에서 붙여넣을 것입니다.

실제로 이 터미널에서 조금 더 크게 만들어 보겠습니다.

붙여넣고 명령을 실행하겠습니다. 이제 키를 받게 됩니다. 이것은

민감하므로 이 비디오 에서 하는 것처럼 다른 사람과 공유하지 마십시오.

이제 음 하지만 약속드리 건대 이게 당신이 이 영상을 볼 때쯤에는 삭제될 겁니다

음 그래서 이걸 제 SSH 키에 붙여넣고

키 추가를 클릭할 겁니다 중요한 점은 이게 계정 수준이라는 겁니다 즉,

이 과정을 거치면 이 과정만 거치면 된다는 뜻이죠 키를 만들고

그 키를 전체 계정에 한 번만 연결하면 됩니다 이제부터는 제 계정에 속한

모든 리플에 연결할 수 있을 겁니다 음 좋아요.

사실 여기서 해야 할 단계가 하나 더 남았는데 이건 모두

설명서에 나와 있습니다 Windows나 Linux 컴퓨터를 사용한다면

조금 다를 수 있으니 확인해 보겠습니다. 하지만 Mac에서는 음

SSH로 갈 겁니다. SSH 파일의 루트 폴더입니다. 음 거기에 파일을 나열하고

Nano로 가서 이 구성으로 들어갈 겁니다 음 그리고 이건

제가 게으르고 텍스트 편집기로 이 파일을 편집하고 싶지 않아서 그런 겁니다. 하지만

다음 구성을 붙여넣을 겁니다. 그러면 repet

uh dodev um이 이 파일의 ID로 추가됩니다. 그러면

브라우저에서 커서를 사용할 수 있게 됩니다. 그래서 Ctrl X Y Enter를 눌러서 쓰고,

지우면 됩니다. 이제 해야 할 일은 launch cursor를 클릭하고

open을 누르면 cursor um에 경고와

이와 같은 메시지가 표시됩니다. 조금 무섭게 보이지만 실제로는 repet

dodev가 연결 중이고 이 지문이 있다는 내용입니다. 이것이 호스트와

URL입니다. 모든 것이 구성되었고 이

연결을 시작했습니다. 걱정할 것이 없습니다. 계속을 클릭하고

오른쪽 하단에서 왼쪽에 VSS 코드가 몇 가지 항목을 다운로드하고 있습니다.

커서가 vs 코드에 빌드되고 SSH를 구성하는 데 몇 초밖에 걸리지 않습니다.

디렉토리가 나열될 때까지 um 그리고 다시

reppel의 내용을 얻었으므로 실제로 무슨 일이 일어나고 있는지 자세히 설명하고 싶습니다. reppel 파일 시스템은 이제

이 연결을 통해 액세스할 수 있습니다. 음, 이게 정말 큰 장점인데, 커서

의 모든 기능 과 제가 여기서 하는 모든 일에 액세스할 수 있다는 뜻이거든요.

제가 LS를 입력하면 원격으로 올라가서

reppel로 가서 명령을 실행하고 제게 돌아오는 거죠.

음, 지난 며칠 동안 정말 열심히 작업한 게 있는데, 엔지니어링 팀이

정말 기대했던 건 SSH를 통해 도구를 활성화하는 거였어요.

repet의 장점은 배포 환경에서 개발한다는 거예요. 원격 환경이고

자체 컴퓨팅 파워가 있다는 걸 알 수 있죠. reppel 리소스를 클릭하면 알 수 있어요.

repple에는 4코어 CPU와 8기가 RAM이 있는데,

이걸 바꿔서 16 코어에 32기가 RAM으로 바꾸고 싶다면

그렇게 할 수 있어요. 지금은 정말 고성능 컴퓨터에서 개발하고 있고, 이 명령을 실행하면

고성능 컴퓨터에서 원격 환경으로 실행되죠. 음, 그리고 정말 훌륭합니다.

여기서 다른 종류의 잠금 해제를 통해 얻을 수 있는 또 다른 것은 언어와 프레임워크를 모두 설치하고 관리하기 위한 repits 도구에 액세스할 수 있다는 것입니다.

셸에서 npm을 입력하면 빈 reppel이라는 것을 기억하세요. 음, npm이 설치되어 있지 않지만

repit은 이를 알고 있으며 mpm을 설치하려면 SSH를 통해 메시지를 표시합니다. 그래서 Y를 누릅니다. 이제

환경이 업데이트되어 셸이 다시 로드되고 npm을 입력하면 음,

npm 명령을 실행하기 위해 얻을 수 있는 명령입니다. 그래서 우리는 방금 note를 설치했고 이 경험을 통해

로컬 컴퓨터에 설치하거나 이 디렉토리에서 액세스할 수 있는 것과 거의 동일

하지만 NVM을 설치하고

버전을 구성하고 내가 무엇을 하는지 알아내고

내 운영 체제에 설치하는 방법을 알아내는 모든 일을 할 필요가 없었습니다. 음,

정말 강력하죠. 파이썬이 필요하다면 음, 파이썬을 설치할 수 있고

이제 파이썬 310이 설치되었습니다. 음, 그리고 웁스 종료하고

파이썬 312를 설치하고 싶다면 반복해서 이것을 312로 변경하고 저장하면 됩니다.

음, 새로 고쳐야 할 것 같습니다. 지금 백그라운드에서 환경이 재구축되는 것을 볼 수 있습니다.

파이썬을 입력 하면 웁스 이걸 한 번 더 다시 로드해야 할 수도 있습니다.

이제 파이썬 312가 있으므로 방금 보여준 것 외에 파이썬을 설치하는 더 간단한 프로세스를 모릅니다.

좋습니다. 연결된 원격 환경이 실행 중

입니다. 왜 중요한가요? 중요한 것은 이제 커서에 대해 좋아하는 모든 훌륭한 기능을 사용할 수 있기 때문입니다. 로컬 개발 환경에 대해 좋아하는 모든 훌륭한 기능을 배포할 환경과 동일할 것이라는 것을 알고 있는 환경에서 빌드합니다. versell로 빌드한 적이 있다면 Cloud Flare나 Railway 또는

이러한 다른 도구 중 하나로 빌드한 적이 있다면 정말 훌륭하지만

머신에서 작동하는 것을 만들 수 있습니다. 알다시피 리포에 푸시하여 빌드하고 배포하려고 하면

작동하지 않고 다소 복잡합니다. 그래서 제가

보여줄 프로세스는 여기 정말 간단 하고 정말 직관적입니다.

사실 커서를 사용할 겁니다. 이 디렉토리에서

타입스크립트로 React 프로젝트를 만들 겁니다. 커서의 터미널 편집기를 사용하는데,

명령을 알고 있고 이걸로 만들 겁니다. 으악, create V 명령을 사용해서 애플리케이션을 만들 겁니다.

이제 React 앱이 있는 걸 알 수 있죠. React 앱 에 CD를 입력해서

모든 파일을 한 디렉토리로 재귀적으로 옮기도록 요청할 겁니다. 루트 디렉토리에 두도록 말이죠.

DOT 파일도 요청해야 하는 경우가 종종 있는데 그렇지 않으면 명령을 쓰게 됩니다. 으악, 채팅 프롬프트

에 이걸 입력하지 않았네요. 그렇지 않으면 명령대로 진행될 겁니다. 일반적으로 비밀 파일을 위로 옮기지 않고 말이죠. 그래서 지금 실행하면

해당 디렉토리에 있던 모든 파일이 한 디렉토리로 올라갑니다. 해당

폴더를 삭제할 수 있습니다. 삭제한 다음 CD를 입력해서 dot을 입력해서 위로 옮길 수 있습니다. LS

모든 파일이 있는지 확인하세요. 파일이 있는데 uh mpm uh

install을 실행해서 package.json에 있는 패키지를 설치할 수 있습니다. 이것들은

반드시 로컬 작업 공간이 아니라 repple에 설치됩니다. 이제 아마도 "

좋아요, 멋지네요."라고 말씀하실 겁니다. 이렇게 하면 프로젝트를 만들 수 있고 "실행"을

클릭하면 어떻게 될까요? 일반적으로

repple에서 실행을 클릭하면 reppel 자체에서 실행되고 웹 뷰에서

볼 수 있는 것과 같은 실행 내용을 볼 수 있습니다. 무슨 일이 일어나는지 살펴보겠습니다. mpm run Dev를 실행하면

사용 가능한 포트가 있다는 알림이 표시되므로 브라우저에서 열거나 편집기에서 미리 볼 수 있습니다.

편집기에서 미리 보고 무엇이 있는지 살펴보겠습니다. 기본 V

React 프로젝트가 있습니다. 이것은 새로운 프로젝트를 만들 때의 보일 플레이트입니다.

로컬 호스트 5173은 repple에 상대적입니다.

이것은 실제로 클라우드의 repple에서 실행되고 있습니다. 브라우저에서 액세스하거나 편집기에서 액세스할 수 있습니다.

모든 훌륭한 기능이 포함되어 있습니다. 기능 여러분이 기대하는 대로, 음 반응합니다.

제가 여기에 이모티콘을 넣고 살짝 흔들면 음, 핫

리로딩이 시작되고 다시 이것이 reppel로 돌아가 로컬 머신으로 돌아가

브라우저에서 미리 볼 수 있습니다. 음, 네, 이것은 정말 훌륭한 개발

흐름입니다. 그래서 여러분이 상상할 수 있듯이 음, 제가 커서에 새 채팅을 넣고

아름다운 할 일 응용 프로그램을 작성하라고 하면 음, 멋진

그림자와 애니메이션이 있는 것이죠. 이것은 모두가 좋아하는 uh cursor의 모든 훌륭한 것들입니다.

일종의 코드 생성과 같습니다. 우리는 또한 reppel

에서 Claude Direct로 코드 생성 기능을 가지고 있습니다. 음, 하지만 제가

샘플 커서 흐름을 보여드리면, 이 앱을 쓰고 있고 음, 모든

코드를 제공할 것입니다. 지금 여기에 놓을 것입니다. 별로 좋아 보이지는 않지만

그 이유는 CSS도 있기 때문입니다. CSS를 넣으면 훨씬 더 좋아 보입니다.

음, 외부 라이브러리가 없습니다. 그것은 원핫

프롬프트였고 설치할 필요가 없었습니다. 어떤 구성 요소

라이브러리도 없지만 지금 5초 정도 이 애플리케이션이 있습니다. 다시 말해,

이전에 repet에서 빌드하고 배포해 본 적이 없다면 "좋아요, 좋아요. 이제

똑같은 일을 하고 있지만 가상화되어 있고 컨테이너에서 실행되고 있죠.

복잡한 종속성을 설치하는 것을 상상해 보세요. 이걸 가져와서

배포해 봅시다. 인터넷에서 실시간으로 만들어 봅시다. 여기 rep으로 가서 새 탭을 만들고

배포로 이동하면 이것은 v 앱이므로 정적 배포가 됩니다. 배포를 설정하겠습니다.

SSH 튜토리얼 Matt, 괜찮아 보이네요. V 앱은 디스크 디렉터리에 빌드됩니다.

정적 앱을 만들 때는 HTML 파일 모음일 뿐이므로

npm run build를 실행하여 해당 HTML 파일을 컴파일하면 디스크로 이동하고

repits 정적 배포를 사용하여 해당 디스크 디렉터리에 배포합니다. 일반적으로

이런 유형의 애플리케이션을 배포하는 방식입니다. 서버가 없거나 다음 유형의 애플리케이션이

없는 경우 백엔드가 있고, 꽤 많은 다른 것들이 있습니다. 알다시피, 인기를 얻고 있는

파이썬 정적 프레임워크도 있습니다. 흐름은 다음과 같습니다. 외부 환경에 연결하고,

패키지를 설치하고, 클라우드에서 모든 것을 구성하고, 빌드하고 있는데,

실제로 오류가 있는 것 같습니다. repet에는 배포 복구가 있습니다.

배포에서 볼 수 있는 일부 오류를 자동화합니다. react가 선언되었지만

소스 앱에서 읽히지 않습니다. TSX, 살펴보죠. 아마

타입스크립트 같은 것 같은데, 그냥 선언할 수는 없지만

실제로 실행할 수 있어요. 반복해서 살펴보죠. 출력이 보이지 않으면

일반적으로 네트워킹 도구를 확인하고

포트 80에서 열려 있는지 확인해야 합니다. 정말 빠르게 할 수 있어요. 다크 모드와 CSS 같은 부분에서 약간의 차이가 있는데,

그건 다루지 않겠지만 지금은 작동하는 게 있어요. 배포로 돌아갈 수 있어요. 다시 배포를

클릭하면 다시 컴파일됩니다. AI가 이

전체 프로세스를 도와주고 있어요. 그런 의미에서 이 개발 흐름은 코드를 쓰는 사람보다는

제품 관리자와 훨씬 더 비슷해 보여요. 저는

머릿속에 무엇을 만들고 싶은지 아이디어가 있었어요. 빌드하려고 했는데

커서가 빌드하는 데 도움이 됐고 반복이 도움이 됐어요. 배포를 수정하고 Sonet

에서 도입된 버그를 조금 수정했어요. 이제

배포된 게 있으니까 이 링크를 클릭하면 Tod가 나와요. 앱 이건 자체

웹사이트에 있고 라이브로 배포됩니다. 좀 더 복잡한 것으로 이런 작업을 하는 걸 상상해 보세요.

이런 종류의 작업을 하는 방법에 대한 튜토리얼이 많으니 확인해 보는 게 좋을 것 같아요.

SSH를 통해 커서 같은 것에 연결하면 정말 고급 개발 흐름이 가능해지죠. 커서의

모든 도구와 기능에 액세스할 수 있기 때문만은 아니고 배포 환경에서 개발하고 있기 때문이에요. 즉,

환경이 동일하기 때문에 종속성이 동기화되지 않는 일이 절대 없을 거예요. 개발과

배포의 동등성은 정말 중요하죠.

빠르게 프로토타입을 만드는 데도 중요하고, 빌드하고 문제를 해결하기 쉬운 애플리케이션을 개발하는 데도 중요

해요. 이건 정말 좋은 설정이에요. 이걸 확인해 보는 걸 강력히 추천하고 다른 배포 제공업체와 비교해 보는 것도 강력히 추천합니다. 이게 가장 깔끔한 흐름 중 하나라고 생각해요. 특히 Cloud Flare, Versell, Railway 등을 봤을 때요. 한번 시도해 보세요. 제 생각엔 한 단계 더 나아간 것 같아요. 안녕, 난

편파적이야. 다시 한 번 말하지만, 난 반복에 동의하지 않아. 이건 SSH로 reppel에 연결 중이야.

음, 다음에 만날 때까지 안녕 [음악]