Do it! 조코딩의 첫 웹 개발

누구나 따라 할 수 있는 웹 페이지 만들기

조동근(조코딩) 저자, 조경민 저자 지음

이지스퍼블리싱 2024년 05월 31일 출간 종이책 : 2024년 05월 31일 출간

작품소개

책소개

“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〉

[부록] 실습할 때 오류가 생겼어요!
〈복습! 혼자 해보세요!〉 모범 답안 & 해설
〈코딩 정복 퀴즈〉 정답 & 해설

작가정보

저자(글) 조동근(조코딩) 저자, 조경민 저자

국내 최대 규모 코딩 유튜브 채널 ‘조코딩JoCoding’의 크리에이터. 고려대학교 환경생태공학부를 졸업하고 IT 개발자, 교육자를 거쳐 현재 코딩 교육, 콘텐츠 개발, 생성형 AI 분야 사업가로 종횡무진하고 있다. 코딩 소재 웹 드라마 <좋코딩>을 제작하고, AI 서비스인 '동물상 테스트'와 생성형 AI 서비스 '조카소'를 개발했다.유튜브 채널을 통해 누구나 쉽게 배울 수 있는 실용적인 코딩 강의를 제공하고 있으며, 강의를 통해 쌓은 노하우로 웹 개발의 기본을 담은 이 책을 집필했다. 대표 저서로 《Do it! 조코딩의 프로그래밍 입문》이 있다./중국어 교사를 꿈꾸던 대학생에서 클라우드 기술에 흠뻑 빠진 개발자가 되었다. 대학교 때 처음 접한 코딩이 인생을 180도 바꿔 놓았으며, 어렵게 배웠던 코딩을 어떻게 하면 사람들에게 쉽게 전달할지 고민하고 연구를 거듭하는 열정 넘치는 개발자이다.대기업 IT 계열사에서 시스템 개발 및 운영 업무로 직장 생활을 시작했고, 이후 IT 교육 회사 ‘멋쟁이사자처럼’에서 강사로 일했다. 현재는 PaaS 클라우드 스타트업인 ‘클라우드타입’에서 쿠버네티스를 기반으로 한 인프라 및 개발 업무를 수행하고 있다.전) 신세계아이앤씨, 그룹 시스템 운영 및 개발전) 멋쟁이사자처럼, 강의 콘텐츠 기획 및 제작현) 클라우드타입, 클라우드 서비스 개발