Cursor AI로 만들면서 배우는 Web & Javascript

🚨 이 강의는 Cursor의 버전이 올라갈 때마다 내용이 업데이트 됩니다.

📢 계속 업데이트 되는 강의를 원하신다면, 이 강의를 선택하시는 것을 추천드립니다.

< AI Tool을 통한 소프트웨어 개발을 꿈꾸고 계신가요? >

📢 언제까지 기초 문법만 배울 수는 없어요!

ChatGPT 이후로 수 많은 소프트웨어 강좌 팁과 개발 방법론이 쏟아지고 있습니다.

프롬프트 몇 줄로 홈페이지나 게임 제작하기,

심지어는 코드를 하나도 타이핑하지 않고 목소리로 하는 바이브 코딩(vibe coding)까지?

하지만 아직까지 AI로 하는 개발은 한계가 있다는 의견도 있어요.

개발을 모두 맡기면 지속적인 소프트웨어를 개발하기도 쉽지 않고요.

이렇게 다양한 의견이 첨예하게 나뉘는 시대에는, 어떻게 코드를 배워야 할까요?

소프트웨어 개발 시작을 망설이고 있는 분, 비전공자인데 나만의 웹 페이지를 만들어보고 싶으신 분,

웹 페이지가 어떻게 동작하는 것인지 알고 싶으신 분, LLM으로 코드는 만들었는데 해석을 해보고 싶은 분!

지금 이 강의로 웹 개발의 기초를 시작하세요. (Javascript, HTML/CSS)

직접 Claude 무료 버전으로 생성한 코드를 수정하면서 차근차근 웹의 개념, 웹 브라우저의 동작 방식, 그 위에서 동작하는 Javascript 언어의 문법을 설명해드립니다.

그냥 문법만 배우는게 아니고, 나만의 프로젝트를 직접 개발해보면서요!

앞으로 AI를 통해 생성하는 코드와 소프트웨어는 점점 많아질 거에요.

지금도 늦지 않았어요. 모두가 뛰어가는 세상에 우리도 함께 첫 걸음을 떼보는 것이 어떨까요?

ChatGPT, Claude, Gemini로 생성한 코드.. 해석하고 수정해보고 싶다면?

📌 눈 앞에서 직접 보여드립니다! 똑같이 프롬프트로 생성한 코드, 이렇게 해석하는 거에요!

💻 문법만 열심히 공부하면 뭐해요. 뭔가를 만들면서 배워야죠! "진짜" 프로젝트를 만들면서 배워요.

🛠 LLM이 생성한 코드를 수정하면서 개념을 잡아요. 아~ 이렇게 코드가 동작하는 거구나!

❌ 선행 지식? No! 컴퓨터 전공자만 이해할 수 있는 전문 용어? No! 미래의 제 자녀에게도 보여줄 거에요.

❔ 코드를 수정하다가 잘 안돼요.. 어떻게 하죠? 바로 답변해드려요! 많이 많이 질문 올려주세요.

✅ 이런 분들에게 큰 도움이 되는 강의에요.

✅ 실제 강의에서 배우는 자료를 보고 판단하세요 😀

👍이 강의를 들으면 도대체 뭐가 남을까요.

이 강의는 LLM이 생성해주는 코드를 기반으로 cursor 프로젝트를 만들면서 웹 개발을 차근차근 배웁니다.

하지만! 단순한 웹 개발 뿐만 아니라 아래와 같은 고민이 있으신 분에게도 도움이 될 거에요.

1. 혼자서라도 창업할 수 있는 방법은 없을까요? 인디 해커가 되고 싶어요!

<한 사람이 만든 10억 달러 가치의 회사>

출처: https://every.to/napkin-math/the-one-person-billion-dollar-company

<10개의 인상 깊은 한 사람이 만든 회사들>

출처: https://hackernoon.com/check-out-these-impressive-1-person-companies

1인 기업으로서 10억 달러(1.3조원) 가치를 가지는 기업들이 나올 것이라고 예측하는 사람들이 있어요.

그 중 한 명이 OpenAI의 샘 알트먼이죠! AI는 이 시대를 바꿀 새로운 기술이라고 해요.

반대로 혼자서는 그렇게 크게 성공하기 쉽지 않다는 사람도 있죠.

그런 생각해본 적 있으세요?

'혼자서 세상에 영향을 미칠 수 있는 방법은 무엇일까?'

'퇴근하고 나서, 휴직 기간에, 시간과 장소에 영향을 덜 받고 할 수 있는 활동은 없을까?'

창업 비용은 제로로 떨어지고, 소프트웨어 개발은 날로 쉬워지고 있어요.

소프트웨어 개발이 이런 고민들의 대답이 될 수 있어요.

이제는 LLM의 시대에요.

Grok, Claude, ChatGPT, Gemini, DeepSeek까지!

여러 개의 LLM 모델을 통해서 코드를 자동 생성하고, 수정해보고, 해석해보는 것을 배워요.

2. 뭔가가 되긴 되는데, 왜 되는지 모르겠어요. 배우고 싶습니다!

< 이제는 자연어 문장 하나로 간단한 웹 페이지가 나오는 세상이에요. >

이걸로 뭔가를 만들어볼 수는 없을까요?

