[인턴/ko웹페이지] Cursor AI 활용기 : 코드 내 검색 가능

Cursor AI 사용 배경

인턴을 하고 있는 곳에서 웹사이트를 만드는 업무를 받았다.

Node.js 로 구축을 해야하는데, 프런트와 백 둘다 내가 해야하는.... ㅋㅋㅋ

 

아 물론, 내가 이걸 처음부터 사용하겠다고 한 것은 아니고

대표님께서 회의실로 나를 부르시더니 "cursor 라고 알아요?" 라고 물으시고서 알려주셨다.

이걸 쓰면 원하는 코드를 바로바로 만들어준다며,,, 덤으로 "개발자가 할일이 없어지는 날이 왔어~"라고,,,,

 

어쨌든, 그래서 사용하게 되었다.

아래에 사용 화면 예시와 짤막한 후기(?)를 작성해보겠다.

 

사카모토 짤

 

---

Cursor AI 란?

The AI Code Editor

 

 

위의 한문장으로 요약이 가능하다.

AI 활용 코드 편집기이다!

 

Cursor is a fork of VS Code. 
This allows us to focus on making the best way to code with AI, while offering a familiar text editing experience.

 

cursor 는 VS Code 환경의 UI/UX 를 제공한다.

그래서 굉장히 친숙한 느낌을 준다.

 

챗지피티의 경우엔, 우리가 코드를 지피티에 입력하고 내용을 설명하고

하나부터 열까지 환경이나 요구사항을 입력하는 등 조금은 번거로울 수(?) 있는데

 

cursor 는 VS Code 환경 에서 질문을 하고, 코드 베이스로 물어볼 수도 있어서 그 귀찮음을 덜어준다.

물론, 사용량 제한이 있긴하다 ㅋㅋㅋㅋ 

 

그렇다면 cursor 가입 화면을 함께 보자.

 

---

Cursor AI 가입 + 실행 화면

1. cursor 메인 화면

메인화면

 

2. 가입 화면

나는 깃허브로 가입함

 

3. 가입 완료 화면 : 세팅 화면

이용량 확인 가능

 

4. 우측 상단 다운로드

다운완료 : 맥 환경

 

5. 다운받은 프로그램 Install

설치 중

 

6. 초기 세팅 설정

참고로 저는 언어에 KOREAN 입력했어요

 

7. VS Code 로의 확장 선택

USE 클릭

 

8. 자동완성 기능 참조

그냥 컨티뉴 눌렀음

 

9. 데이터 참조

보안이 중요하기에,,,, 그냥 오른쪽 눌렀음

 

10. 완료! 로그인 누르기!

로그인~

 

11. Cursor 열기

열기~

 

12. 열려있는 VS Code 폴더 위치로 Cursor 열림

냅다 알고리즘 폴더 열기

 

---

Cursor AI 사용 화면

기본 기능 ) 자동 완성 + 코드 수정 + 질문 + 코드베이스로 채팅

아무거나 코드 입력한 상태

 

오른쪽에 질문

 

코드 적용

 

추가 질문

 

왼쪽에서 볼 수 있는 기능들

 

코드에서도 질문 가능

 

질문하면 코드상에 답변이 생긴다

 

 

---

Cursor AI 사용 후기

정말 간단하게 어떤 기능이 있는지 파악할 수 있을 정도로만 사용을 해봤는데, 편하긴 편하다.

코드를 따로 막 붙여넣지 않아도 코드 상에서 질문을 할 수 있는 것은 정말 좋은 기능이라고 생각한다.

 

이게 사용하는 모델은 챗지피티 모델, 다른 여러 AI 모델을 선택할 수 있다고 한다.

그런데, 사용환경이 VS Code 와 같다보니 편리하다.

 

따로 AI 의 기능이 훨등하게 좋다! 이건 아닌것 같다.

 

이번 프로젝트를 하면서, 아무래도 프런트 쪽은 잘 모르기 때문에

위의 프로그램을 사용하며 개발해봐야겠다.

 

공부할 것이 참 많아지는,

갈수록 똑똑해지는 세상이다.

 

컴퓨터에 뒷통수가 있던 시절이 그리울지도,,,,