간단한 poc 를 위해 개발자가 기획, 디자인없이 빠르고 이쁘게 프론트개발하는 방법에 대해서 고민해보았습니다.
어떻게 해야 빠르게 fo 개발할 수 있을까?
1. ai 를 활용 - 인공지능을 활용한 코드 편집기
2. css 는 컴포넌트 라이브러리를 사용 - 재사용 가능한 컴포넌트의 모음
숙달되면 개발속도는 크게 상승할 것으로 판단하였습니다.
cursor ai
1. vs code 를 포크해서 만든 프로젝트
- 개발 친숙
- vs code 의 extensions 사용가능
2. 프로젝트 단위의 질문도 가능 (RAG)
- vector db 를 활용한 코드베이스 인덱싱 기능 지원하기 때문
- 사용자가 질문한 내용과 유사성, 관련성이 높은 문서들을 인덱싱하고 사용자 쿼리와 함께 prompt에 함께 답변을 생성
3. 간단한 조작법
- tab
- 디터에서 약 1초간 동작이 없는 경우 Cursor Copilot++ 이(가) 자동으로 코드를 추천
- tab키를 누르면 Cursor Copilot++ 이(가) 자동으로 만들어주는 코드를 적용
- Ctrl + K
- 간단한 코드를 생성하는 커맨드
- 에디터 내 사용자 쿼리를 입력할 수 있는 창이 나타남
- 간단한 함수를 만들거나 테일윈드, 부트스트랩 등 CSS 클래스명 붙일 때 편리
- @Codebase, @Docs, @Web 등 여러 가지 심볼을 프롬프트로 사용 가능
- Ctrl + L
- 에디터 화면 오른쪽에 LLM에게 대화할 수 있는 채팅창을 여는 커맨드
- 복잡한 버그를 수정하거나 코드를 기술적인 도움이 필요한 경우 사용
- 코드를 드래그 후 Ctrl + L 커맨드 입력 시 채팅창으로 코드가 자동으로 복사됨.
- @Codebase, @Docs, @Web 등 여러 가지 심볼을 프롬프트로 사용 가능
@Codebase : 코드베이스 기반 검색 기능
@Docs : 문서기반 검색 기능
@Web : 웹 기반 검색 기능
4. 활용 예시
chat 모드에서 개발 레이아웃과 유사한 사이트링크를 전달하여
화면 구조에 대해서 파악해보라고 합니다.
chatgpt 사이트는 사이드바와 메인 컨텐츠 영역 두개가 있다고 하네요.
생성된 사이드바 소스
이건 chatArea
일단 apply 버튼을 눌러서 적용
component/chat/CahatArea.jsx 파일이 생성됨.
코드만 들어간것이 아니라 폴더 구조까지 혼자서 만들어버림.
page.js에 component import해서 사용하라네요. 기본은 하는거 같습니다.
그냥 개발자는 apply 버튼만 하루종일 누르면됩니다.
run 하니 오류가 발생하였습니다.
터미널에서 오류를 드래그하고 composer 를 실행하여 오류가 뭔지 물어봤습니다.
ai 디버깅 기능도 있으니 디버깅까지 필요한 상황이면 눌러보시면 될 거 같습니다.
사드씨엔의 라이브러리가 설치되지 않았다네요. 라이브러리는 자동으로 설치해주지 않나봅니다. 아쉽.
설치하니 정상 동작하네요.
기본적으로 나왔으면 했던 수준이 나온거같습니다.
한번의 질문으로 이정도면 활용을 잘하면 엄청날거같네요..
프로젝트 단위로 코드를 알고있기때문에 chatgpt로 개발했을때 하나하나 코드를 전달하고
전체 파일 연결관계나 구조를 프롬프트에 사용자가 직접 입력해 넣지않아도 되는 점이 큰 장점으로 생각됩니다.
