Cursor AI를 조금 더 똑똑하게 사용하기

귀차니즘때문에 미루던일은 이제 없다.

Cursor AI (이하 그냥 커서라고 함)에서 내가 만들고자하는 웹페이지를 뚝딱뚝딱 만들다보면 다 좋은데 한가지 걸리는게 있었다. 로컬에서 실행이 되다보니까 웹에서 실행되는걸 보고 싶다면 FTP로 접속해서 파일을 업로드를 반복적으로 해줬어야했는데 이 귀찮은 과정도 결국은 ai에게 도움을 받아서 해결했다.

직접 파일 변경하는거 가능해?

작업을 수시로하고 고치고 싶은거 변경하고 싶은것도 많다보니 그 작업을 할때마다 웹으로 확인하기 위해서 귀찮게 파일질라로 업로드시키고 브라우저에서 확인했었는데 ai에게 물어보고 10분도 채 걸리지 않아서 이 과정을 생략할 수 있었다.

생각해보니까 커서도 vscode랑 뭔가가 있길래 vscode에서는 ftp 다이렉트로 연결해서 작업할 수 있었던게 생각이나서 무심코 물어봤다. 누구한테? 그냥 커서한테 대놓고 물어봤다.

'야 커서야, 파일 변경되는거 웹에서 확인할라니 ftp접속해야되고 업로드해야되는 과정이 너무 번거로운데 너 ftp에 직접연결해서 파일 변경할 수 있냐?'

라고 물어보니 친절하게 알려주더라.

SFTP라는 확장프로그램 (Extention)을 설치하면 된단다.

그래서 바로 설치.

커서를 실행하고 상단메뉴에서 View > Extention 또는 단축키는 컨트롤 + 쉬프트 + x이다.

여기서 sftp를 검색해서 설치한다.

내가 설치한 확장프로그램의 모양은 위 이미지와 같다. 설치가 완료되었다면,

컨트롤 + 쉬프트 + P 해서 sftp를 검색하면 된다.

위처럼 sftp 검색후 나오는것중에 config 를 선택하면 서버환경을 입력하는 json파일이 나온다

1. name에는 나는 그냥 도메인을 넣었다.

2. host는 당연 서버아이피

3. protocol은 stfp니까 안건드림.

4. port 역시 기본 22 안건드림.

5. username은 내가 sftp 접속할때 사용하는 id

6. password는 처음 json파일이 나올때는 없는부분인데 추가한것. 추가해서 써주는게 맞는것 같다.

7. remotePath는 저장경로인데 나는 서버에 sftp 로 접속하면 public_html 폴더가 있고 그 폴더 안에 웹을 구동하는 파일들이 들어있어서 "/public_html/" 을 작성했다. " / " 이거 잘보고 넣으면 됨.

8. uploadOnSave는 처음엔 false로 되어있는데 true로 변경함.

9. 이하 안건드림.

이렇게 하고 커서에게 일 시키고 파일에서 컨트롤 + s를 누르고 봤더니

이렇게 로그가 찍히더라. 로컬에도 저장되고 서버에도 직접 저장시키고 로그가 보고 싶다면 터미널옆에 output을 선택하고 sftp까지 설정하면 볼 수 있다.

이렇게 오늘 하루도 ai와 조금 친해진듯?ㅋ

그래서 오늘 만들어본건 반응속도 테스트 였는데 뭐 별거 없는..빨간원에서 랜덤하게 파란색으로 바뀔때 얼마나 빨리 반응해서 클릭하느냐?ㅋㅋ