코딩 교육 국내 1위 유튜버 ‘조코딩’이 알려 주는 웹 개발의 모든 것!
코딩의 기초 지식부터 동물 소리 API, 게시판 구현까지
진입 장벽은 깨부수고, 토대는 탄탄히 하는 초보자 맞춤 코딩 입문서!

“AI 시대에는 질문하는 게 중요하다던데, IT 지식이 전혀 없어서 뭐부터 시작해야 할지 막막해요.”, “코딩을 배우고 싶은데 어떻게 해야 할지 모르겠어요!” 웹 개발에 흥미가 생긴 사람부터 코딩을 배우고 싶은 비전공자, 일반 사람들을 위해 대한민국 코딩 교육 분야 1등 유튜버 조코딩이 나섰다! 우리가 평소에 보던 웹 페이지가 어떻게 만들어지는지 알게 된다면 어렵게만 느껴지던 코딩도 재미있어지고 웹 개발자가 어떤 일을 하는지도 배울 수 있다. 이 책은 웹 개발의 전 과정을 이론 중심으로 외우기보다 코드를 직접 작성하며 실습을 해본다. 이 책을 끝까지 완독한다면 이제 어디가서 “나 웹 개발 해봤다!”라고 말할 수 있을 것이다.

이 책에서는 웹 개발을 5단계로 나누어 설명한다. 이때 HTML, CSS, 자바스크립트, 노드JS, 에스큐라이트를 활용하면서 게시판 웹 페이지를 만들고 인터넷에 배포까지 해본다. 이런 내용이 어렵게 느낄 독자를 위한 ‘동영상 강의’도 준비되어 있다. 개념을 이해하고 실습하는 데 큰 도움이 될 것이다! 아울러 효율적인 학습을 위한 복습·퀴즈 코너가 중간중간 수록되어 있으니, 문제를 스스로 해결해 보며 기초 개념을 탄탄히 다져 보자. 웹 개발, 이 책 한 권으로 시작해도 어렵지 않다!

__코딩 개념 사전

01장 21세기의 마법, 코딩

01-1 코딩, 너는 누구니?
01-2 코딩이 쉬워지는 3가지 방법
__컴퓨터의 발전이 코딩의 발전으로 이어졌어요!
__하나. 밀키트처럼 소스 코드를 제공하는 프레임워크 활용하기
__둘. 스택 오버플로에서 검색하면 다 해결된다!
__셋. 인공지능으로 더 쉬워진 코딩!
__코딩 없이도 프로그램 완성 - 노코드 툴
01-3 웹 개발로 코딩을 시작하세요!
__웹 개발로 코딩에 입문하면 좋은 이유
__개발 분야 2가지 - 프런트엔드와 백엔드
01-4 웹 개발, 이것만 설치하면 준비 끝!
__가장 인기 있는 웹 브라우저, 구글 크롬!
__코딩에 최적화된 도구, 코드 편집기
__[Do it! 실습] VS 코드 설치하기
〈코딩 정복 퀴즈 01〉

02장 웹을 구성하는 뼈대, HTML

02-1 웹 문서를 구성하는 HTML
__워드로 살펴보는 문서 구조
__HTML이 정확히 뭐예요?
__[Do it! 실습] HTML 코드 간단히 작성해 보기
02-2 HTML 태그 파헤치기
__HTML의 구조를 형성하는 태그
__HTML 문서 깔끔하게 관리하기
__자동 완성 기능 활용하기
__[Do it! 실습] VS 코드로 초간단 웹 사이트 만들기
__[Do it! 실습] 개발자 도구로 웹 페이지 수정해 보기
〈코딩 정복 퀴즈 02〉

03장 웹을 나만의 스타일로! CSS

