크레마클럽

첫째마당 AI 코딩 시작하기 1장 생성형 AI를 이해하는 첫걸음 _1-1 일상을 바꾼 생성형 AI의 등장 __AI는 어떻게 발전해 왔을까? __생성형 AI의 등장 __AI 코딩에 활용하는 생성형 AI 서비스 _1-2 생성형 AI는 답을 어떻게 만들어 낼까? __AI가 똑똑하게 대답하는 이유 ? 프롬프트와 LLM __맥락을 이해하는 기술 ? 트랜스포머 __AI가 기억하는 문맥의 용량 ? 토큰과 컨텍스트 윈도우 __AI 모델, 엔진, 에이전트 구분하기 __LLM을 활용하는 방법 _1-3 더 나은 답을 만드는 프롬프트 엔지니어링 __프롬프트 엔지니어링은 왜 필요할까? __예제 기반 프롬프트 기법 ? n-샷 프롬프트 __원하는 답을 이끌어 내는 프롬프트 설계 기법 2장 AI 코딩의 이해 _2-1 AI 코딩이란 무엇일까? __인공지능과 함께 개발하기 ? AI 코딩 __코딩의 진화 ? 기계 중심에서 사람 중심으로 __AI 코딩으로 무엇을 만들 수 있을까? __AI 코딩 서비스의 주요 기능 __바이브 코딩이란? _2-2 미래의 AI 코딩과 개발자 __AI 코딩이 가져올 주요 변화 __AI 코딩 시대의 개발자 역량 __AI 시대에 개발자로 성장하기 __AI 코딩 시대의 윤리와 책임 _2-3 어떤 AI 코딩 서비스를 선택해야 할까? __대화형 AI 서비스 __웹 기반 앱 빌더 __플러그인형 서비스 __통합 개발 환경(IDE)형 서비스 __터미널 기반 AI 에이전트 _2-4 AI 코딩에서 유용한 프롬프트 __새로운 개념을 공부할 때 __코드를 작성할 때 __코드를 수정할 때 __문제를 해결할 때 둘째마당 커서로 웹 사이트 만들기 3장 커서 살펴보기 _3-1 커서는 어떤 서비스일까? __똑똑한 개발 파트너 ? 커서 __커서의 주요 특징 _3-2 커서 시작하기 __커서 가입하기 __커서 설치하기 __커서의 화면 구성 __AI 패널의 화면 구성 _3-3 커서의 개발 환경 준비하기 __프로젝트 폴더 만들기 __커서에 라이브 서버 확장 설치하기 _3-4 커서의 AI 코딩 기능 사용하기 __인라인 프롬프트 사용하기 __AI 패널로 할 일 목록 앱 만들기 4장 웹 사이트 제작을 위한 기본 개념 다지기 _4-1 웹 페이지의 구조를 만드는 HTML __HTML의 기본 형식 __태그의 속성 _4-2 웹 페이지를 보기 좋게 꾸미는 CSS __CSS의 기본 형식 __자주 사용하는 선택자 __CSS 속성 __CSS 코드를 작성하는 위치 _4-3 웹 페이지에 동작을 부여하는 자바스크립트 __자바스크립트의 기본 형식 __자주 사용하는 용어 살펴보기 __외부 스크립트 파일 _4-4 코드를 추적하고 관리하는 깃과 깃허브 __깃과 깃허브는 무엇일까? __깃의 주요 개념 __깃허브 계정 만들기 __깃 설치하기 5장 나만의 포트폴리오 웹 사이트 만들기 _5-1 웹 사이트의 기본 구조 만들기 __AI에게 웹 사이트 제작을 요청하려면 __프로젝트 폴더 추가하고 깃 저장소 만들기 __기본 코드 작성하기 __첫 번째 커밋하기 _5-2 세부 사항 수정하기 __웹 사이트의 구조 살펴보기 __프롬프트 취소하기 __이미지 변경하기 _5-3 웹 사이트 공개하기 __내가 만든 웹 사이트는 어떻게 공개할 수 있을까? __깃허브 페이지 __깃허브에 저장소 만들기 __커서와 깃허브 연동하기 __깃허브 페이지로 배포하기 셋째마당 커서로 풀스택 앱 만들기 6장 웹 개발 기초 다지기 _6-1 웹의 구조와 동작 이해하기 __웹 사이트의 종류 __웹을 구성하는 요소 __웹의 동작 과정 _6-2 웹에서는 정보를 어떻게 주고받을까? __클라이언트와 서버 __요청과 응답 __HTTP/HTTPS 프로토콜 __HTTP 요청 메서드와 엔드포인트 __IP 주소, DNS, URL _6-3 웹 개발의 4단계 살펴보기 __1단계: 앱 기획 __2단계: 프런트엔드 개발 __3단계: 백엔드 개발 __4단계: 앱 배포 _6-4 웹 앱을 개발할 때 사용할 기술 __프런트엔드에 사용하는 기술 __백엔드에 사용하는 기술 7장 커피 주문 앱 개발하기 _7-1 앱 기획하기 ? PRD __앱 구상하기 __사용할 기술 스택 정하기 __PRD 작성하기 ? 앱 개요 __깃 저장소 만들기 _7-2 앱 화면 만들기 ? 프런트엔드 __구현할 기능 정의하기 __와이어프레임 그려 보기 __프런트엔드 개발을 위한 PRD 작성하기 __프런트엔드 개발 환경 만들기 __커서에서 UI를 만들 때 주의할 점 __‘주문하기’ 화면 개발하기 __.gitignore 파일 __프로젝트 폴더의 변경 사항 커밋하기 __‘관리자’ 화면 만들기 __프런트엔드 테스트 및 개선 _7-3 주문 처리하기 ? 데이터베이스와 API __데이터 모델 설계하기 __프롬프트로 API를 만들 때 주의할 점 __주문 처리를 위한 PRD 작성 및 개발 환경 만들기 __데이터베이스 설치하기 __데이터베이스 연결하기 __프런트엔드와 백엔드 연동하기 __메뉴 이미지 지정하기 _7-4 앱 배포하기 __배포 플랫폼 선택하기 __Render 시작하기 __깃허브에 업로드하기 __PostgreSQL 데이터베이스 만들고 연결하기 __백엔드 서비스 배포하기 __프런트엔드 배포 준비하기 __프런트엔드 배포하기 부록 A MCP 서버 활용하기 _A-1 AI와 외부 서비스를 연결하는 MCP _A-2 커서에서 노션 MCP 활용하기 찾아보기

