Do it! 조코딩의 첫 웹 개발

__코딩 개념 사전

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>

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