여러 페이지가 있는 기업형 랜딩페이지, 나를 알릴 수 있는 포트폴리오 홈페이지, 간단한 퀴즈를 내고 상식을 알려주는 정보성 페이지나 블로그는요?

무엇가를 만들 수 있는 세상에서 조금만 더 툴을 알면 "진짜 제품"을 만들 수 있어요!

이 강의를 통해서 여러분들이 직접 만든 웹 페이지를 무료 호스팅 서비스에 업로드하고, 실제 유저들을 모아보세요.

3. 웹 페이지를 만들었다! 그 다음은...?

제목: 「혼자 SaaS를 창업하는 사람들에게 좋은 툴?」 출처: 해커뉴스

웹 페이지는 누구나 만들 수 있다고요?

배포는요? 유지보수는요? 데이터 수집은 어떻게 할까요? 수익화 할 수 있는 방법은 무엇일까요?

첫 번째 허들을 넘으면 다음 허들을 넘어야해요.

데이터 수집, 백엔드 개발, DB 관리....

까지 가기 전에!

먼저 제대로 된 웹을 업로드하고, 배포하면서 어떻게 웹 페이지가 동작하는 지를 배워야 해요.

이 강의에서는 웹 페이지를 만드는 과정과 그 이후에 어떤 것들이 필요한지도 간단하게 배울 거에요.

👋 강의를 만든 이유 & 강사 소개

안녕하세요, 유튜브에서 @weekendcode로 활동하고 있는 주말코딩이라고 합니다.

Java 개발자로 일하다가 현재는 프로그래밍 교육 관련 콘텐츠를 만들고 있습니다.

컴퓨터를 전공하지 않은 분들, 컴퓨터에 관심있는 노년층 분들, 다른 업을 하다가 은퇴한 분들을 과외로 가르쳐 본 경험이 있습니다. 기존에 대학에서 가르치는 방식에 대해 회의가 많았습니다.

이번에는 웹 개발입니다!

처음으로 나만의 웹 페이지를 개발해보고 싶은 분들을 위해서 A부터 Z까지 준비해보고 싶었어요.

한 땀 한 땀 만든 고퀄리티 발표 자료 슬라이드와 아무도 안 알려주는 웹과 인터넷의 역사까지!

"처음부터 어떻게 탄생했는지", "왜 이렇게 사용하게 됐는지"를 알면 훨씬 더 이해가 쉬워지니까요 😃

⭐ 다른 강의는 어려웠어요. 그래서 이 강의를 만들었어요.

제가 처음 웹 개발을 배운 날을 아직도 기억합니다.

수 많은 강의를 듣고, 학교에서 수업도 듣고, 학원도 다녔어요.

그런데 도대체 왜 이렇게 쓰는 건지, 이런 것들은 어떻게 생겨났는지 설명해주는 사람이 아무도 없었어요.

하지만 현장에서 직접 개발을 하니 생각보다 쉬운 것들이 많았고,

그런 것들을 하나하나 모아서 하나의 강의로 엮어서 제공해드리려고 합니다.

⭐ 학습 이해도를 높이기 위해서 최선을 다합니다.

이 강의는 제 첫 강의가 아닙니다.

다른 영상과 강좌에서의 리뷰를 보여드립니다.

허투루 만든 강좌가 아닌, 하나하나 이해가 될 때까지 설명해드립니다.

모르면 바로바로 질문 올려주세요!

⭐ 시대가 빠르게 변하고 있지만.. 알아야 할 것은 배워야 해요.

이제는 모두가 AI를 말하고 있어요. 생성형AI, LLM, 프로그래밍...

수많은 키워드 속에서 "한방에! 자동화!"를 외치기 전에 기초를 알아야 해요.

그래야 좀 더 큰 규모의 웹 페이지, 잘 정돈된 코드, 유지보수하기 쉬운 소프트웨어를 작성할 수 있어요.

우리는 제품도 만들면서 Javascript 문법과 웹 브라우저의 동작을 배워볼 거에요.

✅ 보너스 학습자료! <WEB API>로 구성한 홈페이지 코드 전부 제공!

웹 브라우저(클라이언트) Web API, 서버 측 기능 자료 모두 제공해드립니다!

프론트엔드, 백엔드 개발자라면 무조건 알아야 할 API 개념와 실습 모두 알려드려요.

예제 1번: 웹 브라우저에서 접속한 클라이언트 확인하는 프론트엔드 코드

• 클라이언트 정보 알아보기

• 운영체제 정보, 통신 여부, 웹 브라우저 기능 지원 여부 확인

예제 2번: 클라이언트 URL 파싱 ( 현재 페이지, 포트, 파라미터, 패스 등)

웹 브라우저에서 접근하는 URL마다 다른 기능을 넣고 싶다면?

Javascript로 API를 통해 어떻게 값을 가져오는지 직접 소스코드로 확인해보세요.

예제 3번: 작은 보관 영역, 쿠키 가지고 놀기

웹 브라우저에서 쿠키는 무엇인가요? 쿠키를 어떻게 조작할 수 있을까요?

직접 생성하고, 삭제하고, 확인해보세요!

작성된 소스코드 파일, 정리된 PDF 파일 모두 한꺼번에 드립니다!

🤔 수강 전 참고 사항