펼쳐보기접어보기

상세 이미지

저자 소개 (1명)

저 : 고경희

관심작가 알림신청

홍익대학교 컴퓨터공학과를 졸업하고 동 대학원에서 인공지능을 공부했다. 인터넷이 막 대중화되던 1990년대 후반부터 웹 기술을 쉽게 배우고 가르치는 일에 관심을 갖고, 지금까지 70여 권이 넘는 책을 집필했다. HTML, CSS, 자바스크립트, 깃·깃허브 등 웹의 기본기를 누구나 이해할 수 있도록 풀어내며 많은 독자들이 웹 개발의 첫걸음을 떼는 데 도움을 주었고, 특히 《Do it! HTML+CSS+자바스크립트 웹 표준의 정석》은 수많은 입문자들이 웹 개발을 시작할 때 가장 먼저 찾는 책으로 자리 잡았다. ‘기본기를 놓치지 않는 학습이 가장 중요하다’는 신념으로 독자들이 단단한 기... 홍익대학교 컴퓨터공학과를 졸업하고 동 대학원에서 인공지능을 공부했다. 인터넷이 막 대중화되던 1990년대 후반부터 웹 기술을 쉽게 배우고 가르치는 일에 관심을 갖고, 지금까지 70여 권이 넘는 책을 집필했다. HTML, CSS, 자바스크립트, 깃·깃허브 등 웹의 기본기를 누구나 이해할 수 있도록 풀어내며 많은 독자들이 웹 개발의 첫걸음을 떼는 데 도움을 주었고, 특히 《Do it! HTML+CSS+자바스크립트 웹 표준의 정석》은 수많은 입문자들이 웹 개발을 시작할 때 가장 먼저 찾는 책으로 자리 잡았다. ‘기본기를 놓치지 않는 학습이 가장 중요하다’는 신념으로 독자들이 단단한 기초 위에 실력을 쌓을 수 있도록 돕고 있다. 생성형 AI가 코딩의 판도를 바꾸고 있는 지금도 개발자의 기본 소양을 기르는 일에 변함없이 최선을 다하고 있다.

대표 저서
● 《Do it! 5일 만에 끝내는 깃 & 깃허브 입문》(이지스퍼블리싱, 2024)
● 《Do it! HTML + CSS + 자바스크립트 웹 표준의 정석》(이지스퍼블리싱, 2024)
● 《Do it! Node. js 프로그래밍 입문》(이지스퍼블리싱, 2023)
● 《Do it! 모던 자바스크립트 프로그래밍의 정석》(이지스퍼블리싱, 2022)
● 《Do it! 자바스크립트 입문》(이지스퍼블리싱, 2021)
● 《Do it! HTML5+CSS3 웹 표준의 정석》(이지스퍼블리싱, 2019)

펼쳐보기접어보기

작가와 인터뷰(1개)

[읽다] 한 권으로 끝내는 웹 개발 교과서

출판사 리뷰

