NEW
개발 · 프로그래밍

/

프론트엔드

Copliot은 이제 그만! 2시간 만에 제대로 배우는 Cursor (with Next.js)

chatGPT, claude에 코드 붙여넣느라 그동안 고생 많으셨습니다. 이제 V0.dev, cursor IDE를 통해서 내가 원하는 요구사항을 AI와 빠르게 구현해 보세요.

(4.6) 수강평 5개

수강생 41명

Next.jsReactcursor인공지능(AI)
Thumbnail

초급자를 위해 준비한
[프론트엔드, AI · ChatGPT 활용] 강의입니다.

이런 걸
배워요!

  • V0.dev를 통해서 빠르게 컴포넌트 만들기

  • Cursor IDE를 통해서 AI와 대화하며 내 코드를 개선하기

  • Cursor Directory를 통해 나만의 Cursor IDE 만들기

  • Cursor Composer 기능을 통해 여러 파일을 넘나들며 AI와 코딩하기

ChatGPT, Claude 대신
개발지향 AI 도구로 빠르고 정확하게 코딩하세요

공식문서를 찾아 헤매며 코드를 작성하고 있나요?
ChatGPT나 Claude가 원하는 답변을 제공해주지 못하나요?

코드의 품질과 생산성을 동시에 고려한다면
개발에 최적화된 AI도구를 사용하는 것이 효과적입니다!

간단한 서비스를 직접 만들어보며 AI도구 활용방법을 익혀보세요! 💁‍♂

V0.dev란?

프롬프트 입력만으로 리액트(React) 컴포넌트와 UI를 실시간으로 생성해주는 AI 기반의 서비스 입니다

Cursor IDE란?

VS Code를 기반으로 한 AI 중심 코드 편집 툴이에요. AI와 쉽게 소통하며 개발할 수 있는 혁신적인 툴입니다

이런 분들께 추천해요

AI

AI를 더 잘 써보고 싶어요

cursor의 다양한 기능을 기반으로 나의 생산성을 3배 올려보세요

think

사수없이 스스로 해결하고 싶어요

내 코드를 기반으로 AI와 대화하고, 코드를 수정할 수 있어요

copilot

Copilot이 아쉬워요

코파일럿의 tab 보다 더욱 진보된 AI를 느껴보세요

수강 후에는

  • 디자이너 없이 NextJS, React 기반의 단한 페이지를 이쁘게 만들 수 있어요

  • 모르는 것이 있을 때, chatGPT, claude가 아닌, 코드에서 바로 AI에게 물어볼 수 있게 되요

  • 나만의 Agent를 만들고, 나의 코드 습관들을 AI에게 적용시킬 수 있어요

이 강의의 특징 ⭐️

nexjs_vercel

AI와 같이 개발하는 방법을 한 단계 높여 보세요

와이어 프레임에서 실제 코드, 그리고 배포까지 간단하지만 핵심만을 담았습니다

cursor_설명

Cursor 사용 노하우를 찐하게 압축했습니다
Cursor 사용에 핵심이 되는 Docs, file 불러오기, composer, system prompt 셋팅 등 cursor를 사용하기 앞서 꼭 필요한 내용만 넣었습니다

이런 내용을 배워요

V0.dev

프롬프트 몇 줄로 와이어 프레임에서 빠르게 react 코드로 변환할 수 있어요. 작성된 코드를 쉽게 커맨드를 통해서 내 코드와 병합할 수 있어요

v0

v0.dev

Cursor Directory

Cursor Directory에 있는 다양한 시스템 프롬프트 혹은 나만의 프롬프트를 통해서 나만의 Agent를 만들어 보세요

cursor directory

directory.cursor

Cursor Composer

Cursor Composer를 통해 copilot에서는 할 수 없는 여러 파일을 수정하거나, 여러 파일을 참조하여 새로운 코드를 작성해 보세요

composer

cursor composer

강의 커뮤니티

디스코드 채널

어려운 점이 있다면 언제든 Discord에서 물어보세요! 항상 도와드릴 준비가 되어 있습니다.


https://discord.gg/YZ4sz9rXKh

새로운 Cursor 소식

Threads에서 새로운 팁과 기능을 공유하고 있습니다. 팔로우하고 많은 정보를 받아가세요!


https://www.threads.net/@toy_crane911

예상 질문 Q&A

Q. 강의 대상자는 어떻게 되나요?

  • React와 Typescript에 대한 이해가 반드시 필요합니다.

  • Nextjs에 대한 지식이 있다면 더욱 좋습니다.

Q. v0.dev, Cursor는 결제가 필요한가요?

  • 무료 플랜으로도 강의 진행은 가능하지만, 편하게 개발하기 위해선 결제가 필요합니다.

Q. 강사님의 코드와 다른 결과물이 나왔어요?

  • AI의 특성상 같은 프롬프트로 내용을 작성하더라도, 같은 결과물이 나오지 않습니다. 그렇기 때문에 강의에서는 큰 방법론 하에 하나씩 스스로 해결할 수 있도록 알려드리고 있습니다.

  • 아래 링크에서 전체 코드를 참조하실 수 있습니다

수강 전 참고 사항

실습 환경

  • 사용 도구: V0.dev, Cursor

  • 기술 stack: NextJS 14, Shadcn, Tailwind, React-hooks-form, Vercel


이런 분들께
추천드려요!

학습 대상은
누구일까요?

  • chat GPT와 Claude를 통해 개발해왔던 개발자

  • AI와 효율적으로 일하고 싶은 개발자

  • 앞으로 혼자서 일하고 싶은 개발자

선수 지식,
필요할까요?

  • Next.js 또는 React.js에 대한 기본적인 이해

  • 기본적인 CSS 지식

안녕하세요
토이크레인입니다.

안녕하세요 👋👋

솔로프로너로 이것저것 만들고 있는 토이크레인입니다.

Nextjs, Supabase, LLM 기반으로 한 새로운 서비스들 만들고 있어요

📮 X | Thread | About Me

커리큘럼

전체

14개 ∙ (2시간 13분)

수업 자료

가 제공되는 강의입니다.

강의 게시일: 
마지막 업데이트일: 

수강평

아직 충분한 평가를 받지 못한 강의입니다.
모두에게 도움이 되는 수강평의 주인공이 되어주세요!