03-1 웹 디자인의 중심, CSS
__변신의 귀재, 웹을 디자인하는 CSS
__HTML과 CSS의 만남
03-2 HTML에 CSS를 적용하는 3가지 방법
__[Do it! 실습] CSS 파일 연결하기
__[Do it! 실습] 〈style〉 태그 활용하기
__[Do it! 실습] 인라인 style 활용하기
03-3 박스 모델로 이해하는 CSS 구조
__웹 페이지는 박스로 구성되어 있다!
__[Do it! 실습] 개발자 도구에서 CSS 적용해 보기
__블록 요소와 인라인 요소
__포함 관계는 중첩으로부터!
〈코딩 정복 퀴즈 03〉

04장 웹에 생명을 불어넣는 자바스크립트

04-1 자바스크립트, 네가 궁금해!
__자바스크립트, 잠자던 웹을 깨워줘!
__웹에서 서버, 모바일 앱까지! 자바스크립트를 확장해 주는 다양한 도구
04-2 프로그래밍을 위한 자바스크립트 문법 4가지
__프로그래밍의 기본 구조
__데이터를 담는 상자, 변수
__변하지 않는 값, 상수
__데이터를 가공해 주는 자판기, 함수
__참과 거짓의 대결, 조건문
__반복 작업은 이제 그만, 반복문
04-3 자바스크립트가 웹 브라우저를 다루는 방식
__DOM - 웹 사이트에 접속하면 보이는 모든 것
__BOM - DOM을 제외한 모든 것
__[Do it! 실습] 자바스크립트로 문서 마음대로 조작하기
__자바스크립트가 ‘이벤트’에 대처하는 법
〈코딩 정복 퀴즈 04〉

05장 앱끼리 소통하는 규칙, API

05-1 API, 데이터 교환 규칙
__데이터를 주고받는 규칙, API
__웹 브라우저와 웹 서버 사이의 API - HTTP
__목적지를 알려 줘 - URL
__데이터를 처리하는 4가지 방식, CRUD
__데이터를 담는 형식, 제이슨
05-2 API를 일상에서 활용하는 방법
__오픈 API와 프라이빗 API
__[Do it! 실습] 공공 데이터 활용해 보기
〈코딩 정복 퀴즈 05〉

06장 노드로 쉽게 구현하는 API 서버

06-1 자바스크립트의 밀키트, 노드!
__노드, 자바스크립트의 한계를 깨다!
__[Do it! 실습] 노드 설치하기
__컴퓨터와 대화하는 창 - 터미널
__[Do it! 실습] 노드 실행해 보기
__노드의 마켓플레이스 - NPM
__[Do it! 실습] NPM 활용해서 노드 프로젝트 세팅해 보기 - 피글렛
06-2 웹 서버 구축을 위한 준비 운동
__웹 서버로 요청을 보내요 - IP 주소, 포트, 라우팅
__실행 순서를 지정할 수 있어요 - 콜백 함수
__[Do it! 실습] 간단한 API 서버 만들기 - 익스프레스
06-3 동물 소리 API 구현하기
__[Do it! 실습] 제이슨 형식으로 응답하는 API 만들기
__[Do it! 실습] 변수를 활용하여 라우팅하기
__[Do it! 실습] 데이터를 불러올 수 있는 최적의 환경 만들기 - CORS
06-4 깃허브, 클라우드타입으로 API 배포하기
__코드 저장소, 깃허브
__[Do it! 실습] 클라우드타입으로 API 배포하기
〈코딩 정복 퀴즈 06〉

07장 게시판 10분 완성! 이제 나도 개발자