웹 분야 1위 저자의 독자 맞춤형 설명으로 웹 개발의 기초를 이해하고, 든든한 개발 AI 파트너인 ‘커서’와 함께 웹 사이트를 만든다! 이제 누구나 AI를 활용해 개발을 손쉽게 시작할 수 있는 시대가 되었지만, AI가 작성해 주는 코드만으로는 완전한 앱을 만들기 어렵습니다. 앱을 제대로 완성하려면 기본적인 개발 지식과 체계적인 학습 과정이 반드시 필요합니다. 웹 개발의 뼈대를 이루는 HTML, CSS, 자바스크립트는 물론, 백엔드와 데이터베이스, 배포까지 실제 서비스할 때 알아야 할 필수 개념을 꼼꼼하게 설명합니다. 이렇게 기초 개념을 단단히 다진 뒤에는 든든한 AI 코딩 파트너인 ‘커서’와 함께 웹 사이트를 직접 만들어 보면서, 웹 개발의 전체 흐름을 자연스럽게 경험할 수 있습니다. 따라 하기 쉬운 단계별 실습과 프롬프트 예제로 AI와 함께 코딩하는 감각을 기른다! 말만 하면 코드를 작성해 준다는 바이브 코딩, 직접 해보니 내가 원하는 기능을 AI가 딱 알아차리지 못해 답답했던 경험이 있나요? 이 책은 그러한 시행착오를 줄이기 위해 누구나 따라 하기 쉬운 ‘Do it! 실습’과 구체적인 프롬프트 예제를 담았습니다. 실습 단계에 따라 프롬프트를 작성하다 보면 어떤 상황에서 어떤 프롬프트를 입력할지, 원하는 기능을 AI에게 어떻게 설명해야 할지 자연스럽게 익힐 수 있습니다. 또한 부록에서는 MCP를 활용해 노션과 연동하는 방법까지 다루어, 단순한 웹 사이트 제작에 그치지 않고 AI 활용 능력까지 높일 수 있습니다. 생성형 AI의 작동 원리를 이해하고 ‘커서’를 제대로 활용하는 법을 배운다! 일상 속에서 생성형 AI를 활용하는 사람은 많지만 작동 원리까지 이해하며 쓰는 경우는 드뭅니다. 하지만 AI가 응답을 만들어 내는 원리를 알면 훨씬 더 효과적으로 활용할 수 있습니다. 이 책은 생성형 AI가 응답을 만들어 내는 과정을 쉽고 간결하게 설명하고, 이를 바탕으로 원하는 결과를 빠르고 정확하게 얻을 수 있는 프롬프트 작성법을 체계적으로 알려 줍니다. 이어서 AI 코딩 서비스인 ‘커서’를 설치하고 설정하는 방법부터 기능별 활용법까지 단계적으로 안내합니다. 생성형 AI의 작동 원리를 이해하면 ‘커서’의 활용도가 더 높아집니다. 이런 분께 추천합니다! <ul><li>개발 공부를 어떻게 시작해야 할지 고민인 입문자</li><li>AI 코딩을 체험하고, 실무 활용 감각까지 기르고 싶은 분</li><li>생성형 AI를 활용해 나만의 웹 사이트를 직접 만들어 보고 싶은 예비 개발자</li><li>웹 개발의 전체 흐름을 빠르게 파악하고 싶은 분</li><li>기초부터 탄탄하게 쌓으며 AI를 활용해 풀스택 개발에 도전하고 싶은 개발자</li></ul> 입문자라면 5일, 개발자라면 이틀 만에 완성! 2가지 학습 계획표와 예제 파일을 제공합니다 이 책은 AI와 함께 개발의 첫걸음을 내딛고 커서 활용법까지 자연스럽게 익힐 수 있도록 2가지 학습 계획표를 제공합니다. 웹 개발 경험이 없는 입문자라면 ‘5일 학습 계획표’를, 커서를 빠르게 활용하고 싶은 개발자라면 ‘주말 학습 계획표’를 활용해 보세요. 또한 이 책의 실습에 필요한 예제 파일을 이지스퍼블리싱 홈페이지와 저자 깃허브에서 제공합니다. 이 자료를 활용하면 커피 주문 앱을 실습 결과에 가까운 모습으로 완성할 수 있습니다. <ul><li>이지스퍼블리싱 홈페이지 | <a href="http://www.easyspub.co.kr">www.easyspub.co.kr</a> → [자료실] → 도서명으로 검색</li><li>저자 깃허브 | <a href="http://github.com/funnycom/doit-cursor">github.com/funnycom/doit-cursor</a></li></ul> ‘Do it! 스터디룸’에서 공부단을 신청해 보세요! 혼자 계획을 세우고 공부하다 보면 금방 지치기 마련입니다. ‘Do it! 스터디룸’의 공부단에 접속해서 이 책 완독에 도전해 보세요. 함께 공부하는 사람들도 만나고, 공부하는 내용을 올려 공유하고 인증하면 책 선물도 드립니다. 또한 어려운 내용이 있다면 ‘Do it! 스터디룸’ 게시판에 질문을 남겨 보세요. 전문가와 저자가 명쾌하게 해결해 드립니다. Do it! 스터디룸: <a href="http://cafe.naver.com/doitstudyroom">cafe.naver.com/doitstudyroom</a>

펼쳐보기접어보기