07-1 움직이는 HTML의 시작! 템플릿 엔진
__템플릿 엔진의 역할
__HTML + 자바스크립트 = EJS
__[Do it! 실습] EJS로 간단한 웹 페이지 만들기
__[Do it! 실습] 표시할 데이터에 조건 설정하기
07-2 서버는 데이터를 어떻게 처리할까?
__데이터를 서버에 보내는 방법 2가지 - GET, POST
__[Do it! 실습] GET 메서드로 조회 요청 처리하기
__[Do it! 실습] POST 메서드로 생성 요청 처리하기
__데이터를 차곡차곡, 데이터베이스
__자바스크립트와 데이터베이스의 통역사, ORM
07-3 데이터베이스를 활용한 게시판 만들기
__[Do it! 실습] 게시판 페이지 만들기
__[Do it! 실습] 노드와 에스큐라이트 연동하기
__[Do it! 실습] 게시글 생성 · 조회 기능 추가하기
__[Do it! 실습] 게시글 수정 · 삭제 기능 추가하기
__[Do it! 실습] 클라우드타입을 활용한 게시판 배포하기
〈코딩 정복 퀴즈 07〉

[부록] 실습할 때 오류가 생겼어요!

〈복습! 혼자 해보세요!〉 모범 답안 & 해설
〈코딩 정복 퀴즈〉 정답 & 해설

◆ 이 책의 장점

ㆍ언제든 문제를 해결할 수 있는 선생님이 있습니다. 동영상 강의를 함께 시청하며 코딩에 쉽게 입문하세요!
ㆍ이론보다 실습이 중심이 되어 재밌게 따라 하며 개념을 익힐 수 있습니다.
ㆍ실습과 퀴즈로 배운 내용을 복습할 수 있어 교재로도 안성맞춤입니다. 정답과 해설을 참고해 틀린 부분을 스스로 해결할 수도 있습니다.
ㆍ실습에 필요한 코드를 모두 제공해 드립니다. 복사 & 붙여넣기만 하면 코드가 완성되므로 웹 개발의 기쁨을 맛볼 수 있습니다. 오류가 나지 않도록 코드를 정확히 입력하는 것도 중요하지만, 이 책은 웹 개발의 전체 과정을 빠르게 배우는 게 주 목적이니까요!

◆ 이런 분께 추천해요!

ㆍ코딩을 배우고 싶은 비전공자 일반인
ㆍ개발자로 취업을 꿈꾸는 중·고등학생
ㆍ웹 개발자로 전직을 원하는 웹 퍼블리셔
ㆍ웹 개발자와 소통하고 싶은 웹 디자이너
ㆍ아이와 함께 코딩을 쉽게 배우고 싶은 학부모
ㆍ코딩에 관한 기본 지식을 알고 싶다면 누구나!

------------------------------------------------------

구독자 60만! 누적 조회수 1억 4천만을 기록하는
웹 교육 1등 유튜버 조코딩이 개발 입문자를 위해 나섰습니다!

코딩의 ‘ㅋ’ 자도 모르는 상태라고요? 수학에서 손을 놓은 문과생이라고요? 걱정하지 마세요! 모니터만 물끄러미 바라보고 있을 분들을 구원하기 위해 조코딩이 이 책을 직접 썼으니까요. 조코딩 유튜브 채널 또는 이지스퍼블리싱 유튜브 채널의 《Do it! 조코딩의 첫 웹 개발》 재생 목록에서 이 책 관련 동영상 강의를 시청하면서 공부하면 좀 더 확실히 배울 수 있습니다. 공부하다 막히는 부분은 동영상을 참고하세요.

ㆍ조코딩의 유튜브 채널: youtube.com/@jocoding
ㆍ이지스퍼블리싱 유튜브 채널 《Do it! 조코딩의 첫 웹 개발》 재생 목록: bit.ly/plan_jocoding

------------------------------------------------------

웹의 기초 개념부터 게시판 만들기도 뚝딱!
온 세상에 공개하는 나의 첫 웹 프로그래밍!

코딩, 프로그래밍, HTML 등은 들어 본 적 있지만 개발을 처음 도전한다면 용어 정의를 명확하게 내리기 어려울 것입니다. 사실 포털 사이트에서 아무리 검색해도 개념을 정확하게 이해하기란 쉽지 않은데요. 이론만 파고들며 공부하는 건 그만! 이 책에서는 코딩의 기초 개념만 이해하고 나서 바로 코드를 입력하며 게시판을 만들어 봅니다. 그리고 게시판 페이지를 직접 만들어 누구나 접속할 수 있도록 인터넷에 배포해 볼 거예요. 코딩의 기초조차 몰랐던 분들도 이 책과 함께라면 웹 프로그래밍의 핵심을 이해하고 코딩의 주요 개념까지 완전 정복할 수 있습니다.

------------------------------------------------------

이 책에서는 웹 개발을 5단계로 배워요!
눈에 보이는 화면부터 일 처리를 해주는 서버 구현도 OK!

웹 페이지를 직접 만들며 HTML과 CSS를 다뤄 본 다음, 우리에게 익숙한 웹 사이트를 맘껏 조작해 보며 자바스크립트를 공부할 거예요. 웹 브라우저 화면이 어떻게 구성되고 움직이는지 쉽게 이해할 수 있습니다. 설령 어렵게 생각할 수 있는 노드도 비주얼 스튜디오 코드에서 간단한 명령어를 사용해 실행하고 동물 소리 API까지 만들어 보며 웹 개발에 한결 친근하게 다가갈 수 있습니다. 그리고 책에서 배운 내용을 모두 종합해 게시판 페이지까지 만들어 보고, 모두가 접속할 수 있도록 인터넷에 배포까지 해봅니다.

------------------------------------------------------

“내가 확실하게 이해한 게 맞을까?” 걱정된다면!
이해도 점검을 위한 실습부터 개념을 완성하는 퀴즈까지!

책을 읽었다고 해서 온전히 이해했다고 자신하기는 어려울 수 있습니다. 그럴 땐 〈복습! 혼자 해보세요!〉와 〈코딩 정복 퀴즈〉를 통해 코딩을 얼마나 이해했는지 스스로 점검해 보세요. 문제를 풀기 위해 시도하고 고민해 봤다는 것만으로도 실력을 키우는 데 충분하니, 그냥 넘어가지 말고 꼭 도전해 보길 바랍니다. 틀린 퀴즈가 있다면 해당 부분을 다시 복습하고 넘어가는 것도 잊지 마세요!

------------------------------------------------------

실습하다가 오류가 생겼다면 주목!
여러분의 문제를 해결해 줄 [부록]을 확인하세요!

본격적으로 실습하는 06장과 07장에서는 다소 복잡한 코드를 다룹니다. 따라서 한 단계 한 단계 따라 한다고 해도 오타가 나거나 몇 가지 사항을 놓치는 실수를 할 수 있어요. 하지만 어떤 오류도 [부록]에 제시한 5가지만 확인한다면 쉽게 해결할 수 있습니다.

------------------------------------------------------

코드가 적힌 예제 파일을 내려받으세요!
복사 & 붙여넣기로 오류 없이 순식간에 코드 완성!

코드를 직접 입력하는 것이 아직 서툴거나 시간이 부족하다면 이지스퍼블리싱 홈페이지의 [자료실]에서 예제 파일을 내려받아 활용해 보세요! 각 실습에 해당하는 파일을 열고 코드를 복사한 다음, 비주얼 스튜디오 코드에 붙여넣기만 하면 결과물을 쉽게 완성할 수 있습니다.

ㆍ이지스퍼블리싱 홈페이지(http://www.easyspub.co.kr) → [자료실] → ‘Do it! 조코딩의 첫 웹 개발’ 검색

------------------------------------------------------

"책을 통해 성장하는 지적인 독자들을 만나 보세요!"
배우고, 나누고, 함께 성장하는 [Do it! 스터디룸]

혼자 공부하기 부담스럽다면 스터디 카페인 ‘Do it! 스터디룸’에 방문해 보세요. [Do it! 공부단]에 참여해 나의 공부 계획을 올리고 실천하면 책 선물도 받고 꾸준히 공부하는 습관도 기를 수 있습니다.

ㆍDo it! 스터디룸 카페: cafe.naver.com/doitstudyroom → [Do it! 공부단] 메뉴